当人们阅读网页上的信息,他们不会统一分发注意:一些内容超过其他内容。实际上,如果你曾经跑过或看results from an eyetracking study那you will see that certain areas of the screen tend to receive more gazes than others.

Is it good or bad if people glance at a piece of content more than at others? Are they confused by it or are they engaged with it? In eyetracking research, we can tell the difference. We observe that people spend more time on a certain page segment in three circumstances:

1.详尽审查。During exhaustive reviewthe eyes are drawn to the same area of the page repeatedly. In other words, the person looks at an area, looks elsewhere (maybe on the same page or even on another page), and then returns to looking at the original area. In more extreme cases this back-and-forth is repeated multiple times.

在我们的2009年“eyetracking.Web Usability” book we described exhaustive review as “unconstructive combing of pages and menus.” Exhaustive review happens when people are confused because the page content or the page UI violates users’ expectations. Only when users think that the site is the best place to do their task do we see exhaustive review; otherwise, if they have doubts about the site and feel confused, they simply leave.

In these situations, users’ confusion reflects an “I can’t believe it’s not there” feeling. People are so convinced that the content should be in an area, that they return to it multiple times because they believe they must have made and error and missed it.

2.期望的探索。Sometimes people look at the same content multiple times not because they are confused, but because they enjoy it or it has many nuances that are relevant to them. Desired exploration occurs when users refer to the same piece of content multiple times because they are interested and highly engaged with it

For example, imagine a person using a website to change the filter in her lawnmower. She will move attention back and forth between the physical lawnmower and the instructions containing a diagram of the equipment, to make sure that she is on the right track as she is doing the task. Looking at the instructions multiple times is necessary to complete the task.

Or, imagine a traveler who is going to Hungary for the first time and planning to sightsee. He finds a filmstrip of images of Budapest and scrolls through them slowly. Then he revisits some of the images again, because they intrigue him, and he wants to absorb them better. He is enthusiastic, not confused.

3.必要的审查。我们知道网络用户经常扫描内容以定位与目标相关的信息。当某些东西看起来很有希望时,他们倾向于仔细阅读以确定它是否有所回答。或者,他们可能会在一个总结一个重要概念的特定句子上花费更多的固定。这是必要的审查。当眼睛固定在一次或几次的时候发生。固定有助于解决对文本的理解,并了解潜在的意义。

这三种重复的模式的存在表明,如果页面元素收集大量外观,则不应依赖于对eyeCracting数据的简单分析来计算固定并宣布成功。我们需要深入挖掘并找出若干额外看起来真的是的。

In this article we focus on exhaustive review.

为什么要彻底的评论发生

为什么人们转回某个屏幕地区?是什么让他们相信他们必须错过一些东西,为什么他们期望他们正在寻找的内容应该在那里?有两个主要原因:

  1. Like information is expected to appear together。人们assume that similar content and UI elements will be placed together on the page.
  2. 常见的网络设计模式以及大多数其他网站的设计设置用户期望对于UI元素和内容将出现的位置。

喜欢信息

我记得目睹了2005年的第一个深刻审查的例子。用户正试图找到乔治布雷特的哪项运动和位置。(我迷上了1982-1992大约1982-1992的美国联赛Slugger。作为致敬,有时他会在我的身上露面可用性 - 测试任务。)

用户执行了Google搜索并选择了第一个命中之一,一个关于乔治布雷特在一个名为棒球参考的网站上的页面。她很快就确定了乔治布雷特播放了棒球。接下来,她不得不找到他的立场。

She first looked in the main content area, a grey rectangle with text, positioned in the upper left, just below the navigation. Here was his full name, that he batted right and threw left, weighed 200 pounds and stood at 6 feet tall. It included important dates, like his birthday, major-league debut, and when he was inducted into the Baseball Hall of Fame. But, this grey rectangle did not include his field position.

用户读取灰度部分中的所有内容,然后查看右侧的蓝色部分。当她了解到Brett的外地地位也没有,她再次看着灰色部分,即使她已经读过这一切也是如此。这次没运气,所以她移动到下面的黄色部分。当她没有看到那里的位置时,她看了Batting下表,然后再次到蓝色部分,然后再次到左侧到灰度部分。在那里,她又读得很厉害。

BaseBall -Reference.com:凝视情节中的蓝色点显示一个参与者的固定,按时间顺序编号。即使在仔细阅读灰色区域中的所有信息之后,她也回到了几次,寻找她期望在那里找到的答案而不是。

当我们第一次注意到这种模式时,我们认为这可能只是一个异常。但是,几个用户尝试了相同的任务,他们的眼睛遵循相同的路径,一次又一次地抓住了页面上的灰色区域。为什么?

  1. 上下文。用户是否棒球迷,considered that a player’s position would be one of the most basic pieces of information about the player. All basic information about the player was consolidated in that grey rectangle, so the field position should have been there too.
  2. 此外,该矩形在页面内容区域的左上角,通常是一个网页布局中的优先级点人们首先注意到并仔细参加

You can almost hear users saying, “It必须be here,” when they return to the original section during exhaustive review.

快速向我们最近的眼科研究,我们看着桌面和移动网站。其中一个移动任务是购买每小时至少50英里的Vespa,并且费用为5k或更少。

参与者正在比较Vespa网站上的2个踏板车模型。他读了所有的Fuel and Speeddetails of each model — fuel consumption, top speed, engine, tank capacity. He then moved to the方面area, scanned, and scrolled down further. The list of links seemed to indicate that he was no longer looking at details about these 2 Vespa models. He scrolled to the end and when he saw the social icons, he immediately scrolled up to the top of the page and said,Hmm, where’s the price?

这re, he tried tapping one of the models, presumably to get more details about it, but nothing happened. He scrolled and scanned the titles of the same sections of the page again, and read the menu below more closely; then scrolled to the end of the page, shook his head “no,” and scrolled to the top of the page yet again. Once more he scanned the details, even though he had already looked at these sections fully, and said,我期待有价格。

这top half of a page (left) and the bottom half of the same page (right) on the mobile version of Vespa.com compares two Vespa models.

观看我们眼镜研究中的这种用户互动的视频:

这个视频是通过规范记录的ial eyetracking glasses worn by the user. The red circle represents where he is looking. When he shakes his head “no,” this appears as a vigorous panning of the video image in the recording. (In most browsers, hover over the video to display the controls if they're not already visible.)

常见的网络设计模式

这re are no true, written web design standards, but there are some common locations and designs for certain elements. Let’s consider one of these now with a little experiment:找到Niemanbetx官方网站手机版lsen Norman Group的全球导航。

你马上看看页面的顶部吗?如果你这样做是因为桌面上的主要导航传统上是一个令人惊讶的是horizontal list of links across the top of the page。On mobile, too, the main navigation usually appears at the top, although it is often collapsed under a按钮(具有图标,文本或两者)。

我们通过200多个用户和眼镜技术进行了该实验的版本。我们测试了40多个桌面网站和asked people to locate various UI elements。We then launched the site and observed where people looked for them. To prevent bias, we gave each user a random subset of tasks, and also randomized the order in which people had to do these tasks.

position of the company logowas one of the elements we studied. A logo is present on most web pages, and is usually located in the upper left corner in desktop designs. Consider 4 of the sites we studied: National Education Association, Dell, the Florida Keys & Key West, and Kohler. The first two of these displayed the logo in the upper left, and the others showed itcentered at the top

www.nea.org(左)和www.dell.com(右)位于页面左上角的徽标。

www.fla-keys.com(left)定位在页面中心的徽标或网站标题,如www.kohler(右)。两个站点都有可能被误认为是左上角的标识的元素。

被要求在NEA和Dell网站上找到徽标的用户立即找到它。他们首先向左上角看,徽标的公共位置,并在一秒钟的一小部分中找到它。一旦他们找到了徽标位置,他们就花了更多的固定来解析它并确认它是他们所需要的答案。这是必要审查的一个例子。

On the NEA site, the red heat concentrated on the logo shows that people found the logo without looking in multiple places. 30 users located it within just a fraction of a second.

在戴尔网站上,集中在徽标上的红色热量表明,人们在不寻找多个地方的情况下找到了徽标。30位用户只需一秒钟就位于它内。

但是在徽标定位在中心的网站上,用户至少拍了一秒钟,有时几秒钟才能找到徽标,浪费时间和固定。

On the Florida Keys site, several people looked first to the far upper left, at the map icon. Then their eyes moved to the temperature — the closest bit of content, which appeared still in the upper left area of the page. Next, they went back to the map label. That is an example of exhaustive review, because, even though users had already determined that the item in the far upper left was not the logo, when the second-best candidate for the logo was also not the logo, they looked at the first element again.

Next, participants moved their eyes to the small grid of social icons to the right of the temperature, and, when they determined that it wasn’t the logo, some went back to the temperature once more, in the hopes that it was the logo even though they had already seen that it said81度。Finally, participants looked at the centered text,Florida Keys and Key West,并在他们确定他们找到了徽标时停了在那里。

与Nea和Dell不同,大多数凝视集中在徽标上,佛罗里达键网站上的热线图不仅在徽标上显示了固定,而且在左上角(预期徽标)的左上角显示了固定。这种类型的热爱模式表明人们在他们找到徽标之前看着多个地方。30用户至少秒找到它。

在科勒网站上,参与者倾向于朝向左上角的眼睛KOHLER Worldwide图标和下拉,以及BATHROOMmenu. Some alternated looking at each of these items a few times (also an example of exhaustive review), before eventually moving their gazes to the right and settling on the tagline科勒的大胆外观在中心。检查此元素后,不确定它是否可以被视为“徽标”,一些参与者再次返回左侧的一些项目。

与佛罗里达群岛网站的热爱图一样,Kohler网站的Heatmap不仅在徽标上显示了固定,而且在左上角(预计徽标是)的左上角。在他们找到徽标之前,人们在多个地方看着多个地方。30用户至少秒找到它。

公司名称或标记是徽标是一个单独的讨论。这个例子的重点是:如果人们期望一个物品在某个地方,他们将首先看起来,并且即使在他们看过他们想要的项目之后,也可能回到那个地方。

如何避免详尽评论

Avoiding exhaustive review means了解用户想要的东西and where they expect to find it. Following generally accepted UX design and research practices is the best way to combat exhaustive review.

特别是:

如果您正在考虑偏离Web约束的设计,请彻底测试并仅在所有可用性研究表明它比规范大大更好地使用它。(如果您所提出的设计略好一点,请不要使用它,因为罚款将高于收益。)

概括

让我们清楚:详尽的评论是要避免的用户行为。令人彻默地竭尽全力。

You can see exhaustive review in action in眼镜研究。And, if your分析数据或可用性测试show that people spend a long time on your page, it may be because they are engaged with the content or because they are puzzled by it. To help determine if exhaustive review is the culprit, ask yourself these questions:

  • Have we positioned something in a non-standard place?
  • 我们省略了信息用户可能期望找到的信息吗?
  • Have we placed highly-related content in different places?
  • 内容放置是否反映了内容重要性?
  • 用户说(在可用性测试,反馈表格或支持通信中)他们期待或正在寻找他们找不到的东西?

如果答案不确定,请考虑思考 - 大声笑,适度的可用性测试(遥控器或人)或者以自己的方式开始眼镜可用性研究

For more about the behaviors discussed in this article, consult our “eyetracking.Web Usability“书和”人们如何阅读网络:眼镜证据” report.