Tag Archive for 'Eye Tracking'

用户测试揭示Page Fold迷思

【译者:耿人杰 原文:The myth of the page fold:evidence from user testing 作者:Fiz YazdiJoe Leech

身为Web专家,我们对page fold为什么对用户来说是不可逾越的障碍产生过思考。在过去的6年中,我们对超过800名的用户进行了测试,只有3个案例有用户将page fold视为他们找到内容的障碍。

在此文中,我们试图打破page fold给我们带来的困惑,并总结出一些确保fold以下的内容能被有效展示的建议。

首先,什么是fold?

Above the fold是一个平面设计术语,通常指报纸版面上第一版折叠线以上的重要阅读部分。在Web领域,一般是指首页第一屏你所能看到的、不需要向下滚动的那部分内容区域。

(译者注:Above the fold这个词组来自纸质报纸,报纸送到家、通过自动贩售机或报摊出售的时候,为了节省空间一般都会折起来,这样只能看到一半内容,报纸会在这一半版面上绞尽脑 汁,争取更大销量。above the fold就是这一半绞尽脑汁的内容,而fold就是这道折痕。如果below the fold,内容自然就会差一些。这也很好的解释了为什么很多报纸头版的下半部分都是广告。此段注释摘自:http://www.yummyux.com/?p=54

为什么不用担心fold?

用户告诉我们,他们不介意滚动屏幕。从用户测试的行为观察中我们也验证了这一点。我们发现用户很自然地在页面上做很长的滚动来寻找他们想找的内容。一个适合快速扫视的第一屏页面能够有效地的展示品牌而不用担心用户看不到fold以下的部分:

longpages

BBC,Play,Amazon.co.uk和New York Times网站页面的fold相对位置。

从用户测试中寻找真相

当我们在cxpartners进行用户测试时,我们会利用眼动跟踪技术。眼动跟踪可以让我们了解用户看到了什么。之后,我们将获得的数据制作成一系列的热区图。热区图可以展示出一组用户的视觉焦点集合。

滚动条可用于揭示fold以下的内容长度

从热区图上我们经常可以看到在滚动条上有一个很亮的热点。这表明滚动条通常被用来揭示页面的长度,用户期望页面能滚动。该热区图展示如下:

scrollbar

在fold以上有更少的内容有助于促进fold以下部分的浏览

以下图片来自于最近我们为Bristol Airport做的一项眼动研究。下图展示了两种不同的主页设计风格。从中我们惊奇地发现在fold上有更少内容的页面(一个大的内容块、相对小的2个内容块),在fold以下的部分吸引了更多的浏览。

brisair

左侧的图片在fold的上方更拥挤一些,而右侧的则相对清爽一点。

什么时候用户不浏览fold下方的内容

如我在前言里提到的,只碰到过3次用户在fold以下部分几乎没有点击。这3个案例都有着相同的原因。

一种情况就像去年我们给First Choice做的用户测试一样。页面很长,但用户并没有滚动页面的操作。

fcold蓝色水平线是妨碍用户滚动的原因。

很长的蓝色“Accommodation”通栏标题扮演了障碍的角色。这是很普遍的情况,突显的水平分割线不利于吸引用户滚动。

First Choice目前已经改进了设计,让内容显示在fold之上。

fcnew1

在fold之上的图片库暗示在fold下面还有内容。

促进滚动的设计建议

最后,我们提出3点建议来确保fold以下的内容可见:

  1. 少即是多:不要试图将所有的内容放到fold上方。良好地利用空白和图片能促进用户浏览更多的内容。
  2. 生硬的水平线不利于滚动页面:但这并不意味着完全不要通栏的水平线元素。让一小部分内容在fold处可见有助于刺激用户滚动页面。
  3. 避免使用内嵌的滚动条:浏览器的滚动条是一个页面信息量的提示器。而内嵌的iFrame和其他包含滚动条的元素会打破这种提示。这也会导致内容不可见。

作者于2009年10月9日10点更新:

做一些澄清。在我们的用户测试环境中,我们给用户呈现的浏览尺寸是1024×740。因此平均的页面fold在700 px左右。

我们的研究表明:有效的显示区域还是fold以上的部分,这并不令人惊讶。而本文想表达的观点是:从现实数据上看用户确实会滚动页面。在有滚动的线索且没有滚动设计障碍的情况下,用户会滚动页面。

作者于2009年10月9日13点更新:

Richie Lee make a really good point below 有有关fold以下内容的视觉线索提示。

这里有一些关于电子商务商品页面和表单fold的内容:

用户测试:眼动跟踪和出声思考

【译者:耿人杰 原文:User testing:eye tracking versus think aloud 作者:Steve Cable

同步发文于译言:http://article.yeeyan.org/view/gengrenjie/47337

引言:文章告诉我们在用户测试中何时使用眼动跟踪(eye tracking),何时使用出声思考(think aloud)。对于用户研究人员选择研究方法有一定参考价值。关于什么是出声思考(think aloud),请看这篇:http://qianjigui.javaeye.com/blog/255410

———————————— 全文的分割线 —————————————

在cxpartners,我们既进行眼动跟踪测试(eye tracking),也进行出声思考(think aloud)。作为一个进行过这两种测试的一个顾问,我经常被问及哪个测试得到的结果更好。其实,问题的答案取决于什么是你想寻找的信息。

眼动跟踪是得到那些用户无法告诉你的信息的好方法

(或许是不想告诉你的信息)

观察用户在看哪些东西对于创建高效的页面布局很有帮助。它也能给你提供一些精确的数据:“x个人看到了这个按钮,y个人完全忽略了这部分内容”。

但眼动跟踪不能告诉你为什么参与者看了那些内容。一个经常被关注的页面元素不一定意味着这是一个成功的设计,参与者也可能是由于它的令人费解、对它不喜欢或者某些其他原因而对它保持关注。

这也是出声思考的一个有利之处

通过与用户交谈关于他们为什么如此操作能帮助我们理解他们的想法,并促使我们设计出更有用的产品满足他们的期望。

然而,用户有时所说的可能并不是他们真实所想的。幸运的是,我们已经这样做了许多用户的测试。在这些测试中我们能察觉参与者并没有完整表达他对事物的理解,因此我们会有所准备并想办法进一步获得他的完整想法。

Eye tracking versus think aloud

使问题简单化

眼动跟踪是一个通过大量短期测试就获得明确结果的好方法。例如通过测试几个可选的关键页面设计,可以很明确的看到哪个设计表现更好。

而出生思考是通过较少参与者和较长时间做深入调查的好方法,如仔细查看一个大网站或一个订阅/支付流程。

两者很难从本质上说谁更好。所以我们通过和我们的客户一起工作来确认哪个方法更适合这个客户。有时,我们会在项目的不同阶段结合这两种技术来保证得到最好的结果。

首次在译言上发文

yeeyan_logo

把眼动跟踪的文章投到译言上了,也顺势体验了一把在译言上提交文章和翻译的过程。作为国内web2.0的标杆网站之一,译言的团队一直在做着正确的事情,所提供的内容平台也一直体现了很高的价值。

什么是眼动跟踪(译言):http://www.yeeyan.com/articles/view/gengrenjie/44318

什么是眼动跟踪(gengrenjie.com):http://gengrenjie.com/2009/06/02/什么是眼动跟踪(eye-tracking)?/

什么是眼动跟踪(Eye Tracking)?

这是一篇介绍什么是眼动跟踪(Eye Tracking)的短文,也是眼动仪的原理说明。因为觉得价值颇大,所以花费了点时间翻译。作者是眼动研究专家,博客里有不少用户研究的内容。

原文地址:http://eyetracking.me/?page_id=9

———————————— 全文的分割线 —————————————

什么是眼动跟踪(Eye Tracking)?

为了理解眼动跟踪是如何工作的,首先我们来了解一下人的眼睛和视觉系统是如何工作的。

一个眼动跟踪系统,诸如Tobii T60 / T120 / X120通常是通过监测目标人群的眼睛在数码图片上的反应和典型移动来进行的。人的眼睛通常是不停的移动的,直到它停留在某一点上。我们发现有超过10多种不同的眼睛移动类型,它们中最重要的是扫视(saccades)、固视(fixations)和平滑移视(smooth pursuit)。当眼睛停留集中在某点是我们称它为固视,当在若干固视点间移动时我们把它称做扫视。见下图:

eye_movements

当眼睛注视时,通常需要100600毫秒,在每个点注视时大脑就开始处理从眼部接受到的视觉信息。扫视通常是指从一个注视点快速的跳跃到另一个注视点。通常每次扫视的平均时间是20-40毫秒。在这期间,眼睛不对大脑传送信息。

人眼的视野大概在200º,绝大多数光感细胞位于视网膜上的中央凹(fovea),它们是我们能够看够各种有色彩事物的关键因素。这个中央凹区域相当小,通常只覆盖我们眼睛视野的1-2度。值得一提的是,这些光感细胞也是我们的大脑能接受视觉信息的关键因素。见下图:

human_eye

我们的感知通常略大于我们能看到的。举例来说,当我们阅读一段文字时,我们通常能看到右侧的12-15个单词和左侧的3-4个单词,这表明在注视中心点附近有一个18个字符宽且中心不对称的感知区域存在。利用中央凹外围的视野,我们也能看到模糊的图像,但仅限于察觉移动和对比。见下图:

field_of_vision

当我们的眼睛处于休息状态时,大脑的注意力可能转移到其他地方。也就是说我们可以转移注意力但眼睛不移动。然后,对中心凹视野监测通常是有效的判断注意力变化的手段,因为大脑通常无法处理中心凹以外的复杂刺激信息。不少例子证明,大脑在处理中心凹视觉信息时比外围视觉信息更有效率。因为相比清晰的视觉信息大脑需要花更多的努力来理解模糊的视觉信息。这也是为什么可以通过跟踪眼部运动,尤其是注视来解释人们的行为。这就像我们所了解的,为了了解事物我们只能注视它或离它很近。如果某人没有注视,他不可能看到并阅读文字。眼动跟踪记录这些移动,并且当眼睛注视时,标记中心凹的位置。

通过分析眼部移动,我们能了解人们的行为。注视时间的长短通常表明了大脑处理视觉信息的过程和认知行为的发生。如,在阅读时,注视常见单词的时间通常比非常见单词时间短。

———————————— 相关阅读分割线 —————————————

关于“眼动仪”:http://ucdchina.com/snap/3181

浅析眼动仪在可用性测试中的应用:http://ued.alipay.com/?p=497