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

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

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

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

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

关于这项研究

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

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

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

研究中使用的股票数据表的屏幕截图
同一移动页面的4个版本，对应4种视觉指示对;从左到右:只有文本，只有颜色，只有图标，颜色和图标都有。

96名用户参与了这项研究;他们每个人都与四个网站的一个版本交互。他们的任务是找到与两个指标之一相关的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个项目时最不成功。(门槛越高越好。)

图标和颜色

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

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

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

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

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

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

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

都是最好的

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

结合一个独特的图标和颜色为每一种类型的指示器在设计中使用证明在所有用户体验参数的变化中表现最好我们测量。只用一种方法区分物品会降低人们注意到细微差异的可能性。仅仅依靠颜色可能会导致色盲用户的失败，而且可能会更容易接受解释，而仅仅更换设计相似的图标或微调指示器的形状很容易被扫描用户忽略。不同指示器的次要线索(例如，除了独特的形状外，独特的颜色)能够增加用户注意到它们的机会，并能够使用它们快速找到感兴趣的道具。

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

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

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

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