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

视觉指标是一个这样的例子。视觉指示器是一个“标记”,可帮助用户快速找到内部具有重要独特属性的项目否则类似的对象列表

Rei Mobile网站上的产品上市页面屏幕截图
电子商务网站上的指标通常用于表示在REI.com上方的移动屏幕截图上看到的独家产品或物品。

某些设计可以同时使用多个视觉指示器 - 例如,电子商务网站可能希望标记为“在销售时的新”和项目“的项目。在这种情况下,设计这样一个家庭成员的最佳方式是,他们每个都脱颖而出,用户可以快速找到物品?

在本文中,我们报告了定量研究,以测量视觉指标系列内的视觉设计差异如何影响人们找到相关项目的能力。

关于这项研究

我们选择了4页不同的移动页:2家电子商务列表页面和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支持团队还通过请求所有点击提供定时数据。

仅限文本:无效

所有的Nontext变化都比单独的文本更好对于测量的所有变量。这些结果表明,人们依赖于辅助线索,如颜色或形状,以区分分组并快速,轻松地定位相关信息。

下图显示了每种类型的视觉指示符的平均任务时间。通过重复测量的推广线性模型,病症的效果非常显着(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项,参与者最不成功。(更高的酒吧更好。)

图标与颜色

这项研究的一个动机是调查图标和仅颜色条件之间的任何差异。人类感知的文献表明,两者都是预先信中的特征 - 也就是说,人们倾向于在看一个显示器时相当快地接受这些功能的变化,而无需在屏幕上单独地搜索和检查每个项目。(在我们全天的培训课程中进一步探讨了对用户界面设计的影响人类的思想和可用性。)

我们的数据表示图标与颜色的弱效果为1正确的点击:如上一节所述,我们发现,与唯一的象色条件相比,在唯一的象征条件下,人们在唯一的条件下稍微更快地略微更快。

为了更好地理解这种效果,我们专注于来自股票表的数据。这些数据是最有趣的,并且对唯一的icon条件也是挑战,因为图标最相似(向上和向下指向箭头)。

当我们只分析股票表中的数据时,我们发现了图标条件明显优于颜色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.

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