On pages with distinct cells of content, people often scan those cells in a lawn mower pattern: they begin in the top left cell, move to right until the end of the row, then drop down to last cell of the next row and move back to the left until the end of the row;  and so on. In our eyetracking research, we observed this pattern on many types of pages and tables (especially zigzag layouts) but most frequently on comparison tables. This article focuses on how the lawn mower pattern applies to comparison tables.

In a lawn mower pattern, the user’s gaze moves from left to right, then down, then from right to left, then down. 
The name of this pattern is inspired by how a lawn mower sweeps methodically back and forth across a field of grass. The mower moves from one side of the lawn to the other, then flips around and mows the next row of grass in the opposite direction. (Fun fact: There's a related concept in linguistics called "boustrophedon," which describes text meant to be read in alternating directions. But "The Boustrophedon Pattern" doesn't have the same ring to it.)

Users are likely to engage in this pattern whenever they are actively comparing several features of two or more adjacent products or services in a comparison table. (An exception would be if a user is only interested in comparing a single feature of the products — for example, price. In that case, the user would be likely to focus on a single row and wouldn’t engage in this pattern. Also, this pattern may be slightly different if the user is interested in comparing only two nonadjacent products in a comparison table that contains more than 2 products.)

The pattern is often proceeded by an appraisal — the user quickly processes the table’s layout before reading more closely. 

For example, one participant reading a CNET review for the Sonos One speaker encountered a comparison table. Within a few seconds, he appraised the table by glancing at the column and row labels, as well as some of the cells.

The participant quickly appraised the comparison table before actually reading it.

Depending on the user’s interests, she might scan only a portion of the table in the lawn mower pattern. In the CNET example, the participant started by moving in the lawn mower pattern across the entire table. However, he quickly decided he was only interested in the Sonos One, Apple HomePod, and Amazon Echo options — so he narrowed his eye movements to those columns, and stopped processing the values in the last two columns.

We were surprised to find this pattern — we had expected users to scan each row from left to right, starting with each row label. In fact, we observed the lawn mower pattern  frequently. (This is the value of eyetracking research — it enables researchers to detect subtle behaviors that would be otherwise imperceptible.) 

In general, this gaze pattern is an efficient way for users to process and absorb the differences between two or more offerings, as it minimizes the amount of eye movement. However, if the comparison table content is not informative and thoughtfully laid out, it can disrupt the lawn mower pattern and make users’ comparison tasks more difficult.

Comparison Table Design Can Disrupt the Lawn Mower Pattern

IGN: Long and Complex, Yet Empty

One participant was trying to decide between two game systems, the PlayStation 5 and the Xbox Scarlett. (This task was something the participant wanted to do, not a task we asked him to do.) He found a comparison table on IGN. 

He began by first appraising the table — taking in the placement of the columns and rows. Then he glanced back up and checked the column labels and the section heading. At that point, he fell into a steady lawn mower pattern: moving methodically from left to right and then back left, working his way through each cell in the table.

The participant scanned this long comparison table in a lawn mower pattern, until he realized that many of the rows only contained placeholder content (TBA). (Left: Full gazeplot; Right: Closeup on the table) 

The participant encountered three major problems while scanning this comparison table: 

  1. Length of the table
  2. Unexplained jargon
  3. Large amounts of placeholder content in the table’s cells (TBA, “to be announced”)

Length of the Table

Even though he was only comparing two items, he sometimes lost track of which system was covered in which column. Occasionally, his eyes would exit the lawn mower pattern and move back up the table to check the column label again. 

It might seem simple to remember that the PlayStation was in the left column and the Xbox was in the right — but keep in mind, human beings have limited working memory. This comparison was a particularly cognitively taxing task, because he was trying to understand and contrast complex technical features.

Because the column labels were so far from some of the rows, the participant had to leave his scanning pattern, travel far up to page to read the labels, and then return to refind the same row — adding time and cognitive strain to his comparison task.

Unexplained Jargon

In some of the more complicated rows, the user had to pause his pattern to try to understand their content. These rows are noticeable in the gazeplot, showing dense clusters of fixations. His eyes moved quickly back and forth between the two content cells, possibly wondering what the difference between them was. Terms such as 4K, Native 4k, and 8k Support (in the Video Output row) caused many back-and-forth eye movements.

Large Amounts of Placeholder Text

When the participant realized that many of the cells contained the same placeholder text (TBA), he skipped down to the next table section, Backwards compatibility. He then realized that most of the following rows were empty, so he abandoned his lawn mower pattern at that point.

“I like the table format, but the table didn’t really have a lot of information.” 

This gaze replay shows the participant scanning the IGN comparison table. He began with an appraisal, and then fell into the lawn mower pattern, but frequently interrupted the pattern to check labels and pause when he encountered jargon. (In most browsers, hover over the video to display the controls if they're not already visible.)

Apple Watch: Scannable, but Repetitive

Another participant was shopping for an Apple Watch and wanted to decide between two models (another self-motivated task). On the Apple website, she selected the Series 3 and Series 4 to compare in a customizable comparison table.

The participant looked at this comparison table, comparing two Apple Watch models. (Left: Page; Right: Gazeplot)

For each row, she bounced from one column to the next, and then down to the next row. When we look at individual stills of her fixations, (roughly 3–5 seconds of fixations displayed at a time) the lawn mower pattern becomes clear. 

In this video still, the participant moves in a reverse lawn mower pattern, from lower left (Series 4 processor) to lower right (Series 3 processor), then upper right (Series 3 thickness), then upper left (Series 4 thickness). 

Occasionally, her eyes would dart back up to rescan a word or image from an earlier row — the lawn mower pattern, like most gaze patterns, is never perfectly neat and orderly. 

Further down the comparison table, her gaze moves in a classic lawn mower pattern: top left (Series 4 Improved gyroscope), to top right (Series 3 Gyroscope), to bottom right (Series 3 Ambient light sensor), to bottom left (Series 4 Ambient light sensor). 

This highly motivated and methodical user fixated on most of the features listed in the table. Because these two iterations of the same product were very similar, many of the features were identical. For example, in the video still above, both models have these same words listed in their corresponding column: 

  • Optical heart sensor 
  • Ambient light sensor 
  • Microphone
  • Apple Pay 
  • GymKit (what this branded term means is not explained) 
  • Capacity 16 GB 
  • Capacity 8 GB 
  • Ceramic and sapphire crystal back 

Because she parsed the table in a lawn mower pattern, this user spent a lot of time reading repetitive features that were available in both models.

The few features in that screenshot that had changed were not meaningfully different. For example, the Series 3 had a Gyroscope while the Series 4 had an Improved Gyroscope — while that wording suggests that Series 4’s gyroscope is better in some way, it’s not clear how much better it is or what the improved denomination means.

In other sections of the comparison table, however, the differences between the models were clearer and more distinct. The participant appreciated that there was a comparison table available at all, so she didn’t have to do the work of memorizing and comparing the features on each product-description page on her own. 

“I did like how the comparison thing was, to see the differences between them. That’s super helpful, as opposed to figuring out which one has what. It made it pretty easy.” 

Support the Lawn Mower Pattern

Comparison tables are consistently popular with users. When implemented correctly, they can help users make decisions quickly and easily. When designing a comparison table, consider that your users are likely to process it in a lawn mower pattern.

Fixed Column Headers

For long tables, use fixed table headers, so that column titles are always visible. This prevents users from having to look all the way back at the top of page, potentially losing their place in the table. When headers are fixed, the user’s eyes are less disrupted from the lawn mower pattern.

Allow Users to Hide Columns

If users are interested in only the first and last product of a comparison table, it can be difficult for them to maintain the lawn mower pattern. Allow them to hide products or services that they are not interested in, if your table has more than 2 columns.

Self-Explanatory Content Cells

Ensure that each cell can stand alone, whenever possible. When users scan your table in a lawn mower pattern, they may be scanning some rows by reading the content cells first and then the row label. If the row label is crucial for them to understand the meaning of the content cell, they may need to scan from right to left, read the label, and then turn around and rescan the content cells.

Your challenge will be to meet this goal while also not overwhelming the user with too much text. Apple’s comparison table achieves this well — it has no row labels at all.

CNET’s comparison table cells had almost no meaning without the row labels — the participant frequently had to leave the scanning pattern to read and re-read the labels.

Group Yes/No Features Together

Even though we recommend trying to have meaningful cells, sometimes, for features that have just 2 possible values, it may be easier to use Yes/No or checkmark/X cell values.  Because these cases may disrupt the lawn mower pattern, we recommend that you group these rows together.

Dropbox provided a very clean comparison table for its plan options, with its checkmark rows grouped together for easy scanning. This table also used fixed headers and provided tooltips with additional information about each feature.

Help Users Avoid Repetitive Cells

When a feature is shared by to two or more offerings, consider a single cell of content that stretches between columns (see the Xbox example below). This saves users from having to read repetitive content in the lawn mower pattern, darting back and forth between duplicate cells. 

Alternatively, offer users a way to show only rows where the offerings differ.

Xbox.com used the fixed header approach for their table comparing the Series X and Series S. When both systems share the same feature, the table uses a single cell stretching between two columns. This is an effective way to save users from having to read repetitive content. (This comparison table isn’t perfect, however — the large amount of whitespace causes a wastefully low information density and may be symptomatic of a mobile-first design approach.)

No Jargon

Provide in-context definitions of jargon, either through a tooltip or a quick explanation in the table itself. This is a good idea for any comparison table, whether your users are scanning it in a lawn mower pattern or not. When jargon is unexplained, users often stare at the unfamiliar terms in confusion — pausing their scanning pattern.

Dropbox’s comparison table used a branded feature term, Smart Sync Auto-Evict. That term isn’t likely to make sense to someone who isn’t already familiar with Dropbox. The table included a hover-activated tooltip on each row, so users could find out what each feature means. 

Empty Cells Out of the Scanning Path

Avoid placeholder or filler content. When users scan the table in a lawn mower pattern, it’s likely that they will accidentally scan the placeholder content, which provides no information. In the IGN example, the table could’ve been improved by moving all empty rows together at the end of the table — that way, users would not accidentally scan the empty cells, and they would know that IGN did not forget about those important features, but the information was simply not available at the time.

 

For a deeper understanding of your users’ gaze patterns and how to support them, check out our 412-page report, How People Read Online: The Eyetracking Evidence.