不久前我在网上预订了一个周末旅行的酒店。我通过几个不同的网站查找、消化、缩小我的选择范围。最后,我花了好几天的时间才最终决定我想住在哪里,这真是彻底的累人。

在网上预订酒店,就像我们在网上做的很多事情一样,包括浏览、评估和缩小选择范围。大多数情况下,用户指定一组标准或浏览一组类别,并以列表页面,哪一个包含多个候选项列表参赛作品。列表页面是地面零,用于分析许多可用选项,它需要支持高效的扫描和决策。

注意:列表页面有时被称为“类别页面”(当它们包含属于特定产品类别的项目时),“目录页面”(当它们列出位置或人员时),或“画廊页面”(当它们包含图形或图像时)。搜索引擎结果页面(SERP)是另一种类型的列表页面。在本文中,我们将所有这些概述页面称为清单页面。

层次结构清单页面
列表页面充当显示可能符合用户需求的候选项目(列表条目)列表的集线器。每个列表条目通常包含项目的高级描述和项目页面(详细信息页面)的链接。请注意,网站深导航层次结构在主页和上市页面之间会有更多级别。

上市页面的可用性取决于单个列表条目是如何设计的。每个条目不仅需要具有功能和易于理解,而且还需要与页面上列出的其他选项很好地协作。要实现可用的列表条目和列表页面,需要满足几个需求。

1.优先排列列表条目属性以创建信息层次结构

当用户浏览一个选项列表时,他们希望快速确定哪些项感兴趣,哪些项可以忽略。太多的信息会让用户不知所措,并造成混乱的外观。另一方面,没有足够细节的列表条目会留下太多未回答的问题,迫使用户不得不这样做弹簧单高跷(即导航到每个细节页面以获取所需信息)。Pogo Sticking经常在上市页面上发出有用的有用细节。

大约照明清单页
Circalighting.com:在这个画廊页面上,壁灯的列表只显示产品名称,而忽略了一些重要的细节,比如光洁度、灯泡类型甚至价格。用户必须在每个项目的详细信息页面中导航才能获得这些信息。虽然,当购买壁灯时图像可能是最重要的购物者的元素,价格和其他重要差异化的不应在这个级别遗漏。
美国Autoparts列表条目
USAUTOPARTS.NET:汽车配件的列表页包括每个产品的许多细节。用户必须扫描长期的产品属性,以挑选与它们相关的产品。通过这种设计,浏览是乏味的并且比较困难。

喜欢在金发姑娘的故事中,列表条目中的产品细节量需要正确:太多会过载用户并阻止他们在一个视图中看到足够的选择,太少会使它们成为pogo棒。确定满足大多数受众的信息需求的属性,并呈现列表条目中的属性。使用分析和用户研究来指导您确定哪些属性为用户提供大多数信息:

  • 分析- 如果您目前有分类或过滤功能在您的列表页面上,找出使用最频繁的过滤器和排序标准。哪些用于第一轮筛选,哪些稍后用于进一步调整结果集?
  • 用户研究- 运行日记研究和可用性研究,了解哪些元素对于决策以及多大程度来说是重要的,以及哪些产品属性通常用于缩小选项。

用户数据和分析将有助于您确定要在列表条目中包含哪些属性,以强调,并将其降低到下降。在开始思考列表输入布局和视觉设计之前确定每个属性的优先级顺序。这些优先级将为列表条目中的信息层次结构设置基础。

我们告诉你,在我们22年的可用性测试中,有一条信息是每个用户都要求的:价格

Travelocity列表条目
Travelocity.com的航班列表条目包括起飞时间、到达时间、旅行时间、停留次数和停留时间,以及航班号和运营商等关键信息。这些信息可以帮助用户选择航班,而不会让他们不知所措。如果需要,还可以提供其他详细信息的路径。

2.反映Mini-IA的属性优先级和每个列表条目的视觉设计

个人列表条目的设计应帮助用户快速了解每个选项,并应支持产品对比

处理每个列表条目,就像它是一个小型网页,并确保在该描述中的每个属性的布局和可视化处理与其优先级相对于其他属性匹配。

  • 放置和布局-根据经验,顶部的最近列表入口容器的区域最受关注。优先级较高的信息应该放在这些区域(至少在从左到右阅读的文化中是这样的)。记住这一点,按优先级组织属性以创建信息层次结构(或)mini-IA)在每个列表条目内。
Graingerserp.
搜索引擎结果页面的eyetracking凝视图显示用户扫描每个列表条目,并指向大多数凝视到每个条目的顶级和最左侧区域。
  • 视觉优先级- 通过视觉设计引入最重要的信息:
    • 通过增加字体大小和重量或使用唯一或深色来强调关键属性。
    • 考虑包括iconography.提高注意力和支持扫描。
    • 将一个重要的属性与周围的白色空间隔离,使其突出引起注意。

    在应用视觉处理以吸引人们注意关键属性时要小心。做过头会适得其反,让你很难浏览有这么多竞争项目的清单。

信息的放置和视觉处理创建了一种可视路径,通过它们的重要性顺序通过集合来引导眼睛,使其有效且易于扫描每个列表条目。许多用户可能只需要做出最重要的和强调属性的浅扫描来做出决定。具有更具体需求的人可以看看辅助属性以更深入地了解其选项。

联合医疗保健名单
United Healthcare的医疗提供者目录页面中的列表条目强调了大蓝色字体的提供商名称。提供商的专业也以小于名称低于较小但粗体的字体。其他重要信息是隔离的,并与右侧的图标配对,以引起注意。很容易看到有关此提供商的关键信息一目了然。
预订列表条目
Booking.com上的列表条目缺乏清晰的信息层次结构,也没有为用户提供可视化路径。这个列表条目包含了太多独特和竞争的视觉处理,需要花费大量的精力来扫描和理解它。
下一个仓库清单输入
NextWareHouse.com上的列表条目提供无信息层次结构:产品名称,价格,库存和其他细节具有相同的字体和视觉样式。虽然品牌名称和部件号分别以红色和蓝色显示,但对比度太低,无法有效绘制眼睛,使用户难以解析重要的属性。
下一个仓库列表条目已更正
我们重新设计了NextWareHouse.com列表条目:只有少数视觉设计调整,有关此打印机的重要信息即可到达前景。附加信息是优先级排除并左对齐,使此列表条目易于扫描和理解。

3.在列表条目中使用一致的样式以支持比较

在我们的眼压研究中,我们发现,当用户必须在列表页面上提供的几个选项中选择时,他们经常从一个条目看到另一个条目,然后又看回来- 比较不同条目的类似信息。为帮助此过程,列表条目应预测和一致,具有相同的位置和视觉处理对应属性。

列出条目比较
从用于数码相机的用户购物的眼镜凝视图表明用户的眼睛在两个不同的相机之间来回移动。此Zig-ZAG模式表明用户正在比较产品属性。
Travelocity清单页面
Travelocity的航班列表是一致的。对于每个航班,使用相同的视觉处理在相同的位置表示相同的片段信息。

虽然每个列表条目中的布局和属性放置应该在很大程度上是相同的,但是存在可能需要特征的重要区分信息的情况。例如,如果产品出售或售罄,则可以展示独特的标注或标志性指标提请注意它。但是,选择性地围绕您选择以这种方式呼叫哪些信息。显示2-3个以上情况的唯一指标可以使上市页面混乱,难以扫描。

RedMart上市页面
A user shopping for toothpaste on Redmart.com found the sale indicators helpful, remarking “One thing good about looking at all of the toothpaste like this is that it’s easy to see which items are on sale, so I may choose to purchase one of those items, when I otherwise may not have.“
预订列表页面
Booking.com的不同酒店列表条目是不一致的 - 酒店详情从一个项目更换了一个项目到下一个项目。这个例子还展示了如何使用太多指标可以轻松摆脱手。在上面的3个酒店描述中,有11个动态指示灯,具有不同的信息,使页面杂乱,酒店比较困难。

结论

确定大多数用户需要缩小其选择的信息。优先顺序此信息,并在每个列表条目中创建一致的Mini-IA详细信息,以便用户轻松效率,以便用户理解和缩小选项。

我们的全天研讨会网页UX设计讨论清单页面上的视觉优先级和分层内容,以及创建成功的网页的提示,满足用户需求和业务目标。