表单设计原则：13 个经验支持的最佳实践

如果您没有遵循表单设计的最佳实践，那么您就会损失很多钱。

虽然表单不是转换优化中最吸引人的部分，但它们往往是最接近金钱的部分——宏观转换。 花一点时间优化表单可能是您可以做的一些最重要的优化工作。

当然，最佳实践并非在所有网站上都适用。 这是上下文。 但总的来说，实施经常有效的表单设计策略是一个很好的开始方式。

幸运的是，关于表单设计最佳实践的数据、案例研究、研究和示例并不缺乏。 它来自各个地方：商业案例研究、博客文章、A/B 测试示例、可用性研究、眼动追踪研究等等。

这篇文章概述了一些最常见的表单设计最佳实践。 如果您刚刚开始优化，请将它们用作基准。

如果您正在处理表单，这些指南应该可以帮助您快速取得成果。

13 条表单设计原则和最佳实践

1. 少即是多（即删除表单域）。

您要求用户填写的每个字段都会增加摩擦。 改进表单完成的最好方法是尽可能多地删除字段。

在一个案例研究中，将 11 字段的联系表替换为 4 字段的版本，表单完成量增加了 160%。 （提交的质量保持不变。）

在另一项测试中，5 场表格的表现优于 9 场表格 34%。 在这一个中，数据或潜在客户质量也没有下降。

大多数表格都太长了。 这是“贪婪的营销人员综合症”——我们认为我们需要所有数据。

Baymard Institute 发现结帐时平均包含 14.88 个表单字段。 但他们的结帐可用性测试还表明，大多数网站可以将默认显示的表单字段数量减少 20-60%。

本质上，平均结帐显示的表单字段数量是所需数量的两倍。

因此，表单字段缩减对于漏斗底部转换优化来说是零基础。 在这里您可以获得一些最快的胜利。 所需的努力和资源极少，潜在收益是巨大的，尤其是在规模上：

• 你有多少种形式？
• 有多少人经历过？
• 每种表格增加 10% 对您意味着什么？

现在，肯定存在数据问题，特别是如果您是一家 B2B 公司，负责生成潜在客户并将潜在客户传递给销售团队。 您想确保他们是合格的潜在客户； 否则，更多的潜在客户会成为外部因素，从而导致生产力浪费。

例如，您可以使用分配预算的分层系统来筛选潜在客户。 基本上，潜在客户愿意支付多少钱？ 将最低标准设置为您认为有价值的领先优势的最低值，这样您就会淘汰很多挑剔的人。

我们代理页面的一个例子：

当您优化表单域时，询问数据：您真的需要它吗？ 你真的需要别人的电话、传真或地址吗？ 如果你卖蜡烛，你需要公司名称吗？ 只询问相关的内容。 Expedia 从他们的预订表格中删除了“公司”字段，并实现了每年 1200 万美元的利润增长。

还知道，特别是对于 B2B，存在像 Clearbit 这样的数据丰富公司。 如果您收集电子邮件和名字，他们通常可以丰富其余数据（公司名称、规模、Twitter 句柄等）。

这样想：每增加一个字段都会让您失去一些潜在客户。 你从现场获得的额外信息是否值得失去这些人？ 如果您不立即获取所有数据，您会丢失任何东西吗？

最好的注册表单很简短：

与往常一样，也有例外。 减少表单字段并不总能增加转化率。 另外，您收集的有关用户的信息越多，您可以使用的营销和定位就越有效（通常）。

不过，一般来说，遵循这种启发式方法是安全的：删除无用或多余的表单字段。

2. 单栏胜过多栏形式。

这在眼动追踪研究（包括我们自己的研究）、案例研究和 A/B 测试中得到了很好的研究。 当您在单列或多列表单设计之间做出决定时，请默认为单列。

在 CXL 研究中，调查参与者完成线性单列表格 (n = 356) 比多列表格 (n = 346) 平均快 15.4 秒。 这在 95% 的置信水平下明显更快。

该指南并不新鲜。 事实上，它已经存在多年，但在我们的研究之前，并没有太多的定量证据。 尽管如此，那些进行转化优化的人无疑会看到许多引人注目的用户测试以及 A/B 测试，这些测试表明单列更有用。

我敢肯定这条规则有例外（与任何规则一样），但我还没有找到任何经验支持。

3.清楚地传达错误。

用户会犯错误。 这是不可避免的。 即使您使用每一种表单设计最佳实践，用户仍然会收到错误消息。 您如何处理错误消息很重要。

设计错误消息就是为了限制用户对您的表单感到沮丧。 当用户感到沮丧时，他们会感到压力。 皮质醇开始积累。 如果达到某个阈值，用户就会放弃并转到竞争对手的网站。

所以，是的，自己做可用性研究，但从这些错误消息最佳实践开始：

• 不要责怪用户。
• 像人一样写作，而不是机器人。
• 确保错误清楚，消息位于直观的位置。
• 确保用户知道如何修复所述错误。
• 不要在页面顶部列出所有错误。 在线验证是一个很好的解决方案。

4. 使用内联表单字段验证。

与错误消息相关的还有您如何与用户沟通他们的提交是否正常。 表单验证本身就是一个完整的主题，但我们可以在这里涵盖一些方面。

内联验证是一种实时查找、警告和纠正错误的绝妙方式。 他们不会等到用户按下“提交”，而是立即了解哪里出了问题。

这是内联验证的一个很好的例子：

内联验证有很多经验支持。 2009 年，Luke Wroblewski 针对控件（提交后验证）测试了内联验证，尽管样本很小，但他发现内联版本的结果如下：

• 成功率提高 22%；
• 错误减少 22%；
• 满意度提高 31%；
• 完成时间减少 42%；
• 眼睛注视次数减少 47%。

我会接受那些结果。 （我在许多电子商务网站上看到过类似的 A/B 测试结果。）

这一切都与明确的期望和沟通有关。 用户不必猜测什么有效，什么无效。 您越容易理解期望，人们犯的错误就越少，您完成的表格就越多。

5. 从最容易到最难填写的顺序字段。

罗伯特·西奥迪尼 (Robert Cialdini) 的“承诺和一致性”原则指出，当某人采取一个小动作或朝着某件事迈出一步时，他们会感到必须完成。 出于这个原因，将最简单的内容放在首位是表单设计的最佳实践。

等到稍后再引入摩擦（例如，账单信息或任何过于个人化的信息）。 允许人们在开票前填写运输信息。 （它们通常是相同的，所以他们不需要再次输入。）

不要这样做：

6. 让打字变得简单。

表单设计最佳实践的首要原则不断涌现：让用户更容易使用（尤其是移动表单）。

限制用户完成表单所需的输入量。 一种方法是使用自动填充等功能尽可能实现自动化。

在决定自动填充时，这里有一些值得思考的好问题：

• 你有这个领域的任何好的默认值吗？
• 有什么历史可查？
• 你有什么常用的值吗？
• 您可以使用浏览器的移动功能或设置来填充该字段吗？
• 你能计算字段吗？ （例如，根据邮政编码自动填充状态）

自动格式化也非常重要（令人沮丧的是未被充分利用）。 允许用户以他们想要的任何方式输入数据（特别是邮政编码、电话号码和信用卡等字段）。 输入格式后，需要几行代码来修复格式。 不要让你的懒惰毁了用户体验。

所以不要这样做：

7. 指出每个字段是必需的还是可选的（除非它们都是必需的）。

首先，询问您是否需要包括那些可选字段。 大多数时候，它们是不必要的。 例如，谁需要我的头衔或中间名？ 为什么要把一个字段变成四个？

关注您需要从用户那里获得的信息，以便他们可以开始。 您不希望用户坐在家里思考，“他们为什么需要这个？！”

指出每个字段是必需的还是可选的，除非它都是必需的。

8.姓名和电话号码字段应该是一个字段。

没有名字和姓氏字段，只有一个显示“全名”的字段。 一个电话号码不是三个字段，而是一个。

多个字段的问题是交互问题。 一般来说，表单设计的最佳实践是“字段越少越好”。

想象一下，使用您的移动设备时，必须在五个字段中输入姓名和号码（两个输入姓名，三个输入号码）而不是两个？ 不必要的摩擦。

9. 提供单选按钮而不是下拉框。

UX Movement 认为带有选择菜单的表单经常被放弃，因为它们“需要更多的时间和精力来完成”。

更具体地说，他们声称他们通过中断用户流程、难以阅读和需要灵巧的鼠标操作来减慢用户的速度。 他们没有提供支持数据。

好吧，这很容易测试。 所以我们做到了。 我们刚刚启动了一项关于在线信任感知的大型调查，因此我们有机会操纵调查表并以不同的格式（多选与单选按钮）向不同的人询问相同的问题。

结果？ 带有单选按钮的表单可以更快地完成。 调查参与者完成单选按钮表单 (n = 354) 比使用多选按钮的表单 (n = 354) 平均快 2.5 秒。 这在 95% 的水平上明显更快。

10. 不要让优惠券代码字段显眼。

当人们看到“在此处输入优惠券代码”字段时，他们会觉得不那么特别。 他们会想，“为什么我没有？” 他们得到了 FOMO。

许多人去谷歌搜索优惠券。 有些人会在第三方网站上找到优惠券，这会削减您的利润。 许多人再也没有回来。

离开网站去搜索优惠券是放弃购物车的常见原因。

所以这不是一个好主意：

没有大横幅，而是有一个文本链接，上面写着“有优惠券？” （或类似的东西）。 如果用户单击该链接，它应该打开一个输入字段。 文本链接在视觉上并不突出，因此很少有人会注意。

已经拥有优惠券代码的客户会寻找输入优惠券代码的方法，因此除非您将其隐藏得（太）好，否则他们仍然可以使用他们的优惠券。 如果客户收到优惠券（通过电子邮件），则自动应用并显示折扣。

11.避免使用“清除字段”按钮。

填写您的表格的人都不想清除这些字段。 如果他们不想填写，他们可以离开。

如果他们填写表格并不小心清除了字段，他们很可能不会重新开始。

特定于移动设备的表单设计最佳实践

虽然上述大部分内容也适用于移动设备，但对于较小的屏幕，需要牢记一些具体问题。 移动用户的耐心较差，使用智能手机比使用台式机更难。

我们有一篇关于该主题的完整文章，因此请深入研究。 但是，如果您想要几个起点，请遵循这些准则。

12.提供领域重点。

如果您有一个包含多个字段的表单，您不希望用户迷失在表单中。 这在移动设备上尤为重要：较小的屏幕允许对表单进行较少的视觉控制。

使正在编辑的输入字段突出并突出重点。

13. 不要隐藏密码。

虽然在用户键入密码时显示密码似乎是一个安全问题，但这对用户体验来说要好得多。

正如 NN/g 总结的那样：

当用户输入密码并且他们得到的唯一反馈是一排项目符号时，可用性会受到影响。 通常，屏蔽密码甚至不会增加安全性，但它确实会因登录失败而给您带来业务损失。

警告：运行你自己的实验。

仅仅因为某事是“最佳实践”并不意味着它始终是最佳解决方案。 有时，最佳实践会失败。

网站是上下文相关的。 在一个站点上有效的方法可能在另一个站点上无效。

此外，您的业务环境可能不同。 谁知道呢，也许您真的需要那个中间名作为一条数据。 我要评判谁？

因此，对所有事情都持保留态度。 要知道这一切都已经过测试和研究，但归根结底，重要的是它如何在您的网站和您的业务环境中运作。

这些是指导方针，而不是强制要求。

结论

良好的表单设计原则可能更有效，但它们并不普遍。 没有银弹解决方案：您必须自己测试这些东西。

但是，如果您是从头开始，那么这些表单设计最佳实践是一个很好的基准 — 一个起点，而不是终点。

正在做与此相关的事情吗？ 在CXL 社区发表评论！