使用眼动跟踪技术评估搜索框的可用性：一种实用的方法

作者：Matteo Penzo　来源：中国欧盟可用性研究中心 　 酷勤网收集　2009-04-19

目前来说，输入框（form）是最为常见也几乎是用户向网站输入信息的唯一途径。Web2.0使得输入框被广泛地使用，例如在现有的几个网站：Flickr?, Del.icio.us和 Writeboard?上，用户通过输入框来提交他们的标注、评论等信息。电子商务网站也极度依赖输入框，用户通过它才能找到并购买商品。因此输入框的可用性对整个网站的可用性影响非常大。
　　通常输入框主要有以下三个重要元素：标签、输入区域和提交按扭。Penzo通过眼动跟踪测试来评估搜索框在页面的合适位置，以及这三个元素之间如何放置。同时探求使得输入框好用的原因。
　　这项研究依据用户对网络的不同熟练程度将用户分为三组：新手用户、中间用户和熟练用户。在研究中每位用户先使用Google网站，以熟悉任务。接着从Google、Amazon、eBay、Flickr和useit.com中随机选取三个，进行三轮测试。每轮测试任务均是找到搜索框、定位、提交，提交完成标志着任务的结束。

虽然测试中有个别例外情况，但整体上的结果仍具有很强的趋同性。根据用户的熟练程度结果中显示出来的搜索模式有所不同。新手用户会上下左右反复地搜索，而熟练用户会直接输入，从不四处观望，因为他们知道完成任务所需工具在哪里。这从眼动仪的研究结果中不同用户注视区域的大小即能显示出来。图1中显示了熟练用户与新手用户在使用搜索框时极为不同的行为模式。
　　如图1所示，新手用户会先看一眼输入框，再看一眼提交按扭，接着看一眼标签。这一系列行为会不断重复，即使在他们进行某项输入时，他们仍然会反复查看输入框的所有元素以确保他们所做的是对的。
　　熟练用户会首先直接注视输入框，完全忽视其它东西，直到完成输入并且在即将提交的那一刻，才会长时间扫视提交按扭，用户应该是早已感知到该按扭的存在，只是一直没看而已。通常熟练用户会直接按回车键提交搜索。

图1—新手用户使用Google进行搜索时的注视区域图

新手用户需要确保他们行为的正确性，因此在输入文字时不断地审查他们正在输入文字的区域是否就是搜索框。这个发现在最开始的热身测试，即使用Googe搜索时表现得很明显，但在更复杂的任务里这个结论也是成立的。

给用户体验设计师的实用建议——输入框要有清晰的标签。加标签并不会给熟练用户带来 多大影响，但对于新手用户来说会有很大帮助。

在Amazon.com，由于其搜索框没有google那么大和突出，多少会让用户感到困惑，特别是新手用户，他们需要花费1.6秒才能完全理解搜索框。
在Amazon和eBay上，下拉列表离输入框很近。研究结果表明，用户通常会首先看这些下拉框，并长久注视。图2是一个热点图，它显示了所有新手用户在eBay这个页面的每个元素上所花费时间的总和。似乎所有用户都觉得下拉框是最重要的部分。

图2—热点图显示了所有新手用户在eBay这个页面的每个元素上所花费时间的总和

当某个页面的内容太多，突出显示输入区域的标签可以帮用户快速识别，这样可以减少用户重复注视的次数。在eBay上，搜索区域的重要元素——提交按扭位于页面最右端，这样迫使用户注视该区域后，再回到输入区域，这样不断来回注视，加重了他们的认知负担。
　　专家用户仍然既不注视标签亦不注视下拉列表—即使稍微地注视也是认知负担。但与新手用户有所不同的是：一旦输入了搜索关键词，他们会直接将注意力移向提交按扭。图3是热点图，显示了所有熟练用户注视Amazon上各元素的时间。

图3—热点图显示所有熟练用户注视Amazon上各元素的时间

搜索框绝非Flickr网站的突出特点。但它的搜索区域很紧凑：输入区域很窄，标签位于其上方，按扭在右边。这一设计很成功。图4显示所有用户注视各元素的时间，可以发现用户最终将视线集中于搜索区域。

图4—热点图显示所有用户注视Flickr各元素的时间

这种输入框形式在测试所选的所有网站里表现最为出色。因为整个搜索区域很紧凑，完全扫视一眼所需时间不会超过1秒。并且，因为输入框有明确的标签，新手用户能很快领悟该输入框的用途。

useit.com 是Nielsen自己的电子商务网站。他对许多电子商务网站做过研究。所以相信对该网站搜索框的放置问题研究一下一定有趣—它可没有标签。
　　对于该网站的搜索框，无论是新手用户还是中间用户都没法立即发现它。因此，可以说要将搜索框置于网站右上角这条标准，对于这些用户似乎不奏效。由于没有标签，新手用户需要来到页面最右端确认该输入框的意图。但对于熟练用户来说—他们可能是Nielsen网站的目标用户—在第三眼就能发现搜索框，并且开始输入搜索文字。

图5—该图显示了新手用户在使用Useit.com的搜索框时的扫瞄路径

虽说没有对输入框进行深入的研究，但该研究还是总结出了一些有意思的搜索框设计指南。
搜索框标签可以帮助新手用户和中间用户，他们在一开始会试图在网站上寻找这样的标签。他们期待标签出现在搜索框左边或者上方。熟练用户完全不会在意和使用标签，就好象不存在这些标签一样。

下拉列表是很吸引眼球的元素。对于是否使用下拉列表，你总需要考虑再三。只有在别无它法的情况下才使用下拉列表。如果你想创建一个新手用户就能使用的简单搜索框，尽量避免使用下拉列表这种形式，因为它们会加重用户的认知负担。

紧凑让搜索框变得容易读取，因此，要让搜索框尽量紧凑。当用户对某项东西不太理解的时候，他们会整体扫视该区域直到能理解它们。在所有眼动测试中，表现最优秀的是Flickr的搜索框，它非常紧凑，标签位于输入框上方，这样用户只需要看页面的一小块地方，不用来回看。因此应该将标签放在搜索框的正上方或左方。

应该将搜索框放在一致的地方，这应该成为一种标准，可以用来弥补那些不加标签的问题。如果实在不想在搜索框处加标签，至少应该将搜索框放置在一个独立的区域，这样用户比较容易明白它的意图。如果你这样做，不仅能让熟练用户受益，因为他们从来不看标签，也能让新手用户受益，他们完成任务极度依赖这些标签。