手机屏幕空间有限，移动用户经常被打断，注意力分散。因此，手机设计师总是在寻找简化和整理UI的方法。这是一种崇高的努力!然而，一些类型的“杂乱”实际上可能是界面的一个有用的和重要的部分，不应该为了节省空间而删除。

视觉指标这就是一个例子。视觉指示器是一种“标记”，可帮助用户快速定位其中具有重要独特属性的项目其他类似对象的列表．

在REI移动网站上的产品列表页面截图
电子商务网站的指标通常用来表示独家产品或打折商品，如REI.com上面的手机截图所示。

有些设计可能会同时使用多个视觉指示器，例如，一个电子商务网站可能想要标记“新”和“打折”的商品。在这种情况下，设计这样一个家庭成员的最佳方法是什么，让他们每个人都脱颖而出，用户可以快速找到物品?

在本文中，我们报告了一项量化研究，该研究测量了视觉指示器家族中的视觉设计差异如何影响人们定位相关项目的能力。

关于这项研究

我们选择了4个不同的移动页面:2个电子商务上市页面和2个股票表现数据表。对于每个页面，我们确定了两种类型的项目，并用视觉指示器进行标记(例如，在股票表现页面中，我们想要区分价值增加的股票和价值减少的股票)，我们设计了4对视觉指示器。每对的视觉指示器可能有4种不同的方式:

  1. 仅文字：族中的每个指示器仅在文字标签上有所不同
  2. 仅颜色：每个指示器具有不同的颜色
  3. 只有图标:每个指示灯有一个不同的图标
  4. 颜色和图标:每个指示灯有不同颜色的不同图标

基于这4对指标，我们设计了每个手机页面的4个可能版本。每一页都显示了几个项目的列表;其中3个项目用一种视觉指示器标记，3个项目用另一种视觉指示器标记。

研究中使用的股票数据表的屏幕截图
同一移动页面的4个版本，对应于4种类型的视觉指示器对；从左到右：仅文本、仅颜色、仅图标以及颜色和图标。

96名用户参与了这项研究；他们中的每个人都与4个站点中的每个站点的一个版本进行了交互。他们的任务是找到与这两个指标中的一个相关的3个项目（例如，“你对寻找高绩效股票感兴趣。在此列表中找到3个最近价值增加的股票。”）。（注：我们随机选择了参与者必须找到的指标类型。）

每个参与者看到所有4种类型的视觉指示器(只有文本，只有颜色，只有图标，颜色和图标)，而每个网站只浏览一次。现场任务和条件的顺序是随机的，以避免任何顺序影响。

为了衡量每个条件的有效性，我们收集了四个UX参数:

  1. 第一次单击的时间
  2. 第一次更正单击的时间
  3. 完成任务时间
  4. 成功率(3种选择中有多少次点击是正确的)

我们使用UserZoom的截图点击测试记录手机屏幕截图上的每次点击并衡量成功与否。UserZoom支持团队还根据所有点击请求提供计时数据。

仅文本:无效

所有非文本变体的性能都优于单独的文本对于所有测量的变量。这些结果表明，人们依赖颜色或形状等次要线索来区分群体，并快速、容易地定位相关信息。

下图显示了每种视觉指示器的平均任务时间。通过重复测量的广义线性模型，病情的影响是非常显著的(p<0.005)。两两比较结果显示，纯文本条件比其他条件都差(p<0.05)。

条形图显示的是平均任务时间，文本只需22秒，颜色和图标只需14秒
与其他类型的指标相比，参与者花了明显更多的时间来定位由文本区分的指标设计上的所有项目。(较低的条形图更好。)

短信只慢了57%在同一对中，视觉指标的颜色和图标都不同。

显示第一次正确点击时间的条形图，文本只需14秒，颜色和图标只需9秒
与其他类型的指标相比，参与者使用纯文本指标定位特定项目的速度要慢得多。（栏杆越低越好。）

即使只考虑用户寻找匹配道具所花费的时间(即平均1圣正确点击)，文字仅比视觉指标颜色和图标同时变化的情况慢56% (p<0.05)。而且，只有图标的情况比只有颜色的情况略快(p<0.01)。

此外，条件对正确率的影响是极显著的(p<0.1)。的百分比只有文本的正确选择最少指标设计;我们的对比分析显示，纯文本条件显著地比所有其他非文本条件的组合差(p<0.05)。

柱状图的平均正确点击率，文本平均正确率为76%，颜色和图标平均正确率为85%
与其他类型的指示符对相比，使用纯文本指示符时，参与者在查找页面上必须查找的所有3个项目时最不成功（条形越高越好）

图标与颜色

这项研究的动机之一是调查只有图标和只有颜色的条件之间的差异。有关人类感知的文献表明，这两种特征都是注意力不集中的特征——也就是说，人们在看显示器时，往往很快就能注意到这些特征的变化，而不必在视觉上分别搜索和检查屏幕上的每一项。(知觉对用户界面设计的影响将在我们的全天培训课程中进一步探讨人类的思维和可用性.)

我们的数据表明图标相对于颜色的效果较弱圣正确点击:正如上一节所讨论的，我们发现人们在只有图标的情况下比只有颜色的情况下检测指示器的速度要快一些。

为了更好地理解这种效果，我们将重点放在股票表中的数据上。对于只有图标的情况，这些数据是最有趣的，也是最具挑战性的，因为图标是最相似的(向上和向下的箭头)。

当我们仅分析库存表中的数据时，我们发现图标条件的表现明显好于颜色条件四分之二的指标（时间到1圣正确的点击，时间为1圣点击，p<0.05)，任务时间略好(p=0.08)。

柱状图的计时数据为首次正确点击股票表任务，图标仅平均7秒，颜色仅平均8秒
与只有颜色的情况相比，在只有图标的情况下，参与者找到物品的速度更快(第一次点击的平均时间大约等于第一次正确点击的平均时间，因为这些网站的大多数第一次点击都是正确的)。(较低的条形图更好。)

在股票表现表中，只有图标的条件比只有颜色的条件表现得更好有几个可能的原因:(1)箭头指示器预期设计元素对于这类数据；（2）颜色比图标更模糊：用户必须推断红色是股票下跌，绿色是股票上涨，这在用户第一次进行推断时可能需要稍长时间；另一方面，向上或向下箭头的含义更直接。

为了确定一种类型的指标是否比另一种有任何可衡量的优势，或者这是否与每个设计的背景紧密相关，还需要进行进一步的研究。

都是最好的

虽然讨论和研究颜色或图标是否对可用性有最强大的影响是很有趣的，但在大多数实际的用户界面设计项目中，这并不是相互排斥的选择。我们可以选择使用颜色和图标的组合，这样两者在指示器之间就会有所不同。

将唯一图标与颜色组合在一起为每一种类型的指示器在设计中使用证明在所有UX指标的所有变体中发挥最佳性能我们进行了测量。仅使用一种区分项目的方法可以降低人们注意到细微差异的可能性。仅依靠颜色就有可能导致色盲用户失败，也可能更容易理解，而仅仅更换类似设计的图标或微妙地调整指示器的形状就很容易做到这一点由扫描用户查看。不同指示器的辅助提示（例如，除了唯一形状之外的唯一颜色）增加了用户注意到它们的机会，并能够使用它们快速找到感兴趣的项目。

总之，如果你正在考虑使用一系列视觉指示器来标记网站上的项目，我们建议:

  • 同时使用颜色和图标的区别是最明显的。
  • 如果出于某种原因，您试图决定是使用两个相当相似的图标作为两个指示器还是使用两种不同的颜色，最好添加一个具有良好信息气味的独特图标作为区分因素。

在我们测试的手机屏幕上，用户大致上快37%当视觉指示器在颜色和图标上都与文本不同时，就能找到物品。虽然我们没有在更大的桌面屏幕上测试这些指标，但我们有充分的理由相信，会发现类似的结果，即使确切的百分比是不同的事实上，在更大的屏幕上，更明显的指示器的速度优势可能更大，但我们将把它作为一个练习，让任何研究生或读者中的其他研究人员来衡量。

（有关移动设备的更多视觉设计注意事项，请参加我们的全天活动手机和平板电脑的视觉设计培训课程)。