【译者：耿人杰 原文：Web form design guidelines: an eyetracking study 作者：Chui Chui Tan】
同步发于译言：http://article.yeeyan.org/view/gengrenjie/46650
———————————— 全文的分割线 —————————————
表单是网站的重要组成部分。从商业网站的联系到反馈、从注册到交流、从在线银行到搜索都能见到表单在发挥巨大的作用。
什么是我们想要的，我们为什么想要这样
在 cxpartners，我们已经为很多不同的公司设计、测试了很多新的或已有的表单。在用了6年时间完成这些表单设计任务后，我们总结了一组黄金准则。
我们想验证这些准则，并寻求进一步深入了解表单设计各个方面。这促使我们进行一个眼动跟踪研究（eye-tracking study）来了解人们在不同的表单设计面前是如何反应的，诸如：当人们面对一个长长的文本输入框列表时，他们的眼睛究竟在看哪里。
我们也想找到一些优化表单设计布局的方法，来确保用户理解哪些表单是他们真正需要填写的，同时也希望他们在填写时能够专注于表单。
最后，我们想要提供一个配有数据支持的设计指南列表。通过它，我们和其他设计师能够设计出更好的表单。
相关研究
在Luke Wroblewski的“Web Form Design”，他提到了一些非常有用的表单设计原则。基于他的推荐，Matteo Penzo和他的同事已经进行了一次特定的眼动跟踪测试来测量针对不同label布局的眼部扫视活动(saccadic activity)和扫视次数(saccades times)。他们为这个测试特别设计并创建了4种类型的表单，每个表单有4个输入框（input fields）组成。
我们的研究与众不同之处
- 不像Penzo的研究专注于效率（眼睛在不同注视点的移动距离和在不同的点间移动花费的时间），我们对如何更容易的完成表单和提高用户满意度更感兴趣。事实上，我们想找到一种用户填写起来毫不费力的表单设计形式。
- 不同于为了研究设计新的表单，我们使用了4种已有和熟悉的注册表单：Yahoo! Mail, Googlemail, Hotmail and eBay。我们选择这些是因为我们想尽可能的反应实际的情况和覆盖更广的设计范围。
- 我们选的4个注册表单都有很好的组合设计(a good combination of designs)。举例来说，每一种都代表了不同的布局风格、不同的控件分组和不同的表达必填和选填的方式（如表1所示的）。
表1：研究所选的4个表单
Google Mail注册表单
- 标签垂直左对齐
- 控件间没有分组
- 没有选填提示（全部都是必填）
Hotmail 注册表单
- 标签垂直右对齐
- 有分组，以分隔线和粗体字标题为区分
- 在标签前有*表示必填
Yahoo! Mail注册表单
- 标签垂直右对齐
- 有分组，以分隔线、数字和有颜色的标题为区分
- 没有*，用斜体字表示选填
eBay 注册表单
- 标签垂直顶部对齐
- 有分组，以阴影标题为区分
- 在标签后有*表示必填
统计关联
值得一提的是，此研究的主要目地是寻找设计表单实践中的最佳流行趋势。在统计上这可能并不一定有充分的根据。然而，我们已经测试了那些熟悉这些在线表单的目标用户，已经在测试中使用那些在实际正被使用的表单形式，已经提供给用户一个良好的测试环境并鼓励他们像在家中一样操作这些表单。这些研究发现将是进一步研究的基础。
我们是怎么做的
我们在位于布里斯托尔的办公室测试了8个参与者（6女2男）。这些参与者平均年龄27岁，年龄范围在22至33岁之间。所有的参与者有在日常生活中使用在线购物或Web邮件的经历，所以他们很熟悉Web表单。
每个参与者随机的选中2个表单，表单的出现顺序在所有的参与者间进行了平衡。参与者被要求填写这些表单，假设他们正在家中注册使用这些Web邮件服务。
在这个研究中，我们不仅参与者对于填写表单的评论，而且观察他们的动作和分析他们的眼部活动。通过汇总所有的数据，我们能够洞察用户在填写表单时的一些行为，并优化表单的设计和提出创建表单时应注意的事项。
我们发现了什么：
原则1：要垂直而不是水平
用户从上往下的填写表单。因此简单的垂直布局的表单通效果常好于多栏的布局。
所有的被测表单虽然标签的对齐方式不同，但都是垂直的布局。在和左右标签对齐对比后，我们发现垂直顶部对齐效果更好（ eBay的那个）。参与者发现相对于左右扫视，这种形式更容易在一列中向下进行扫视。
“随着我的眼睛向下扫视发现下一个输入框，这很容易”
小贴士：在所有的地方都使用简单的垂直布局和顶部标签对齐.
原则2：标签左对齐更清晰
有时候由于一些限制（如能垂直的使用空间有限），不可能使用垂直布局的标签，水平对齐布局也是可选的方案之一。
Yahoo和Hotmail都采用标签右对齐的方式，而Google Mail采用左对齐的方式。参与者的眼动跟踪测试表明，并没有明显的结论能证明标签左对齐和右对齐哪个更好。然而，标签左对齐通常被认为传达信息更清晰。
虽然标签左对齐被认为将使造成表单填写最慢，那是因为需要更多的眼部注视和更长距离的视线移动。但这对于表单设计的目的而言并不总是一件坏事。标签左对齐的表单通常有更整齐、更清晰的布局，它们能使用户快速的扫视每个标签，这增加了标签的可读性。
在他们的测试中，Penzo总结说：“粗体标签应该被尽可能的禁止，因为他们更不易阅读。”然而，这个结论与我们看到的事实相矛盾。我们的发现这也符合Luke所赞同的，即“粗体更能让标签在前景中突显出来”。我们的参与者也觉得使用粗体标签将使填写变得更容易。
“Google mail更容易阅读，因为它是粗体的”
小贴士：如果垂直对齐标签不可行,那么使用粗体标签并左对齐.
原则3：什么时候打破“只用一栏”的定律
有一些可以预期案例表明，有些情况下“只用一栏”的定律是可以打破的。用户期望看到姓名（姓/名）、日期（年/月/日）和时间（小时/分钟）被写在一行里。虽然如此，但如果要将多过一个的控件放在一行内的话，需要设计师非常小心。
Yahoo和eBay的表单都有姓和名在同一行。许多参与者认为这样很笨拙，需要从左到右的填写两个部分，然后继续在垂直方向上继续填写。
然而，参与者并没有对Yahoo发表同样的评论。正如在图1所示，eBay的表单在“姓”的部分相比Yahoo的有更多的注视点和更长的注视时间。我们猜测可能有以下两个原因：
- Yahoo的页面在“名”和“姓”间的距离相比eBay的更短；
- 更重要的一点，两个输入框共享一个标签（Yahoo的生日输入：日/月/年是同样的道理）。从心理学角度而言，参与者相信这两个输入框属于是单一问题的一部分，这让他们并没有感觉到这是两部分信息。
图1：注视点图（30-40秒）表明eBay表单的“姓”部分相对Yahoo有更长的注视持续时间
另外有趣的一点是，Yahoo非常明智的将次要的标签文字直接包含在文本框中：First Name和Surname，这里使用淡灰色的字体，一旦用户开始输入这些字体将自动消失（图2）.我们喜欢这个方法，它没有额外的视线移动，用户也不可能错过阅读标签。一个需要谨记在心的问题是确保你的实现代码能支持这样的效果。
小贴士：当超过一个输入框在一行时，确保他们被设计成像一个完整的整体（如：共享同一个标签或把它们放的近一点）。
图2：Yahoo将次要的标签内置于输入框中，当开始输入时就消失
原则4：当标题分组很重要时，将其设计成有颜色或有阴影的
我们设计表单时可将它分割成可管理的几个部分，并将相关的控件放在一起，这样当在填写表单时就会感觉表单更短。
在测试中，Google mail是唯一一个没有将表单内容进行逻辑分组的，而其他三个都将相关的控件进行了分组，并给每个分组一个标题。
从眼动跟踪的结果来看，参与者并没有对分组的标题产生额外的注意力消耗（请看图3的Hotmail注意力热图，它展示了参与者在页面上看或没看过什么）。有颜色或带阴影字体（请看图4 eBay的注意力热图）的标题可能更能吸引用户的注意力。
“阴影字体的标题清晰很多”，“[Yahoo] 的输入框分组很好，紫色的分组标题很好用，输入框被很清楚的划分，一眼就能理解”
图3：Hotmail的注意力热图表明参与者并没有将注意力集中在分组的标题上。
图4：eBay的注意力热图表明参与者并没有将注意力集中在分组的标题上。
将相关的输入框进行合适的分组时相当有效的。问题就是：是否用户总是不得不去看分组的标题？这可能取决于标题的目的和它们在表单中的重要程度。我们的建议是如果你想让用户去看标题，那就使用带阴影或有颜色字体的标题。如果标题不重要，那就不用刻意去那么做。我们需要避免用户在填写时迷惑到他们。
小贴士：如果想让用户看标题，那么就使用带颜色或阴影的字体强调它们。
原则5：不要使用*，尽量用清晰的方式表示可选
对于是否要用“*”来表示必填项或使用文字“选填”表示选填项，一直存在着争论。eBay 和 Hotmail都使用*号来表示必填，而Google mail没有任何提示，这可能被认为所有的项都是必填的。Yahoo是唯一一个使用斜体字表示选填的，如“可选e-mail”。
没有用户认识到Yahoo的可选项说明，因为他们不认为斜体字代表了可选的含义。数据也同样表明，没有参与者注意到*号和在页面顶部关于*号的说明（见图5，显示了那里没有注意力涉及到）。参与者想要完成表单，他们中的一些提到：当他们不想提供特殊信息或他们认为这个问题没必要时才会注意到*号或其他表示选填的标志。
“我不会考虑它们（*号好选填标识），除非我认为这个问题完全没有必要”
图5：Hotmail的注意力热图表示参与者没有注意到*号（表示必填）
当人们看到一张表单时，他们总有填满他们的欲望。如果有可能，只问用户那些最重要的信息。如果出于市场调查或其他一些理由需要放一些选填内容，我们建议清晰地标注这些问题，而不是把必填内容标注出来。
从我们之前一个针对数百用户的观察测试中，我们发现不是所有的用户知道“*”的作用。因此，我们建议将文字“选填”以淡灰色的格式显示在输入框的内部，就像图6所示的那样。在这个例子中，这样用户就不可能错过它，且没有额外的眼部移动来发现它。我已经用此设计对用户进行了测试。
小贴士：只给出必须要的信息。如果可选项必须有，使他们更易于辨识而不要用*号来强调必填。
图6：将术语“选填”内置在输入框内，表示这是选填项
原则6：对数字和邮编使用单一输入框
我们已经进行了多年的用户体验测试。在此期间，我们经常可以看到用户对于如何填写数字（邮编和电话号码）很迷惑。
eBay对于电话号码的输入用了两个输入框，包括一个电话的国际代号输入框。虽然有一个在输入框的下方有一个输入的示例，但对于需要如何输入一个移动电话号码仍不是很清晰。就像图7所示的eBay注意力热图所示，红色的点（热点）表示用户在电话号码输入框上耗费了最多的注意力。
“你是怎么输入一个手机号码的？”“体验不是相当友好”
图7：eBay的注意力热点图表示用户在电话号码输入框上耗费了最多的注意力
有一些方式可以避免这个问题。其中之一就是将问题简单话。单个输入框通常相比两个或多个输入框更有效率。同样重要的一点是需要有一个良好的校验系统，它能判断是否用户的输入是有效的。用户经常不确定是否应该在邮编中包含一个空格。一个好的设计应该能有一定的容错性（有没有空格都可以接受）。如果不是这样，一个简单、清晰的错误提示是必须显示的。
电话号码是一个有技巧的设计。国际代号可以以“00”或“+”开头。什么样的格式能被系统接受应该被清楚的表明。此外，个人可能会以不同的方式记忆他们的电话号码。如，一个英国的手机号码是，07812345678，某人可能以3-4-4的格式记忆（078 1234 5678）或5-3-3的格式记忆（07812 345 678）。如果能接受所有类型的输入，那将是最完美的。
小贴士：对数字和邮编使用单一输入框，允许多种格式的输入。如果不行，使用一个良好的校验系统并提供清晰的错误提示。
原则7：避免多任务。如果必须有，确保最重要的消息突出
当用户正在填写一个表单时，他们总是像完成任务，期望能快速结束并转移到主要的任务上，诸如购买或注册一个服务。如果添加任何非重要的信息需要他们来阅读，就会使注册过程变长。这是需要被避免的。
然后，如果有一条重要的消息需要用户了解，它应该被高亮显示并出现，确保用户不会忽略它。
如图8a所示的，参与者计划没有看到Hotmail页面顶部的信息提示。他们完全忽略了此部分，直接进入了表单的下一部分。相反，在eBay 的页面上，参与者不仅阅读了在表单上部的提示信息，而且也阅读了右栏的提示信息（见图8b）。这些信息都做了高亮处理并被内置或平行于表单，因此都获得了用户的关注。
小贴士：让用户专注于他们的任务，避免对他们的干扰。如果一个提示很重要并且需要用户关注，确保他们足够突出到能吸引用户的注意力。
图8：（a）Hotmail的注意力热图（b）eBay的热图展示了高亮和内置（平行）于表单的提示有可能被用户阅读
原则8：请注意引入实时反馈
每当用户完成表单输入的某一项后，Yahoo通过在输入框后显示一个小标记提供了即时反馈。几秒后，标记会消失（图9所示）。大多数参与者任务他们注意到了它们。然而，并有些人觉得动态提示会让他们混淆一些东西。因此，一些人给出了正面的评价，另一些则认为他们是干扰。
“提示小图标很有用，它能有效帮助我确认输入的内容”
即时反馈对于那些需要即时呈现和立即注意的信息很有用。
小贴士：用合适的方式小心地使用即时反馈.
图9：Yahoo的截图，在输入框的尾部提供即时反馈（正确或错误提示）
原则9：将备注放在相关的输入框旁
eBay 和 Googlemail在每个输入框旁都有备注，Yahoo则在输入框尾部有即时动态提示。Hotmail，从另一个角度来讲，在每个输入框下方有（动态）的描述。
总体来说，相对在输入框下方参与者更喜欢在输入框尾部看到描述信息。
“我更愿意它们在尾部，这能让我看到它们”
如果在输入框底部都使用黑色字体的描述，将容易使页面变得杂乱，就像Googlemail的页面那样。
“那看上去像一大堆的文字，非常凌乱”
Yahoo和Hotmail都将描述放在输入框尾部。但有趣的是参与者更多的阅读了Hotmail的描述而不是Yahoo的（如图10中两者的对比）。Hotmail有一个整齐的布局，所有的输入框都保持相同的尺寸和相同的水平和垂直对齐方式。相反的是，Yahoo将不同尺寸的文字输入框和下拉列表框混合排列，并且没有对齐。因此当描述出现在尾部时，用户容易忽略和错过它们。
图10：表明Hotmail用户相比Yahoo用户更多地关注了控件尾部的即时说明
此外，当给每个控件都提供描述时，非常有必要确保它们被放置在正确的位置。如，eBay提供如何选择一个密码的描述（要求至少6位数字或字母）。然而，它们被放置在“重新输入密码”框的下方。正确的方式应该是在第一次输入密码前提示，在“创建密码”输入框附近（见图11）。
小贴士：如果可能，将相关的描述放在每个控件后，并确保正确的对齐方式.
图11：eBay的如何选择一个密码的描述应该是在第一次输入密码前提示，在“创建密码”输入框附近
原则10：如果表单有多页，告诉用户进行到哪步了
我们建议使用滚屏的方式显示表单，而不是创建很多很短的表单页。虽然所有我们进行眼动跟踪测试的表单都在一页之内，但参与者仍然希望能知道还剩下几步，之后会有些什么内容。
小贴士：提供给用户一个进度显示器来展示完成一个注册或支付需要完成哪些步骤.
其他原则
在以上内容外我们还有其他一些原则：
- 经常提醒用户他们想要什么，然后问他们是谁，以便建立信任（例如’索取资料（请填写以下部分）
- 使用cookie来记录用户的信息（不是密码），来帮助他们完成一些重复性的工作
- 永不使用复杂和严格的条款来迷惑用户，如强制要求用户同意订阅每月简报时。用户不喜欢对他们耍计谋和用一些细节迷惑他们的公司。
总结
当用户在填写表单时，他们不喜欢被显著地干扰。他们希望尽可能快的完成任务。因此十分有必要将表单设计得清晰和整齐。用户乐意完成一个容易理解、简洁利索，但有一点长的表单。相反，他们不欢迎被视觉分割且复杂的表单。
