运输安全管理局（TSA）有助于防止航空旅行者安全。但由于延迟或被迫在公众拍摄衣服，也保证惹恼了很多人，你会期望TSA获得一个非常健康的投诉。

所以当我第一次看到运输安全管理局的投诉表格时，设计上的错误似乎是如此明显，以至于我怀疑这是不是故意的。表格底部有两个按钮:预览和明确的形式。这预览标签不太理想，因为大多数用户都期待一个提交或者至少是下一个按钮。但真正的问题是清晰的形式按钮，它实际上会删除输入到表单中的所有内容。

无论有意与否，这种安排无疑减少了投诉的数量!然而，它也违反了我们在15年前首次编写的表单设计指南:to避免重置按钮在web表单。

TSA投诉表单有一个“清除表单”按钮
运输安全管理局的网页表格包括清晰的形式这违反了15年前的可用性指南。雪上加霜的是清晰的形式按钮的位置更靠近输入字段预览按钮，从而使人们更有可能错误地点击它(并违反附加的指导原则 对象之间的邻近权限及其主要操作 )。

我最近得出结论，这个表单的设计是没有故意糟糕，因为运输安全管理局实际上有第二份投诉表格，正确使用了单提交按钮在表单下面。由于一种表单遵循了这一原则，另一种版本的糟糕设计似乎只是偶然的。

作为纳税人，认为我的政府机构并不刻意使用糟糕的设计，避免听取我的评论是令人欣赏的。但是从UX的角度来看，尽管近年来，尽管“UX”的嗡嗡声和受欢迎程度，但仍然缺乏对可用性的基本理解。即使是建立得很好的简单准则也往往是未知的或忽视。

仔细的表格设计对用户可以理解和准确地完成表格的速度产生了巨大影响。事实上，一个Seckler和她的同事最近在CHI发表的论文显示，当表单遵循基本的可用性指导原则时，完成时间会显著减少，用户也会提交表格的可能性几乎是两倍第一次尝试没有错误(78%一次尝试提交的表单符合可用性指南，而不是仅仅42％一试提交的形式违反他们)。如果你想知道为什么你的转换漏斗在表单页面上有很大的下降，这个研究可能给你一个线索:表单的可用性问题确实伤害了业务。

您的网站表单是否遵循可用性最佳实践？

Web表单设计的最佳实践

任何给定表格的最佳设计解决方案取决于许多因素：形式的长度，使用的范围和收集的数据。在某些情况下，您应该使用的确切实现可能会有所不同，但这不是忽略指南的借口。相反，将这些建议用作起点，如果你从这些既定的最佳实践中偏离，那就让你有一个有充分的理由这样做。

  1. 保持简短．Mathematician Blaise Pascal着名：“我已经比平常更长时间了，因为我没有时间让它更短。”这一原则适用于Web形式以及散文写作。消除不必要的字段需要更多的时间，但减少的用户努力和增加的完成率使其变得有价值。删除收集可以（a）以某种其他方式导出的信息的字段，（b）在以后的日期更方便地收集或（c）简单地省略。（我们最近将这种技术应用于我们自己的形式之一，并将其​​从6个字段减少到仅为2个字段。）每次从表单中删除字段或问题时，您都会增加其兑换率-这个指导原则的业务案例就是这么简单。
  2. 视觉上的相关标签和字段．标签应该靠近字段它们描述(在移动和较短桌面表单字段的上方，或在非常长的桌面表单字段的旁边)。避免模糊的间距，即标签与多个字段的距离相等，并确保包括标签属性屏幕阅读器。如果表单询问的是两个不同的主题，将其分成两组单独的字段(和)标签组对于屏幕读者）。
  3. 以单列布局显示字段．多个列打断了向下移动窗体的垂直动量。与其让用户在视觉上重新定位自己，不如让他们保持在一个列中，每个字段都有一个单独的行。(该规则的例外情况:简短和/或逻辑相关的字段，如城市那状态,邮政编码代码可以显示在同一行。)
  4. 使用逻辑顺序．坚持用于字段的标准序列（例如，信用卡号码那到期日期那安全代码）和价值选择（例如.、标准发货、2天发货、1天发货)。但是对于字段值，也要考虑使用频率，并在可能的情况下首先列出最常见的值。帮助键盘用户测试选项卡-key导航以确保它遵循正确的字段顺序。
Starbucks iPhone App屏幕带Decaf选项
星巴克iPhone应用程序，包括移动表格，以便让您自定义饮料订单，不幸的是隐藏完整'Decaf'选项关闭屏幕向右，需要水平滚动。如果是'Decaf'更频繁地选择其他选项，应该首先显示它。
  1. 避免占位符文本．设计师喜欢占位符文本，因为它消除了视觉混乱。但占位符文本导致许多可用性问题，最好避免。
  2. 将字段与输入的类型和大小匹配．当只有2到3个选项可以显示为单选按钮时(只需要一次点击或点击)，避免下拉菜单。文本字段应该与预期输入的大小相同，因为当用户无法看到完整的输入时，它非常容易出错。例如，对于2130名最近参加用户体验会议，用户的居住城市范围在3个字符(印第安纳州的Leo)到22个字符(墨西哥的San Pedro Garza Garcia)之间。99.9%的城市名称是19个字符或更短，这使得19个字符是一个城市字段的合理宽度。
  3. 区分可选和必选字段．首先，消除尽可能多的可选字段(参见上面的第一条建议)。如果某些字段确实是必要的，但只适用于用户的子集，不要让用户通过试验和错误发现。将表单限制为1或2个可选字段，并清楚地将它们标记为可选字段。
  4. 解释任何输入或格式要求．如果某个字段需要特定的格式或输入类型，请说明确切的指令。不要让用户猜出你晦涩的密码要求。这同样适用于语法规则，如电话号码或信用卡的标点或空格。(尽管您应该尽可能地消除这些任意格式规则:取消电话号码区号的括号!)
NETGEAR网站屏幕带密码重置错误
美国网件公司的重置密码表单解释了它的密码要求…但只在您测试失败后作为一个错误消息。不要用秘密规则给用户设定失败。
  1. 避免重置和清晰的按钮．意外删除的风险超过了在网页表单上“重新开始”这种不太可能的需要。在收集极其敏感信息(如财务信息)的表格中，请提供“取消'按钮，以支持那些放弃表单并希望删除其信息的用户。但要确保取消按钮的视觉效果明显不如提交按钮，以避免意外点击。
  2. 提供高度可见和特定的错误消息．应发出错误信号通过各种线索，而不仅仅是通过颜色:概述领域，使用红色文本和较重的字体，以确保用户不会忽视这一关键信息。现在不是拐弯抹角的时候。

错误的输入应该被保留，以便用户能够纠正它，并伴随着问题的具体解释。

结论

网页表单的可用性并不是一个新话题。它已经在一般可用性参考文献中被涵盖(包括一些NN/g的书籍一般可用性指导方针,眼镜可用性研究,手机可用性)。的许多114 ux电子商务购物车指南是形式设计的专业问题。还有完整的书籍表单设计以及展示遵守指导方针的有效性的学术研究。

这篇简短的总结并不是要取代其他资源中的深入分析:如果您广泛地使用表单设计，吸收各种情况下的复杂最佳实践是非常值得您花时间的。

但是，许多糟糕的网页表单都有一些并不复杂的问题，只要简单地提醒一下我们已经知道的内容，就可以避免这些问题。看看你网站上的表单，确保它们不会犯这些众所周知的错误。谁知道呢，你可能会加倍兑换率．

引用:

Mirjam Seckler, Silvia Heinz, Javier A. Bargas-Avila, Klaus Opwis和Alexandre N. Tuch. 2014。设计可用的网页表单:网页表单改进指南的经验评价。在计算系统中人格人类因素会议的诉讼程序（Chi '14）。DOI = http：//dx.doi.org/10.1145.2556288.2557265