心弦

最近在和同事一起制定网页中表单（form）的设计规范和指南，查阅相关资料的过程中发现了很多好东西，其中有一篇名为"Label Placement in Forms"文章很有趣，作者Matteo Penzo使用了eyetracking技术来研究表单中的标签摆放问题。

他分别作了4个实验。

第一个是左对齐的标签放在输入框（或"输入域"，Input Field）的左面。这是网页中最常用的形式，用户可以很容易理解标签和输入框的对应关系。但研究发现标签和输入框之间的空白区域极大了加重了用户的认知负担（cognitive loading），用户必须花相当多的时间以便在标签和输入框之间移动视线，在这个实验中这个时间为500ms。

这个实验再次印证了作者以前的观点，即下拉菜单是最吸引眼球（eye-catching）的表单元素。在网页中除了一个简单的表单、不含其它内容的情况下，所有的用户-包括专家用户-都不约而同地关注下拉菜单。并且即使此时下拉菜单中默认的选项没有任何意义。此外，在表单被最终递交之前，所有的受试者都会再次检查一下标签和与之对应的输入框中的内容是否无误。

第二个是右对齐的标签放在输入框的左面。研究发现此时用户的认知负担大幅度降低，表单填写时间下降了一半，标签和输入框的切换时间下降到了240ms。

但作者继而表示对用户识别标签的担心，即由于标签文字是右对齐的，而阅读又是从左面开始的，这样就会造成每一行标签的初始位置不确定，给用户带来额外的负担。实际上这也正是我所担心的事情，-恰好此前也看过一篇文章否定这种形式。结果作者使用了非常强烈的语气肯定了自己的错误："I couldn't have been more wrong（我真是大错特错）"！他说根据eye tracker的追踪结果显示，用户眼睛关注点的转移速度是非常快的，并且即使不从头阅读标签也能明白它的意思。从上图中我们不难看出这点。

第三个是左对齐的标签放在输入框的上面。根据上个实验结果可知标签距离输入框越近，用户所花的时间越少，认知负担越小。而同时用户更关注输入框本身，而不是标签。如下图所示：

这种摆放形式的好处就是，用户可以一眼就看到标签和它对应的输入框。此外，如果用户对标签的内容非常熟悉的话，如First Name和Last Name的情况，用户看到了First Name的这个标签后，不需要看Last Name就可以直接填写此项。

令人惊讶的是，在此实验中，在标签和输入框之间切换的时间巨减到50ms。

另外作者发现即使将下拉菜单的位置调整（如上图），它的被关注程度还是不会降低。

最后值得一提的是，不同于上个实验，此时专家用户均没有进行再检查，初级用户中有部分仍旧进行了再检查。

第四个是左对齐、粗体的标签放在输入框的上面。想必很多人都会赞同并推荐这种设计吧，包括作者经常提到的Luke（Skywalker in Starwars? :D），当然也包括我。可是实验结果却出人意料：这种设计增加了60%的切换时间，从50ms增加到80ms。作者猜测这可能是由于文字的粗体和与之相邻的输入框那厚重的边框增加了用户的分辨难度。

综上所述，作者在文章结尾给出了如下结论：

1. 标签位置。从实验可知标签放在输入框上面的设计比较理想；
2. 标签对齐方式。如果标签位于输入框左面，使用右对齐；如果放在上面，使用左对齐；
3. 粗体标签文字。在不使用额外的样式以使输入框的边框变细的情况下，尽量不使用粗体标签文字；
4. 下拉菜单。由于它非常吸引眼球，要小心使用。只用它来接收重要的数据，并尽量把它放在更重要输入框的下面；
5. 下拉菜单的标签。如果下拉菜单中的选项非常多的话，尽量用清晰的选项内容来告知用户这个下拉菜单的作用，而不是在下拉菜单旁放置一个标签。