手机屏幕空间有限，移动用户经常被打断，注意力分散。因此，手机设计师总是在寻找简化和整理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项以其他类型的指示器对在页面上找到所有3项，参与者最不成功。（更高的条形更好。）

图标与颜色

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

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

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

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

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

在股票表现表中，只有图标的条件比只有颜色的条件表现得更好有几个可能的原因:(1)箭头指示器预期的设计元素对于这种数据;（2）颜色比图标更为模糊：用户必须推断出红色是股票减少和绿色的股票增加，这可能需要稍微长时间的用户必须做出这种扣除;另一方面，向上或向下箭头的含义更加简单。

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

都是最好的

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

将唯一的图标与颜色结合起来为每一种类型的指示器在设计中使用证明为所有UX度量的所有变体执行最佳状态我们测量了。只使用一种差异化的方法来减少人们会注意到少差异的可能性。单独依靠颜色运行失败的色盲用户的风险，也可能更为开放的解释，同时仅交换类似设计的图标或巧妙地调整指示器的形状，可以通过扫描的用户轻松忽视指标的形状。不同指标的次要线索（例如，除了独特形状之外的独特颜色）增加了用户将注意到它们的可能性，并能够使用它们来快速找到感兴趣的项目。

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

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

在我们测试的移动屏幕上，用户大致37％越快在查找物品时，当视觉指示器在颜色和图标中变化而不是单独的文本。While we didn’t test these indicators on larger desktop screens, there is every reason to believe that a similar outcome would be found, even if the exact percentage would be different — in fact, on a bigger screen, the speed advantage from more noticeable indicators might even be bigger, but we’ll leave it as an exercise for any graduate students or other researchers among the readers to measure this.

（对于移动的更多视觉设计考虑，请参加我们的全天手机和平板电脑的视觉设计培训课程)。