如何设计出“让用户高效使用”的表单？

进行可用性测试并分析了不同类型的表单后，笔者获得了表单设计的关键点，这些点对用户有效使用很有帮助，并希望其内容能启发您。 通过对不同类型的表单进行可用性测试和分析后，作者获得了表单设计的关键点，这些点有助于用户有效使用。 我希望这些内容能激发您的灵感。

我们一直想研究如何在表单中放置标签以使用户体验更好，因此我们使用眼动仪测试并分析了不同类型表单的可用性，在此期间我们发现了许多有趣的数据。 这是我们对数据的详细分析。

在您详细阅读之前，让我们首先解释一下测试环境不同于实际情况和暂时情况，因为我们需要正确测试视觉跳跃的过程和时间，我们需要消除测试中的其他干扰因素， 而用户纯粹专注于填写表格。 在准备测试之前和分析数据时，卢克给出了宝贵的见解和反馈。 我们将他的一些理论纳入了可用性测试，并通过数值数据提供了丰富的证据。

在构建我们要测试的表单的过程中，我们尊重Luke的两个建议。 首先，应考虑标签位置与格式设置之间的关系，其次，在填写表单时，应考虑熟悉的数据与不熟悉的数据之间的关系。 因此，在我们测试的每一页上都会发现两种类型的数据。 为了添加一些实际情况，我们将用户熟悉的数据输入字段与其他困难的表单元素配对（下面的下拉列表框）。 这也将有助于我们确认以前在表格上的发现。

我们的测试对象不仅包括专家用户（主要是设计师和程序员），还包括可用性专家和新手用户。 我们要求用户填写我们提交给他们的所有表格。 用户单击提交按钮后，我们的凝视路径记录即完成。

测试1：标签在输入框的左侧，标签在左侧对齐。

。 这是我们测试的第一种情况，是我们日常生活中的一种常见用法。 毫无疑问，在填写过程中，我们的两种类型的用户在识别标签和输入框的相关性方面做得非常好。 我们发现，所有用户在每个标签和输入框中都有一个视觉跳动，这意味着用户仍然很容易感觉到前后之间的联系。 同时，我们还发现典型的中等视觉节拍的持续时间为500毫秒，比其他情况长得多，这表明用户具有较强的认知负担。

标签与其输入框之间的空白将引导用户视觉化并允许用户查看输入框。 但是同时，还存在一个问题：标签和输入字段之间的间距不固定，并且某些标签与其输入字段之间的距离太大，这迫使用户将更多的时间花费在与表单的视觉交互上。

，因为我们在表单中添加了一个下拉列表框，所以我们也有机会确认我们先前关于它的发现：它们是最引人注目的表单元素。 当在白纸上遇到一个简单的表单时，所有用户乍一看都被固定在下拉列表框中。 该表单元素清楚地传达了其含义以及用户与之交互的方式，从而使其在用户的大脑中更加重要。 另外，在我们的第一个测试表单中，

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

测试2：标签位于输入框的左侧，与测试1相比，标签

test 2的右对齐与先前的测试相同，但是标签的右对齐会减少总和 视觉停止的数量几乎减少了一半，这表明此布局极大地减少了用户完成任务所需的认知负荷。 此外，表格的填充时间也减少了近一半。

标签与其对应的输入框之间几乎没有视觉上的跳跃，这表明用户可以快速理解输入字段的含义，而且还因为眼睛擅长短距离侧眼移动。

虽然扫描左对齐标签花费了我们500毫秒，但是专家用户在标签和右对齐标签上的输入框之间的扫描时间仅为170毫秒，而新手用户的扫描时间仅为240毫秒。 我首先担心这种形式的问题是，用户的眼睛很难在前一个输入框的开头和下一个标签的开头之间切换，因为它的位置是不可预测的且呈锯齿形。 但事实证明，我的担心是多余的。 使用者眼睛的斜眼运动非常快。 读取第二行时，眼睛不需要调整焦点和视距。

我们可以看到测试2与测试1相比，尽管视觉节拍的数量有所减少，但大多数用户（专家和新手）仍然需要重新检查输入框的相应标签。

测试3：标签靠近输入框的顶部，并且标签与左侧

对齐。 根据测试2的结果，我们知道标签离输入框越近，用户的眼睛从标签移到输入框的速度就越快。 因此，令我们惊讶的是，测试3中的大多数可视停靠点都在输入框而不是标签上。

在输入框上方放置一个标签，用户可以一眼捕获两个元素。 因此，当您需要输入熟悉的数据（例如名字或姓氏）时，用户的视觉不需要停留在标签上。 他们可以同时集中查看标签和输入框，因此不需要其他视觉停止和扫描。

另外，根据测试结果，用户从标签到输入框的来回扫描只有50ms，相当于测试1的1/10。因此，用户可以快速填写表格，大大减少了 用户的认知负担。 在前两轮测试中

中，下拉列表框被证明是最突出的表单元素，我想检查其位置是否会影响此结果。 结果，它根本没有影响，并且无论它在哪里，它总是引起用户的注意。 在所有情况下，我们都发现它确实是最引人注目的元素，甚至比“提交”按钮更为突出。

我们还发现，在这种情况下，没有专家用户需要重新检查相应的标签，当然，一些新手用户也需要重新检查标签。

测试4：标签靠近输入框的顶部，标签保持对齐，并且标签为粗体

，我们将此测试视为测试3的子案例，而不是完整的测试案例， 但是最终得到的结果差异使我们将其视为单独的案例。 我想到了卢克在他的文章中所说的可见的叙事：理解视觉组织。 “在标签位于输入框上方的布局中，建议对输入框的标签使用粗体，这会增加其视觉效果，并将其带到布局的前台。” 但是，在

中，加粗标签导致从标签到输入框的扫描时间从不加粗标签的50ms增加到加粗标签的80ms，几乎增加了60％。 发现更显着的标签没有明显的优势。 粗体标签对于用户来说更难以阅读和感知，这可能是由于视觉上的混淆以及粗体文本和输入框的粗边框之间的干扰。

我和Luke一起回顾了这些结果，我们同意测试页面上没有视觉设计会影响粗体标签。 就像我在本文开头所说的那样，我们正在测试时间或速度，这些时间或速度必须没有任何其他视觉干扰，但是结果上粗体标签的性能相当差。 从分析我们的测试结果来看，我们最终得出了一些有趣的设计准则。 将以下设计准则与Luke的表单设计原则相结合，将帮助您在各种情况下构建最佳的表单。

1。 标签位置

在大多数情况下，最好将标签放置在输入框上方，因为用户不必分别查看标签和输入框，但要注意从间距开始并在视觉上分隔标签 下一个输入框和上一个输入框的位置。

2。 标签对齐

在大多数情况下，当标签放置在输入框的左侧时，使用左对齐标签会给用户带来沉重的认知负担。 最好将标签放置在输入框上方，但是如果您选择将标签放置在输入字段的左侧，请至少将标签对准右侧。

3。 粗体标签

对于用户来说，读取粗体标签有点困难，因此最好使用纯文本标签。 但是，在使用粗体标签时，您希望输入框的样式为浅色边框。

4。 在下拉列表框

中谨慎使用它们，因为它们非常吸引人。 您可以将它们用于输入重要数据。 当您将它们用于次要数据时，请将其放在次要输入框下。

5。 下拉列表框

的标签放置可确保用户立即知道下拉列表的要求，而不是使用单独的标签，并将下拉列表框的默认值设置为label。 这适用于非常长的项目列表，因为用户会在默认值消失之前记住其目的。

原始地址：https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

原作者：Matteo penzo

编译器作者：agileyang

本文由@发表 敏捷翻译，每个人都是产品经理。 未经许可，禁止转载。

来自无飞溅，基于cc0协议