怎样减少用户填写表单的痛苦（一）

毫无疑问，所有的人都讨厌填写表单，不信你可以问一下你身边的人对于填写表单的态度。

最常见的表单是登陆和注册，号称左右门神，是迎接新用户的第一道门槛。这里有一个案例：修改登陆注册表单后为网站年收入增加三亿美元，你就可以看出两个小小的表单意味着什么。

表单使人痛苦是一个不能改变的事实，所以我们来谈怎样减少用户填写表单的痛苦，而不是消除。

我会用不止一篇文章来谈这个问题，在开始之前，你还需要明白两个事实

1. 有关用户体验的问题，所有不考虑实际情况就对号入座的行为都是耍流氓。

2. 这是一个永无止境的话题，因为易用性和人性化是永无止境的。

啰嗦完毕，开始正文：

我认为在论述“怎样”这类问题时，实践和数据是最有说服力的，但我们不可能总是拥有数据和实践的条件，所以靠个人经验和推理能力也是不错第二选择，但就难免要落下点意淫和忽悠的嫌疑了。

今天这几个结论全是纯实践+数据的科学论证，来自马泰奥·彭佐发表在UXmatters网站上的文章：Label Placement in Forms，这篇文章发表于2006年7月，但至今仍位于UXmatters文章排行榜的第一名。

这篇文章里，佐哥研究了人们在看一个简单的表单时，眼球移动的情况，学名叫眼动追踪。通过摆弄表单中标签和输入框之间的位置关系，他做了这么几个实验：

实验一：Label 标签左对齐，并位于输入框的左侧

Label标签左对齐，并位于输入框的左侧

这是当时网页中最流行的表单布局。测试结果发现，所有测试用户在标签和输入框之间都会有一个明显的眼球跳动，学名叫眼跳（下图中的蓝线）。这意味着用户简单的感知到了它们之间的联系。然而，实验中一个眼跳的平均延迟时间是500毫秒，有点长，这表明用户正在经历着一个较沉重的认知负担。

标签和输入框之间的空白貌似很好地引导用户的视线移向输入框。但事实上，在这段空白上没有视点（下图中的蓝圆），标签和输入框之间过多的距离将迫使用户花费更多的时间检查两者的对应关系。下图展示了这项测试的眼动追踪数据。

实验一数据

另外，你可以看到表单中包含了一个下拉菜单：Number of colleagues，佐哥关于它的发现是：下拉菜单是最抢眼（eye-catching）的表单元素。当面对一个简单的表单时，所有用户的第一个视点都落在下拉菜单上。这个表单元素清晰的传达了用户应该如何与它交互，用户在大脑里赋予了它更高的重要性。而且，在这个实验表单中，下拉菜单的选项仅仅是一些数字。在大多数的实验里，包括专家用户，都会通过不断重复检查标签来提醒自己下拉菜单列表中数字的值。

实验二：标签右对齐，位于输入框左侧

标签右对齐，置于输入框左侧

与上一实验相同的是，标签同样位于输入框的左侧，只改变了对齐方式。实验结果发现：标签右对齐，用户的视点减少了几乎一半，表单的完成时间也几乎减少了一半。说明这种布局极大的减少了用户填写表单需要的认知负担。

实验中标签和对应的输入框之间几乎没有眼跳活动，一是因为用户非常快的理解了输入框的含义，二是因为眼部横向移动的距离大大缩短了。

标签左对齐时，用户平均需要500毫秒的眼跳时间，标签右对齐时，对于专家用户，在输入框和对应标签之间的眼跳时间仅仅只有170毫秒，对于初学者用户仅有240毫秒。

佐哥开始认为，这种特殊的表单设计将不利于用户的眼睛由输入框移动到下一个标签的起始，因为标签的起始位置是不可预测的。结果，他发现自己错了，用户的眼睛进行斜线移动是非常快的，而且他们不需要定位到标签的起始位置，眼动数据如下图2

实验二数据

在实验中，大多数用户，包括专家和小白用户，依然需要检查输入框和标签之间的对应关系，虽然相对简短的眼跳使这项任务比之更简单。

实验三：标签左对齐，位于输入框上方

实验三数据

从第二个实验的结果，我们知道标签距离输入框越近，用户的眼睛就可以从标签更快地移动到输入框。因此，当佐哥在实验三中发现用户大多数的视点位于输入框上而不是标签上时（如实验三的眼动数据），佐哥一点也不惊讶。

将标签置于输入框的上方，这使得用户的眼睛移动一次，就可以捕获两个表单元素。而且，如果一个标签是用户非常熟悉的数据，例如他们的姓名，那么用户将不需要在标签上固定视点阅读标签。因此，消除了额外的视点和眼跳。

注意：可以看看这篇文章“Introduction to Eyetracking”，一段关于人类眼部是如何工作的简短介绍

测量了在这个实验中用户从标签移动到输入框的眼跳时间：仅需50毫秒。想想那个标签左对齐的实验，眼跳时间几乎是这次的10倍。因此，用户可以非常快的完成这样的表单，减少了认知的负担。

前两个实验证明，下拉菜单是最抢眼的表单元素。而在实验三中，佐哥调整了下拉菜单的位置。结果发现，它还是一样的吸引用户的注意，与位置没有关系。事实上，综合所有的实验，佐哥发现它是最抢眼的表单元素，甚至比提交（submit）按钮更吸引人们的注意力。

还有，在这个实验中，没有专家用户需要检查标签和输入框之间的联系，虽然一些小白用户仍然需要。

实验四：标签加粗，位于输入框上方

佐哥说，这本来不是一个专门的实验，但由于实验结果与预期大为不同，使他将这个实验独立出来。Luke Wroblewski 在实验前预测：“在这个布局中（标签位于输入框的上方），建议对标签使用加粗的字体。这将会增加它们在视觉上的权重，并且将它们突出在界面的更前方。”

然而实验结果发现：加粗的标签导致用户在标签和输入框之间增加了大约60%的眼跳时间。从50毫秒增加到80毫秒，更显眼的标签没有什么明显的好处，加粗的标签使用户更难以阅读和感知。也可能因为粗体和输入框的深色边框距离较近，使用户产生了更多的迷惑。

标签加粗，位于输入框上

结论

1. 标签位置：将标签置于输入框上方最有效。这样用户不需要分开阅读标签和输入框，但要注意在视觉上分离输入框和下一个标签。

2.标签的对齐：当标签位于输入框的左侧时，尽量让它们右对齐。使用标签左对齐，将会使用户承担沉重的认知负担。

3. 粗标签：阅读粗标签对用户有一点困难，因此最好使用未加粗的标签。如果你选择使用粗标签，那么要注意标签与输入框边框之间的冲突。

4. 下拉菜单：使用它们需要特别注意，因为它们是如此的抢眼。最好使用在较重要的数据上，或者将它们置于重要输入框的下方。

5. 下拉菜单的标签：不对下拉菜单使用任何单独的标签，将下拉列表的默认值作为其标签。这样可以确保用户立刻意识到你在描述什么。并且很好的适用于较长的菜单列表中，在默认值消失之前，用户已经知道了这个输入框的目的。