菜单 关闭

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

通过 极光哈雷8月7日2016

简介:在发现大约快37%用户列表中的项目在一个web页面视觉指标在不同颜色和图标比单纯的文字。如果选择使用颜色和图标,图标具有强烈气味信息执行比单独的颜色。。


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

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

在丽移动网站上截图的产品清单页面
指标对电子商务网站常常用来表示独家产品或项目销售,丽的手机截图。com。。

一些可能使manbetx官方网站手机版用一个家庭多个视觉设计指标在同一时间——例如,一个电子商务网站可能要标记项”新的“和项目”在出售。”在这种情况下,最好的方法是什么设计这样的一个家庭的成员,所以他manbetx官方网站手机版们每个脱颖而出,用户可以快速定位项目?吗?

在本文中,我们报告一个定量研究,测量视觉设计差异在一个家庭的视觉指标如何影响人的能力定位相关的物品。manbetx官方网站手机版。

关于这项研究

我们选择4种不同的移动页面: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截图的点击测试记录每一个点击手机屏幕截图和衡量成功。UserZoom支持团队也提供了所有点击时间数据的请求。。

文本:不是有效的

所有非文本变化表现好于文本本身对所有变量来衡量。这些结果表明,人们依赖于次要线索如颜色或形状区分分组和快速轻松地找到相关信息。。

下面的图表显示了平均工作时间为每个类型的视觉指示器。条件的影响高度显著(p < 0。005)重复测量广义线性模型。两两比较显示文本条件比其他条件(p < 0。05)。。

条形图显示平均工作时间,文本只花了22秒,颜色和图标了14秒
参与者把更多时间和指标差异化定位所有项目设计仅靠文字相比其他类型的指标。manbetx官方网站手机版(酒吧更低。)

文本只慢了57%比表现最好的条件,不同的颜色和图标的视觉指标在相同的一对。。

条形图显示时间为第一个正确的点击,文本只花了14秒,颜色和图标了9秒
参与者使用文本明显慢来定位一个特定的项目指标相比其他类型的指标。(酒吧更低。)

即使只考虑了用户的时间(我发现任何匹配项。e。,平均时间为1正确点击),文本只有低于56%的条件下不同颜色和图标的视觉指标(p < 0。05)。此外,icon-only条件略快于色彩只条件(p < 0。01)。。

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

条形图的平均百分比正确的点击,文本只有平均76%正确的,颜色和图标平均85%正确
与文本指标,参与者至少成功地定位所有3项,他们必须找到一个页面上相比,对其他类型的指标。(酒吧越高越好。)

图标vs。颜色

本研究的动机之一是调查icon-only之间的任何差异和色彩只条件。文学对人类感知显示都是前注意功能,人们倾向于选择这些特性的变化很快,当观察显示,没有视觉搜索和检查每一项分别在屏幕上。(感觉对用户界面设计的影响是我们全天的培训课程进一步探索manbetx官方网站手机版人类思维和可用性。)

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

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

当我们只分析股票的数据表,我们发现图标状态表现明显优于颜色2的4指标(时间为1正确的点击,和时间为1点击,p < 0。05),并在任务时间略微更好(p = 0。08年)。。

条形图的时间数据,首先正确点击stock表任务,图标只有平均为7秒,颜色只有平均8秒
在定位一个项目参与者更快icon-only条件与色彩只相比条件(第一次点击的平均时间约等于平均时间第一次正确的点击,因为大多数第一次点击这些网站是正确的)。(酒吧更低。)

有几个可能的原因icon-only条件表现好于股市表现表上的色彩只条件:(1)箭头指标预期的设计元素manbetx官方网站手机版这种类型的数据;(2)颜色比图标模棱两可:用户必须推断,红色是股票下降和绿色股票增加,这可能需要稍微长的时间当用户第一次做出扣除;另一方面的意义向上或向下箭头更简单。。

需要做进一步的研究,以确定是否有任何可测量的优点的一种指标,或者如果这是密切相关的背景下,每一个设计。manbetx官方网站手机版。

都是最好的

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

结合一个独特的图标的颜色为每个类型的指标设计中使用证明manbetx官方网站手机版执行的所有用户体验指标的变化万博官网manbetx下载我们测量。只使用一种方法区分项目减少的可能性,人们会注意到小的差异。依靠颜色单独运行失败的风险色盲的用户也可能会更开放的解释,虽然只是换掉类似的设计图标或巧妙地调整指标的形状很容易被用户忽略扫描。manbetx官方网站手机版次要线索对不同指标(e。g。,一个独特的颜色除了一个独特的形状)增加用户会注意到他们的机会,并能够使用它们来快速找到感兴趣的项目。。

总之,我们建议如果你正在考虑一个家庭的视觉指标马克物品在你的网站上:

  • 使用颜色和图标分化是最明显的。。
  • 如果,出于某种原因,你正试图决定使用两个相当类似的图标两个指标之间或两个不同的颜色,喜欢添加一个独特的图标具有良好信息气味作为区分因素。。

在手机屏幕上我们测试,用户约快37%发现物品时视觉指标不同颜色和图标比单纯的文字。虽然我们没有测试这些指标较大的桌面屏幕上,我们完全有理由相信,一个类似的结果将被发现,即使准确的比例会有所不同——事实上,在更大的屏幕,更加明显的速度优势指标甚至可能更大,但我们会把它作为练习任何研究生或其他研究人员在读者来衡量。。

(更多移动、视觉设计注意事项manbetx官方网站手机版参加我们的全天视觉设计为移动manbetx官方网站手机版和平板电脑培训课程。)