菜单 关闭

视觉指标区分在一个列表上的项目

通过 奥罗拉哈雷8月7日,2016

总结:在发现大约快37%用户列表中的项目在一个web页面视觉指标在不同颜色和图标比单纯的文字。如果在使用颜色或图标之间进行选择,具有强烈信息嗅觉的图标比单独的颜色表现更好。.


手机屏幕空间有限,和活跃的用户常常中断和展览分散注意力。作为一个结果,手机设计师们总manbetx官方网站手机版是在寻找方法来简化和整理UI。这是一个高尚的努力!然而,某些类型的“混乱”实际上可能是接口的一个有用和重要的部分,并且不应该为了节省空间而移除。.

视觉指标就是这样一个例子。一个可视指示符是一个“标记“这有助于用户快速定位具有重要属性的项目。其他类似对象的列表..

在RII移动站点上的产品列表页面的截图
指标对电子商务网站常常用来表示独家产品或项目销售,正如在上面的手机屏幕截图中看到的。通用域名格式。.

一些设计可manbetx官方网站手机版以同时使用一系列多个视觉指示器,例如,电子商务网站可能想要标记“新“以及“在出售。“在这种情况下,怎样才能设计出这样一个家庭的成员,使他们每个人都manbetx官方网站手机版脱颖而出,并且用户能够快速地找到物品??

在本文中,我们报告了一项定量研究,测量视觉指示器家族中的视觉设计差异如何影响人们定位相关项目的能力。manbetx官方网站手机版.

关于研究

我们选择了4个不同的移动页面:2个电子商务列表页面和2个股票性能数据表。对于每一页,我们确定了2种类型的项目要标记的视觉指标(例如,在股市表现页面,我们想要区分股票价值增加和减少的股票价值)和4双视觉设计指标。manbetx官方网站手机版每对中的视觉指示器可以以4种可能的方式之一不同:

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

基于这4双指标,我们设manbetx官方网站手机版计了每个移动页面的4个可能版本。每一页显示的几个项目列表;其中,3个项目被标记为一个视觉指示器和3个与另一个。.

研究中使用的股票数据表截图
同一个移动页面的4个版本,对应于4种类型的视觉指示器对;从左到右:文本,颜色,图标,颜色和图标。.

96名用户参与了本研究;每个人与每个4网站的一个版本。他们的任务是找到3项相关的两个指标(e。g。,“你对发现高性能股票很感兴趣。找到3股最近在这个列表的值增加了。“)。(注:我们随机选择了参与者必须找到的一种指示器。)

每个参与者都看到了4种视觉指示器(纯文本)。颜色,图标,颜色和图标),同时只查看每个站点一次。网站的任务和条件的顺序是随机的,以避免任何顺序效应。.

测量每个条件的有效性,我们收集了四个用户体验指标:万博官网manbetx下载

  1. 时间第一次点击
  2. 第一次正确点击时间
  3. 时间来完成任务
  4. 成功率(在3种可能中有多少次点击是正确的)

我们用过UserZoom屏幕截图点击测试记录每次点击手机屏幕截图并测量成功。用户变焦支持团队还提供了定时数据,要求所有点击。.

仅文本:无效

所有的非文本变体都比单独的文本更好。对于所有测量的变量。这些结果表明,人们依靠次要线索,如颜色或形状来区分分组,并快速和容易地定位相关信息。.

下面的图表显示了平均工作时间为每个类型的视觉指示器。病情有显著性差异(P<0)。005)通过重复测量广义线性模型。两两比较显示纯文本条件比其他条件差(p<0)。05)。.

条形图显示平均工作时间,文本只花了22秒,颜色和图标花了14秒
与其他类型的指示符相比,参与者花费了显著更多的时间来定位具有仅通过文本区分的指示符的设计上的所有项目。manbetx官方网站手机版(下巴比较好。)

文本只慢了57%比最好的条件,在同一对中,视觉指示器的颜色和图标都发生变化。.

显示第一次正确点击时间的条形图,文本只花了14秒,颜色和图标花了9秒
与其他类型的指示符相比,参与者使用纯文本指示符定位特定项目的速度显著减慢。(下巴比较好。)

即使只考虑了用户的时间(我发现任何匹配项。e.,平均时间1ST正确点击)文字仅比视觉指标颜色和图标变化的情况慢56%(p<0.05)。05)。此外,icon-only条件略快于色彩只条件(p < 0。01)。.

此外,条件的影响在正确的比例略显著(p < 0。1)。的百分比只有文本的正确选择是最低的指标设计;manbetx官方网站手机版我们的对比分析表明,该文本条件明显比其他非文本条件组合(p < 0。05)。.

条形图的平均百分比正确的点击,文本平均只有76%正确,颜色和图标平均85%正确
与文本指标,与其他类型的指示符对相比,参与者在定位他们在页面上必须找到的所有3项上最不成功。(高杆比较好。)

图标vs。颜色

这项研究的动机之一是调查只使用图标和只使用颜色的条件之间的任何差异。关于人类感知的文献表明,两者都是预先关注的特征,即,人们倾向于选择这些特性的变化很快,当观察显示,不必在屏幕上单独搜索和检查每个项目。(感觉对用户界面设计的影响是我们全天的培训课程进一步探索manbetx官方网站手机版人类思维和可用性.)

我们的数据显示图标和颜色的疲软的影响1ST正确点击:如前一节所讨论的,我们发现人们更快的检测指标icon-only条件与色彩的条件。.

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

当我们只分析股票表中的数据时,我们发现图标条件明显优于颜色。在4个度量中的2个(时间到1)ST正确点击,时间到1点ST点击,P<0。05)在任务时间上稍好(P=0)。08年)。.

条形图的时间数据,首先正确点击stock表任务,图标只平均7秒,颜色只有平均8秒
与只用颜色条件相比,参与者在仅用图标条件中定位项目的速度更快(第一次单击的平均时间大约等于第一次正确单击的平均时间,因为大多数第一次点击这些网站是正确的)。(下巴比较好。)

有几个可能的原因可以解释为什么只使用图标的条件比只使用颜色的条件在股票性能表上表现得更好:(1)箭头指示符是预期设计元素manbetx官方网站手机版这种类型的数据;(2)颜色比图标更加模糊:用户必须推断红色是库存减少,绿色是库存增加,这可能需要更长的时间,第一次,当用户必须作出扣除;另一方面的意义向上或向下箭头更简单。.

需要进一步研究以确定一种指标相对于另一种指标是否有任何可测量的优点,或者如果这与每个设计的上下文紧密相关。manbetx官方网站手机版.

两者都是最好的

而有趣的争论和研究颜色和图标是否有最强大的影响可用性,这些并不是互相排斥的选择最实用的用户界面设计项目。manbetx官方网站手机版我们可以组合使用颜色和图标,这两个指标之间存在差异。.

将唯一图标与颜色组合对于设计中使用的每种类型的指示器manbetx官方网站手机版执行的所有用户体验指标的变化万博官网manbetx下载我们测量了。仅使用一种区分项目的方法就减少了人们注意到细微差异的可能性。仅仅依靠颜色就有可能使色盲用户失败,而且可能对解释更加开放,而仅仅交换出类似设计的图标或微妙地调整指示器的形状很容易被扫描的用户忽略manbetx官方网站手机版。次要线索对不同指标(e。g。,一个独特的颜色除了一个独特的形状)增加用户会注意到他们的机会,并能够使用它们来快速找到感兴趣的项目。.

综上所述,我们建议,如果您正在考虑一个家庭的视觉指标来标记您的网站上的项目:

  • 使用颜色和图标区分是最引人注目的。.
  • 如果,出于某种原因,您试图在两个指示符上使用两个相当相似的图标或两种不同颜色之间做出选择,宁愿添加一个独特的图标与良好的信息气味作为一个区别因素。.

在我们测试的手机屏幕上,用户约快37%在寻找项目时,视觉指示器颜色和图标的变化与文本相比。虽然我们没有在更大的桌面屏幕上测试这些指示器,我们完全有理由相信会有类似的结果,即使确切的百分比会不同,事实上,在更大的屏幕,更加明显的速度优势指标甚至可能更大,但是,我们将留给任何研究生或读者中的其他研究人员,作为测量这个的练习。.

(对于移动的更多视觉设计考虑,manbetx官方网站手机版参加我们的全天手机平板电脑视manbetx官方网站手机版觉设计培训课程。)