菜单

曲折图像文本布局使扫描效率降低

通过 金弗莱厄蒂2017年11月26日

摘要:交替列表布局中使用的装饰图像导致用户在眼球跟踪研究中扫描页面时发现绊倒用户在文本和图像垂直对齐的页面上有效扫描。


图像 - 无论是大图片还是缩略图 - 都已成为现代网站manbetx官方网站手机版的一个组成部分In particular, when companies describe a complex topic or explain their offerings on storytelling pages such as the homepage or the How it works page, it is common to see a piece of descriptive text accompanied by an associated image, followed, on the next row, by another similar text–image pairing, and so on.

传统模式(我们称之为对齐布局)在另一个下面显示一行,所有图像在布局的一侧,所有文本在相对的站点上对齐模式的更新近且越来越常见的替代方案是之字形布局,它在每个水平行上交替放置图像和文本曲折布局最近的流行可能是因为它打破了单调并增加了长页面的视觉兴趣。

线框布局比较
两列布局:锯齿形布局(左)交替放置页面下方的图像和文本描述,而传统的对齐布局(右)将图像一个在另一个之下。

Eyetracking研究表明,可预测的布局有助于用户有效地读取和扫描信息我们知道对齐相似的项目(如在对齐的布局中)使它们更容易扫描我们想知道那些未对齐但在一致模式中交替的项目(如锯齿形布局)是否也易于扫描一致性通常对可用性有益,因此这是一个似是而非的假设为了回答这个问题,我们开展了一项眼球跟踪研究,该研究使用之字形与对齐布局来研究页面的扫描模式。

关于研究

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

A group of about 30-35 participants was shown only one variation of each web page, and the other version of the manbetx官方网站手机版 was not mentioned or discussed with them在每个页面上,用户必须执行基本的信息收集任务,例如“了解Splitwise服务的工作原理。”然后我们观察用户使用这些页面时的阅读模式。

分割布局比较
Left: The original web page using the zigzag layout; Right: A mockup of the same webpage using an aligned layout.

图像价值影响阅读模式

参与者的扫描模式受到图像质量及其信息内容的影响。

  • 信息价值比对齐更重要。具有信息价值的图像比没有信息价值的图像看得更多具有信息价值的图像是对齐还是交替的并不重要:有关产品的大量信息的图像被详细研究并在用户的眼睛向下移动页面时多次参考因此,当图像不仅仅是装饰时,两种布局都同样有效(对信息图像的更多关注复制了我们7年前进行的不同眼动跟踪研究的发现,表明许多基本的UX指南随着时间的推移保持不变。)

例如,专门从事美容产品的月度订阅服务网站Boxycharm.com使用的图像在页面的锯齿形和对齐的变体中引起了用户的广泛关注用户试图了解每月盒子中包含的内容,仔细研究了美容产品的图片智能手机和平板电脑应用程序的图像显示了数字产品和特权,但收到的修复次数较少,但仍被多次查看和引用。

 

  

BoxyCharm凝视情节比较
Boxycharm.com的两种变体的凝视图显示,当图像和文本有意义时,无论布局是锯齿形(左)还是对齐(右),它们都会收到许多修复。每个凝视图都反映了一个参与者的眼球运动(注视图是叠加在静态屏幕截图上的叠加图,用于显示一个或多个用户在该页面上查看的位置圆点表示固定,点的大小与固定的持续时间成正比。)
BoxyCharm Clear
没有凝视固定的页面的屏幕截图显示了每个图像在理解产品和相关在线体验时的价值。

在BoxyCharm.com上,参与者了解该服务并没有明显的阅读模式许多参与者最初被吸引到第一排美容产品的引人注目的图像,但除此之外,他们的眼睛在文本和图像之间移动了几次,并根据引起他们注意的任何东西导航到下一行。

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

  • 用户更喜欢忽略装饰图像。在图像主要是装饰性的页面上,用户很快就了解到这些对于他们的任务并不重要,并将大多数注意力集中在文本上这是我们所描述的“烫手山芋”阅读模式的一个例子Eyetracking Web可用性书。

例如,在HelloFresh.com上,图像是装饰性的,信息价值很小Hellofresh.com的曲折和对齐版本的热图显示了用户如何在第一行内容中固定图像,然后选择大部分忽略页面上的其余图像。

HelloFresh HeatMap比较
Zigzag版本的34个参与者热图(左)和32个参与者热图的对齐变化(右图)显示人们花费相对较少的时间来处理HelloFresh.com的信息不佳图像(热图是定量可视化,聚合页面上眼睛注视的数量和持续时间They combine data from a large number of participants.  The red areas received the most and longest fixations橙色,黄色和紫色区域受到较少关注,没有覆盖颜色的区域未被任何测试参与者查看。)

如果你仔细观察热图,你会注意到之字形布局的图像比它们上面的紫色“热量”略微更多 - 也就是说,它们比对齐布局中的相应图像吸引了更多的目光。这些凝视可能是偶然的:当人们将眼睛移动到下一行时,他们首先遇到了图像,然后迅速将注意力重定向到文本因此,之字形布局中的图像非常像眼睛的障碍下面详细讨论这种行为。

Z字形布局中的装饰图像难以忽略

用户优化扫描模式到任务at hand and spend the minimum effort (i.e., fixations) to achieve their goals.  As soon as people have determined that images aren't valuable for their task, they will start avoiding them(这种扫描模式,眼睛周围无助的图像被称为“图像作为障碍课程,“因为用户必须解决图片才能获得页面上有意义的文字。”

例如,在Waze.com上,我们的研究参与者开始避开图像,因为他们的眼睛向下移动在对齐的布局中,图像很容易被忽略,用户可以毫不费力地扫描对齐的文本主体,如下面的凝视图所示然而,在锯齿形布局中,图像更成问题在下面的凝视图中,参与者确实注意到之字形布局中的图像然而,他凝视的视频显示他偶然发现了这些图像中的一些:在他的目光被一张照片捕获后,他立即将眼睛重新定向远离文本。

Waze Gaze Plot比较
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.

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

  • 之字形布局是不太可预测,难以扫描图像障碍。
  • 图像放置会导致残留固定。用户完成从一行读取文本后,向下滚动当眼睛停留在同一个地方时,页面向下移动,固定在滚动之前替换其正在查看的内容的任何内容对于锯齿形布局,当用户向下滚动页面时,图像会替换文本这种意外固定被称为残留固定,并不是故意的。

在Hellofresh.com上观察到同样的绊脚石和重定向行为(参见来自Hello Fresh的gazeplots侧边栏)。

复杂的图像使眼睛黯然失色

虽然用户偶然发现了Waze和HelloFresh,但在Splitwise.com上,绊脚石和重定向行为更加明显。布局和剩余固定的不可预测性引起了Splitwise.com的绊脚石但是,另一个因素使得避免图像更加困难:大部分照片都包含文字还有一些人positioned close to the text bodies换句话说,图像看起来像文本并与之竞争,因此人们很难识别故事中的下一个文本块。

Some of the images contained screenshots of the application or relevant emails sent by the service to its subscribers.  Although these images seem informational, they’re too complex正如预期的那样,用户会查看第一张图像来衡量价值,但是照片中复杂细节的水平 提出得太早了对于试图了解服务基础知识的用户,他们此时并未发现它们有用因此,参与者也倾向于避免这些图片。

对齐版本的Splitwise.com的凝视图显示,参与者有目的地看着前两个图像来衡量价值,然后自信地从一个文本块向下移动到下一个,同时忽略了无用的图像。
Splitwise Zigzag凝视情节
A gaze plots of the zigzag version of the page shows that this (different) participant looked at the 2nd and 3rd images for only a moment before redirecting her attention to the text. 
当她阅读页面的锯齿形版本时,显示参与者注视的剪辑显示她在看了第2和第3张照片后,将注意力重定向到了文本此剪辑速度减慢到原始速度的90%。

其他常见行为

无论使用何种类型的布局,我们在所有测试中都会观察到一些其他常见行为这些行为为我们提供了有关图像在信息页面上的实用性以及如何定位它们以获得最大效率的额外见解。

许多用户开始在左侧扫描。  3 of the 4 web pages we tested had an introductory hero space at the top, with the rows of text–image pairs starting below the foldMost participants naturally began fixating on the left side of the page由于西方文化从左到右阅读,用户正准备阅读任何内容。

热图GazePlot Startonleft
这个凝视图显示了一个用户的眼睛注视,因为他正在看着Hellofresh.com用户的眼睛开始固定在第一排的左侧。

However, when the content on the right side of the first row was positioned significantly higher than the content on the left, users were forced to start on the right side (simply because the left side looked empty, while all the information seemed concentrated on the right).

Scroll上的Splitwise Gaze Plot折叠
第一行内容右侧的图像明显高于左侧文本用户首先看到图像,左侧没有文字,因此他们注意到文本前面的图像。

Many users scanned images as they scrolled back up the page一旦用户到达页面底部(或他们认为相关内容的结尾),他们通常会向上滚动页面在这个“向下”的时间里,他们的眼睛更注重图像而不是文字,在图片完成之前最后一瞥。

Hellofresh向下滚动
The left gaze plot shows the user’s eye fixations as he moves down the page; low-information images were given few fixations正确的凝视情节显示,当他向上滚动页面时,他更多地关注图像。

调查结果摘要

观察用户阅读之字形和对齐布局的内容后,我们可以学习并应用于我们评估的内容页面的一些内容:

  • 信息图像比装饰图像更受关注装饰图像看起来较少,用户更喜欢在对齐和锯齿形布局中忽略它们。
  • 之字形布局使得忽略装饰图像变得更加困难,并且导致用户偶然发现这些无用的图像并立即重定向他们的修复。

设计要点

Although stumbling fixations on a page may seem insignificant, 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, whereas a clean and clear room is much more pleasant and functional.

确定如何布置页面首先要考虑您的内容决定它是否会受益于图像,如果是这样,请三思而后行哪些图片将增加信息价值。

  • 信息图像在对齐和锯齿形布局中运行良好。Meaningful images that support the text and tell a visual story are beneficial and will garner a lot of attention.  Valuable imagery works well in both an zigzag and aligned layout用户希望花时间查看图片以了解产品,因此导致重定向的意外修复在两种布局中都不是问题。
  • The first images in the list set the tone and make users decide whether to ignore the rest.特别注意第一行中使用的图像的信息值。
  • 将装饰图像对齐页面。装饰图像可能是有益的建立品牌识别在网页上,即使用户只查看前几个,在周边视觉中看到它们,或者在向上滚动页面时简要地浏览它们However, it’s best to align the images to support efficient scanning, since users prefer to ignore these images如果您的页面只有2-3行内容,则可能有一个例外在这些情况下,曲折布局可能没问题,因为它只是一个短列表。
  • 避免过于复杂的图像。某些图片可能包含太多信息:您可能认为它们对于了解产品至关重要,但用户可能会不堪重负,尤其是当他们对您的产品或内容不太熟悉时这些复杂的图像也可能与信息文本竞争选择补充文本的信息图像,不要增加用户的太多认知负荷
  • 不要为了布局而使用图像。在某些情况下,您可能会有一个有意义的图像与文本模糊配对如果是这样,那很好一张照片可能胜过千言万语 - 有时候但是如果你没有有意义的图像,不要只使用填充图像,因为你想象的布局需要它们每个图像都应该有目的,即使它正在建立品牌。
  • 顶部对齐文本与装饰图像。 Think of users scrolling down the page and uncovering contentIf your images are decorative, do not position them at a higher point in the row than the corresponding text.  Horizontally align them with corresponding text to avoid drawing the eye and then causing the user to redirect.
  • 始终将高信息内容放在第一行的左侧许多人甚至在内容向上滚动之前就开始固定在左边,然后如果装饰图像恰好位于他们正在寻找的位置,则必须重定向无论您选择在第一行放置图像还是文本,请确保它具有足够的信息值,以免造成浪费的修复。