不久前我在网上预订了一个酒店预订时段旅行。我经历了在少数不同的网站上定位,消化和缩小我的选择。最后,在我终于能够决定在我想留下来的地方需要几天,并且它是彻头彻尾的疲惫。

在网络上进行酒店预订,如我们在线所做的那样,涉及观看,评估和缩小选择。大多数时间用户指定一组标准或浏览一组类别,并结束了列表页面,其中包含几个候选物品或列表条目。列表页面是地面零,用于分析许多可用选项,它需要支持高效的扫描和决策。

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

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

上市页面的可用性取决于单个列表项的设计方式。每个条目不仅需要功能强大且易于理解,还需要与页面上列出的其他选项配合使用。要实现可用的列表条目和列表页面,需要满足几个要求。

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

当用户浏览选项列表时,他们希望快速确定哪些物品感兴趣,它们可以忽略。太多信息可以压倒用户并创造一个凌乱的外观。另一方面,没有足够细节的列表条目留下了太多问题,不答复,强迫用户弹簧单高跷(即导航到每个细节页面以获取所需信息)。Pogo Sticking经常在上市页面上发出有用的有用细节。

大约当局列表页面
Circalighting.com:在这个画廊页面上,List Sconces的列表只显示产品名称,并留下了完成,灯泡类型甚至价格等重要细节。用户必须导航进出每个项目的详细信息页面以获取此信息。虽然,当购物墙壁康马斯时,虽然图像可能是最重要的购物者的元素,价格和其他重要差异化的不应在这个级别遗漏。
美国零件清单条目
USAUTOPARTS.NET:汽车配件的列表页包括每个产品的许多细节。用户必须扫描长期的产品属性,以挑选与它们相关的产品。通过这种设计,浏览是乏味的并且比较困难。

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

  • 分析-如果您目前有排序或过滤功能在您的列表页面上,弄清楚哪些过滤器和排序标准最常使用。哪个用于第一轮Winnowing,后者将在稍后使用它进一步调整结果集?
  • 用户研究-进行日记研究和可用性研究,以了解哪些元素对决策是重要的,在多大程度上是重要的,以及哪些产品属性通常用于缩小选择范围。

用户数据和分析将帮助您确定在列表条目中包括哪些属性,哪些要强调,哪些要淡化。在开始考虑列表条目布局和视觉设计之前,确定每个属性的优先级顺序。这些优先级将为列表条目中的信息层次结构设置基础。

我们将告诉您,在我们22年的可用性测试中,有一条信息是每个用户都要求的,这将为您节省一些研究:价格

travelocity列表条目
Travelocity.com的航班列表条目包括出发时间,抵达时间,旅行时间,停止数和Lay的长度,以及飞行号码和运营商等关键信息。此信息可帮助用户选择航班,而不会压倒它们。如果需要,可以使用其他详细信息的路径。

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

单个列表条目的设计应该帮助用户快速理解每个选项,并且应该支持产品的比较

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

  • 放置和布局- 作为拇指的规则,最佳最近名单入口集装箱加纳的地区最关注。高优先级信息应放在这些区域(至少在从左到右读取的培养物中)。考虑到这一点,优先序列组织属性以创建信息层次结构(或迷你IA.)在每个列表中。
GraingerSerp
搜索引擎结果页面的眼球追踪凝视图显示,用户扫描每个列表条目,并将大多数目光指向每个条目的最上方和最左侧区域。
  • 视觉优先- 通过视觉设计引入最重要的信息:
    • 通过增加字体大小和重量或使用唯一或深色来强调关键属性。
    • 考虑包括图解提高注意力和支持扫描。
    • 将一个重要的属性与周围的空白隔开,使其突出来吸引注意。

    在应用视觉处理时要注意注意关键属性时要小心。过度行为它可以反射并使其难以使用这么多竞争物品扫描列表。

总之,信息的放置和视觉处理创建了一个视觉路径,引导人们按照属性的重要性顺序浏览属性集合,从而使浏览每个列表条目变得高效和容易。许多用户可能只需要简单浏览最重要和强调的属性就可以做出决定。那些有更具体需求的人可能会看一下次要属性,以更深入地理解他们的选择。

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

3.使用跨列表条目的一致样式来支持比较

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

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

尽管每个列表条目中的布局和属性位置应该大致相同,但在某些情况下,可能需要突出重要的区别信息。例如,如果一件产品正在出售或销售一空,显示独特的标注或标志性指标提请注意它。但是,选择性地围绕您选择以这种方式呼叫哪些信息。显示2-3个以上情况的唯一指标可以使上市页面混乱,难以扫描。

Redmart清单页面
用户购买牙膏在Redmart.com上发现有用的销售指标,评论“一件事好看着所有的牙膏这样是很容易看出哪些物品出售,所以我可能会选择购买其中的一个项目,当我否则可能没有。”
预订列表页面
Booking.com针对不同酒店的列表条目是不一致的——酒店的详细信息会从一个条目更改到下一个条目。这个示例还显示了使用太多指示器会很容易失控。在上面的3个酒店描述中,有11个动态指标具有不同的信息片段,使得页面混乱,酒店比较困难。

结论

确定大多数用户需要哪些信息来缩小他们的选择范围。对这些信息进行优先级排序,并在每个列表条目中创建一致的细节迷你ia,以方便用户理解和缩小选项范围。

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