Images — whether large pictures or thumbnails — have become an integral part of modern web design. 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.
The traditional pattern (that we call the aligned layout) shows rows one under the other, 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 the 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.
Eyetracking research shows that predictable layouts help users read and scan information efficiently. We knew that aligning similar items (like in the aligned layout) makes them easier to scan. We wondered whether items that are not aligned but that alternate within a consistent pattern (like in the zigzag layout) are also easy to scan. Consistency is usually good for usability, so this is a plausible hypothesis. To answer that question, we ran an eyetracking study that investigated scanning patterns for pages using zigzag versus aligned layouts.
Summary of Findings
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.
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 for establishing brand identity on 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.
- Avoid overly complex imagery. 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.
- Don’t use imagery for the sake of the layout. In some cases, you may have a meaningful image to 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. Many people started fixating on the left even before the content scrolled up, and then had to redirect if a decorative image happened to be positioned where they were looking. Whether you choose to put an image or text on the first row, make sure that it carries enough informational value so that it does not cause wasted fixations.