菜单 关闭

锯齿形图像–文本布局使扫描效率降低

通过 基姆弗莱厄蒂11月26日,二千零一十七

总结:交替列表布局中使用的装饰性图像导致用户在眼睛跟踪研究中扫描页面时绊倒。用户可以在文本和图像垂直对齐的页面上进行有效扫描。


图片——无论是大图片还是缩略图——已经成为现代网页设计不可或缺的一部分。manbetx官方网站手机版特别地,当公司描述一个复杂的主题或在讲述故事的页面(如主页或工作原理页面)上解释他们的产品时,通常会看到一段描述性文字伴随着一幅相关的图像,跟着,在下一排,通过另一个类似的文本-图像配对,等等。

传统模式(我们称之为对齐布局)一行接一行显示,所有图片位于布局的一侧,所有文本位于另一个站点。最近和越来越普遍的替代对齐模式的方法是锯齿形布置,它交替在每一水平行上放置图像和文本。这种锯齿形布局最近的流行可能是因为它打破了单调,增加了长页面的视觉趣味。

线框布局比较
两列布局:锯齿形布局(左)交替放置图像和文本描述。而传统的对齐布局(右)则一个接一个地显示图像。

眼动研究表明,可预测的布局有助于用户有效地阅读和扫描信息。我们知道对齐类似的项目(如在对齐的布局中)使它们更容易扫描。我们想知道,在一个一致的模式(如在之字形布局)中,不对齐但交替的项目是否也容易扫描。一致性通常对可用性很好,所以这是一个合理的假设。为了回答这个问题,我们进行了一项眼睛跟踪研究,研究了使用之字形和对齐布局的页面扫描模式。

关于研究

我们从使用之字形模式的实时网站中选择了4个不同的网页。对于每一页,我们创建了一个变体,以对齐的布局显示内容,所有文本和图像在每一行中保持在右侧或左侧的位置。

一组约30-35名参与者只显示了每个网页的一个变体,另一个版本的设计没有被提及或与他们讨论。manbetx官方网站手机版在每一页上,用户必须完成一个基本的信息收集任务,比如“了解splitwise服务是如何工作的”。然后我们观察用户在使用这些页面时的阅读模式。

拆分布局比较
左:使用之字形布局的原始网页;右:使用对齐布局的同一网页的模型。

图像值影响阅读模式

受试者的扫描模式受图像质量和信息内容的影响。

  • 信息价值比一致性更重要。具有信息价值的图像比没有信息价值的图像要多。有信息价值的图片是否对齐或交替并不重要:当用户的眼睛向下移动页面时,对含有大量产品信息的图片进行了详细研究并多次引用。因此,当图像不仅仅是装饰时,两种布局都同样有效。(对信息图像的关注程度的提高,重复了我们7年前进行的另一项眼睛跟踪研究的发现,显示许多基本的用户体验指导原则随着时间的推移保持万博官网manbetx下载不变。)

例如,BoxChanM.com一个专门为美容产品提供每月订阅服务的网站,使用的图像在页面的锯齿形和对齐变化中都吸引了大量用户的注意。用户仔细研究了这些美容产品的图片,试图了解每月的包装盒中会包括哪些内容。智能手机和平板电脑应用程序的图像显示了数字产品和额外功能,获得的固定效果更少,但仍被多次观察和引用。

BoxyCharm凝视图比较
BoxyCharm.com的两个变体的凝视图显示,当图像和文本有意义时,他们收到了很多固定装置,布局是锯齿形(左)还是对齐(右)。每个凝视图反映了一个参与者的眼球运动。(凝视图是一个叠加在静态屏幕截图上的覆盖图,显示一个或多个用户在该页面上的查看位置。点表示固定,点的大小与固定时间成比例。)
清澈
页面的屏幕截图没有覆盖凝视固定,显示了每个图像在理解产品和相关在线体验方面的价值。

在boxycharm.com上,在学习服务的参与者中没有明显的阅读模式。许多参加者最初被第一排的美容品吸引住了。但除此之外,他们的眼睛在文本和图像之间移动了好几次,然后根据首先吸引他们注意的内容导航到下一行。

用户很快了解到这些图片对于理解服务很有价值,所以他们花时间来观察它们。因此,这两种模式都没有显示出更有效或更有益的效果,因为用户同时查看了图片和相关的文本描述。

  • 用户喜欢忽略装饰图片。在那些以自然装饰为主的页面上,用户很快就意识到这些对他们的任务并不重要,他们把大部分的固定内容都用在了文本上。这是“热土豆”阅读模式的一个例子,在我们的眼睛跟踪网络可用性书。

例如,在hellofresh.com上,图像具有装饰性,几乎没有信息价值。hellofresh.com的之字形版本和对齐版本的heatmap显示了用户如何关注第一行内容中的图像,然后选择忽略页面上的其余图像。

Hellofresh热图比较
对于之字形版本(左)的34个参与者heatmap和其对齐变体(右)的32个参与者heatmap都表明,人们在hellofresh.com的信息差的图像上花费的时间相对较少。(热图是一个定量的可视化图像,集合了一个页面上眼睛注视的次数和持续时间。他们结合了大量参与者的数据。红色区域得到的固定时间最长、最长。橙色,黄色的,紫色区域受到的关注较少,没有覆盖颜色的区域不会被任何测试参与者看到。)

如果你仔细观察热天,你会注意到锯齿形布局中的图像在它们上面有一点紫色的“热”—也就是说,它们吸引的目光比对齐布局中相应的多。这些目光很可能是偶然的:当人们将目光移到下一排时,他们首先遇到图像,然后很快将注意力转向文本。因此,在之字形布局中的图像对眼睛起到了很大的阻碍作用。下面将详细讨论这种行为。

锯齿形布局中的装饰性图像很难被忽略。

用户优化任务的扫描模式在手头上花费最少的努力(即,固定)以实现他们的目标。一旦人们确定图像对他们的任务没有价值,他们会开始避开他们。(这种眼睛绕过无用图像的扫描模式被称为作为障碍物的图像,因为用户必须围绕图片进行工作,才能找到页面上有意义的文本。)

例如,在WAZE.com上,我们的研究参与者开始回避图像,因为他们的眼睛向下移动页面。在对齐的布局中,图像很容易被忽略,用户可以轻松地扫描对齐的文本体,如下图所示。然而,在之字形布局中,图像问题更大。在下面的凝视情节中,参与者似乎确实专注于锯齿形布局中的图像。然而,他凝视的录像显示,他无意中发现了其中的一些图像:在他的注视被一张照片捕捉之后,他把目光转向文字,避开文字。

瓦泽凝视图比较
waze.com(左)对齐版本上的凝视图显示了用户如何轻松忽略左侧对齐的图像。waze.com(右)之字形布局的凝视图显示了不同的参与者在向下滚动页面时如何注视第一行和第二行的图像,然后立刻把目光转向文字。
参与者凝视waze.com之字形布局的一段视频显示了当他向下滚动页面时,他是如何专注于第一行和第二行的图像的,然后立即将目光转向文字。这段视频被放慢到原来速度的90%。

重定向行为有两个原因:

  • 之字形布局是不太可预测,使扫描图像障碍物变得困难。
  • 图像放置会导致残留的固定。用户从一行读取完文本后,它们向下滚动。当眼睛停留在同一位置时,页面向下移动,固定在任何东西上取代了它在卷轴之前看到的内容。对于之字形布局,当用户向下滚动页面时,图像将替换文本。这种意外固定称为残余固定,不是故意的。

在hellofresh.com上也观察到了同样的绊倒和重定向行为(参见Hello Fresh的露台侧边栏

复杂的图像压倒了眼睛

虽然用户偶然发现了Waze和Hellofresh,splitwise.com上的绊倒和重定向行为更加明显。布局的不可预测性和残余的固定在splitwise.com上造成了绊倒。然而,另外一个因素使得避免图像变得更加困难:大多数照片都包含文本还有一些是放置在靠近文本正文的位置.换言之,图像看起来像文本,与之竞争,所以人们很难辨认出故事中的下一段文字。

一些图片包含应用程序的截图或服务发送给其用户的相关电子邮件。尽管这些图片似乎是信息性的,它们太复杂了。果不其然,用户看了第一张测量值的图像,但是照片中复杂细节的层次 介绍得太早了对于试图了解服务基础的用户,因此,他们发现他们在这一点上没有帮助。因此,参与者也倾向于避免这些照片。

Splitwise.com的一个对齐版本的凝视图显示,参与者有目的地观察前两幅图像以测量值,然后自信地将页面从一块文本移到另一块,同时忽略无用的图像。
分路之字形凝视图
页面之字形版本的凝视图显示,这个(不同的)参与者只看了第二和第三张图片一会儿,然后将注意力转移到文本上。
一段视频显示了参加者在阅读页面之字形时的注视,显示了她在看完图片2和3后,只看了一会儿就把注意力转移到文本上。这段剪辑被放慢到原来速度的90%。

其他常见行为

我们在所有测试中观察到的其他一些常见行为,不管使用的布局类型如何。这些行为让我们对信息页面上图像的实用性以及如何将其定位以获得最大效率有了更多的了解。

许多用户开始在左边扫描。在我们测试的4个网页中,有3个在顶部有一个介绍性的英雄空间,文本-图像对的行从折叠下面开始。大多数参与者自然而然地开始关注页面的左侧。因为西方文化是从左到右的,用户正准备阅读即将到来的任何内容。

热图开始图
这个凝视图显示了一个用户在看hellofresh.com时的眼睛注视。用户的眼睛从注视第一行的左侧开始。

然而,当第一行右侧内容的位置明显高于左侧内容时,用户被迫从右侧开始(仅仅因为左侧看起来是空的,而所有的信息似乎都集中在右边)。

分眼图卷轴折叠
第一行内容右侧的图像明显高于左侧的文本。用户首先看到的图像左侧没有文本,所以他们专注于文本之前的图像。

许多用户在向上滚动页面时扫描图像.一旦用户到达页面底部(或者他们认为相关内容的末尾),就可以他们经常翻页。在“停机”期间,他们的眼睛更多地盯着图像而不是文字,在完成之前最后看了几眼照片。

hellofresh向下和向上滚动
左眼图显示用户向下移动页面时的眼睛注视;低信息图像很少固定。右眼图显示他在翻页时更加关注图像。

调查结果摘要

在观察用户阅读“之字形”和“对齐”布局中的内容之后,我们可以学习一些东西并将其应用到内容页面,比如我们评估过的内容页面:

  • 信息意象比装饰意象更受关注。装饰性图像被少看,用户更喜欢忽略它们在对齐和曲折布局。
  • 锯齿形的布局使得忽略装饰性图像变得更加困难,并导致用户在这些无用的图像上绊倒,并立即重新定向他们的固定。

manbetx官方网站手机版设计要点

尽管在一页上绊倒的固定内容似乎无关紧要,很多偶然的固定会像凌乱房间里的杂物一样累积起来,使阅读变得更混乱,效率更低。许多项目不合适会减慢你的阅读速度,而一个干净、干净的房间则更加舒适和实用。

确定如何布局页面首先要考虑内容。决定它是否能从图像中获益,如果是这样,仔细考虑哪些图片会增加信息价值。

  • 信息图像在对齐和曲折布局中工作良好。有意义的图像,支持文本和讲述一个视觉故事是有益的,将获得大量的关注。有价值的图像在锯齿形和对齐布局中都能很好地工作。用户希望花时间查看图片以了解产品,因此,导致重定向的意外修复在任何布局中都不是问题。
  • 列表中的第一个图像设置音调,并让用户决定是否忽略其余图像。特别注意第一行中使用的图像的信息值。
  • 将装饰图像沿页面向下对齐。装饰性图像有利于树立品牌形象在网页上,即使用户只查看其中的前几个,在他们的周边视觉中看到他们,或者在它们向上滚动页面时短暂地瞥一眼。然而,最好将图像对齐以支持高效扫描,因为用户喜欢忽略这些图像。一个例外可能是如果您的页面只有2-3行内容。在这些情况下,一个之字形布局可能是可以的,因为它只是一个简短的列表。
  • 避免过于复杂的图像。有些图片可能包含太多信息:您可能认为它们对理解产品至关重要,但用户可能会不知所措,尤其是当他们不太熟悉您的产品或内容时。这些复杂的图像也可能与信息文本竞争。选择补充文本且不会增加太多用户信息的图像认知负荷.
  • 不要为了布局而使用图像。在某些情况下,您可能有一个有意义的图像与一个文本的蓝带配对。如果是这样,那太好了。一张照片有时值一千个字。但如果你没有一个有意义的形象,不要仅仅使用填充图像,因为您所设想的布局需要它们。每个图像都应该有一个目的,即使它正在建立品牌。
  • 文字与装饰性图像顶端对齐。想象一下用户向下滚动页面并发现内容。如果你的图像是装饰性的,不要将它们放在行中高于相应文本的位置。将它们与相应文本水平对齐,以避免吸引眼球,进而导致用户重定向。
  • 始终将高信息内容放在第一行的左侧.许多人甚至在内容向上滚动之前就开始关注左边的内容,然后,如果一个装饰性的图像恰好位于他们所看到的位置,就必须重新定向。无论您选择在第一行放置图像还是文本,确保它具有足够的信息价值,以免造成浪费的固定。