在具有不同细胞内容的页面上,人们经常扫描那些细胞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我们的眼压研究,我们在许多类型的页面和表格上观察到这种模式(特别是Zigzag布局) but most frequently on比较表。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.
这种模式的名称是由割草机如何在草地上来回扫过的草坪割草机的启发。割草机从草坪的一侧移动到另一侧,然后在相反方向上翻转并割下一排草。(有趣的事实:语言学中有一个相关的语言学概念,称为“Boustrophedon”,描述了在交替方向上读取的文本。但是“Boustrophedon Pattern”与它没有相同的环。)

用户可能会随时搞这些模式they are actively comparing several features of两个或两个以上的邻近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.

根据用户的兴趣,她可能只在割草机模式中扫描表中的一部分。在CNET示例中,参与者通过在整个表中移动割草机模式。但是,他很快就决定他只对Sonos One,Apple HomePod和Amazon Echo选项感兴趣 - 所以他将他的眼球缩小到这些列,并停止处理最后两列中的值。

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 ofeyetracking.研究 - 它使研究人员能够检测到其他不可察觉的细微行为。)

通常,这种凝视图案是用户处理和吸收两个或更多个产品之间的差异的有效方法,因为它最小化了眼球运动量。但是,如果比较表内容不是信息性和经过思想的布局,它可能会扰乱割草机模式,并使用户的比较任务更加困难。

比较表设计可以扰乱割草机模式

IGN:长而复杂,但空虚

一位参与者试图在两个游戏系统之间决定,PlayStation 5和Xbox Scarlett。(这项任务是参与者想要做的事情,而不是我们要求他做的任务。)他在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.

参与者在割草机模式下扫描了这个长的比较表,直到他意识到许多行仅包含占位符内容(TBA)。(左:完​​整扩张夹;右:桌子上的特写)

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

  1. Length of the table
  2. 无法解释的术语
  3. Large amounts of placeholder content in the table’s cells (TBA, “即将公布”)

Length of the Table

尽管他只是比较了两个项目,但他有时会丢失追踪哪个系统的列。偶尔,他的眼睛会退出割草机模式,然后再次返回桌子以再次检查列标签。

似乎很简单地记住,Playstation在左栏中,Xbox在右边 - 但要记住,人类有限工作记忆。这种比较是一个特别认知的税务任务,因为他试图了解和对比复杂的技术功能。

由于列标签到了一些行,因此参与者必须留下他的扫描模式,远远达到页面读取标签,然后返回与他的比较任务相同的行增加时间和认知应变。

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 as4K, Native 4k,8k Support(在里面Video Output行)causedmany back-and-forth eye movements.

Large Amounts of Placeholder Text

当参与者意识到许多细胞包含相同的占位符文本(TBA), he skipped down to the next table section,Backwardscompatibility。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.)

苹果看:可校验的,但重复

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)

对于每一行,她从一列的n反弹ext, 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.

在此视频仍然,参与者以反向割草机模式移动,从左下方(第4系列处理器)到右下方(系列3处理器),然后右上(系列3厚度),然后左上(系列4厚度)。

Occasionally, her eyes would dart back up to rescan a word or image from an earlier row — the lawn mower pattern,像大多数凝视图案一样,永远不会完全整洁和有序

进一步下降比较表,她的目光在经典的草坪割草机模式中移动:左上角(第4系列改进的陀螺仪), to top right (3系列陀螺仪), to bottom right (系列3环境光传感器), to bottom left (系列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:

  • 光学心脏传感器
  • Ambient light sensor
  • 麦克风
  • 苹果工资
  • GymKit(未解释该品牌术语手段)
  • 容量16 GB.
  • 容量8 GB.
  • 陶瓷和蓝宝石晶体回来

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 thathadchanged were not meaningfully different. For example, the Series 3 had a陀螺仪虽然第4系列有一个Improved陀螺仪,而那t wording suggests that Series 4’s gyroscope is better in some way, it’s not clear how much better it is or what theimproved面额意味着。

然而,在比较表的其他部分中,模型之间的差异更加清晰,更差异。参与者赞赏地提供了一个比较表,因此她不必在她自己的每个产品描述页面上记忆和比较的工作。

“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

比较表始终如一地热门用户。当正确实施时,他们可以帮助用户快速轻松地做出决策。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,使用固定表标题,以便始终可见列标题。这可以防止用户一直在页面顶部的一路返回,可能会在桌子中失去他们的位置。当标题固定时,用户的眼睛从割草机模式的眼睛不太扰乱。

允许用户隐藏列

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

确保每个单元格都可以单独站立, 只要有可能。当用户以割草机模式扫描表格时,它们可能首先通过读取内容单元格读取一些行然后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.

Yes/NoFeatures Together

即使我们建议尝试具有有意义的单元格,有时,对于具有2个可能值的特征,也可能更容易使用Yes/没有or checkmark/X细胞值。因为这些案件可能会扰乱草坪割草机模式,所以建议您将这些行群组合在一起。

Dropbox为其计划选项提供了一个非常干净的比较表,其中复选标记行集合在一起,以便于扫描。此表还使用固定标题,并提供有关每个功能的附加信息的工具提示。

Help Users Avoid Repetitive Cells

当一个功能被共享时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.)

没有jargon.

提供内容definitions of jargon,通过工具提示或表本身的快速说明。这对任何比较表都是一个好主意,您的用户是否在割草机模式中扫描它。当Jargon无法解释时,用户往往盯着混乱的陌生条款 - 暂停他们的扫描模式。

Dropbox的比较表使用了品牌特征术语,Smart Sync自动启动。该术语不太可能对那些缺乏Dropbox的人来说不意义。该表包括每行上的悬停激活的工具提示,因此用户可以了解每个功能的意义。

Empty Cells Out of the Scanning Path

避免占位符或填充内容。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