菜单

平面UI元素吸引注意力较少并导致不确定性

通过 凯特莫兰2017年9月3日

摘要:扁平接口通常使用弱指示符在比较不同类型的可点击性线索的眼球跟踪实验中,具有弱指示符的UI需要比强者更多的用户努力。


的受欢迎程度flat manbetx官方网站手机版在数字接口中恰好与稀缺性相吻合极大的可能性许多现代ui扯掉了明显的提示,用户依赖于理解什么是可点击的。

使用眼球跟踪设备跟踪和可视化用户跨界面的眼动,我们调查了如何强大的可点击性(下划线等传统的线索,蓝色文本或光滑的3 d按钮)薄弱或缺乏的可能性(例如,样式为静态文本或幻影按钮的链接文本)会影响用户处理和理解网页的方式。

关于研究

网页用作刺激

有许多因素会影响用户与界面的交互为了直接研究交互元素视觉处理中传统,弱和不存在的符号之间的差异,我们需要删除任何混淆变量。

我们从实际网站上获取了9个网页并对其进行了修改,以创建每个页面的两个几乎相同的版本,具有相同的布局,内容和视觉风格这两个版本的不同之处仅在于对交互式元素(按钮,链接,制表符,滑块)使用强,弱或不存在的符号。

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

对比两个版本的酒店网页
Two modified versions of a detail page for a hotel 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.

我们选择这些界面作为学习材料,因为在大多数情况下,它们是代表网络上更好的网站的体面的manbetx官方网站手机版我们开始分离富含能指和穷人能力的界面之间的差异,而不是评估这些网站的manbetx官方网站手机版。

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

  • 电子商务(书店,太阳镜零售商,高级珠宝)
  • 非营利
  • 旅馆
  • 旅行(汽车租赁,航班搜索引擎)
  • 技术
  • 金融

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

全部18页manbetx官方网站手机版和所有9个任务的措辞可以在侧栏中找到。

方法

我们进行了定量的实验使用视线追踪设备和台式电脑我们招募了71名普通网络用户参与实验每个参与者都被呈现了9个站点的一个版本,并为该页面提供了相应的任务一旦参与者看到他们想要点击完成任务的目标UI元素,他们就会说“我找到了”并停止了。

我们追踪眼球运动的参与者在他们执行这些任务我们测量了每个页面上的注视数量以及任务时间(当凝视停留在页面上感兴趣的位置时,会发生固定)。

这两项措施都反映了用户的努力:执行任务所需的注意力和时间越多,处理工作量就越大,任务就越困难此外,我们通过聚合参与者在页面上查看次数最多的区域来创建热图可视化。

该研究是作为一个主体之间的manbetx官方网站手机版进行的 - 每个参与者只看到每个页面的一个版本我们将分配随机分配到每个页面的任一版本,以及参与者查看页面的顺序(参见我们的课程衡量用户体验更多manbetx官方网站手机版荷兰国际集团(ing)定量研究。)

所有参与者都开始执行相同刺激的练习任务,以确保他们在开始实际任务之前理解指令特别是对于像这样的定量研究,使用练习任务来确保参与者理解指令是个好主意(这也是最好的行为试点测试之前开始研究真正消除任何方法论问题。)

该实验不是可用性研究我们的目标是如何处理用户个人页面manbetx官方网站手机版,和他们可以轻易地找到目标元素,没有发现可用性问题在manbetx官方网站手机版(实时网站的可用性研究很少涉及网站上的单个页面;大多数情况下,人们被要求浏览整个网站以实现目标。)

结果

页面上的修复次数和时间

当我们比较平均固定次数和人们查看每个页面的平均时间时,我们发现:

  • 平均时间弱指示符版本的强度指示符显着高于强指示符版本参与者平均花费多花了22%的时间(i.e., slower task performance) looking at the pages with weak signifiers.
  • 平均固定次数弱指示符版本的强度指示符显着高于强指示符版本人们平均而言固定次数增加25%在具有弱能指的页面上。

(发现重要的配对t检验与网站的随机因素,p < 0.05)。

这意味着,当看到一个带有弱能指的manbetx官方网站手机版时,用户花更多的时间看页面,他们要看更多的元素在页面上。由于此实验使用了目标可查找性任务,花在页面上的更多时间和精力并不好这些发现并不意味着用户更加“参与”这些页面相反,他们建议参与者努力找到他们想要的元素,或者在他们第一次看到它时不自信。

这个弱势定型者的任务时间延长了22%,可能看起来很糟糕但请记住,我们的指标反映了在查找点击位置时花费的时间我们测量的任务是非常具体和代表只是一个小的组件的web的任务在常规Web使用中,人们将更多时间花在其他任务方面,例如阅读页面上的信息当你添加这些其他方面时,完整任务的减速(例如购买一双新鞋子)通常会低于我们测量的22%。

另一方面,弱指示符中增加的点击不确定性有时可能会导致人们偶尔点击错误的东西 - 我们在这项研究中没有测量到的东西Recovering from incorrect clicks can easily consume more time, especially since users don’t always realize their mistake immediately除了浪费的实际时间之外,增加不确定性和减少授权的情绪影响是一个平庸的例子经验manbetx官方网站手机版会伤害品牌感知

比赛地图

比赛地图是定量可视化,聚合刺激的眼睛注视的数量和持续时间(UI)它们可以从许多参与者的凝视数据中创建,只要他们都使用相同的任务查看相同的刺激。

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

比较每个页面对的两个版本(强指示符vs我们发现这些页面分为两组:两个版本的用户注视模式几乎完全相同,以及具有不同用户注视模式的那些(如热图所示)。

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

在我们测试的页面中,9对中有6对具有不同的用户注视模式。除了象征力量,我们排除了所有其他页面的变化manbetx官方网站手机版在一个给定的一对,所以我们可以得出这样的结论:能指标改变了用户在任务中处理页面的方式。

比较6对页面时出现了一个主要的总体差异这些页面的弱信号版本导致了整个页面中更广泛的注视分发:人们不得不环顾四周这一结果强化了我们的发现,即弱信号页面比强信号页面需要更多的注视和更多的时间。

我们从未见过相反的模式:没有强烈的能指版本比其弱指示符版本具有更广泛的分布。

Priceline搜索结果的强烈能指版本,热量集中在左侧边栏上弱版本,热量分布在页面上的其他元素上
Priceline搜索结果:强指示符版本(左)显示固定点聚焦在目标元素之上(出发时间滑块)weak-signifier版本(右)显示了一个面积较大的“热”,表明固定更均匀地分布在整个页面。

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

赫兹目标链接的两种治疗的特写镜头
赫兹主页:目标标签的特写(查看/修改/取消预订 )对于强(左)和弱(右)版本
Hertz强版的热图
赫兹主页,strong-signifier版本:参与者被要求取消租赁预订这个页面上热图显示大多数固定集中在目标选项卡(红色区域)所显示的那样。
Hertz弱版的热图
Hertz homepage, weak-signifier version: In addition to the focus on the target tab, this heatmap shows many fixations concentrated on the footer links, promotional items, and other items on the reservation form near the target tab. The increased focus on the weak page’s footer is especially troubling, because it’s a signal that the users were getting desperate.

在六个站点中,一个页面对在热图中显示出特别显着的差异用于创建刺激的原始界面是来自高级珠宝网站的曲折布局页面布局包含三个部分,每个部分都有标题,短文本段,产品图像和文本链接。

为了创建页面的强版本,文本链接被赋予了传统的链接处理:蓝色和带下划线的文本为了创建弱版本,我们从一个常见的策略中获取灵感,并使文本链接与静态文本相同文本链接的位置(以下段落)了相同的刺激。

杰出的地球,强大的版本
杰出的地球,strong-signifier版本

参与者被要求在网站上找到珍珠首饰预期目标是a商店的珍珠链接在页面底部。

不同的文本治疗特写镜头
灿烂的地球:目标链接的特写(商店的珍珠 )对于强(左)和弱(右)版本
对两个版本的Brilliant Earth页面的热图进行并排比较
辉煌的地球:强烈能指版本的热图(左)显示参与者将他们的注意力集中在感兴趣的区域,重点是目标链接相比之下,weak-signifier版本的热图(右)表明,尽管大多数固定都集中在pearl-jewelry部分,他们集中在目标上的栏目标题,而不是链接。

弱指示符版本在主导航上显示红色区域,以及在主导航上显示红色区域3年:珍珠标题相比之下,最注视目标链接收到strong-signifier变体当我们检查个体消费者的数据,我们发现许多用户24参与者(9)看到弱者能指版本停在副标题,而且从不看着文本链接他们相信他们可以点击那个小标题来达到珍珠首饰,并没有继续下去看到链接。

In the strong signifier version, 86% (25 out of 29) participants first fixated on the heading, and then moved to the商店的珍珠目标链接在弱版本中,只有50%(24个中的12个)遵循这种模式(这种差异在统计上是显着的; p <0.005。)像静态文本样式的链接并没有从用户的眼睛中剔除副标题,而强大的,传统风格的链接确实如此。

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

9个站点中的3个站点导致强和弱指示符之间的注视模式没有差异为什么这三个页面对几乎相同,而其他六个页面对显示出实质性差异?

The answers give us some interesting information about当平面UI可以工作而不会破坏交互

其中一个刺激对具有内嵌文本链接作为目标元素:浅紫色,非下划线链接vs传统的蓝色,带下划线的链接在这一对中,弱刺激热图仅显示包含目标链接的段落上的注视分布。

两个Ally Bank页面版本的并排比较
Ally Bank刺激对:强版本(左)使用带下划线的蓝色文本链接,而弱版本(右)使用紫色文本链接。

这表明,与常规文本相比,内嵌链接的低对比度表示可能是一个稍微弱一点的能指,但不是明显的然而,在Brilliant Earth的情况下,链接缺乏对比色,产生了很大的影响,如上所示We can speculate that there is a contrast continuum: the stronger the color contrast between links and surrounding text, the higher the chance that users will recognize them.  If we had used a light grey highlight color in the weak version of Ally Bank, we might expect to the see a more dramatic difference in the gaze patterns.只要是在线文本链接以对比色呈现,用户将认识到他们的目的,即使没有下划线。

与其他刺激相比,弱和强版本之间没有可辨别的热图差异的其他两个刺激对具有一些共同的特征:

  • 信息密度低。这些页面包含相对较少的内容和充足的空白区域,这意味着即使不突出的东西仍然很突出,因为它们没有与许多其他页面元素竞争。
  • 传统的布局。元素(按钮,链接,导航)位于标准位置,用户通常期望这些位置。
  • 突出的高对比度目标目标元素与周围的物品相比具有高对比度,并且有足够的空间将它们与这些元素分开,使它们更加明显。

弱指示符增加交互成本

我们希望我们的用户拥有简单,无缝和愉快的体验用户需要能够查看页面,并立即了解其选项他们需要能够看他们正在寻找什么,立即知道,“是的,就是这样。”

问题不是用户从来没有看到一个弱所指的UI元素即使他们确实看到了弱元素,他们也不会确信这是他们想要的东西,所以他们一直在寻找页面。

manbetx官方网站手机版s with弱点击指示符浪费用户的时间:人们需要查看更多UI元素并在页面上花费更多时间,如热图,平均固定次数和平均任务时间所捕获的那样这些研究结果都表明,用户是弱信号减少那种赋予权力和决断力的感觉他们遇到了点击不确定性。

When Flat manbetx官方网站手机版s Can Work

这些调查结果也证实,在某些条件下平坦或平坦的手机版本可以比其他条件更好地工作。正如我们在这个实验中看到的那样,当站点具有低信息密度,传统或一致的布局时,弱指示符的潜在负面后果会减少,并且将重要的交互元素放置在它们从周围元素中脱颖而出的位置。

理想情况下,为避免点击不确定性,应满足所有这三个标准,而不仅仅是一个或两个一个有大量潜在压倒性内容的网站,或全新的页面布局或图案,在采用超平的manbetx官方网站手机版时应谨慎行事这些特征呼应我们建议采用平面UI而不破坏交互在你的网站上。

请注意,这些特征也很好,basic 万博官网manbetx下载 manbetx官方网站手机版 best practice: visual simplicity, external consistency, clear visual hierarchy, and contrastIn general, if you have an experienced 万博官网manbetx下载 team that cares about user research, you’ll do better with a flat manbetx官方网站手机版 than other product teams that don’t如果你的manbetx官方网站手机版已经很强大,平面manbetx官方网站手机版所带来的任何潜在弱点都将得到缓解如果您正在进行定期用户研究,则会识别并纠正您在实施平面UI时所犯的任何错误。

研究的局限性

为了获得可比较的,来自该实验的可解释结果,我们不得不要求用户在单个页面上执行非常集中的简短任务在现实生活中,用户不会以这种方式完成任务他们到达您的网站,不知道您是谁或您做了什么他们导航到页面,并不确定他们会找到他们在那里寻找的东西他们探索产品和选项。

请记住,两者之间存在差异可发现性和可发现性在用户关心寻找特定内容的情况下,强有力的指示符非常有用它们在以下情况下绝对至关重要关心用户发现他们不知道存在的一个特征。

 

Note: 这篇文章的出版引发了关于平面manbetx官方网站手机版的大量争论我写过回答一些问题和疑虑我听说过这项研究。