菜单 关闭

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

通过 基姆弗莱厄蒂11月26日,2017

总结:Decorative images used in an alternating list layout caused users to stumble when scanning the page in an eyetracking study.用户可以在文本和图像垂直对齐的页面上进行有效扫描。


Images — whether large pictures or thumbnails — have become an integral part of modern web manbetx官方网站手机版design.In particular,当公司描述一个复杂的主题或在故事页面(如主页或工作原理页面)上解释他们的产品时,it is common to see a piece of descriptive text accompanied by an associated image,followed,on the next row,通过另一个类似的文本-图像配对,and so on.

传统模式(我们称之为aligned layout)一行接一行显示,with all images on one side of the layout and all text on the opposite site.A more recent and increasingly common alternative to the aligned pattern is thezigzag layout,它改变图像和文本在每一水平行上的位置。The zigzag layout's recent popularity is likely due to the fact that it breaks monotony and adds visual interest to a long page.

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

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

关于研究

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

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

Splitwise Layout Comparison
左:使用之字形布局的原始网页;右:使用对齐布局的同一网页的模型。

图像值影响阅读模式

Participants' scanning patterns were influenced by the quality of the images and their informational content.

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

例如,Boxycharm.com,a website for a monthly subscription service specializing in beauty products,使用的图像在页面的锯齿形和对齐变化中都吸引了大量用户的注意。The pictures of the beauty products were studied carefully by users trying to understand what would be included in the monthly box.智能手机和平板电脑应用程序的图像显示了数字产品和额外功能,获得的固定效果更少,但仍被多次观察和引用。

BoxyCharm凝视图比较
BoxyCharm.com的两个变体的凝视图显示,当图像和文本有意义时,他们收到了很多固定装置,布局是锯齿形(左)还是对齐(右)。每个凝视图反映了一个参与者的眼球运动。(A gaze plot is an overlay superimposed on a static screenshot that demonstrates where one or more users looked on that page.The dots indicate fixations,点的大小与固定时间成比例。)
清澈
页面的屏幕截图没有覆盖凝视固定,显示了每个图像在理解产品和相关在线体验方面的价值。

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

用户很快了解到这些图片对于理解服务很有价值,so they devoted time to look at them.因此,这两种模式都没有显示出更有效或更有益的效果,因为用户同时查看了图片和相关的文本描述。

  • 用户喜欢忽略装饰图片。On pages where images were primarily decorative in nature,users quickly learned that these were not important for their task and dedicated most of their fixations to the text.这是“热土豆”阅读模式的一个例子,在我们的眼睛跟踪网络可用性书。

For instance,on HelloFresh.com,the imagery was decorative and had little informational value.hellofresh.com的之字形版本和对齐版本的heatmap显示了用户如何关注第一行内容中的图像,and then chose to mostly ignore the rest of the images on the page.

Hellofresh热图比较
对于之字形版本(左)的34个参与者heatmap和其对齐变体(右)的32个参与者heatmap都显示,人们在hellofresh.com的信息差的图像上花费的时间相对较少。(Heatmaps are quantitative visualizations that aggregate the number and duration of eye fixations on a page.他们结合了大量参与者的数据。红色区域得到的固定时间最长、最长。Orange,yellow,紫色区域受到的关注较少,没有覆盖颜色的区域不会被任何测试参与者看到。)

如果你仔细观察热天,你会注意到锯齿形布局中的图像在它们上面有一点紫色的“热度”——也就是说,它们吸引的目光比对齐布局中相应的多。这些目光很可能是偶然的:当人们将目光移到下一排时,they first encountered the image and then quickly redirected their attention to the text.因此,在之字形布局中的图像对眼睛起到了很大的阻碍作用。下面将详细讨论这种行为。

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

用户优化任务的扫描模式at hand and spend the minimum effort (i.e.,固定)以实现他们的目标。一旦人们确定图像对他们的任务没有价值,他们会开始避开他们。(这种眼睛绕过无用图像的扫描模式被称为作为障碍物的图像,因为用户必须围绕图片进行工作,才能找到页面上有意义的文本。)

例如,在WAZE.com上,我们的研究参与者开始回避图像,因为他们的眼睛向下移动页面。In the aligned layout,images were easy to ignore,用户可以轻松地扫描对齐的文本体,如下图所示。然而,在之字形布局中,images were more problematic.在下面的凝视情节中,参与者似乎确实专注于锯齿形布局中的图像。然而,他凝视的视频显示,他无意中看到了其中的一些图像:在他的注视被一张照片捕捉之后,he redirected his eyes away from it and toward the text.

瓦泽凝视图比较
A gaze plot on the aligned version of Waze.com (left) shows how a user easily ignored images that were aligned on the left side.  A gaze plot of the zigzag layout of Waze.com (right) shows how a different participant fixated on the images in the first and second row as he was scrolling down the page,and then immediately redirected his gaze to the text.
A clip of the participant's gaze on the zigzag layout of Waze.com shows how he fixated on the images in the first and second rows as he was scrolling down the page,and then immediately redirected his gaze to the text. This clip is slowed down to 90% it's original speed.

重定向的行为是由于两个因素:

  • 之字形布局是不太可预测,making it difficult to scan around image obstacles.
  • 图像放置会导致残留的固定。用户从一行读取完文本后,它们向下滚动。当眼睛停留在同一位置时,页面向下移动,fixating on whatever replaces the content it was looking at before the scroll.对于之字形布局,当用户向下滚动页面时,图像将替换文本。这种意外固定称为残余固定,不是故意的。

The same stumbling and redirect behavior was observed on Hellofresh.com (see theHello Fresh的露台侧边栏

Complex Imagery Overwhelms the Eye

Although users stumbled on Waze and HelloFresh,splitwise.com上的绊倒和重定向行为更加明显。The unpredictability of the layout and the residual fixations caused stumbling on Splitwise.com.然而,另外一个因素使得避免图像变得更加困难:most of the photos contained textand some were放置在靠近文本正文的位置.换言之,图像看起来像文本,与之竞争,所以人们很难辨认出故事中的下一段文字。

一些图片包含应用程序的截图或服务发送给其用户的相关电子邮件。尽管这些图片似乎是信息性的,它们太复杂了。果不其然,用户看了第一张测量值的图像,but thelevel of complex detail in the photos was presented too earlyfor users trying to understand the basics of the service,因此,他们发现他们在这一点上没有帮助。因此,参与者也倾向于避免这些照片。

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

其他常见行为

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

Many users started scanning on the left.3 of the 4 web pages we tested had an introductory hero space at the top,文本-图像对的行从折叠下面开始。大多数参与者自然而然地开始关注页面的左侧。Because Western cultures read from left to right,用户正准备阅读即将到来的任何内容。

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

然而,when the content on the right side of the first row was positioned significantly higher than the content on the left,用户被迫从右侧开始(仅仅因为左侧看起来是空的,while all the information seemed concentrated on the right).

分眼图卷轴折叠
第一行内容右侧的图像明显高于左侧的文本。用户首先看到的图像左侧没有文本,so they fixated on the image before the text.

许多用户在向上滚动页面时扫描图像.一旦用户到达页面底部(或者他们认为相关内容的末尾),就可以他们经常翻页。在“停机”期间,their eyes fixated more on the images than on the text,在完成之前最后看了几眼照片。

Hellofresh scrolling down and up
The left gaze plot shows the user's eye fixations as he moves down the page;low-information images were given few fixations.右眼图显示他在翻页时更加关注图像。

调查结果摘要

After observing users reading content in both zigzag and aligned layouts,我们可以学习一些东西,并将其应用于内容页面,如我们评估过的内容页面:

  • 信息意象比装饰意象更受关注。Decorative images were looked at less and users preferred to ignore them in both aligned and zigzag layouts.
  • 锯齿形的布局使得忽略装饰性图像变得更加困难,并导致用户在这些无用的图像上绊倒,并立即重新定向他们的固定。

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

尽管在一页上绊倒的固定内容似乎微不足道,a lot of accidental fixations can really add up just like clutter in an untidy room,making reading messier and less efficient.  Many items out of place can slow you down,而一个干净、干净的房间则更加舒适和实用。

确定如何布局页面首先要考虑内容。决定它是否能从图像中获益,如果是这样,think twice about which pictures will add information value.

  • 信息图像在对齐和曲折布局中工作良好。有意义的图像,支持文本和讲述一个视觉故事是有益的,将获得大量的关注。有价值的图像在锯齿形和对齐布局中都能很好地工作。用户希望花时间查看图片以了解产品,so accidental fixations causing redirects are not a problem in either layout.
  • 列表中的第一个图像设置音调,并让用户决定是否忽略其余图像。特别注意第一行中使用的图像的信息值。
  • 沿页面向下对齐装饰图像。装饰性图像有利于树立品牌形象在网页上,即使用户只查看其中的前几个,在他们的周边视觉中看到他们,or glance at them briefly as they scroll back up the page.然而,最好将图像对齐以支持高效扫描,since users prefer to ignore these images.一个例外可能是如果您的页面只有2-3行内容。在这些情况下,a zigzag layout may be OK because it's only a short list.
  • 避免过于复杂的图像。Some images may have too much information:  you may consider them crucial to the understanding of the offering,但用户可能会不知所措,尤其是当他们不太熟悉您的产品或内容时。These complex images may also compete with the informational text.选择补充文本且不会增加太多用户信息的图像认知负荷.
  • Don't use imagery for the sake of the layout.在某些情况下,您可能有一个有意义的图像与一个文本的蓝带配对。如果是这样,那太好了。一张照片有时值一千个字。But if you don't have a meaningful image,don't just use filler images because the layout you've envisioned calls for them.Each image should have a purpose,even if it is establishing brand.
  • Top-align text with decorative images.想象一下用户向下滚动页面并发现内容。If your images are decorative,不要将它们放在行中高于相应文本的位置。将它们与相应文本水平对齐,以避免吸引眼球,进而导致用户重定向。
  • 始终将高信息内容放在第一行的左侧.Many people started fixating on the left even before the content scrolled up,然后,如果一个装饰性的图像恰好位于他们所看到的位置,就必须重新定向。无论您选择在第一行放置图像还是文本,确保它具有足够的信息价值,以免造成浪费的固定。