1967年,俄罗斯心理学家阿尔弗雷德·莱克诺维奇雅布斯观看了人们,因为他们看着同样的油画,想到了不同的目标。他注意到,眼睛凝视的运动取决于正在进行的活动,他得出结论,人们参加了那些更有可能包含目前任务的相关信息的场景的领域。

Our recent eyetracking studies build on Yarbus’s research, and reinforce the idea thattasks greatly impact user behavior在网上,因此大大改变了眼镜观察者和热带的结果。更好地获取任务权,或者您所做的任何眼部都会更具误导,而不是有助于推动您的设计。

方法论

In usability eyetracking studies, we uncover the most helpful and realistic findings for improving a website when we允许人们单击,搜索和键入尽可能多,因为这是他们通常使用网络的方式。换句话说,用户必须尝试actually do something与网站或申请的现实,而不是被告知“只是看看这个页面。”当然,做点什么,几乎总是要求用户在不同的屏幕之间移动,他们不知道预先知道哪些页面对它们有用。

但是,因为这项研究的目标是确定用户如何检查同一网页,因为他们在该页面上尝试不同的任务时,我们调整了our recommended eyetracking methodology:We gave users a task and, instead of allowing them to navigate by themselves to the page of interest, we took them to that page, allowed them to complete the task on the page, then closed the page for them. We examined a few different pages, including 2 pages that we will discuss in this article: a page displaying women’s dresses on Bebe.com, and a page displaying vacation packages on jetBlue.com.

我们研究中的一页包括WWW.BEBE.COM上的连衣裙的图像。

Another page in our study included a list of vacation packages offered on www.jetBlue.com.

对于每个页面,我们给用户提供了几个不同的任务。(Bebe任务将在后面描述。)这些是捷蓝航空页面上给出的任务:

  1. Take a look at the page. (Test facilitator closes the page after 8 seconds.)
  2. 这些逃亡者去了哪些地方?
  3. 哪个地方看起来最好?
  4. Which is the least expensive?
  5. 哪个是最高评级?
  6. Imagine you were going to get a quiz about this page. Study the page enough that you feel you could pass the quiz.

很清楚:我们在本研究中使用的方法是不是我们建议您测试您的网站。The goal of our research was to capture the effect of the various test tasks, not to improve the websites. If Bebe or jetBlue had hired us for a consulting job, we would have run very different studies.

凝视情节

In eyetracking studies, researchers record participants’ eye movements and track the order and duration of their gazes (or fixations). Then they aggregate the number of fixations, fixation durations, or sequence of fixations in graphical representations such as gaze plots and heatmaps. In this article we illustrate our findings using gaze plots.

凝视图是叠加在静态屏幕截图上的叠加层,其演示了一个或多个用户在该页面上看的位置。凝视图中的元素包括:

  • dots =固定:In a gaze plot, each dot represents one gaze (or fixation). In other words, a dot says that the user looked at that spot on the screen (or closely around it). Most eyetracking usability studies operate under theeye–mind hypothesis —即,如果用户看过一个项目,那么该项目就会认知和处理该项目。也就是说,出席的物品仍然可能无法被正确解释或记住。重要的是要明白点展示了只有用户看到的页面的部分sharply enough to read text or understand the details in images.
  • 较大的圆点=更长的固定:点的大小(粗略地)与相应固定的持续时间成比例。因此,较大的点表示在页面上查看该位置的较长时间。长固定信号表示用户花更多的时间处理相应的项目,因为1)她对它感兴趣,或者2)她很困惑,很难理解它的意思是什么。
  • Numbers = order:点中的数字表示用户查看页面上项目的顺序。
  • 线=固定之间的扫视:每个点(固定点)与它前面的固定点和后面的固定点相连。因此,点与点之间的线条更容易跟随眼球运动(称为眼跳)和注视的顺序。(数字为确定顺序提供了足够的信息,但是,如果没有线条,寻找下一个注视点就变得太困难了。)因为眼睛在注视点之间移动得非常快,人在眼球移动过程中实际上是瞎的,并且没有记录凝视速度穿过的视觉景观。
This gaze plot from a study participant doing all the given tasks on jetBlue’s vacation-package page includes more than 440 fixations.

解释用户在页面上的固定

上面的JetBlue.com页面的凝视图包括各种页面元素的440多个固定,从休假列表到诸如徽标和导航等UI组件。用户看起来在哪里?为什么?

我们可以提出几个合理的解释,例如:

  • The participant looked in the area in the upper left a few times to see thelogoand confirm the site she was on.
  • She looked at the导航在页面的最初几分钟内,您就可以了解该网站提供了什么。
  • Many, long fixations on each package name, image, rating, price, and short description possibly indicate that she is interested in all of them and trying to decide which to pick.
  • After she looked at everything on the page, she checked the footer to see what else was offered on the site.

Each of these possible interpretations are logical. But, because we know nothing about what the user was trying to achieve, these assumptions are unfounded. Simply zooming in on the top of the gaze plot shows that the fixation numbers are high and did not happen within the user’s first few moments on the site, demonstrating that the second interpretation is wrong. But that’s about all we can conclude from looking at the static image alone.

对菜单和logo的固定发生在任务的后期,在页面的其他地方进行了200多次固定之后。

手表ing the user’s full eyetracking session, not just studying gaze plots, is the best way to uncover meaningful insights.手表ing slow-motion replays enabled us to create more telling gaze plots that represent time segments on the page (as opposed to the entire visit on the page) related to the task the user was doing at the time. We’ll examine those in this article.

任务和用户动机会影响眼球运动

Task 1: Free Examination (“Take a Look at the Page”)

第一个任务只是看看页面。任务没有指定一段时间,但辅助程序在8秒后关闭页面。这项任务测试了“免费检查”的概念。在现实世界中免费检查是罕见的 - 人们通常是有原因访问网站的。在可用性测试中,当您想了解用户在您的公司简单感兴趣时,应保留免费审查任务,适用于特殊情况brand。(Even then, people are usually trying to satisfy an information need — for example, to see什么是新的那or公司的工作。)The main reasons free-examination tasks are not usually recommended in usability testing are: 1) they are unrealistic; and 2) they cause users to study the page more carefully than they normally would, and, as a result, may bias their behavior in subsequent tasks.

User behavior.在页面的前几秒钟,用户在相应的缩略图上查看内容区(第一次度假的价格)中最大的一段文本,然后将目光移到页面的左上角。这一点传统上是保留公司标志,但捷蓝航空的网页上的标志是推到右边。Centered logos are unexpected and harder to locate

After not finding the logo, the user returned to the content area and began to scan the location names.

The gaze plot for the task “Take a look at the page.” The image is cropped to exclude areas where the user did not fixate.

任务2:扫描部分标题(“这些veraways to to the地方?”)

The second task was to find something more specific: the locations of the vacations. For this task and the ones that follow, we will describe the information on the page that was necessary to complete the task, the user’s behavior, and, if applicable, the design elements that supported the task or hindered it.

完成任务所需的信息:

  • 所有目的地的名称
  • 目的地缩略图图像,可能是辅助信息来源

User behavior.Once the user learned the look of the destination names and how much vertical space existed between them, she quickly adapted her scanning to extract the information needed for the task (i.e., destination names) as efficiently as possible, without wasting extra fixations. Although occasionally the user glanced at secondary elements, such as the thumbnail and the description, the majority of her gazes were directed at the destination names. Our participant was able to complete the task in38个固定点。

The gaze plot that shows her eye movements exhibits thelayer cakepattern of scanning, during which users scan to headings and subheadings but don’t read the information below these, usually because the headings contain enough information to either answer their question, or indicate that the text under the heading is not relevant for answering it. The physical scan path resembles the horizontal sheets found in a layer cake. (This and other scanning patterns are described in ourHow People Read on the Web: The Eyetracking Evidence report)凝视图中的扫描模式是efficient scanning:it is highly focused on the current task and ruthlessly ignores content unrelated to the user’s goal.

The gaze plot for the task “To which places do these getaways go?”; The image is cropped to exclude areas where the user did not fixate.

Design elements that support the task:

  • 不同度假套餐的一致呈现
  • 用于位置名称的大,粗体文本,对较小的描述文本并置
  • 假期包裹之间的垂直空间
  • 浅,细,微妙的灰色线分开度假包
  • 不同包装名称之间的一致垂直间隔

所有这些设计元素都允许用户快速找到完成任务所需的最重要信息:目标名称。

任务3:扫描图像(“你觉得哪个地方最漂亮?”)

第三项任务是收集每个目的地的印象。

完成任务所需的信息:

  • the thumbnail photographs
  • the location name for the nicest place

User behavior.再次,用户很快她的扫描只有限to information that was needed to complete the task. Each thumbnail got 1–6 fixations, and some destination names (presumably of places that looked nice to her) also got fixations. When the user didn’t care for the photo — as with those for Grand Cayman, Charleston, and Fort Lauderdale — she didn’t bother reading the location name. And she scanned nothing else on the page. She was able to complete the task in37个固定。(然而,如果图像更清晰,她很可能会在更少的注视下成功。)

The gaze plot for the task “Which place looks the nicest to you?”: The image is cropped to exclude areas where the user did not fixate.

Design elements that hindered the task:

  • photographs鉴于它们中的细节量太小了
  • inconsistent thumbnail image types, with different subjects, camera angles, times of day, and level of detail

任务4:扫描价格(“哪个最便宜?”)

The second vacation package, Saint Maarten, cost $349 and was the least expensive.

需要查看完成任务所需的信息:

  • 每个位置的价格
  • location name for the cheapest destination

User behavior.Our study participant confidently scanned all prices on the page, then she scrolled up and gazed at the name of the second destination in the list to find her answer. That is highly efficient scanning. She completed the task in28个固定点。

任务的凝视图“哪一个最便宜?”?“图像被裁剪以排除用户没有固定的区域。

Design elements that supported the task:

  • price size larger than all the text items in the content area
  • whitespace surrounding prices
  • short numbers
  • 价格的大胆字体
  • 列表中每个位置的价格位置相同

All these elements made the prices easy to locate.

任务5:扫描详细信息(“哪个级别最高?)

完成任务所需的信息:

  • 星级评定
  • 最高评级目的地的位置名称

User behavior.我们的参与者沿途优化了她的扫描程序,因为她了解了页面的结构:她开始看着列表早期出现的评级中的所有明星,但随着扫描进展,她明白所有地点都得到了至少4星,所以她只在右边的星星里固定。最后,她确定了查尔斯顿,7th入境,Aruba,最后一个条目,每个条目都持有5星级评级。她完成了任务3.6.fixations.

The gaze plot for the task “Which is the highest rated?”; The image was cropped to exclude areas where the user did not fixate.

Design elements that supported the task:

  • 常规模式用于评级(星星)
  • star icons easily distinguishable from the other items in the destination description
  • 一致地定位目的地的物品

All these made the stars easy to locate.

Design elements that hindered the task:

  • 小星星
  • little visual difference between dark blue and light blue stars, or between half-full stars and full stars

这些问题需要用户在每个星级上花费更多的时间来分析细节。

任务6:动机阅读(“研究页面足以让您可以通过关于此页面的测验”)

这项任务要求用户注意页面上显示的所有信息,并试图记住这些信息,以便以后可以回忆起来。

完成任务所需的信息:

  • everything on the page

User behavior.Our participant looked at navigational elements and at the content, and in fact she fixated many of these elements multiple times, presumably trying to memorize them. She used228固定完成任务。

As we saw in the previous tasks, for the sake of efficiency, usersscan web pages,只关注相关的内容。但是当他们的动机或参与度很高时(或者当页面上的所有内容都是相关的,比如在这个任务中),他们可能会阅读几乎所有的内容。这种承诺可以在实验室里模拟,告诉人们他们将被问及页面的内容。

任务的凝视情节:“想象一下你将得到一个关于这一页的测验。仔细研究页面,你会觉得你可以通过测验”;图像会被裁剪,以排除用户没有固定的区域。

测试您的眼压分析假设

我们对JetBlue任务的凝视情节的分析可能会给您了解用户如何调整眼部运动以响应任务的洞察。让我们看看您是否可以将这些应用于新的数据集。

Below is a list of 3 tasks we asked people to try onwww.bebe.com,以及一个用户访问同一页面时的3个注视点(标记为A到C)。

Your job: Match the task to the corresponding gaze plot.

  1. 哪种衣服是最漂亮的?
  2. Estimate the average age of the models.
  3. What is the price range for the dresses?

一种。

B.

C。

The answers appear at the end of this article.

What Did We Learn from This Study?

jetBlue的例子和Bebe的测试应该让你相信Yarbus的发现对网络阅读是有用的:用户关注页面上与他们的任务相关的元素。这个相同的page will be processeddifferently当同一个用户的目标改变时。

And, more importantly, this behavior is another embodiment of the principle of least effort and minimuminteraction cost:在表演活动时,人们将尽量保持高效,并避免花费任何不必要的努力。与我们的学习参与者一样,他们将始终尝试找到最佳算法,以获取他们需要的信息,而无需不必要地努力。

Design for Efficient Scanning

The 6 jetBlue tasks discussed above encapsulate 3 general scanning behaviors:

  1. getting the lay of the land (task 1)
  2. comparing items (tasks 2–5)
  3. motivated reading (task 6)

前两个最常见的网站,确实我们的所有bebele任务也是如此比较任务。设计人员应支持用户尝试最小化读取和从网页提取相关信息所涉及的努力。我们在以前的凝视情节中看到,predictable, unambiguous patterns help users get to an optimal scanning algorithm fast and allow them to easily focus on the essential,同时跳过那些对其目标不必要的内容元素。请记住,有时过多的变化或细节(如在星形评级和照片的情况下)可以减缓眼睛,使任务更加困难,最终增加用户挫败感。

下面是一些设计建议,用于支持对list pages

  1. Be consistent with the position and layout of items in the list.
  2. Use简短的、可识别的单词and数字when possible.
  3. Use large, bold text and white space surrounding it to attract the eye and showcase the most important information.
  4. Consider usingcomparison tables来支持这种行为。

如果显示照片:

  1. 目前一致的照片类型。
  2. 呈现了一定程度的细节,鉴于照片大小可识别。

If presenting star ratings:

  1. 考虑用星形评级显示一个数字。
  2. 在一个固定中制作所选星星数量非常简单。例如,使用饱和颜色填充用厚的轮廓用于选定的恒星,白色填充和未选择的恒星的介质轮廓。在选择的恒星之间使用高颜色对比度(选择颜色时记住颜色盲目)。

Tasks in Usability Studies Focus Test Participants on Particular Site Areas

在可用性测试中提供人员任务的最大缺点之一是任务会影响行为。即使是要求人们做活动的行为通常会将他们的活动是可能的,并且答案存在于网站上的某个地方。如果用户未获得任务,则可能从未发现某些与该任务相关的站点功能。

如果任务改变人们如何看待和与设计进行交互,那么为什么在可用性测试中都给出任务?虽然给予任务有一些缺点,但它也有很多好处:

  • Most important, if users don’t have a reason to use a website or application, then they would just flail around to no purpose, which is a completely unrealistic way of approaching most designs. It’s better if we present people with a purpose than to waste our time observing a style of use that doesn’t happen in real life and has no business value.
  • If the tasks reflect our audience’s main user needs and goals, then it makes sense to ask study participants to perform those tasks in the lab, so we can optimize the design for those high-priority activities.
  • 任务允许团队专注于设计的新设计或对业务重要的部分。基于任务的研究使我们能够在设计前进行解决之前解决问题,并从研究中学到,因此我们可以更好地预测哪些新设计将为用户工作以及为什么。

明确配制的任务使我们能够弄清楚用户目标的设计元素工作。尽管如此,除了基于任务的可用性测试之外,使用各种研究方法还有帮助。特别有用的是对自然环境中的用户的开放式观察(例如,实地研究contextual inquiry) where they have their own reasons to use the computer or phone. But these research methods are not practical for all projects, budgets, development schedules, or design stages. If we did a field study every time we wanted to see users interact with a design, we could spend days watching people engage in site activities that are irrelevant for our current design project. And this method doesn’t work for sketches and prototypes that need to be tested early in the design lifecycle. Also, when researchers observe users in the field, they may not have a clear understanding of their goals and motivations.

When designing a usability study or analyzing user data, remember that tasks may change user behavior: they may tell users that a piece of information or a functionality are available in the design, leading them work harder than if they had not suspected that the task was doable.

(Learn much more about how to design good test tasks in our full-day可用性测试课程。)

眼动需要现实的任务

While good test tasks are important for traditional usability testing, the tasks are essential for the validity of an eyetracking study. A heatmap of where users looked while performing a nonrealistic task will be misleading. Any design decision made on the basis of such data is more likely to hurt your business than to improve your metrics. Write good tasks for the most useful eyetracking studies.

测验答案

以下是本文测验的答案:

  1. 哪件衣服最漂亮?图C。

在页面上找到衣服所需的几个初始固定后,用户直接看着衣服。衣服图像的一致尺寸和布局使用户可以轻松找到衣服。与JetBlue照片不同,衣服图像一致,每一个都显示出一个普通浅色背景前的模型。

  1. Estimate the average age of the models. Image B.

Most of the fixations were on the faces of the models, which would be most telling of their age. But there were also a few fixations on the body, which can also be expressive of age. Again, the consistent pictures used in the design helped the user quickly locate the faces.

  1. What is the price range for the dresses? Image A

The first 2 fixations were used to finding the way to the prices, then the user scanned only the text below the images, where the prices appear. The consistent positioning of the prices made the task easy. But, unlike the large jetBlue prices, the Bebe prices were smaller and positioned too close to the dress name, forcing the user to spend longer time or more fixations to register the information.