这popularity of平面设计in digital interfaces has coincided with a scarcity of意符。Many modern UIs have ripped out the perceptible cues that users rely on to understand what is clickable.

使用眼镜设备跟踪和可视化跨接口的眼睛运动,我们调查了如何强点的点击性指示灯(traditional clues such as underlined, blue text or a glossy 3D button) and弱或无能指(例如,称为静态文本或Ghost按钮的链接文本)会影响用户进程和理解网页的方式。

关于研究

网页用作刺激

影响用户与界面交互的因素很多。为了直接研究传统、弱、缺能指在交互元素视觉处理中的差异,我们需要去除任何混杂变量。

我们从现场网站上获取了9个网页,并对它们进行了修改,以创建两个几乎相同的版本,每个页面的布局、内容和视觉风格都相同。这两种版本的不同之处在于,交互元素(按钮、链接、选项卡、滑块)使用强、弱或不存在的符号。

In some cases, that meant taking an already flat page and adding shadows, gradients, and text treatments to add depth and increase the strength of the clickability signifiers. In other cases, we took a page that already had strong, traditional signifiers, and we created an ultraflat version. We were careful that the modifications we provided were reasonable and realistic.

两个版本的酒店网页的并排比较
两个酒店的详细信息页面的修改版本room: The strong version (left) included slightly 3D style buttons, and the light purple color was used only on interactive elements; The weak version (right) had flat ghost buttons instead.

我们选择这些界面作为学习材料,因为在大多数情况下,他们是代表网络上更好的网站的体面设计。我们开始隔离富有的富有富有的差点之间的差异,而不是评估这些网站的设计。

我们从6个不同的域中选择了9个站点:

  • 电子商务(书店,太阳镜零售商,精美珠宝)
  • 非营利组织
  • Hotel
  • Travel (car rental, flight search engine)
  • Technology
  • 金融

对于每个刺激对,我们写了一项简短的任务,可以将用户注意到页面上的特定交互元素。例如,对于酒店网站来说,任务是:“您将从酒店网站看到一个页面。预订酒店客房。当您在您选择的位置时,请告诉我们。“

所有18页设计和所有9项任务的措辞在侧栏中可用。

方法

We conducted a quantitative experiment usingeyetracking.设备和台式计算机。我们招募了71名普通的网络用户参加了实验。每个参与者都得到了9个站点的一个版本,并给出了该页面的相应任务。当参与者看到他们想要点击的目标UI元素来完成任务时,他们说“我找到了”,然后停止了。

我们跟踪了参与者在执行这些任务时的眼睛运动。我们测量了每个页面上的固定次数以及任务时间。(当注视停留在页面上某个感兴趣的地方时,就会发生固定)。

这两种措施都反映了用户的努力:完成任务所花费的固定时间和时间越多,处理工作量越高,任务越难。此外,我们通过聚合参与者在页面上查看最多的区域,创建了heatmap可视化。

该研究作为受试者之间的设计进行,每个参与者只能看到每个页面的一个版本。我们随机分配给每个页面的任一版本,以及参与者看到页面的顺序。(见我们的课程衡量用户体验更多关于设计定量研究。)

所有参与者都开始使用同一刺激措施的实践任务,以确保他们在开始真实任务之前了解说明。特别是与这样的定量研究,使用实践任务是一个好主意,以确保参与者了解说明。(这也是最好的飞行员测试在甚至开始真实研究之前熨烫任何方法问题。)

This experiment was not a usability study. Our goal was to see how users processed individual page designs, and how easily they could find the target elements, not to identify usability problems in the designs. (Usability studies of live sites rarely involve a single page on a website; most often, people are asked to navigate through an entire site to accomplish a goal.)

Results

页面的定影数量和时间数

当我们比较平均固定数和平均时间花在看每页的时间,我们发现:

  • average amount of time弱者版本比强大明星版本显着更高。On average participants spent22%的时间更多(i.e., slower task performance) looking at the pages with weak signifiers.
  • 平均固定次数弱者版本比强大明星版本显着更高。平均而言,人们有25% more fixations上the pages with weak signifiers.

(这两个发现都是通过作为随机因子的配对T检验,P <0.05的成对T检验。)

这意味着,当我们看到一个符号较弱的设计时,用户花了更多的时间查看页面,他们不得不查看页面上的更多元素。Since this experiment used targeted findability tasks,在页面周围看着的更多时间和精力并不好. 这些发现并不意味着用户对页面的“参与”程度更高。相反,他们建议参与者很难找到他们想要的元素,或者当他们第一次看到元素时就没有信心。

弱电池设计的22%的任务时间更长可能看起来很可怕。但请记住,我们的指标反映了在寻找点击时花费的时间。我们测量的任务非常具体,并且只代表了真实网络任务的一个小组件。在常规Web使用中,人们在其他任务方面花费更多时间,例如阅读页面上的信息。添加在这些其他方面时,全部任务的放缓(例如为一双新鞋店购物)通常低于我们测量的22%。

另一方面,弱能指设计中点击不确定度的增加,有时会导致人们偶尔点击错误的东西——这是我们在本研究中没有测量到的。从错误的点击中恢复很容易消耗更多的时间,特别是因为用户并不总是立即意识到他们的错误。除了实际浪费的时间之外,不确定性增加和权力减少对情绪的影响就是平庸的一个例子体验设计会伤害品牌感知

暖步

暖步是指将刺激(UI)上的眼睛注视次数和持续时间聚合在一起的定量可视化。只要所有参与者都在同一个任务中观察相同的刺激,他们就可以从许多参与者的注视数据中创建它们。

基于所有参与者的数据传达关于与任务相关的页面区域的重要信息(如果参与者的数量足够高)。在我们的颜色编码中,红色区域是那些收到最多和最长的固定的区域。橙色,黄色和紫色区域的注意力不那么关注,任何测试参与者都不会看到没有覆盖颜色的区域。

比较每个页面对的两个版本(强的指数与弱指数)的两个版本,我们发现页面落入了两组:两个版本的用户凝视模式的那些,以及具有不同用户凝视模式的人(如图所示)热量)。

具有不同用户注视模式的页面对

我们测试的页面,6 out of the 9 pairs had different user gaze patterns.除了发电机实力外,我们消除了给定对内的页面设计中的所有其他变体,所以我们可以得出结论指示灯更改了用户在任务中处理页面的方式。

One major overarching difference emerged when comparing the 6 pairs of page. The weak-signifier versions of the pages resulted in a broader distribution of fixations across the page:人们不得不环顾更多。这一结果加强了我们的研究结果,即弱者网页需要更多的固定,而不是强大的传感器。

我们从未看到反向模式:没有强大的发电机版本比其弱者的弱点分布更多。

强大的辅助版本的Priceline搜索结果,热量聚焦在左侧栏上。弱版本,热量分布在页面上的其他元素上
Priceline搜索结果:强大的辅助版本(左)显示了对目标元素(出发时间滑块)上方的固定。弱者版本(右)显示更大的“热量”区域,表示固定在整个页面上更均匀分布。

这种差异表明参与者必须考虑弱能指版本中更具潜在交互的元素。因为目标元素(链接,标签,按钮,滑块)缺乏强大的传统意义者,它们没有同样的权力吸引参与者的注意力或信心。在许多情况下,参与者在目标元素上固定,但随后将转移到页面上的其他元素 - 可能是因为他们没有立即将其作为任务的解决方案。

Closeup of the two treatments of the Hertz target link
赫兹主页:目标选项卡的特写(查看/修改/取消预订)对于强(左)和弱(右)版本
Hertz强大版本的热线图
Hertz主页,强大的辅助版本:参与者被要求取消本页的租金预订。热线图显示了聚焦围绕目标标签的大多数固定(如红区域所示)。
Hertz弱版的Heatmap
赫兹主页,弱能指版本:除了关注目标选项卡外,此热图还显示了许多集中在目标选项卡附近的预订表单上的页脚链接、促销项目和其他项目上的固定。对弱势页面页脚的关注度增加,特别令人不安,因为这是用户绝望的信号。

在六个站点中,一个页面对显示了散热器特别剧烈的差异。用于创建刺激的原始界面是来自精美珠宝网站的Zig-Zag布局。页面布局选匀三个部分,每个部分都有标题,文本,产品图像和文本链接的短段。

要创建该页面的强版本,文本链接将获得传统链接处理:蓝色和下划线的文本。要创建弱版本,我们从Ultraflat设计的共同策略中获取了灵感,并使文本链接与静态文本相同。文本链接的位置(下面的段落)在两个刺激中都留下了相同的。

辉煌的地球,强大的版本
辉煌的地球,强大的辅助版本

要求参与者在网站上找到珍珠珠宝。预期的目标是一个商店珍珠link at the bottom of the page.

不同的文本治疗特写镜头
Brilliant Earth: Closeup of the target link (商店珍珠)对于强(左)和弱(右)版本
辉煌地球页面版本的热插拔并排比较
辉煌的地球:强大的发电机版本(左)的热线图表明,参与者集中了他们对感兴趣领域的固定,侧重于目标链接。相比之下,弱者版本(右)的热线图表明,尽管大多数固定都集中在珍珠珠宝部分上,但它们集中在段标题而不是目标链路上。

这weak-signifier version showed red areas on the primary navigation, as well as on the3年:珍珠标题。相比之下,目标链路在强辅助变量中接收大多数固定。当我们检查个人参与者数据时,我们发现许多用户(24名参与者中的9个)在副标题停止了弱者版本的用户(24名参与者中的9个),并且从未查看了文本链接。他们相信他们可以点击该副标题来到达珍珠珠宝,并没有继续看到链接。

在强大的辅助版本中,86%(25分中)参与者首先固定在标题上,然后搬到了商店珍珠目标链接。在弱版本中,只有50%(24分)遵循此模式。(这种差异是统计学意义; P <0.005。)像静态文本一样风格的链接没有从副标题中汲取用户的眼睛,而强大的传统风格的链接。

页面对,具有几乎相同的用户注视模式

3 of the 9 sites resulted in no differences in the gaze patterns between strong and weak signifiers. Why are these three page pairs nearly identical, while the other six pairs showed substantial differences?

这answers give us some interesting information about当扁平UIs可以工作而不破坏交互时

其中一个刺激对具有作为目标元素的线文本链接:浅紫色,突出的链接与传统蓝色,带下划线的链接。在这对中,弱刺激热线图仅在含有目标链路的段落上显示了非常稍薄的固定分布。

Ally Bank Page版本的并排比较
盟友银行刺激对:强版本(左)使用带下划线的蓝色文本链接,而弱版本(右)使用紫色文本链接。

这表明与常规文本相比,在线链路的低对比度呈现可能是略微较弱的指示,但不可知。在辉煌的地球的情况下,然而,缺乏对比的光学颜色具有很大的影响,如上所示。我们可以推出一个对比的连续统一体:链接与周围文本之间的颜色对比越强,用户将识别它们的机会越高。如果我们在盟友银行的弱版本中使用了浅灰色突出颜色,我们可能会期望在凝视模式中看到更戏剧性的差异。只要在线文本链接是以对比的颜色提出,用户将认识到他们的目的那even without an underline.

这other two stimulus pairs with no discernible heatmap differences between the weak and strong versions had some traits in common, when compared to the rest of the stimuli:

  • Low information density.页面内容相对较少,空白空间充足,这意味着即使是那些没有突出的内容也依然突出,因为它们没有与其他页面元素竞争。
  • 传统布局。元素(按钮,链接,导航)位于标准位置,用户通常希望它们是。
  • 突出的,高对比度目标。与周围的物品相比,目标元素是高对比度,并且有足够的空间来将它们与这些元素分开,使它们更加明显。

弱能指增加交互成本

We want our users to have experiences that are easy, seamless, and enjoyable. Users need to be able to look at a page, and understand their options immediately. They need to be able to glance at what they’re looking for and know instantly, “Yep, that’s it.”

这problem is not that users never see a weakly signified UI element. It’s that even when they do see the weak element, they don’t feel confident that it is what they want, so they keep looking around the page.

设计弱点点击性指挥机浪费用户的时间:人们需要查看更多UI元素并在页面上花更多的时间,如热插拔,平均固定数数和平均任务时间。这些发现都表明,具有薄弱意义者,用户是越来越少的赋权和毁容。他们正在遇到点击不确定性。

When Flat Designs Can Work

这些调查结果还证实,平面或平坦的设计可以在某些条件下工作比其他风格更好。如我们在该实验中看到的,当网站具有低信息密度,传统或一致的布局时,弱意味道的潜在负面后果减少,并将重要的交互元件放在周围元素中的重要互动元件。

理想情况下,为了避免点击不确定,所有三个标准都应该满足,而不仅仅是一个或两个。一个网站如果有大量潜在的压倒性内容,或者全新的页面布局或模式,在采用超平面设计时,应谨慎行事。这些特征回波our recommendations for adopting a flat UI without damaging the interaction在您的网站上。

请注意,这些特征也很好,基本UX设计最佳实践:视觉简单,外部一致性,清晰的视觉层次结构和对比度。一般来说,如果您有一个经验丰富的UX团队,请关注用户研究,您可以更好地设计比其他产品团队更好。如果您的设计已经很强,则会减轻平面设计引入的任何潜在弱点。如果您正在进行常规用户研究,将识别和纠正您在实现平UI的任何错误。

研究的局限性

为了获得可比性,可解释的结果来自此实验,我们不得不要求用户在单个页面上进行非常焦点,短期任务。在现实生活中,用户不这样做任务。他们到达你的网站,不知道你是谁或你所做的事。他们导航到页面,不知道他们会找到他们在那里寻找的东西。他们探索产品和选择。

Remember that there’s a difference betweenfindability and discoverability。强大的意小者有助于用户关心找到特定事物的情况。它们在境地绝对至关重要care that users discover a feature that they didn’t know existed.

笔记:本文的发表引起了关于平面设计的大量争论。我写了对一些问题和疑虑的回应我听说过这项研究。