表单中标签如何放置才能让用户带来好的体验

表单中标签如何放置才能让用户带来好的体验，所以我们借助眼动仪对不同种类的表单进行了可用性测试与分析，期间我们发现了很多有趣的数据，以下是我们对数据的详细分析。

在大家详细阅读前，我们先说明下此次测试搭建的环境是一个有别于真实情况的、临时的，因为我们需要正确的测试视觉跳动的过程、跳动的次数，我们需要消除测试中其他的干扰因子，用户纯粹聚焦在表单的填写上。

卢克在我们测试准备前和分析数据的时候都给了又价值的见解和反馈，我们将他的一些理论纳入了可用性测试中，并通过数值数据来丰满和举证。

在构建我们要测试的表单的过程中，我们尊重卢克的两点建议，首先是考虑标签位置和格式设置之间的关系，其次是表单填写内容熟悉数据与陌生数据之间的关系。

因此，您将在我们测试的每个页面上找到两种类型的数据。为了添加一些真实的情况，我们将用户熟知的数据输入字段与其他难的表单元素（如下拉列表框）配对。这样做也有助于我们确认我们以前对表格的发现。

我们的测试对象既包括专家用户（主要是设计师和程序员），也包括一些可用性专家和新手用户。我们要求用户填写我们提交给他们的所有表格。一旦用户点击提交按钮，我们的凝视路径记录就完成了。

测试1：标签在输入框左边，标签左对齐

这个是我们测试的第一个案例，是我们在日常生活中常见的使用表单。毫无疑问，我们的两类用户在填写的过程中，对于标签和输入框的关联性的识别做的非常好。我们发现所有的用户在每个标签和输入框中都有一个单一的视觉跳动，这说明用户还是很容易感知前后的联系。同时我们也发现，典型的中等视觉跳动的持续时长是500毫秒，这个数值相对于其他情况长很多，这表明用户有较强的认知负荷。

标签及其输入框之间的空白在视觉上很好地引导用户，让用户顺势去查看输入框。但同时也有一个问题，标签和输入框之间的留白是不固定，一些标签和它们的输入字段之间的距离过大，迫使用户花费更多的时间与表单进行可视化交互。

因为我们在表单中加了一个下拉列表框，所以我们也有机会确认我们之前关于它的发现：它们是最引人注目的表单元素。当面对一个白色页面上的简单表单时，所有用户第一眼都会固定在下拉列表框上。这个表单元素清楚地传达了它的含义以及用户该如何与之交互，在用户的大脑中赋予它更高的重要性。

此外，在我们的第一个测试表单中，在下拉列表中选择的项目仅显示一个数字，没有重复标签传达的含义。我们发现，大多数测试对象，包括专家用户，都被迫重新检查标签，以提醒自己下拉列表中包含的数字的含义。

测试2：标签在输入框左边，标签右对齐

测试2比起测试1，标签在输入框左侧的情况与前面的测试完全相同，但标签的右对齐将视觉停驻点的总数量减少了近一半，表明这种布局大大减少了用户完成任务所需的认知负荷。此外，表格填写时长也减少了近一半。

标签和它们对应的输入框之间几乎没有视觉跳动，这表明用户很快理解了输入字段的含义，同时也是因为眼睛在短距的侧眼移动上比较擅长。

虽然我们使用左对齐标签耗费了500毫秒用做扫视，但在右对齐标签上专家用户在标签和输入框之间的扫视时间仅为170毫秒，新手用户也仅仅耗费了240毫秒。

我对这类表单最初担心是用户眼睛在前一个输入框与下一个标签的开头之间的转换会比较困难，因为它的位置是不可预测的，呈现了锯齿状。但是结果证明，我的顾虑是多余的。用户眼睛的斜视眼动非常快，在阅读第二行的时候，眼睛不需要调整焦点和视距。

我们可以看到测试2与测试1相比，尽管视觉跳动次数有所下降，但是大多数用户（专家和新手）还是需要重新检查输入框的相应标签。