×

Zigzag Image-Text Layouts reduced the efficiency of scanning

by | December 26, 2017, 10:08

Zigzag Image Text

Summary: According to the results of an eye-tracking study, users were unable to scan pages that had decorative images presented in an alternating list layout. However, users were able to scan the pages efficiently when the images and text were aligned vertically.

Images

Thumbnails or large pictures are now a mainstream practice of contemporary web design. Images are used mainly on the Home page or How it Works page of a company to tell a story, explain their products and services to clientele, or describe a complex subject in a way that will be easy for the audience to understand. Often, one will find an image shedding more light on what a piece of descriptive text is saying, and you find the same pairing of similar text and image in the next row, and it goes on like that. In the old pattern, known as the aligned layout, rows of images are arranged over one another on one side, while the text occupies the opposite side of the layout. But recently, the zigzag layout is becoming the preferred layout among website designers. The zigzag layout alternates the position of text and image on each horizontal row. The rise in the use of the zigzag layout might be because it increases the visual appeal of long pages and adds some variety to the experience. Eye tracking studies reveal that the efficiency of scanning and reading information increases if the page has a predictable layout. We understand that using an aligned layout where similar items are placed together makes scanning easier. But we sought to find out if an alternating but consistent pattern such as a zigzag layout also improves scanning. This hypothesis is plausible since consistency is an important factor for enhancing user experience. This led us to conduct an eye tracking study to compare the scanning patterns of pages with aligned layouts versus zigzag layout pages.

About the Study

For the study, we picked four web pages from live websites using the zigzag pattern. We then recreated the aligned layout version of the four pages, placing all the text and images on the left or right in each row. About 35 particioants were shown only one version of each web page, but we didn’t tell them about the other variation of the web pages. Each participant was given a simple task such as "Check out the function of the Splitwise service." While the participants were carrying out their tasks, we were observing their reading patterns.

Image Value influences reading patterns.

The image quality and the information they were carrying affected the scanning pattern of participants. Informational value has more significance than alignment. Participants paid more attention to images with valuable information than images without any valuable information irrespective of whether the images with informational value were alternating or aligned. Participants studied images that provided many details about the product for longer periods, and their eyes made multiple contacts with the images as they moved down the page. This shows that the two layouts will provide equally satisfactory results if the images contain valuable information.(This finding is consistent with studies we had conducted in the past, which goes to show that most basic user-interface guidelines don’t change over time.) Take for instance the case of Boxyxharm.com, a website used by a monthly subscription service for beauty products. The website used imagery that captured users' attention in the aligned and zigzag versions of its web pages. Users carefully studied the pictures of the beauty products to identify what they will receive for each month. Even though there were limited fixations for the smartphone and tablet app images that were used to display digital offerings and bonuses, users still looked at them and referenced them multiple times. BoxyCharm.com users who were learning about the service showed no distinct reading pattern. Initially, it was the alluring image of the beauty products in the first row that captured their attention, but their eyes wandered independently after that and were only drawn to the first thing that got their attention. Before long, users realized that the images are important to making sense of the service, and they started paying unbridled attention to them. Therefore, both patterns reported equal results because users looked at the images and related text description in both cases. Users don’t pay much attention to decorative images: Pages that were dominated by decorative images received more looks on the text, as the users learned that the text is more valuable than the images. This is a classic illustration of the hot potato reading pattern. For example, the imagery on HelloFresh.com was more of aesthetics and less of information. Heatmaps show that at first, users spent some time on the images on the first row but ignored the other images as they moved down the page in both the aligned and zigzag variations of the website. An analysis of the heat maps showed that the images on the zigzag version had a slightly higher number of heat marks on them, which makes it appear as if they received more gazes than their aligned counterpart. But the gazes are only accidental glances that occurred as users tried to navigate from one row to the next on the zigzag layout, their eyes land on the image first before moving on to the text. This makes images on zigzag layout like obstacles to the eyes. More on that below.

It is more difficult to ignore decorative images in a zigzag layout.

The scanning pattern of users is usually determined by the present task, and they spend the lowest efforts to get the desired results. Users will start avoiding images if they discover they are not useful for their tasks. When the users have to move their eyes around images to get to the valuable stuff on the page, the reading pattern is called “images as an obstacle course”. In a study we conducted using Waze.com, participants started to avoid the images as their eyes traveled down the page. The results show that participants found it easier to ignore the images on aligned layouts and it was easier to move down the text. But users found it harder to ignore the images on the zigzag layout. The participant appeared to fixate on the images in the zigzag layout. But it can be seen in the video that the participant accidentally stumbled upon the images. As soon as an image caught his gaze, he redirects his attention in the direction of the text.

Two factors are responsible for the redirect behavior.

It is harder to predict the zigzag layout, which is what makes it difficult to move around images. Image placement results in residual fixations: Users scroll down after reading the text on one row. The eyes remain in their position while the page moves down. Thus the eyes are focused on the new content. In zigzag layouts, the user encounters images as he moves down the page. This occurrence is known as residual fixation, and it is accidental.

Complex imagery confuses the eye

Even though users stumbled on HelloFresh and Waze, Splitwise.com produced a far greater amount of stumbling and redirect behavior among users due to the unpredictable layout and residual fixations on the site. But, one other factor contributed to the difficulty of avoiding images; the majority of the images had text, and some were sited near bodies of text. What this means is that the images were competing with the text for the attention of users because they also appeared like text, effectively reducing the ability of users to distinguish between text and images in the next part of the content. Screenshots of applications and emails the service sent to its users were part of the images. But these images are highly complex. Initially, the users measured the informational value of the first images, but the complexity of the information was too early for the users and overwhelming for people who were only trying to get the hang of the service. Since they could not derive any value from the images, the users ignored these images.

Other Common Behaviors

We also observed some behaviors that were independent of the layout type. These behaviors provide valuable insights about how to maximize the use of images in a body of text and the best positioning that will produce the maximum efficiency. We discovered that many participants began scanning pages on the left. An introductory hero space was present at the top of 3 of the 4 test web pages, and the text-image pairs began below the introduction. Naturally, the left-hand side of the page was where most users started fixating. This behavior was because reading in Western cultures starts from left to right, and participants were getting ready to read the content that was to follow. But users were forced to start reading from the right when the content on the right side of the first row was far above the content on the left. This was because the right side appeared to have all the information, while the left side looked scanty. Most users scanned pictures while moving back to the top of the page. When participants got to the page end, which could mean the last place they could find relevant content, they usually found their way back to the top of the page. Their eyes fixated more on the images while moving up than on the text.

Summary

From the results of our observation of user’s behavior with aligned and zigzag layouts, we gain some insights which can be applied to content pages such as the ones used in our study. Informational imagery attracts more attention that decorative pictures. In both zigzag and aligned layouts, users paid less attention to and preferred to avoid decorative images. Users found it harder to ignore images in zigzag layouts, and this led to users stumbling upon unhelpful pictures which they were quick to redirect their attention away from.

Implications for Design

While little stumbling fixations on one page may appear harmless, plenty of it can make reading inefficient. Just like a house full of junk is not easy to navigate, so is a page with distractions. The first step towards an efficient page outlay depends on the nature of your content. Does adding imagery get your message across better? If yes, decide on the pictures that will provide information. Informational imagery performs efficiently in zigzag and aligned layouts. Users will give more attention to valuable pictures that provide visual descriptions of a story or help to provide more clarity to a body of text. Accidental fixations that lead to redirects don’t pose a big problem in both layouts because users are willing to focus on images to understand what a company is offering. The first pictures on a page determine whether users will give attention to the others or avoid them. You should make sure the images on the first rows are full of informational value. Decorative images should be aligned down the page. It is true that decorative images are good for strengthening brand image, but the best you can do is to align them to improve efficient scanning because most users ignore these pictures. But if you have a short page of say 2-3 rows, it's better to use a zigzag layout. Don’t use complex imagery. While you may be tempted to pack too many information into some information to increase the understanding of the user, this is usually counter-productive because these images overwhelm users, particularly new users. Also, the image may also reduce the attention given to the informational text. Rather, use valuable pictures that complement the text and are easy to understand by the user.

Avoid using imagery to occupy space

Make sure to use only informational images on your page layout. If you can't find a meaningful image, don't use just any filler image for the sake of the layout. For every image, there should be a purpose. Top-align text with decorative imagery. Users redirect when they come across unhelpful images while moving down a page. You can avoid this by aligning them below the corresponding text or aligning them horizontally with corresponding text to prevent them from catching the users' attention and causing them to redirect. Informational content should always be on the left-hand side of the first row. Most users will naturally fixate on the left side of the page even before they see the content. Whatever you decide to place in the first row, always ensure that the information is highly valuable to prevent the users from fixating on unhelpful information.   Are the images you're using right for you industry? Check out the best free graphic design tools for 2018.