【译】网站表单可用性：10大建议

原文：https://www.nngroup.com/articles/web-form-design/

本文由【咚门】翻译，未经允许，请勿转载。

摘要：遵守这些已经为大家所接受但又常常被忽视的准则以确保用户能够顺利地填写你的网站表单。

运输安全管理（TSA）有助于保障飞机乘客的安全。但很多人也一定会因为被延误或被迫在公共场合脱掉衣服而被惹恼，相信你也预期到 TSA 收到了相当多的投诉了吧。

因此当我第一次看到 TSA 网站的投诉表单时，它们的设计失误是如此的明显以至于我怀疑这是不是故意的。表单的底部有两个按钮：“预览”和“清空表单”。“预览”按钮不是太理想，因为很多用户希望这是一个“提交 ”按钮或者至少是一个“下一步”按钮。但真正的问题是“清空表单”按钮，这个按钮实际上会删掉用户输入到表单里的所有信息。

无论是不是故意的，这样的设计无疑会减少投诉量（译者注：这里带有嘲讽的意味）！不管怎样，这也违反了我们15年以前写的表单设计指南：在网页表单中避免使用“重置”按钮。

TSA的网页表单包含一个“清空表单”按钮，这个按钮违反了距今15年以前制定的可用性指南。更雪上加霜的是，“清空表单”按钮比“预览”按钮更靠近输入字段，因此使得这个按钮更可能被用户误触（并且违反了另一个指导原则：对象和它们的主要功能之间的接近度 proximity between objects and their primary actions）。

我最近断定这个表单的设计不是故意使坏的（wasnot intentionally bad），因为 TSA 实际上有一个正确地使用了单个“提交”按钮的投诉表单。既然有一个表单遵循了表单设计原则，很可能另一个差劲的设计只是偶然。

作为纳税人，很欣慰了解到我的政府机构并非是故意采用糟糕的设计来回避听取我的批评（avoid hearing my comments ）。但是从 用户体验（UX ） 的角度来看，这是一个痛苦的提醒，虽有近几年“用户体验（UX）”的躁动和普及（the buzz and popularity of “UX” ），对可用性的基本理解往往依旧缺乏。即使是一些本来很容易理解的简单原则也往往不为人所知或者被忽视。

细心的表单设计对 用户理解和正确无误地填写一张表单的速度 产生巨大的影响。其实，Seckler 和她的同事们发表在 CHI 上的最新一篇论文表明，当表单遵循基本的可用性原则时，填写表单所用的时间（the completion time ）显著地减少并且将近两倍的用户可能第一次就能够正确无误地提交表单（在遵循可用性原则的表单中，78% 用户一次性通过提交；与之相对的是，在违反了可用性原则的表单中，42% 用户一次性通过提交）。如果你想知道为什么你的转换渠道在表单页面出现了大陡降（has big drop-offs ），这个研究可以给你一个解答的线索：表单的可用性问题真的影响业务（hurt business ）。

你的网站表单遵循可用性最佳实践吗？

网页表单设计的最佳实践

任何给定表单的 最佳设计方案依赖于很多因素：表单长度，使用场景（the context of use ）和收集的数据。虽然某些情况下你应该采用的具体措施可能有所不同（The exact implementation you should use may vary in certain circumstances ），但这不是忽视所有可用性知道原则的接口。

1. 保持简短（Keep it short）。数学家帕斯卡（Blaise Pascal ）说过一句名言：“I have made this longer than usual because I have not had time to make it shorter。”这一原则适用于网页表单和散文创作。虽然排除不必要的字段会更费时，但是节省下来的用户工作量和提升的表单完成率 使得你花费的时间物有所值。有一些字段是应该被移除的，这些字段收集的信息通常具有以下特点：（a）可以从其它渠道获取，（b）稍后能够更方便地收集，或者（c）简单地省略。（我们最近把这项技术应用到我们自己其中之一的表单中，并且把这个表单从6个字段削减到2个字段。）每次 你减少表单的一个字段或问题，你都在提高这个表单的转化率——这一准则的业务案例就是这么简单。

2. 把相关的标签和字段编组（Visually group related labels and fields）。标签（label）应该靠近它所描述的字段（field）（对于移动端和比较短的桌面表单，标签应紧贴在字段的正上方；对于非常长的桌面表单，标签应该紧邻于字段）。应该避免含糊不清的空格，标签与字段之间应该是等距的，并且确保包含屏幕阅读器的标签属性。如果表单要求有两种不同的主题，则划分为（section it into ）独立的两组字段（并且为屏幕阅读器的分组打上标记）。

3. 按单列布局编排字段（Present fields in a single column layout）。多列会打断表单垂直向下的势头（Multiple columns interrupt the vertical momentum of moving down the form）。与其要求用户在视觉上使自己适应（多列表单），不如只保留一列，每一个字段独占一行，从而让用户的视线保持连贯（Rather than requiring users to visually reorient themselves, keep them in the flow by sticking to a single column with a separate row for each field）（这一规则的例外情况：简短或逻辑上有关联的字段可以编排在同一行，例如：City,State, andZipCode）。

4. 按逻辑顺序排列（Use logical sequencing）。为 字段（例如：Credit-card number,Expirationdate,Securitycode）和（字段的）取值选项（例如：Standard shipping, 2-day shipping, 1-day shipping） 保留标准排序。但是对字段的值，也可以考虑使用频率，并且尽可能先列出最常用的值。测试 Tab 键导航，确保 Tab 键按正确的字段顺序导航，以帮助使用键盘的用户。

星巴克（Starbucks）的iPhone App，有一个可以让你定制饮料订单的移动端表单，可惜全部‘无咖啡因（Decaf ）’选项都隐藏到屏幕右边，需要水平滚动（才能完整浏览）。如果‘Decaf’选项比其他选项更频繁地被选择，那么它应该优先显示。

5. 避免使用占位符文本（Avoid placeholder text）。设计师喜欢占位符文本，因为它消除了视觉上的杂乱。不过，占位符文本会导致许多可用性问题，最好避免使用。

6. 使字段与输入的类型、尺寸相匹配（Match fields to the type and size of the input）。当只有两三个选项并且它们可以作为单选按钮（the radio button）（只需要单击鼠标或 按下tab 键）来显示时，应避免使用下拉（drop-downs ）。文本字段 应该与预期中的输入 有差不多的尺寸，因为用户 无法看到全部输入的时候 极其容易出错。例如，对于2130个 UX 大会的参与者，用户所在城市介于3（Leo, Indiana ）到22（San Pedro Garza Garcia, Mexico ）个字符之间。99.9%的城市名称是19个字符或更短，因此一个“城市”字段的合理长度是19个字符。

7. 区分选填与必填字段（Distinguish optional and required fields）。首先，尽可能减少可选字段（参考上面的第一条建议）。如果某些字段是真的有必要的，但只适用于一部分用户，注意不要让用户经过不断的试验和犯错之后才能找到这些字段。应该把表单限制到只有一两个字段，并明确地把它们标记为“选填”的。

8. 讲解 所有的输入 或者 格式化的必要条件（Explain any input or formatting requirements）。如果一个字段要求一种特定格式或特定 类型的输入，请陈述确切的说明。请不要让用户猜测你的晦涩不清的密码要求。这同样适用于语法规则，如标点符号，手机号码或信用卡中的空格。（你应该尽可能地消除这些主观的/武断的（arbitrary ）格式规则：禁止手机号码区号的圆括号（death to parentheses for phone-number area codes））。

Netgear网站的重置密码表单解释了它的密码格式要求，但这只是在尝试失败之后 作为一个错误信息 （而出现）。不要使用隐秘的规则导致用户操作失败。

9. 避免使用重置按钮和清空按钮（AvoidResetandClearbuttons）。在网页表单中，意外删除的风险 在重要性方面要超过 不太必要的“重置（start over）”。在那些收集极为敏感的输入（如：财务信息）的表单中，请提供一个‘取消’按钮以支持那些放弃表单并想删除信息的用户。但是要确保‘取消’按钮没有‘提交’按钮那么显眼，以避免意外的点击。

10. 提供高度可见/显眼并且具体的错误消息（Provide highly visible and specific error messages）。错误应该以多种线索（cue）告知，而不仅仅以颜色的方式：为字段画轮廓，使用红色文本，使用加粗字体，确保用户不会忽略这些极其重要的信息。Now is not the time to be subtle。

错误的输入应该被保留并附以具体的解释 以便用户修正错误。

总结

网页表单的可用性绝不是（is by no means ）一个新课题。它已经覆盖了普遍的可用性参考书（general usability references ）（其中包括了几本 NN/g 书：通用可用性准则（general usability），视线追踪可用性研究（eyetracking usabilityresearch ）和移动端可用性（mobile usability））。电子商务购物车114条准则中的大部分在表单设计方面都是专门的问题（Many of the114 UX guidelines for e-commerce shopping cartsare specialized issues in forms design. ）。也有专门写表单设计的一整本书，以及论证 遵循准则的效用的 学术研究。

这个简短的总结不是为了取代在其他资源里发现的深度分析：如果你广泛地使用表单设计，那么很值得花时间去吸收各种情形下的最佳实践（absorbing the intricacies of best practices in various situations is well worth your time ）。

但是，很多糟糕的表单都存在一些并不复杂难懂的问题，这些问题本来是可以通过我们此前了解到的一些简单提醒来避免的。看一看你网站上的表单，并确保它们没有发下这些众所周知的错误。谁知道呢，你只是可能让你网站的转换率翻倍而已（Who knows, you just might double yourconversion rate）。