图书信息

内 容 简 介

译 者 序

读者评价

前 言

目 录

图书信息

用眼动追踪提升网站可用性（美）尼尔森（Nielsen,J），（美）佩尼斯（Pernice,K.）著

冉令华，张欣，刘太杰译

ISBN 978-7-121-13260-5

出版日期：2011年5月

定 价：158.00元

16开

448页

内 容 简 介

本书是网站可用性领域的权威Jakob Nielsen博士在Web可用性方面的最新著作，同时也是对于作者的前一部有关Web可用性的著作Prioritizing Web Usability的重要更新和继续。本书根据Web在近些年关于眼动追踪技术在网站可用性研究中应用的最新发展状况，并结合尼尔森-诺曼集团的大量研究成果，详细阐述了如何从可用性的角度来提高Web设计水平，从而使得用户能够更加满意和高效地使用网站来完成各种任务。书中所涉及的内容包括用户使用网站时的行为特点、用户的浏览模式及其和网站使用之间的关联，并列举了很多从18岁到65岁的人群如何浏览和使用商业网站的实例。

本书针对性强、图文并茂，并展示了大量真实网站的屏幕截图作为示例，具有很强的可读性，是一本不可多得的有关Web可用性设计的优秀著作。阅读本书有助于设计出可用性高、能够令用户满意的网站。本书适合于Web设计、开发及评估人员阅读，也适合于高等院校及职业技术学院的计算机应用、自动化、仪器仪表、电子、通信等相关专业的师生参考。

译 者 序

毋庸置疑，我们的日常生活与工作已经越来越依赖于网络，从浏览信息到投资理财，从休闲娱乐到商业运营，网络已经渗透到我们生活中的每一个角落。而网络的便捷性和直接面对客户的特性决定了网站之间的竞争远比传统产业中运营者之间的竞争要激烈得多。在存在大量同质性服务的情况下，能否让网站想传达的信息吸引住用户的眼球，让用户方便、快速、准确地找到所需要的内容，即网站是否具有良好的可用性和用户体验就直接决定了网站的成功与否。

实际上，我们在浏览网页时会觉得有的网站清晰简洁、一目了然，而有的网站则让我们觉得无所适从。举例来说，有些网站为了显得设计独特，其网页导航结构独行特立，但是由于和用户的浏览习惯不一致，很难让用户在网页上找到要找的内容；有些网站上布满了大量色彩艳丽的宣传图片，似乎是为了吸引用户的注意力，但事实上用户往往对此视而不见；有些网站为了使页面显得生动活泼，在页面上增加了一些娱乐性的元素，但往往这些元素在不恰当的时侯吸引了用户的注意力；有的商业网站为了详尽介绍其产品信息，将产品的重要信息和非重要信息都充斥在页面上，用户不得不仔细查看，不胜其烦。

在网站可用性研究的方法中，可用性测试、问卷调查和焦点小组等传统方法一般都是建立在测试人员与被测试人员交互基础上的，测试结果在一定程度上会受到测试实施人员的影响。近年来，眼动追踪技术作为描述和诠释用户行为的方法逐渐在网站的用户体验研究中得到了应用。眼动追踪技术的优势在于它可以细致、直观地观察和记录用户的浏览方式和浏览习惯，从而发现传统的可用性测试很难发现的东西，为分析用户行为提供了丰富的补充资料。尤其是对于网页的设计和布局，眼动追踪技术通过记录被测试人员的眼动轨迹，不仅可以分析用户的眼动轨迹是否流畅和合理，还能完整地还原用户对页面各部分的视觉注意力、注视轨迹和关注程度。

本书则是关于眼动追踪技术在网页可用性研究中的应用。本书作者Jakob Nielsen和Kara Pernice均是网页可用性设计领域的专家。其中Jakob Nielsen博士是尼尔森-诺曼集团（Nielsen Norman Group）的主要负责人之一，他被《美国新闻与世界报道》杂志誉为“Web可用性方面的世界领军人物”，被《今日美国杂志》誉为“仅次于真正的时间机器的最伟大的预言家”。这本书是他第一本采用眼动追踪研究网页可用性的书籍。

目前也有一些成果斐然的眼动追踪网页可用性研究，但这些研究成果通常都限定于特定的主题或者特定类型的网站，很难推广应用到其他类型的网站。本书的不同之处是采用眼动追踪技术细致地观察用户共有的浏览模式和浏览行为，为形成和改进网页可用性的通用原则和指南提供支撑。为此，作者实施了迄今为止规模最大的眼动追踪实验，来为本书提供全面而真实的数据。通过对各类网站的眼动追踪实验，以及对海量用户眼动数据的分析，提出了实用的网页页面布局、导航、图像、广告以及其他一些页面基本元素的设计准则。作者在书中展示了大量的屏幕截图和用户注视点热点图，令读者始终能兴致盎然地进行阅读，也能让读者直观地理解作者提出的相关理论和设计准则。

目前，我国拥有眼动仪和利用眼动追踪技术开展网页、软件、手机、信息产品可用性研究的机构和人员越来越多，这是一件十分令人兴奋的事情。我们很高兴能够把本书翻译介绍给国内的读者，我们希望本书一方面能够帮助国内从事可用性研究的人员掌握和运用眼动追踪技术开展自己的研究，另一方面希望从事网页设计、用户研究的相关人员能对网页界面的可用性有更深刻的了解，并根据本书中提出的设计指南在设计开发中充分考虑用户的浏览习惯，提升网页的易用性、舒适性和满意度。

本书由中国标准化研究院的冉令华、张欣和刘太杰翻译。其中，第1至4章、前言和附录由冉令华翻译；第5章，第7章和8章由张欣翻译；第6章由刘太杰翻译。冉令华对全书译稿进行了审校。由于水平有限和时间仓促，书中难免会出现不妥之处，欢迎来指正和交流。

译者

2010年12月于北京

读者评价

“Jakob Nielsen和Kara Pernice的想法总是能居于领先地位、令人振奋和富有洞察力的。如果他们在网页可用性设计领域提出了某些新内容，那么网站设计人员就一定要去了解一下。”

—Seth Godin, Author, Linchpin

“设计好的用户界面不仅需要创造力和基本的一致性。网页上的信息和工具是为大家设计的，设计者对用户在使用界面时的感受以及他们如何阅读、思考、浏览、区分优先次序、忽视和汲取等方面了解得越多，最后做出的设计才会越好。本书所进行的迄今为止规模最大的眼动追踪可用性研究，针对现实生活中人们使用用户界面和查看用户界面的方式提出了多方位的和非常实用的新见解。这些研究成果令人大开眼界。本书中有大量细致研究的例子和明确的数据分析，通过一系列实用的、清晰的规则和建议使人们对网页界面的可用性有了更深刻的理解，有助于读者今后设计更加合理的页面。”

—Tjeerd Hoek, Executive Creative Director, frog design

“Jakob and Kara的这本书通过陈述一般性的感知和提供实用的建议，使眼动追踪的网页可用性研究通俗易懂。本书对于想在网页内容的组织和处理方面有所提升、从而最大化网页的可用性和有效性的设计者来说是一本必备的工具书。”

—Armando González, UI Design Director, eBay

“本书中的某些内容适用于所有的人，如重要的网页设计原则、眼动追踪研究方法以及相关的商业问题和示例。无论是网页设计人员，还是研究用户行为的科研人员，或者商业网站的经营者，都会从本书中获益。”

—Christian Rohrer, Ph.D., Senior Director of User Experience Design, Move, Inc.

“作为专业的可用性研究人员，Jakob and Pernice 从独特的角度，即采用追踪用户眼动轨迹的方式提供了网页设计的指南。本书包括了来自大量的研究和大批的参与者使用实际网页的眼动追踪实例，这些都极具吸引力。作者对用户的行为、网页的内容和布局提出了很有意义的见解，并给出了对未来眼动追踪研究方向的看法。本书是眼动追踪和网页可用性设计书架上必不可少的一本书。”

—Professor Andrew Duchowski, Clemson大学计算机学院

《眼动追踪方法：理论和实践》Eye Tracking Methodology: Theory and Practice的作者。

“实际上这本关于网页设计书籍中的指南更多的是来自眼动实验得到的实际研究数据，而非是作者自己的观点！作为实施全球范围内学习科技的领路人，Kara和Jakob提供了简单而深刻的方法以确保我们可以聪明地与每个屏幕打交道和实现使人们能够顺利地浏览网页的任务。本书对于任何想提高网站性能的读者来说都是一个很好的参考工具书。”

—Rob Lauber, Vice President, Yum! University, Yum! Brands, Inc.

献给我的孩子Oskar和William。

—Jakob Nielsen

献给Lotus Graphics Products Group circa 1991的成员，尤其是MaryKate Foley和Betsy Fortin。我非常感激他们引入了可用性的概念以及使设计更加简单的各种实验，无论这些实验的成败如何，都给予了我极大的鼓励。

—Kara Pernice

前 言

用户如何查看你的网站？

这是互联网商业贸易中最基本的问题之一，也是大多数公司都无法回答的一个问题。你知道你自己如何查看这个网站，也知道设计团队的其他人如何查看这个网站，但公司之外的人们是如何查看这个网站的呢？你可能还会知道人们如何使用你的网站或人们是如何评论它的，但对于人们到底是怎样浏览网络的却没有任何头绪。

本书则旨在回答这个问题。

当然，没有任何书籍能够专门针对你的网站。这需要进行你自己的可用性研究。但人们浏览网站的方式以及这些方式对其随后操作对网络的影响都有很多共性的地方。

这就是我们撰写本书的目的。

本书涵盖了迄今为止规模最大的眼动追踪研究

本书的关注点非常清晰，即对于网页的可用性设计，我们通过眼动追踪研究能够了解些什么。换句话说，我们准确记录了人们使用网页时所注视的屏幕的位置，应用这些精确的（当然，有时是枯燥和烦琐的）数据，我们能够制定出网站设计的指南，让用户使用更方便，从而也为公司带来更多的利润。

虽然本书是我们关于眼动追踪技术的第一本书，但眼动追踪并不是科学研究中的一个崭新方法。认知心理学领域的科学家从19世纪起就开始研究眼动追踪，以其发现眼睛的工作原理。到了21世纪，眼动追踪最终发展成为一门实践技术，不仅用于学术研究，还应用在商业研究中。我们则应用这一工具观察在人们使用网页时的一些自然行为，例如人们在网上购物时的行为模式。

我们可以自信地说，从网站的种类和数量，以及上百名用户所执行的多种类型的任务来说，我们所进行的研究应该是迄今为止规模最大的眼动追踪研究。也有一些其他成果斐然的眼动追踪研究，但这些研究主要集中于特定类型的网站（例如新闻站点），甚至是单独的某一个网站（例如Google）。这些研究成果通常限定于特定的主题或者特定类型的网站，很难推广应用到其他类型的网站。

我们的目的是在人们有针对性地浏览网站时，研究其共有的浏览模式和行为。我们的研究中虽然也包括政府的网站和非营利机构的网站，但主要的测试目标还是商业公司的网站。这些站点有一个共同的商业目的，即让用户能在网站上做某些事情。

由于我们提供咨询服务的主要经验是在商业方面，因此即使我们所讨论的概念同样可用于政府机构和非营利组织的网站，我们还是倾向于使用商业类型的术语，例如公司、顾客、商业目标和利润等。例如，政府的报税网站可能不必考虑“商业目标”，但如果想让报税者能从网站上下载报税表格，我们可以说这就是一个商业目标，即使这个机构在表格下载的过程中并未获得任何利润。虽然报税网站上将报税者称为“公民”，实际上仍然可以将这些用户看成是你的顾客。简单地说，如果你的站点是要给病人提供一些健康教育知识，以及如何应对健康问题，那么这些就是你的商业目标，即使你提供的只是你的医疗专业知识。病人就是你的顾客，即使健康护理机构很少使用顾客之类的词来称呼病人。

眼动追踪并非可用性研究的全部内容

在本书中，我们主要关注的目标是：研究用户的浏览模式及其和网页使用之间的关联。本书并不是关于网页可用性的一般性介绍类书籍。我们曾经采用其他方法做过很多关于网页可用性方面的主题研究，16年来通过测试站点和进行该领域的研究，我们提出了2503个关于网站、内联网、社交网络、电子邮件通信等方面的可用性指南，但这些都不是有关眼动追踪研究，本书中也没有涉及这些内容。如果你熟悉这些指南，当你阅读本书时，你会发现本书中的眼动追踪研究为这些可用性指南提供了支撑，也对很多指南做了进一步的改进。如果你想全面了解有关网页可用性的最重要的研究发现，我们推荐你阅读Jakob Nielsen和Hoa Loranger（New Riders出版）合著的《网站优化——通过提高Web可用性构建用户满意的网站》（电子工业出版社2007年出版），或者登录我们的网站查找关于网页可用性、内联网可用性和可用性研究方法详细报告的列表。

补充报告

虽然我们对本书的主旨做了严格限定，但在着笔时本书的手稿还是越来越多。我们有很多研究发现，眼动追踪研究的基本手段就是对屏幕截图打分，将这些发现可视化。在大量的案例中，我们需要用两种截图展示某个发现：一个简单的屏幕截图和一个展示注视模式的截图。

为了使本书不至于太厚，我们在另一份研究报告里包含了下面两个主题，而本书中则没有讨论这两个主题。这两个主题可以在线获取。

 《眼动追踪方法：如何使用眼动追踪进行和评价可用性研究》，可通过了解相关内容。

 《人们如何阅读网页：眼动追踪提供的证据》可通过了解相关内容。

第一个主题包括进行恰当的眼动追踪研究以发现确实存在的可用性问题的方法。令人遗憾的是，不少眼动追踪研究并未要求用户自由使用网站的导航来执行真实的任务。研究的结果经常带有倾向性，不宜作为期望从真实顾客获利的商业网站的设计依据。

提出正确的研究方法非常重要，因此在我们的研究报告中尽可能地提供了方法的细节，但由于篇幅所限，我们无法在本书中细述无遗，为了方便读者，我们将这个报告提供给用户免费下载。

第二个主题研究人们如何阅读包括搜索结果页在内的各种类型的网页。这个研究报告则要有一个相对合理的价格，主要用来支付我们进行详细的眼动追踪研究来了解用户阅读行为而产生的费用。

本书不包括的内容

除了眼动追踪的方法及其在阅读和搜索方面的应用外，还有一些其他的内容本书也未涉及。

通常我们测试的网站都有商业目的，即支持用户执行某些操作。如果你有一个个人博客，上面主要是你自己的最新动态，而且该博客只提供给你最好的五个朋友分享，那么我们的很多结论是不适用这个博客的。博客这类网站不是我们所研究的网站类型，或者说浏览博客的用户不是我们所测试的用户的类型。（我们的某些研究成果也可以用于个人站点，但我们没有一定的商业模式发现哪些网站是这样的网站。毕竟，可用性的一个主要目的是商业盈利，没有商业目标的站点的创建者不会付费进行可用性研究）。

我们的研究发现不适用于纯粹的艺术站点，因为人们访问这些站点的目的是去欣赏设计或里面的内容，而不是使用网站去做些什么。

我们也测试了一些娱乐网站，例如Warner Bros，一个提供哈利波特电影的站点。在我们的咨询业务中，有很多是娱乐界的顾客，他们想要提高其站点的可用性，以销售更多的电影票、音乐会票、戏剧票，或者推广音乐下载、主题公园假期游、电视人物以及其他的娱乐产品。我们的可用性指南非常适用于这种类型的站点，即使用户通常会说他们更喜欢看上去绚丽多彩的娱乐站点，而不是我们推荐的相对沉静的类型。哈利波特的站点应该比财富500强的投资网站更加“奇幻”，但这两类网站在播放视频时的操作具有共性，即都应该比较简单——不管是播放电影宣传片还是播放CEO对公司最新季度成果发表的评论。

因此，我们的发现可用于娱乐性的商业站点，但不能是纯娱乐性的站点。我们在研究中测试过游戏站点，来观察孩子们如何使用互联网，但是这些研究发现和我们从商业站点得到的研究发现截然不同，本书中没有包括这部分内容。我们没有使用眼动追踪方法进行这些测试。我们知道孩子们使用网站的方式与成年人具有显著的差异，因此可用性指南也非常不一样，本书中不对这些内容进行探讨。

本书不包括青少年用户，同样也不包括老年用户。追踪老年人的眼动轨迹非常困难，因为人们随着年龄的增大，会出现眼睛晶状体衰退、双焦距或眼疾等问题，这些问题会限制当前眼动追踪技术的使用。除此之外，针对老年人的可用性研究花费的时间会相对长些，而实验中眼动追踪研究的准备工作已经让我们没有更多的时间了。事实上通过其他针对老年人的研究，我们了解到在网页设计中需要对老年人进行特殊的考虑，因此如果你的网站的目标用户超过了65岁，那就不要采用本书的研究结果了。

本书也不包括残障用户。我们过去研究过具有耳聋、失明、弱视或文化水平较低，或有认知或肌体障碍的人群。但眼动追踪研究的规模和复杂性不允许我们在本次研究中把这些用户包括在内。而且，受研究手段的制约，目前对弱视人群进行眼动追踪也是不可能的。

本书的研究关注的是网站

最后要说明的是，本书的研究关注的是网站，没有包括电子邮件通信和内联网这两个重要的设计领域。我们的同事Amy Schade 已经对电子邮件通信进行了深入的眼动追踪研究（可登录网站wwwnngroupcom /reports查看相关信息，里面有我们关于青少年、老年人和使用辅助技术上网的人群的研究结果，也有我们在电子邮件通信方面的研究结果）。

内联网与Web网站虽然信息架构不同，但在构成和导航行为方面很相似，因此很多可用性指南对这两种类型的设计都适用。但内联网的用户群体和任务与Web网站是不同的。我们对内联网进行过很多详尽的研究，并建立了614个独立的可用性指南。但这些研究并不是眼动追踪研究，因为我们没法把眼动仪带到分散在世界各地的多个公司中进行研究。

本书中很多以网页为中心的研究成果也适用于内联网，如果你正在设计内联网，则可以把这些成果作为指导，根据你们内部设计项目的实际需要有针对性地理解我们的指南。

总地来说，本书列举了很多从18岁到65岁的人群如何浏览和使用商业网站的实例。通过这些实例可以反映出目前主流网站设计存在的一些问题，并给出了如何改善的建议。我们的某些研究结果通用性很强且容易解释，也有一些要在特定的背景下使用，而且不太容易理解，但这些结论仍具有很强的参考价值，因为这些研究结果很好地展示了人们是如何注视网页的。用户浏览站点和你自己浏览是非常不一样的——事实就是如此。我们希望读者能够应用我们的发现，即网页中什么能吸引用户，什么让用户不愉快，哪些是有帮助的，哪些会使典型用户感到疑惑，来改善自己的站点。

—Jakob Nielsen和Kara Pernice,

2009年11月于硅谷，纽约

目 录

第1章 眼动追踪和眼睛 18

1.1 现代的眼动仪是如何工作的 19

1.2 中央凹视觉与周围视觉 21

1.2.1 注视和眼跳 21

1.2.2 为什么用户无视某些元素 22

1.3 大脑—眼睛一致性假设 24

1.4 注视意味着设计是好还是不好 25

1.5 眼动追踪结果的可视化 25

1.5.1 本书中的热点图和注视图 26

1.6 任务决定注视点 28

1.7 眼动追踪的其他用途 32

1.7.1 眼动仪作为输入设备 33

第2章 本书的眼动追踪研究 36

2.1 数据收集 37

2.1.1 本研究的参与人员 38

2.1.2 定性实验和定量实验 39

2.2 测试实验 40

2.2.1 实验准备工作 41

2.2.2 所涉及的网站和测试任务 41

2.2.3 测试 45

2.2.4 误看元素 49

2.3 为什么很多眼动追踪研究结果

都是伪结论 50

2.3.1 具有典型代表性的用户 50

2.3.2 真实任务的绩效 51

2.3.3 宽泛的网站类型和任务类型 53

2.3.4 评估研究发现 53

2.4 眼动追踪研究的费用 55

2.4.1 整个研究的费用 56

2.4.2 招募的费用 56

2.4.3 丢失的眼动追踪和数据记录的费用 57

2.4.4 眼动追踪相关费用 58

2.5 设备 58

第3章 页面布局 61

3.1 人们如何浏览网页 64

3.1.1 用户如何查找新闻 64

3.1.2 用户如何浏览购物页面 67

3.1.3 用户如何购买特定商品 72

3.1.4 用户如何执行特定任务 75

3.1.5 用户期望的网页设计标准 78

3.1.6 根据高层意图进行设计的弊端 79

3.2 页面组织 80

3.2.1 简洁的页面有助于用户查看 80

3.2.2 内容布局和视觉指引 84

3.2.3 设置优势区域 86

3.2.4 合理分配屏幕版面 112

3.2.5 突显最重要的元素 117

3.2.6 存在误看元素的代价 119

3.2.7 用眼动追踪改善页面布局 122

第4章 导航 126

4.1 菜单和信息架构 127

4.1.1 全局导航 127

4.1.2 一致、稳定、简捷的导航 129

4.1.3 欠佳的二级导航 131

4.1.4 消失不见的导航 134

4.1.5 不当的信息架构会让用户离开 144

4.1.6 菜单中的品牌和营销术语会

让用户困惑 148

4.1.7 功能导航 153

4.2 导航元素 155

4.2.1 链接和标题 155

4.2.2 按钮 158

4.2.3 面包屑导航 169

4.2.4 搜索输入框 169

第5章 Web设计的基本元素 172

5.1 主页 173

5.1.1 登录 175

5.1.2 隐私条款 176

5.1.3 联系信息 176

5.1.4 语言选择栏 177

5.2 徽标和广告标语 177

5.3 购物车 178

5.3.1 何时使用展开的购物车 185

5.4 表单、字段和应用程序 189

5.4.1 栏目的分组和字段标签的设置 189

5.4.2 不要把电话号码字段分割开 201

5.4.3 短表单易于查看 202

5.4.4 避免在字段中使用提示语

（至少目前如此） 204

5.4.5 如何减少对表单的注视 205

第6章 图像 208

6.1 什么样的图像能吸引注意力，

什么样的不能 209

6.2 如同障碍物的图像 210

6.2.1 删除用于填充页面空白的图像 216

6.3 吸引人们注意力的图像的特征 217

6.3.1 对比度，质量和细节 217

6.3.2 创新性 226

6.3.3 与内容的关联 231

6.3.4 有吸引力的元素 239

6.3.5 承载信息的图像 283

6.3.6 类似广告的图像 296

6.3.7 卡通和插图 298

6.3.8 电子商务网站上的图像 302

6.3.9 运动的图像 315

第7章 广告 337

7.1 丛林法则 338

7.2 人们什么时候注视广告 339

7.2.1 执行任务与浏览 339

7.3 用户如何注视不同类型的广告 344

7.4 广告位置的影响 346

7.4.1 用户界面中广告的相对性

和竞争性 347

7.4.2 广告盲现象 351

7.5 文字（赞助商链接）广告 354

7.5.1 为什么人们会看搜索结果页面

上的赞助商链接 354

7.5.2 其他页面上的赞助商链接 355

7.5.3 赞助商链接和热马铃薯行为 357

7.6 网络广告中应该加入图形吗 359

7.7 内部宣传广告：与网站风格相匹配 360

7.7.1 评价宣传广告的可看性 366

7.8 外部广告：怎样才能奏效 368

7.8.1 单独的或与图像分离的易读

大字体图形文字 368

7.8.2 有吸引力或令人兴奋的图形属性 371

7.8.3 动画广告 376

第8章 用户在网络中的注视行为 385

8.1 过度查看与必要查看或期望

查看的对比 386

8.1.1 过度查看让人精疲力竭 392

8.1.2 一些棒球网站的糟糕设计 395

8.1.3 当信息极为复杂时又会怎样呢 404

8.2 惯性行为 408

8.3 记录 414

8.4 选择性忽视 414

8.5 点击之后的行为 417

8.5.1 点击之后的验证 417

8.5.2 点击之后的注视 421

8.6 不间断注视 424

8.6.1 无耐性注视 424

8.6.2 残留注视 427

8.7 眼动追踪技术揭示了另一层次

上的用户行为 428

附录 用户对网页界面上基本元素的关注程度 431

术语 433

致谢 435

作者简介 437