不久前我在网上预订酒店预订了一个周末之旅。我通过查找,消化和在不同的网站屈指可数缩小我的选择的过程中去。最终花了好几天我终于能决定,我想留之前,它是彻头彻尾的排放。

在网络上预定饭店,像这么多的东西,我们在网上做,包括观察,评估和缩小选项。大多数时候用户的指定一组标准或通过浏览一组类别,并最终在一个列表页面,其中包含几个候选项目或列表条目。列表页面是用于分析许多可供选择地为零,它需要支持高效的扫描和决策。

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

层次列表页面
列表页面作为显示候选项目(列表项),其可能匹配用户的需求列表的枢纽。每个列表条目通常包含了项目的高层次的描述和项目的页面(详细信息页)的链接。需要注意的是网站有深层次的导航将有主页和列表页面之间的附加水平。

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

1.确定优先级列表,进入属性创建信息层次结构

当用户浏览选项列表,他们希望快速哪些项目的兴趣,他们可以忽略确定。太多的信息可以压倒用户,并创建一个杂乱的外观。在另一方面,如果没有足够的细节叶列表条目太多悬而未决的问题,迫使用户弹簧单高跷(也就是说,导航到每一个细节页面来获得他们所需要的信息)。波戈坚持通常标志着列表页面上有帮助的细节不足。

大约照明列表页面
Circalighting.com:在这个画廊页面上,壁灯列表条目只显示产品名称和遗漏重要的细节,如光洁度,灯泡类型,甚至价格。用户必须在浏览和进行每个项目的详细信息页面来获得这些信息。虽然,购物墙壁灯时,该图像可能是最重要的对于消费者,价格和其他显著差异化元素不应该在这个级别被排除在外。
进入美国汽车零部件清单
Usautoparts.net:汽车配件此房源页面包括每个产品太多细节。的产品属性来挑选出那些与它们相关产品的用户必须通过一个长长的清单扫描。有了这样的设计,浏览是繁琐和比较困难的。

就像在金发姑娘的故事,在列表条目需要详细的产品数量要恰到好处:过多会超载用户,防止他们在一个视图中看到足够的选择,太少会让他们弹簧单高跷。识别满足广大受众的信息需求,并介绍这些列表项的属性。使用分析和用户研究,以指导你决定哪些属性传达您的用户大多数的信息:

  • 分析-如果你目前有排序或过滤功能在你的列表页面,弄清楚哪些过滤和排序标准是最常用的。其中用于第一轮风选的,并且被用于后来就调整结果进一步设置?
  • 用户研究-进行日志研究和可用性研究,以了解哪些元素对决策是重要的,在何种程度上,以及哪些产品属性通常用于缩小选项。

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

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

travelocity列表条目
Travelocity.com的飞行列出条目包含的关键信息,如发车时间,到达时间,旅行时间,车站和遮掩的长度,数量,以及航班号和运营商。这些信息可以帮助用户选择航班没有压倒他们。如果需要一个额外的详细路径是可用的。

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

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

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

  • 安置和布局- 根据经验,该法则最顶层最左边的列表条目容器的领域争取了最多的关注。信息更高的优先级片应放置在这些领域(至少在读取左至右文化)。考虑到这一点,通过优先组织属性,建立信息的层次(或迷你IA)每个列表条目中。
GraingerSerp
搜索引擎结果页面的眼球追踪注视图显示,用户扫描了每个列表条目,并将大多数目光指向每个条目的最左边和最上面的区域。
  • 视觉优先- 吸引眼球的通过视觉设计信息的最重要的部分:
    • 强调通过增加字体大小和重量或使用唯一的或深色关键属性。
    • 考虑包括图解提请注意和支持扫描。
    • 将一个重要的属性与周围的空白区分开,使其突出来吸引注意。

    将外观治疗时提请注意关键属性要小心。矫枉过正,可能会适得其反,使之难以扫描有这么多的竞争项目的列表。

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

美国医疗保健列表条目
在联合医疗保健的医疗提供者目录页面中,一个列表条目以蓝色大字体强调提供者名称。提供商的专业也强调在一个较小的但粗体字体下方的名字。其他重要的信息被隔离,并与右边的图标配对以吸引注意。很容易看到有关此提供程序的关键信息。
预订列表条目
在Booking.com列表条目缺少一个清晰的信息层次,并没有提供视觉路径给用户。此列表项包含太多独特的竞争视觉处理,需要大量的努力来扫描和理解。
下一个仓库清单输入
在Nextwarehouse.com列表条目提供任何信息的层次结构:产品名称,价格,库存等信息具有相同的字体和视觉造型。虽然品牌名称和零件号红色和蓝色分别示,对比度太低有效地画眼睛,使其难以为用户解析出重要的属性。
接下来仓库列表条目修正
我们的NextWarehouse.com列表条目的重新设计:只有少数的视觉设计的调整,这个打印机的重要信息,来到前台。其他信息优先和左对齐,使此列表项容易扫描和理解。

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

在我们的视线追踪研究中我们发现,当用户有呈现列表页面上的几个选项中进行选择,他们经常看从一个列表条目到另一个,然后再返回-比较不同条目之间的相似信息。为了帮助实现这一过程,列表条目应该是可预测的和一致的,对应属性的位置和可视化处理应该是相同的。

列表条目比较
一个眼睛跟踪从数码相机显示,用户的眼睛搬回两个不同的相机之间来回逛了用户的目光情节。这个曲折的模式表明,用户在比较产品属性。
上市,立即页
Travelocity公司的航班列表条目是一致的。对于每个飞行,同一块的信息在同一个地方使用相同的视觉治疗来表示。

尽管每个列表条目中的布局和属性放置应该大致相同,但有些情况下可能需要突出重要的区别信息。例如,如果产品正在销售或已售完,则可以接受显示惟一的标注或标志性的指标提请注意它。但是,是有选择性的关于您选择以这种方式来调出哪些信息。显示唯一指标超过2-3的情况下可以使列表页面混乱和难以扫描。

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

结论

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

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