不久前我在网上预订酒店预订了一个周末之旅。我通过查找,消化和在不同的网站屈指可数缩小我的选择的过程中去。最终花了好几天我终于能决定,我想留之前,它是彻头彻尾的排放。
在网络上预定饭店,像这么多的东西,我们在网上做,包括观察,评估和缩小选项。大多数时候用户的指定一组标准或通过浏览一组类别,并最终在一个列表页面,其中包含几个候选项目或列表条目。列表页面是用于分析许多可供选择地为零,它需要支持高效的扫描和决策。
注意:列表页面有时被称为“类别页面”(当它们包含属于特定产品类别的项目时),“目录页面”(当它们列出位置或人员时),或“画廊页面”(当它们包含图形或图像时)。搜索引擎结果页面(SERP)是另一种类型的列表页面。在本文中,我们将所有这些概述页面称为清单页面。

该列表页面的可用性这取决于单个列表条目的设计方式。每个条目不仅需要具有功能和易于理解,而且还需要与页面上列出的其他选项很好地协作。要实现可用的列表条目和列表页面,需要满足几个需求。
1.确定优先级列表,进入属性创建信息层次结构
当用户浏览选项列表,他们希望快速哪些项目的兴趣,他们可以忽略确定。太多的信息可以压倒用户,并创建一个杂乱的外观。在另一方面,如果没有足够的细节叶列表条目太多悬而未决的问题,迫使用户弹簧单高跷(也就是说,导航到每一个细节页面来获得他们所需要的信息)。波戈坚持通常标志着列表页面上有帮助的细节不足。


就像在金发姑娘的故事,该在列表条目需要详细的产品数量要恰到好处:过多会超载用户,防止他们在一个视图中看到足够的选择,太少会让他们弹簧单高跷。识别满足广大受众的信息需求,并介绍这些列表项的属性。使用分析和用户研究,以指导你决定哪些属性传达您的用户大多数的信息:
- 分析-如果你目前有排序或过滤功能在你的列表页面,弄清楚哪些过滤和排序标准是最常用的。其中用于第一轮风选的,并且被用于后来就调整结果进一步设置?
- 用户研究-进行日志研究和可用性研究,以了解哪些元素对决策是重要的,在何种程度上,以及哪些产品属性通常用于缩小选项。
用户数据和分析将帮助您确定在列表条目中包含哪些属性,哪些要强调,哪些要淡化。在开始考虑列表条目布局和视觉设计之前,确定每个属性的优先级顺序。这些优先级将为列表条目内的信息层次结构设置基础。
我们告诉你,在我们22年的可用性测试中,有一条信息是每个用户都要求的:价格。

2.在Mini-IA和每个列表条目的视觉设计中反映属性的优先级
单个列表条目的设计应该帮助用户快速理解每个选项,并且应该支持产品的比较。
对待每一个列表条目就好像它是一个小网页,并确保您的布局和描述中的每个属性的可视化处理的优先级相对于其他属性相匹配。
- 安置和布局- 根据经验,该法则最顶层和最左边的列表条目容器的领域争取了最多的关注。信息更高的优先级片应放置在这些领域(至少在读取左至右文化)。考虑到这一点,通过优先组织属性,建立信息的层次(或迷你IA)每个列表条目中。

- 视觉优先- 吸引眼球的通过视觉设计信息的最重要的部分:
- 强调通过增加字体大小和重量或使用唯一的或深色关键属性。
- 考虑包括图解提请注意和支持扫描。
- 将一个重要的属性与周围的空白区分开,使其突出来吸引注意。
将外观治疗时提请注意关键属性要小心。矫枉过正,可能会适得其反,使之难以扫描有这么多的竞争项目的列表。
总之,信息的放置和视觉处理创建了一个视觉路径,引导眼睛按照其重要性的顺序浏览属性集合,从而使扫描每个列表条目变得高效和容易。许多用户可能只需要对最重要和强调的属性做一个浅层的扫描,就可以做出决定。那些有更具体需求的人可以查看次要属性,以更深入地了解他们的选项。




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


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


结论
确定大多数用户需要哪些信息来缩小他们的选择范围。对这些信息进行优先级排序,并在每个列表条目中创建一致的详细信息迷你ia,以方便用户有效地理解并缩小选项范围。
我们在整天的研讨会网页用户体验设计讨论在列表页面上的视觉优先级和分层内容,以及创建满足用户需求和商业目标的成功网页的提示。
分享此文章: