剖析列表页面条目设计【翻译】

文：KIM FLAHERTY   Yuxin 翻译

原文标题：The Anatomy o­f a List Entry，剖析列表页面条目设计。现在列表页面在扁平化的潮流下几乎无处不在；这篇文章，分析了多个案例的信息架构和用户眼动轨迹，详细叙述了列表页面的设计原则和用户行为习惯；为了学习信息架构和用户体验设计，就有细细研读并翻译的想法。新人第一次翻译，多多指点。

原文链接：https://www.nngroup.com/articles/list-entries/

--------------------------------------------------------------------------------------------------------------------------------

关键词：电子商务 眼动追踪 信息架构 视觉设计 网页可用性

摘要：为了用户更好的浏览和对比产品条目，列表页需要被精心设计布局和视觉以保持内容优先级。

不久之前，我在线预定周末旅行要住的酒店。经历了在好几个不同的网站上定位、缩小我的选择范围。花了几天的时间，我才终于决定要住的地方,感觉的这过程真是累。

在网上预订酒店,我们大部分所做的都一样,查看、评估和缩小选项。大多数时候，用户会查看特定类别或有一组标准来筛选,然后列表页会显示若干候选项或者说是列表条目。列表页面上需要许多选项条目，方便用户进行高效的查看和决策。

备注:列表页有时被称作“分类页”(包含产品的类别)、“目录页“(列出位置或人时)、“图库页“(包含图形或图像)。搜索引擎的结果页面（简称SERP）是另一种形态的列表页。本文中,我们把这所有概念的页面统称为列表页。

列表页：与用户需求可能匹配的各个候选项条目的显示枢纽。每个列表条目通常包含着更深层条目的描述和页面链接(详情页)。备注：深导航结构的网站会在首页和列表页之间还存在其他层级。

列表页的可用性取决于每个条目的设计。每个条目不仅要满足它自己的功能、能轻松地被理解,它还需要和页面上其它条目一起配合；列表页及其条目应符合以下几个可用性要求：

1.为列表的条目创建属性优先级的信息架构

当用户浏览一个产品的选项列表时,他们需要迅速确定哪些可以无视的，哪些产品是有兴趣的。太多的信息量会淹没用户并形成一个凌乱的视觉效果；另一方面,如果列表页没有足够的细节，留下太多没有答案的问题,迫使用户反复跳转页面(就是需要跳转到详情页去获取他们需要的信息)。换句话说，反复跳转就成为列表页的信息不足的信号。

Circalighting.com:在这个壁灯的列表页上只显示了图片和产品名称，省去了如涂饰、灯泡类型、甚至价格这样的重要的细节说明。所以用户必须去到各个产品的详情页上才能得到这些信息。虽然,购买壁时,图像可能是对消费者最重要的元素,但是价格和其他重要差异性的信息不应该在这个层级中舍去。

就像金发女孩的故事,产品详情列表的数量也需要恰如其分:太多则过载，阻碍用户在一个页面上得到足够的选择；太少会让他们反复跳转页面。满足大多数用户对列表条目的信息需求并保证其识别性，用户研究和分析的结果可以指导：哪些属性可以为用户传递最多的信息。

分析——如果你目前的列表页有排序或筛选功能,就可以找出哪些筛选项和排序标准使用最频繁；哪些用于第一轮调整,哪些用于第二轮。

用户研究——进行日记分析和可用性研究，可以明白哪些元素是起决策性的、它的具体重要性程度、以及通常是哪些产品属性用于缩小选项。

用户数据和分析将帮助你确定哪些属性应该包含在你的列表条目,哪些需要高亮,哪些可以淡化。每个属性的顺序优先级是在开始思考列表条目的布局和视觉设计之前需要确定的。这些优先级的设置是列表页面信息结构的基础。

我们之前的整整22年的可用性测试经验告诉我们,有一块信息是每个用户的需求:价格。

Travelocity.com的航班列表页包括的关键信息如：起飞时间、到达时间、旅程时间、停站数量和停留的长度,以及航班号和运营商。这些信息足以帮助用户选择一个航班并且不会觉得信息过载，而需要其他细节时也还有路径是可以调出来的。

2．每个列表条目的视觉设计和信息架构都应该反映出该属性的优先级

独立的列表条目的设计都应该是能够帮助用户快速了解每个选项并且支持产品之间的对比、比较。

好像它是一个小的网页的态度来对待每个列表条目,布局和视觉的处理能让每个描述属性都匹配其优先级。

位置和布局——根据经验,最顶层和最左边的区域的列表条目获得最多的关注。高优先级的信息应放置在这些位置(在从左到右的阅读文化地区)。基于这一理论，来创建每列表条目的信息架构，组织每个属性的优先级。

眼动仪注视一个搜索引擎的结果页面的图片，显示出用户最先浏览列表页条目的最顶层和左边的区域。

视觉优先——吸引眼球的最重要的信息通过视觉设计:

a）强调属性的秘诀：增加字体型号、重量或使用一个独特的颜色。

b）考虑用图像来支持浏览和吸引关注力。

c） 用周围的空白将重要属性孤立出来,使它脱颖而出吸引注意力。

在美国医疗保健网站的医疗提供者目录列表条目页面，强调提供者名称在大型蓝色字体。提供者的专业还强调在一个较小的字体直接放在名字下面。其他重要的信息或被孤立、或者搭配图标在前面来吸引注意力。让关键信息被扫一眼就可以轻松看到。 Booking.com上的一个列表条目，它缺乏一个明确的信息层次，并且没有为用户提供任何视觉路径。这个列表条目包含太多的独特和竞争视觉处理,需要很多注意力来浏览和理解它。 Nextwarehouse.com上的一俄国列表条目，产品名称、价格、库存和其他细节都是相同的字体和视觉样式，完全没有信息结构。虽然品牌名称和零件号是红色和蓝色表示,但是内容的对比度太低,无法有效地吸引眼球,使得用户很难解析重要属性。

3. 列表条目使用一致的样式来支持横向对比

在眼动研究中,我们发现,当用户必须在列表页上的几个选项做出选择时,他们会反复从一个条目到另一个条目来回比较类似的信息。为了帮助这个过程,列表条目相同位置和属性的视觉处理应该相同，以保证信息是可预见的和一致。

一个用户购买数码相机的眼动追踪图，显示用户的眼睛来回移动在两个不同的相机。这个视线模型表明,用户是在比较产品的属性。 Travelocity的航班列表条目是一致的。对于每一个航班的同一块信息都在同一个地方，并且使用相同的视觉处理。

虽然每个列表条目分布局和属性位置应该基本相同,当有重要信息需要区分的情况下，可能需要一些特别处理。例如,如果一个产品是“特卖中”或“售罄”,这样的是可以接受用独特的标注或指标来吸引注意力的。然而,以这种方式调用信息是需要有选择性的，独特的标示超过2 – 3种时，列表页的浏览将变得混乱和困难。

用户在Redmart.com上购买牙膏，发现有用的销售指标评论到：“一眼看过所有的牙膏，很容易分出哪些有哪些没有折扣，所以我购买了其中的一个有折扣的。” Booking.com的列表条目不同酒店不一致——酒店的细节从一个项目变化到下一个位置。这个示例还展示了使用过多的标识容易失控。在上面的3个酒店描述中,有11个具有不同的信息的标识,使页面凌乱，比较酒店变得困难

结论

确定你的用户最需要什么用信息缩小来他们的选择范围。每个列表条目都优先考虑这些信息并创建一个一致都信息架构，使它更容易被用户理解，并且高效的缩小选择范围。