图像 - 无论是大图片或缩略图 - 已成为现代网页设计的一个组成部分。特别是,当公司描述一个复杂的主题或解释他们的讲故事页面的产品,例如主页或它的工作页面,它很常见,看到一系列描述性文本伴随着关联的图像,然后在下一行上伴随着,通过另一个类似的文本图像配对,等等。

The traditional pattern (that we call thealigned layout)在布局的一侧和相反站点上的所有文本上显示一个在另一个下方的行。最近和越来越常见的对齐模式的替代是zigzag layout, which alternates the placement of image and text on each horizontal row. The zigzag layout’s recent popularity is likely due to the fact that it breaks monotony and adds visual interest to a long page.

Wireframe layout comparison
Two-column layouts: The zigzag layout (left) alternates placement of images and text descriptions down the page, whereas the traditional aligned layout (right) presents images one under the other.

eyetracting研究表明,可预测的布局可帮助用户有效地读取和扫描信息。我们知道对齐类似的项目(如在对齐的布局中)使它们更容易扫描。我们想知道是否在一致的模式内(如Z字形布局中的替代)的物品是易于扫描的。一致性通常适合可用性,因此这是一个合理的假设。要回答这个问题,我们运行了一个eyetracting研究,用于使用Zigzag与对齐布局进行页面的扫描模式。

About the Study

We selected 4 different webpages from live websites that used the zigzag pattern. For each page, we created a variation that displayed the content in an aligned layout, with all text and images maintaining position on the right or left in each row.

A group of about 30-35 participants was shown only one variation of each web page, and the other version of the design was not mentioned or discussed with them. On each page, users had to do a basic information-gathering task such as “Find out how the Splitwise service works.” Then we observed users’ reading patterns as they used these pages.

Splitwise Layout Comparison
Left: The original web page using the zigzag layout; Right: A mockup of the same webpage using an aligned layout.

Image Value Affects Reading Patterns

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

  • Informational value is more important than alignment.具有信息价值的图像远远超过没有信息价值的图像。如果具有信息价值的图像对齐或交替,则无论图像是否对齐方式:详细研究了具有大量信息的图像,并在用户的眼睛向下移动页面时多次引用。因此,当图像不仅仅是装饰时,两个布局都同样适用。(增加对信息图像的关注重复了我们7年前的不同眼压研究的发现,显示许多基本的UX指南随着时间的推移保持不变。)

For example, Boxycharm.com, a website for a monthly subscription service specializing in beauty products, used imagery that garnered a lot of attention from users in both the zigzag and aligned variations of the page. The pictures of the beauty products were studied carefully by users trying to understand what would be included in the monthly box. The images of the smartphone and tablet app that illustrated digital offerings and perks received fewer fixations, but were still looked at and referenced several times.

BoxyCharm Gaze Plot比较
Gaze plots for two variations of Boxycharm.com show that, when images and text were meaningful, they received many fixations, whether the layout was zigzag (left) or aligned (right). Each gaze plots reflects the eye movements of one participant. (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, with the size of the dot being proportional with the duration of the fixation.)
BoxyCharm Clear
A screenshot of the page without gaze fixations overlaid shows the value of each image in understanding the product and the related online experiences.

On BoxyCharm.com, there was no distinct reading pattern among participants learning about the service. Many participants were initially drawn to the eye-catching image of the beauty products in the first row, but beyond that, their eyes moved between text and images several times and navigated to the next row based on whatever drew their attention first.

用户迅速了解到图像对理解服务有价值,因此他们致力于查看它们。因此,由于用户研究了图片和相关的文本描述,因此都没有表现出更有效或有益。

  • Users prefer to ignore decorative images.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. This is an example of the “hot potato” reading pattern, described in ourEyetracking Web Usabilitybook.

例如,在hellofresh.com上,图像是装饰性的,有很少的信息价值。HellofResh.com的Zigzag和对齐版本的Heatmaps显示了用户如何在第一行内容中的图像上固定,然后选择主要忽略页面上的其他图像。

HelloFresh HeatMap Comparison
Both the 34-participant heatmap for the zigzag version (left) and the 32-participant heatmap for its aligned variation (right) showed that people spent relatively little time on the information-poor images of HelloFresh.com. (Heatmaps are quantitative visualizations that aggregate the number and duration of eye fixations on a page. They combine data from a large number of participants. The red areas received the most and longest fixations. Orange, yellow, and purple areas received less attention, and areas with no overlay color were not viewed by any of the test participants.)

如果你仔细观察的热图,notice that the images in the zigzag layout have slightly more purple "heat” over them — that is, they attracted more gazes than the corresponding ones in the aligned layout. These gazes are likely accidental: as people moved their eyes to the next row, they first encountered the image and then quickly redirected their attention to the text. Thus, the images in the zigzag layout acted much like obstacles for the eye. This behavior is discussed in detail below.

Decorative Images in a Zigzag Layout Are Harder to Ignore

Usersoptimize scanning patterns to the task手头和花最小的代价(例如,fixations) to achieve their goals. As soon as people have determined that images aren't valuable for their task, they will start avoiding them. (This scanning pattern where the eyes go around unhelpful images is called “images as obstacle course,” because users must work around the pictures to get to the meaningful text on the page.)

For example, on Waze.com, our study participants began avoiding the images as their eyes moved down the page. In the aligned layout, images were easy to ignore, and users could effortlessly scan down the aligned bodies of text, as shown in the gaze plot below. However, in the zigzag layout, images were more problematic. In the gaze plot below, it appears that the participant did fixate on the images in the zigzag layout. However, the video of his gaze shows that he stumbled over some of these images accidentally: immediately after his gaze was captured by a picture, he redirected his eyes away from it and toward the text.

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

Redirect behavior is due to two factors:

  • The zigzag layout isless predictable, making it difficult to scan around image obstacles.
  • Image placement causes residual fixations.用户从一行读取文本后,它们向下滚动。页面向下移动,同时眼睛保持在同一个地方,对任何替换它在滚动之前看的内容的内容。对于Zigzag布局,图像将文本替换为滚动页面。这种类型的意外固定称为残余固定,并不刻意。

The same stumbling and redirect behavior was observed on Hellofresh.com (see thesidebar for gazeplots from Hello Fresh).

复杂的图像压倒眼睛

Although users stumbled on Waze and HelloFresh, the stumbling and redirect behavior was even more pronounced on Splitwise.com. The unpredictability of the layout and the residual fixations caused stumbling on Splitwise.com. However, an additional factor made it more difficult to avoid images:most of the photos contained textand some werepositioned close to the text bodies。In other words, the images looked like the text and competed with it, so people had a hard time identifying the next chunk of text in the story.

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. As expected, users looked at the first image to gauge value, but thelevel of complex detail in the photoswas presented too earlyfor users trying to understand the basics of the service, so they did not find them helpful at this point. As a result, participants tended to avoid these pictures as well.

A gaze plot of the aligned version of Splitwise.com shows that the participant looked purposefully at the first two images to gauge value, and then confidently moved down the page from one chunk of text to the next while ignoring unhelpful images.
Splitwise Zigzag gaze plot
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.

A clip showing the participant's gaze as she reads the zigzag version of the page shows her redirecting her attention to the text after looking at pictures 2 and 3 for only a moment. This clip is slowed down to 90% it's original speed.

Other Common Behaviors

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

许多用户开始扫描左侧。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 fold. Most participants naturally began fixating on the left side of the page. Because Western cultures read from left to right, users were preparing to read whatever content was to come.

Heatmap GazePlot Startonleft
This gaze plot shows one user’s eye fixations as he was looking at Hellofresh.com The user’s eyes began by fixating on the left side of the first row.

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).

Splitwise Gaze Plot Fold on Scroll
The image on the right side of the first row of content was significantly higher than the text on the left. Users saw the image first with no text on the left, so they fixated on the image before the text.

许多用户扫描备份页面时扫描图像。Once users reached the bottom of the page (or the end of what they perceived as relevant content), they often scrolled back up the page. During this “down” time, their eyes fixated more on the images than on the text, getting a few last glances at the pictures before they were done.

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. The right gaze plot shows that he fixated more on the images as he scrolled back up the page.

调查结果摘要

After observing users reading content in both zigzag and aligned layouts, there are a few things we can learn and apply to content pages like the ones we’ve evaluated:

  • Informational imagery gets more attention than decorative imagery. Decorative images were looked at less and users preferred to ignore them in both aligned and zigzag layouts.
  • Zigzag layouts made it more difficult to ignore decorative imagery and caused users to stumble over these unhelpful images and immediately redirect their fixations.

Design Takeaways

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.

Determining how to lay out a page begins with being thoughtful about your content. Decide whether it would benefit from imagery and, if so, think twice about which pictures will add information value.

  • Informational imagery works well in aligned and zigzag layouts.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. Users want to spend time looking at pictures to understand the offering, so accidental fixations causing redirects are not a problem in either layout.
  • The first images in the list set the tone and make users decide whether to ignore the rest.Pay particular attention to the information value of the images used in the first rows.
  • Align decorative imagery down the page.Decorative images can be beneficial forestablishing brand identityon a web page even if users only look at the first few of them, see them in their peripheral vision, or glance at them briefly as they scroll back up the page. However, it’s best to align the images to support efficient scanning, since users prefer to ignore these images. One exception may be if you have a page with only 2–3 rows of content. In these cases, 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, but users may be overwhelmed, especially when they are less familiar with your offerings or your content. These complex images may also compete with the informational text. Select informational images that complement the text and don’t increase too much the users’cognitive load
  • 不要为了布局而使用图像。在某些情况下,您可能有一个有意义的图像pair with a blurb of text. If so, that’s great. A picture can be worth a thousand words — sometimes. 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.Think of users scrolling down the page and uncovering content. If 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.
  • Always position high-information content on the left side of the first row。许多人甚至在内容滚动之前开始固定,然后必须重定向,如果装饰图像发生在他们正在寻找的位置。无论您是选择在第一行放置图像或文本,请确保它带来足够的信息值,以使其不会导致浪费的固定。