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

图片——无论是大图片还是缩略图——已经成为现代网页设计不可或缺的一部分。特别是,当公司描述一个复杂的主题或故事页面上解释他们的产品如主页或它是如何工作的页面,通常看到的描述性文本伴随着一个相关的图像,之后,下一行,由另一个类似的text-image配对,等等。

传统的模式(我们称之为对齐布局)显示一个在另一个下面的行，所有的图像在布局的一边和所有的文本在相反的网站。对齐模式的另一种更近期且越来越常见的替代方案是锯齿形布局，它可以在每个水平行上替换图像和文本的位置。锯齿形布局最近很流行，可能是因为它打破了单调，为长页面增加了视觉趣味性。

眼球追踪研究表明，可预测的布局有助于用户有效阅读和扫描信息。我们知道，将相似的项对齐(比如在对齐的布局中)可以使它们更容易被扫描。我们想知道那些没有对齐但在一致的模式(如锯齿布局)中交替出现的项目是否也很容易扫描。一致性通常有利于可用性，所以这是一个合理的假设。为了回答这个问题，我们进行了一项眼球追踪研究，调查了使用锯齿形和对齐布局的页面扫描模式。

关于这项研究

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

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

形象价值影响阅读模式

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

• 信息价值比一致性更重要。有信息价值的图片比没有信息价值的图片更受关注。具有信息价值的图像是对齐还是交替出现并不重要:当用户的眼睛向下移动页面时，包含大量产品信息的图像会被详细研究并多次引用。因此，当图像不仅仅是装饰的时候，两种布局的效果是一样的。(对信息图像的更多关注重复了我们7年前进行的另一项眼球追踪研究的发现，该研究表明，许多基本的UX指南会随着时间的推移而保持不变。)

例如，Boxycharm.com是一个专门提供美容产品月度订阅服务的网站，它使用的图像在曲折的页面和对齐的页面变化中都吸引了用户的大量关注。用户仔细研究了这些美容产品的图片，试图了解每月盒子里会包含什么。这款智能手机和平板电脑应用程序展示的数字产品和福利的图片得到的关注较少，但仍然被浏览和引用了几次。

在BoxyCharm.com上，参与者在学习这项服务时并没有明显的阅读模式。许多参与者最初被第一排漂亮的美容产品图片所吸引，但除此之外，他们的眼睛在文本和图片之间移动了几次，然后根据最先吸引他们注意力的内容导航到下一排。

用户很快就意识到这些图片对了解这项服务很有价值，所以他们花时间去看这些图片。因此，这两种模式都没有显示出更高的效率或效益，因为用户同时看图片和相关的文字描述。

• 用户喜欢忽略装饰性的图像。在那些图片本质上主要是装饰性的页面上，用户很快就意识到这些对他们的任务来说并不重要，于是他们把大部分注意力都集中在了文字上。这是“烫手山芋”阅读模式的一个例子眼动网络可用性书。

例如，在HelloFresh.com上，图像只是装饰性的，几乎没有信息价值。Hellofresh.com的锯齿形和对齐版本的Heatmaps都显示了用户是如何专注于内容的第一行的图像，然后选择忽略页面上的其他图像。

如果你仔细观察热图，你会注意到锯齿形布局中的图像上方有更多的紫色“热度”——也就是说，它们比对齐布局中相应的图像吸引更多的目光。这种凝视很可能是偶然的:当人们的眼睛移到下一排时，他们首先看到的是图像，然后迅速将注意力转移到文本上。因此，锯齿形布局中的图像就像眼睛的障碍物。下面将详细讨论这种行为。

锯齿形布局中的装饰图像很难被忽视

用户优化任务的扫描模式用最少的努力(即，执着)去实现他们的目标。一旦人们认定图像对他们的任务没有价值，他们就会开始回避它们。(这种眼睛在无用图像周围转的扫描模式被称为“图像作为障碍场，因为用户必须绕过图片才能看到页面上有意义的文字。)

例如，在Waze.com上，当我们的研究参与者的眼睛向下移动时，他们开始避开图片。在对齐的布局中，图像很容易被忽略，用户可以毫不费力地向下扫描对齐的文本主体，如下面的凝视图所示。然而，在锯齿布局中，图像更有问题。在下面的凝视图中，参与者似乎确实注视着锯齿形布局的图像。然而，他凝视的视频显示，他无意中绊倒了一些图像:当他的目光被一张图片捕捉到后，他立即将目光从这张图片转移到文本上。

重定向行为有两个原因:

• 锯齿形布局是难以预测的，使得扫描周围的图像障碍变得困难。
• 图像放置会引起残余的固定。当用户读完一行文本后，他们向下滚动。页面会向下移动，而眼睛会停留在原来的位置，盯着滚动之前所看到的内容。对于锯齿布局，当用户向下滚动页面时，图像会取代文本。这种偶然的固定称为残余固定，而不是故意的。

在Hellofresh.com上也观察到了同样的磕磕绊绊和重定向行为(参见从Hello Fresh的gazeplot边栏）.

复杂的图像压倒了眼睛

虽然用户在Waze和HelloFresh上出错了，但在Splitwise.com上出错和重定向的行为更加明显。布局的不可预测性和残留的固定因素导致了Splitwise.com的失败。然而，还有一个额外的因素使得避免图片变得更加困难:大多数照片都包含文字和一些人靠近文本主体的位置．换句话说，图像看起来像文本，并且与文本相竞争，所以人们很难识别故事中的下一段文本。

其中一些图片包含应用程序的截图或该服务发送给用户的相关电子邮件。虽然这些图像看起来很有信息，但它们太复杂了。正如预期的那样，用户看第一张图片来衡量价值，但是照片中复杂细节的水平过早出现对于试图理解服务的基础知识的用户来说，因此他们认为这些知识在这一点上没有帮助。结果，参与者也倾向于避开这些照片。

其他常见的行为

我们在所有测试中都观察到了其他一些常见行为，而不管使用的布局类型是什么。这些行为让我们对图片在信息页面上的效用有了更多的了解，以及如何将它们定位到最高效率。

许多用户开始扫描左边。在我们测试的4个网页中，有3个网页在顶部设置了一个介绍性的英雄空间，而文本图像对的排列则从下方开始。大多数参与者自然而然地开始盯着页面的左侧。因为西方文化是从左到右阅读，所以用户准备阅读任何出现的内容。

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

许多用户在回滚页面时扫描图像．一旦用户到达页面的底部(或他们认为相关内容的末尾)，他们通常会将页面向上滚动。在这段“安静”的时间里，他们的眼睛更多地盯着图片而不是文字，在他们完成之前最后瞥了几眼图片。

总结调查结果

在观察用户阅读锯齿形和对齐布局的内容后，我们可以学到一些东西，并应用到内容页面，就像我们评估的内容页面:

• 信息意象比装饰意象更受关注。装饰性的图像被看得更少，用户更喜欢忽略它们在对齐和之字形布局。
• 锯齿形的布局让用户很难忽略装饰性的图像，并导致用户在这些无用的图像上摔倒，并立即改变他们的固定注意力。

设计外卖

虽然在页面上的磕磕绊绊似乎无关紧要，但很多偶然的固定注意力真的会累积起来，就像不整洁的房间里的杂乱一样，让阅读变得更混乱，效率更低。许多物品摆放不当会让你慢下来，而一个干净整洁的房间会让你更愉快，更实用。

决定如何布局一个页面，首先要考虑你的内容。决定它是否能从图像中获益，如果是，仔细考虑哪些图片能增加信息价值。

• 信息图像在对齐和之字形布局中工作得很好。支持文本并讲述视觉故事的有意义的图像是有益的，会获得很多关注。有价值的图像工作在曲折和对齐布局。用户想要花时间看图片来理解产品，所以偶然的固定导致重定向在这两种布局中都不是问题。
• 列表中的第一个图像设置了基调，并让用户决定是否忽略其余的图像。请特别注意第一行中使用的图像的信息值。
• 将装饰性图像沿页面向下对齐。装饰性的图像可以有益建立品牌识别在一个网页上，即使用户只看前几页，在他们的周边视觉中看到他们，或在他们滚动页面时简要地扫一眼他们。然而，最好是对齐图像以支持高效扫描，因为用户喜欢忽略这些图像。一个例外是，如果你的页面只有2-3行内容。在这些情况下，z字形布局可能是可以的，因为它只是一个简短的列表。
• 避免过于复杂的意象。有些图片可能包含过多的信息:您可能认为它们对理解产品至关重要，但用户可能会不知所措，特别是当他们不太熟悉您的产品或内容时。这些复杂的图像也可能与信息文本相竞争。选择补充文本的信息图像，不要增加太多用户的认知负荷．
• 不要为了布局而使用图像。在某些情况下，您可能会有一个有意义的图像与文本简介配对。如果是这样，那就太好了。一幅画有时胜过千言万语。但如果你没有一个有意义的图像，不要仅仅使用填充图像，因为你设想的布局需要它们。每个形象都应该有一个目的，即使是树立品牌。
• 顶部对齐的文字装饰图像。想象一下用户向下滚动页面并发现内容。如果你的图像是装饰性的，不要将它们放置在一行中比相应文本更高的位置。水平对齐它们与相应的文本，以避免绘制眼睛，然后导致用户重定向。
• 总是把高信息量的内容放在第一行的左边．许多人甚至在内容向上滚动之前就开始盯着左边，然后如果装饰图像恰好出现在他们正在看的地方，他们就不得不重定向。无论您选择在第一行放置图像还是文本，都要确保它携带足够的信息价值，以免造成不必要的固定。