菜单 关闭

扁平的用户界面元素吸引较少的注意力,并导致不确定性

通过 凯特·莫伦9月3日,二千零一十七

总结:平面界面通常使用弱的能指。在一个眼球跟踪实验中,对比不同类型的可点击性线索,弱能指的uis比强能指需要更多的用户努力。


流行的平面设计manbetx官方网站手机版在数字接口方面,缺少意符.许多现代的用户界面已经删除了用户用来理解可点击内容的可感知提示。

使用眼睛跟踪设备跟踪和可视化用户在界面上的眼球运动,我们调查了强可点击性标志(传统的线索,如下划线,蓝色文本或有光泽的3D按钮)和弱的或不存在的能指(例如,链接文本样式为静态文本或重影按钮)会影响用户处理和理解网页的方式。

关于研究

用作刺激的网页

影响用户与界面交互的因素很多。直接考察传统文化的差异,弱的,在交互元素的视觉处理中缺少能指,我们需要消除任何混淆的变量。

我们从实况网站中提取了9个网页,并对它们进行了修改,以创建两个几乎相同的网页版本。同样的布局,内容和视觉风格。这两个版本只在使用strong时有所不同,弱的,或缺少交互元素(按钮,链接,标签,滑块)。

在某些情况下,这意味着要取一个已经平了的页面并添加阴影,梯度,和文本处理,以增加深度和强度的点击性标志。在其他情况下,我们取了一个已经很强大的页面,传统的能指,我们创造了一个超平面版本。我们很小心,我们提供的修改是合理和现实的。

酒店网页两个版本的并排比较
酒店客房细节页面的两个修改版本:强版本(左)包括稍微3D样式的按钮,浅紫色仅用于交互元素;弱版本(右)有扁平的鬼按钮。

我们选择这些界面作为研究材料是因为,大多数情况下,它们是很好的设计,代表了网络上manbetx官方网站手机版更好的网站。我们开始分离能指丰富和能指贫乏的界面之间的差异,不评估这些网站的设计。manbetx官方网站手机版

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

  • 电子商务(书店,太阳眼镜零售商,精美珠宝)
  • 非营利组织
  • 酒店
  • 旅行(租车,飞行搜索引擎)
  • 技术
  • 财务

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

所有18页设计和所有9项manbetx官方网站手机版任务的措辞在侧边栏中可用。

方法论

我们用目测设备和台式电脑。我们招募了71名普通的网络用户参加实验。每个参与者都会得到9个站点的一个版本,并为该页面提供相应的任务。一旦参与者看到他们想要单击以完成任务的目标UI元素,他们说“我找到了”,然后停了下来。

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

这两个度量都反映了用户的努力:完成任务所花费的固定时间和时间越多,处理工作量越大,任务越艰巨。此外,我们通过聚集参与者在页面上看到最多的区域来创建heatmap可视化效果。

这项研究是作为受试者之间的设计进行的——每个参与者只看到一个版本的每页。manbetx官方网站手机版我们将任务随机分配到每个页面的任意一个版本,以及参与者看到页面的顺序。(请看我们的课程测量用户体验有关设计定量研究的更多信manbetx官方网站手机版息。)

所有参与者都是在相同的刺激下开始一项练习任务,以确保他们在开始真正的任务之前理解指令。尤其是像这样的定量研究,使用实践任务来确保参与者理解说明是一个好主意。(这也是最好的行为先导试验在开始真正的研究以解决任何方法论问题之前。)

这个实验不是可用性研究。我们的目标是了解用户如何处理单个页面设计,manbetx官方网站手机版他们很容易找到目标元素,不要在设计中发现可用性问题。manbetx官方网站手机版(实况网站的可用性研究很少涉及网站上的单个页面;最常见的是要求用户浏览整个站点以实现目标。)

结果

页面固定次数和时间

当我们比较平均固定次数和人们浏览每页的平均时间时,我们发现:

  • 这个平均时间弱能指版本明显高于强能指版本。参与者平均花费22%更多时间(即,任务执行速度较慢)查看带有弱标志的页面。
  • 这个平均固定次数弱能指版本明显高于强能指版本。平均而言,人们有25%以上固定在有弱能指的书页上。

(这两个发现都是显著的配对t检验,以位点为随机因素,P<0.05)。

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

弱能指设计的任务时间延长22%可能看起来很糟糕。manbetx官方网站手机版但请记住,我们的指标反映了寻找点击位置所花费的时间。我们测量的任务非常具体,只是实际Web任务的一小部分。在常规的网络使用中,人们花更多的时间在其他任务方面,如阅读页面上的信息。当你在其他方面加进去的时候,对于一项完整任务(比如买一双新鞋)来说,放缓的速度通常会低于我们测量的22%。

另一方面,弱能指设计中增加的点击不确定性有时可能导致人们偶尔点击错误的东西——这是我们在本研究中没有测量到的。manbetx官方网站手机版从错误的点击中恢复很容易消耗更多的时间,尤其是因为用户并不总是立刻意识到他们的错误。除了浪费的实际时间,不确定性的增加和权力的减少对情绪的影响是一个如何平庸的例子。体验设计会损害品牌认知manbetx官方网站手机版.

异族英雄

异族英雄是量化的可视化,集合了眼睛注视刺激(UI)的次数和持续时间。它们可以从许多参与者的注视数据中创建,只要他们都用同样的任务看待同样的刺激。

基于所有参与者数据的heatmap传递与任务相关的页面区域的重要信息(前提是参与者数量足够大)。在我们的颜色编码中,红色区域是固定时间最长和最长的区域。橙色,黄色的,紫色区域受到的关注较少,没有覆盖颜色的区域没有被任何测试参与者看到。

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

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

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

比较6对页面时,出现了一个主要的总体差异。页面的弱能指版本导致页面上的固定内容分布更广:人们必须多看看周围.这一结果强化了我们的发现,弱能指页面比强能指页面需要更多的固定和更多的时间。

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

价格线搜索结果的强能指版本,把热量集中在左侧边栏上。弱版本,热量分布在页面上的其他元素上
Priceline搜索结果:强大的能指版本(左)显示,固定在目标元素(离开时间滑块)上方。弱能指版本(右)显示了一个更大的“热区”,表明固定在页面上分布更均匀。

这种差异表明参与者必须在弱能指版本中考虑更多潜在的交互元素.因为目标元素(链接,标签,按钮,滑杆)不够结实,传统的能指,他们没有同样的能力吸引参与者的注意力或信心.在许多情况下,参与者专注于目标元素,但随后又转到页面上的其他元素上——大概是因为他们没有立即将其识别为任务的解决方案。

赫兹目标链路两种处理方法的特写
赫兹主页:目标标签的特写(查看/修改/取消预订 )对于强(左)和弱(右)版本
强版赫兹的热图
赫兹主页强能指版本:参与者被要求取消他们在本页的租车预订。heatmap显示目标选项卡周围聚焦的大多数固定(如红色区域所示)。
弱版赫兹的热图
赫兹主页弱能指版本:除了关注目标标签外,这个heatmap显示了许多集中在页脚链接上的固定,促销品,以及预定表上目标标签附近的其他项目。对弱势页面页脚的关注度增加尤其令人不安,因为这是用户绝望的信号。

在六个地点中,一页对在热图上显示出特别显著的差异。最初用来创建刺激的界面是一个精美珠宝网站的锯齿形布局。页面布局包括三个部分,每个都有一个标题,短段文字,产品形象,和文本链接。

要创建页面的强版本,文本链接被给予传统的链接处理:蓝色和带下划线的文本。要创建弱版本,我们从超平面设计的共同策略中获得灵感,manbetx官方网站手机版使文本链接与静态文本相同。文本链接的位置(在段落下面)在两个刺激中保持不变。

灿烂的大地,强版本
灿烂的大地,强能指版本

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

不同文字处理的特写
光明地球:目标链接的特写镜头(商店珍珠 )对于强(左)和弱(右)版本
两个版本的“辉煌地球”页面的热图并排比较
光明地球:强能指版本(左)的热图显示参与者将注意力集中在感兴趣的区域上,以目标链接为中心。相反,弱能指版本(右)的热图表明,虽然大多数固定装置都集中在珍珠首饰区,他们集中在路段标题上,而不是目标路段上。

弱能指版本在主导航上显示红色区域,以及在3年:珀尔航向。相反,目标链接在强能指变体中接收到大多数固定。当我们检查单个参与者的数据时,我们发现许多看到弱能指版本的用户(24个参与者中的9个)停在副标题处,从未看过文本链接。他们相信他们可以点击那个副标题,找到珍珠首饰,但没有继续往下看链接。

在强大的能指版本中,86%(29人中的25人)首先关注标题,然后搬到商店珍珠目标链路。在弱版本中,只有50%(24个中的12个)遵循这种模式。(这一差异具有统计学意义;p<0.005.)链接的样式像静态文本一样,并没有吸引用户的目光从副标题往下看,当强者,传统风格的链接。

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

9个位置中有3个在强能指和弱能指的注视模式上没有差异。为什么这三页对几乎相同,其他六对显示出显著差异?

答案给了我们一些有趣的信息当扁平用户界面可以在不破坏交互的情况下工作时.

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

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

这表明,低对比度的直线链接呈现,与普通文本相比,可能是一个稍弱的能指,但并非显而易见。在光明的地球上,链接缺少对比色,然而,影响很大,如上所示。我们可以推测有一个连续的对比度:链接和周围文本之间的颜色对比度越强,用户识别它们的几率越高。如果我们在Ally Bank的弱版本中使用浅灰色突出显示颜色,我们可能期望看到在注视模式上有一个更大的差异。只要行内文本链接以对比色呈现,用户将认识到他们的目的,即使没有下划线。

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

  • 信息密度低。页面内容相对较少,空白较大,也就是说,即使是那些不太突出的东西也会突出,因为它们没有与其他页面元素竞争。
  • 传统布局。元素(按钮,链接,导航)位于标准位置,用户通常期望的位置。
  • 突出的,高对比度目标.与周围物品相比,目标元素对比度高,有足够的空间将它们与这些元素分开,使它们更加引人注目。

弱能指增加交互成本

我们希望我们的用户拥有简单的体验,无缝的,令人愉快。用户需要能够查看页面,立即了解他们的选择。他们需要能够快速浏览所需信息,“是的,就是这样。”

问题并不是用户从来没有看到一个弱标志的UI元素。即使他们看到了薄弱环节,他们不相信这是他们想要的,所以他们一直在浏览网页。

manbetx官方网站手机版设计与弱可点击性意味着浪费用户时间:人们需要查看更多的UI元素并在页面上花费更多的时间,被热天俘虏,固定的平均计数,以及平均任务时间。这些发现都表明,对于弱能指,用户是少了那种赋权和决断的感觉.他们遇到了点击不确定性。

当平面设计可以工作时manbetx官方网站手机版

这些发现也证实了扁平或扁平的ISH设计在某些条件下比其他设计更有效。manbetx官方网站手机版正如我们在这个实验中看到的,当站点的信息密度较低时,弱能指的潜在负面影响会减小,传统或一致的布局,把重要的互动元素放在远离周围元素的地方。

理想的,为了避免点击不确定性,这三个标准都应该得到满足,不止一两个。包含大量潜在压倒性内容的网站,或者全新的页面布局或模式,采用超平面设计时应小心操作。manbetx官方网站手机版这些特征回波我们建议在不破坏交互的情况下采用扁平用户界面在你的网站上。

注意,这些特征也很好,基本的用户体万博官manbetx官方网站手机版网manbetx下载验设计最佳实践:视觉简单,外部一致性,清晰的视觉层次结构,对比.一般来说,如果你有一个经验丰富的用户体验团队,关心用户研究,万博官网manbetx下载与其他产品团队相比,平面设计的效果更好。manbetx官方网站手机版如果你的设计已经manbetx官方网站手机版很强大,任何由平面设计引入的潜在弱点都将得到缓解。manbetx官方网站手机版如果你正在进行定期的用户调查,您在实现扁平用户界面时所犯的任何错误都将得到识别和纠正。

研究的局限性

为了获得可比性,实验的可解释结果,我们必须让用户集中精力,单页上的短任务。在现实生活中,用户不会这样做。他们到达你的网站,不知道你是谁或者你在做什么。它们导航到页面,不知道他们一定会找到他们要找的东西。他们探索产品和选项。

记住这两者之间有区别可发现性和可发现性.在用户关心找到特定事物的情况下,强大的符号是有用的。在以下情况下,它们绝对是至关重要的注意用户发现他们不知道存在的功能。

注:这篇文章的出版引起了关于平面设计的大量争论。manbetx官方网站手机版我已经写了对一些问题和顾虑的回答我听说这项研究。