扁平UI元素吸引的注意力较少，并造成不确定性(2017)

11摘要：平面接口通常使用弱指示符。在比较不同类型的可点击性线索的眼睛追踪实验中，具有弱能指的UI比具有强能指的UI需要更多的用户努力。

平面设计在数字接口中的流行与符号的稀缺不谋而合。许多现代用户界面已经去掉了用户用来理解什么是可点击的可感知提示。

使用眼动设备跟踪和可视化用户在界面上的眼动，我们调查了强可点击性指示符(传统的线索，如下划线、蓝色文本或光滑的3D按钮)和弱或缺失的指示符(例如，样式为静态文本或幻影按钮的链接文本)如何影响用户处理和理解网页的方式。

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

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

在某些情况下，这意味着使用已经平坦的页面，并添加阴影、渐变和文本处理来增加深度和增强可点击性指示符的强度。在其他情况下，我们取了一个已经有了强大的传统能指的页面，然后我们创建了一个超平面版本。我们小心翼翼地确保我们提供的修改是合理和现实的。

我们之所以选择这些界面作为学习材料，是因为在很大程度上，它们都是不错的设计，代表了更好的网站。我们开始隔离有能指的界面和没有能指的界面之间的区别，而不是评估这些网站的设计。

对于每个刺激对，我们编写了一个简短的任务，将用户的注意力引导到页面上的特定交互元素上。例如，对于酒店网站，任务是：“您将看到来自酒店网站的页面。预订这个旅馆房间。当您找到要点击的位置时，请告诉我们。“

所有18个页面设计和所有9个任务的措辞都可以在侧边栏中找到。

我们使用眼球跟踪设备和一台台式计算机进行了定量实验。我们招募了71名普通网民参加实验。向每位参与者展示了9个网站的一个版本，并为该页面分配了相应的任务。一旦参与者看到他们想要点击以完成任务的目标UI元素，他们就会说“我找到了”并停止。

我们跟踪了参与者在执行这些任务时的眼球运动。我们测量了每页上的注视次数，以及任务时间。(当凝视停留在页面上的兴趣点时，就会发生注视。)。

这两个衡量标准都反映了用户的努力：完成任务花费的注视和时间越多，处理工作量就越高，任务就越困难。此外，我们通过聚合参与者在页面上看得最多的区域来创建热图可视化。

这项研究是作为受试者之间的设计进行的-每个参与者只看到每个页面的一个版本。我们随机分配到每个页面的任一版本，以及参与者查看页面的顺序。(有关设计定量研究的更多信息，请参阅我们关于测量用户体验的课程。)。

所有参与者在开始真正的任务之前，都在同一刺激下开始一项练习任务，以确保他们理解了说明。特别是像这样的定量研究，使用练习任务来确保参与者理解说明是一个好主意。(最好在开始真正的研究之前进行试点测试，以解决任何方法问题。)。

这个实验不是可用性研究。我们的目标是看看用户如何处理单个页面设计，以及他们找到目标元素的难易程度，而不是确定设计中的可用性问题。(实时网站的可用性研究很少涉及网站上的单个页面；大多数情况下，人们被要求在整个网站中导航以实现目标。)。

当我们比较每个页面的平均注视次数和平均浏览时间时，我们发现：

弱能指版本的平均时间显著高于强能指版本。参与者平均多花22%的时间(即，较慢的任务表现)看那些有弱能指的页面。

弱能指版本的平均注视次数显著高于强能指版本。平均而言，人们对弱能指页面的注视增加了25%。

(通过以地点为随机因素的配对t检验，这两个发现都是显著的，p<；0.05。)。

这意味着，当查看符号较弱的设计时，用户会花更多时间查看页面，并且他们必须查看页面上更多的元素。因为这个实验使用了有针对性的可查找性任务，所以花更多的时间和精力浏览页面是不好的。这些发现并不意味着用户对页面的“参与度”更高。相反，他们认为参与者很难找到他们想要的元素，或者当他们第一次看到它时没有信心。

对于弱能指设计来说，任务时间增加22%可能看起来很可怕。但请记住，我们的指标反映了查找点击位置所花费的时间。我们测量的任务非常具体，只代表了实际Web任务的一小部分。在经常使用网页的情况下，人们会在其他任务上花费更多时间，比如阅读页面上的信息。当你加上这些其他方面时，一项完整的任务(比如买一双新鞋)的减速通常会低于我们测量的22%。

另一方面，弱能指设计中增加的点击不确定性有时可能会导致人们偶尔点击错误的东西-这是我们在这项研究中没有衡量的。从不正确的点击中恢复很容易耗费更多时间，特别是因为用户并不总是能立即意识到自己的错误。除了实际浪费的时间之外，不确定性增加和授权减少带来的情感影响是平庸的体验设计如何伤害品牌认知的一个例子。

热图是一种量化可视化，它聚合了眼睛注视刺激(UI)的次数和持续时间。它们可以从许多参与者的凝视数据中产生，只要他们都看着同样的刺激，完成同样的任务。

基于所有参与者数据的热图传达了有关与任务相关的页面区域的重要信息(假设参与者数量足够高)。在我们的颜色编码中，红色区域是那些受到最多和最长注视的区域。橙色、黄色和紫色区域受到的关注较少，没有覆盖颜色的区域没有被任何测试参与者看到。

当比较每个页面对的两个版本(强能指与弱能指)时，我们发现页面分为两组：两个版本的用户凝视模式几乎相同的页面，以及用户凝视模式不同的页面(如热图所示)。

在我们测试的页面中，9对中有6对具有不同的用户凝视模式。除了意符强度之外，我们消除了给定对中页面设计中的所有其他变体，因此我们可以得出结论，意符改变了用户在其任务中处理页面的方式。

当比较这6对页面时，出现了一个主要的不同之处。这些页面的弱能指版本导致了整个页面上更广泛的注视分布：人们不得不更多地环顾四周。这一结果强化了我们的发现，即弱能指页面比强能指页面需要更多的注视和更多的时间。

我们从来没有看到相反的模式：没有一个强能指版本比它的弱能指版本有更广泛的分布。

这一差异表明，参与者必须在弱能指版本中考虑更多潜在的互动因素。因为目标元素(链接、标签、按钮、滑块)缺乏强有力的传统符号，所以它们没有同样的力量来吸引参与者的注意力或信心。在许多情况下，参与者专注于目标元素，然后转移到页面上的其他元素-想必是因为他们没有立即认识到它是任务的解决方案。

在这六个网站中，有一个页面对在热图上表现出了特别显著的差异。最初用于创建刺激的界面是来自精品珠宝网站的之字形布局。页面布局有三个部分，每个部分都有一个标题、简短的文本段落、产品图像和文本链接。

为了创建页面的强版本，文本链接被赋予了传统的链接处理：蓝色和带下划线的文本。为了创建弱版本，我们从超平面设计的常见策略中获得了灵感，并使文本链接与静态文本相同。文本链接的位置(段落下方)在两个刺激中保持相同。

参与者被要求在现场找到珍珠首饰。预期的目标是页面底部的“珍珠商店”链接。

弱能指版本在初级导航上显示红色区域，在3年：珍珠航向上也显示红色区域。相比之下，目标链接在强能指变体中受到的注视最多。当我们检查单个参与者的数据时，我们发现许多看到弱能指版本的用户(24个参与者中的9个)停留在副标题处，而从来没有看过文本链接。他们认为他们可以点击副标题到达珍珠首饰，而没有继续向下看到链接。

在强意符版本中，86%(29人中有25人)的参与者首先专注于标题，然后转移到珍珠商店目标链接。在弱版本中，只有50%(24个中的12个)遵循了这一模式。(这一差异在统计上意义重大；P<；0.005。)。设置为静态文本样式的链接不会将用户的眼睛从副标题向下吸引，而传统风格的强链接会吸引用户的目光。

9个位点中有3个在强能指与弱能指的凝视模式上没有差异。为什么这三个页面对几乎相同，而其他六个页面对显示出显著的差异？

这些答案为我们提供了一些关于平面UI何时可以在不破坏交互的情况下工作的有趣信息。

其中一个刺激对的目标元素是内联文本链接：浅紫色的无下划线链接与传统的蓝色下划线链接。在这对实验中，弱刺激热图在包含目标链接的段落上只显示了非常宽泛的注视分布。

这表明，与普通文本相比，内联链接的低对比度呈现方式可能是一个稍弱的能指，但并不是显而易见的。然而，在“灿烂地球”的例子中，缺乏链接的对比色产生了很大的影响，如上所示。我们可以推测，这是一个对比度连续体：链接和周围文本之间的颜色对比度越强，用户认出它们的机会就越高。如果我们在Ally Bank的弱版本中使用浅灰色突出显示颜色，我们可能会看到凝视模式中更戏剧性的差异。只要内联文本链接以对比色显示，即使没有下划线，用户也会认识到它们的用途。

另外两个在弱版本和强版本之间没有明显热图差异的刺激对与其他刺激相比有一些共同的特征：

信息密度低。页面包含相对较少的内容和充足的空白，这意味着即使不是很突出的内容也会脱颖而出，因为它们不会与许多其他页面元素竞争。

传统布局。元素(按钮、链接、导航)位于用户通常期望的标准位置。

突出的、高对比度的目标。与周围的物品相比，目标元素的对比度很高，并且有足够的空间将它们与这些元素分开，使它们更引人注目。

我们希望我们的用户拥有简单、无缝和愉快的体验。用户需要能够查看页面，并立即理解他们的选项。他们需要能够看一眼他们正在寻找的东西，并立即知道，“是的，就是这样。”

问题不在于用户永远看不到符号较弱的UI元素。这是因为，即使他们确实看到了薄弱的元素，他们也没有信心这是他们想要的，所以他们继续在页面周围寻找。

点击性符号较弱的设计浪费了用户的时间：人们需要查看更多的UI元素，在页面上花费更多的时间，如热图、平均注视次数和平均任务时间所反映的那样。这些发现都表明，有了弱能指，用户获得的赋权和果断的感觉就会减少。他们正在经历点击的不确定性。

这些发现还证实，扁平或略扁平的设计在某些条件下比其他条件下工作得更好。正如我们在这个实验中看到的，当网站具有低信息密度、传统或一致的布局，并将重要的互动元素放在与周围元素脱颖而出的地方时，弱能指的潜在负面影响就会减弱。

理想情况下，为了避免点击不确定性，这三个标准都应该满足，而不是一两个。如果站点包含大量潜在的压倒性内容，或者具有全新的页面布局或模式，则在采用超平面设计时应谨慎行事。这些特征呼应了我们的建议，即采用平面UI而不破坏站点上的交互。

请注意，这些特征也是良好的、基本的UX设计最佳实践：视觉简单性、外部一致性、清晰的视觉层次和对比度。一般来说，如果你有一个关心用户研究的有经验的UX团队，你会比其他不关心用户研究的产品团队在平面设计上做得更好。如果你的设计已经很强大，平面设计带来的任何潜在弱点都会得到缓解。如果您正在进行常规的用户研究，您在实现平面UI时所犯的任何错误都将被识别并纠正。

为了从这个实验中获得可比较的、可解释的结果，我们必须让用户在单个页面上完成非常集中、简短的任务。在现实生活中，用户不会这样做任务。他们到达你的网站后，并不知道你是谁，也不知道你在做什么。他们导航到页面，但不确定是否会在那里找到他们要找的东西。他们探索产品和选项。

记住，可发现性和可发现性是有区别的。强指示符在用户关心查找特定内容的情况下很有帮助。在您关心用户发现他们不知道存在的功能的情况下，它们绝对是至关重要的。

注：这篇文章的发表引发了关于平面设计的大量辩论。我已经写下了对我听到的关于这项研究的一些问题和关注的答复。