从铅生成到在线购买，Web表格到处都是。不幸的是，没有人真的希望填写表格，尽管他们是我们在线经验的基本部分。
精心设计的形式有助于减少用户与用户想要的任何摩擦。在争夺方上，设计不良形式可能对您的转换和收入编号产生重大影响。表格可能不是最有趣和最令人兴奋的事情，但他们仍然可以有好的UX！
所有的形式都是不同的，取决于它们的受众、行业和产品/服务。但是，有一些基于数据的最佳实践可以作为任何表单设计的指导原则。使用下面的列表来确定一些可以快速提高表单可用性的方法。
表单设计和UX最佳实践清单：
1.注意结构和流程
所有的网页表单都有一个“交互成本”，这是用户为了达到他们的目标所需要投入的体力和认知努力的数量。如果你的表单看起来又长又复杂，人们就会避开它们。
Baymard研究所发现表格的长度和复杂性是被抛弃的主要原因。进一步的可用性测试显示，大多数表单平均有14.88个字段，但其中20-60%的字段实际上对体验并不重要。如果有疑问，就减少田地的数量。
- 记住，少即是多
如果您希望用户完成您的表单，那么通常越少越好。哪些表单字段对您的经验至关重要，哪些字段可以去掉?为了进一步简化表单，可以考虑将很少使用的表单字段(如Address 2、discount和Company Name)隐藏在文本链接后面，直到需要时才使用。 - 清晰度是关键
是否有一个在几秒钟内就显而易见的明确目的?如果用户不理解表单的价值，他们就不会花时间去填写表单。 - 使用单列结构
一项由CXL研究所发现单列表单更适合可用性，因为信息可以更快地理解。单列有助于将眼睛移动在屏幕上更自然的方向，而不是锯齿扎根。
- 分解内容
将内容组织成组可以让表单看起来不那么突兀。如果表单非常复杂，需要大量数据输入，可以考虑将其拆分到多个屏幕上。确保包含一个清晰的进度指示器，以便用户能够快速估计完成表单所需的时间和精力。
- 只展示相关的内容
使用条件逻辑个性化表单(并缩短表单!)这有助于减少用户的挫败感，因为用户不会被追问他们已经说过与自己无关的话题。
2.优化数据输入字段
数据输入是用于收集表单数据的所有部分:文本字段、密码字段、单选按钮、日期选择器、复选框、滑块等。
- 确保表单标签清晰
如果您的标签尚不清楚，人们会很难弄清楚他们需要进入的东西。 - 将表单标签列在字段的上方
如果你只要求一个或两个项目(例如在一个通讯电子邮件注册或登录表单)，你可以使用占位符文本作为你的标签，以节省空间。但请记住，当用户在字段内单击时，占位符文本就会消失，人们往往会忘记自己在做什么。在字段上方列出表单标签，可以确保它们始终可见，这对于响应式设计通常更好。
- 考虑表单字段长度
文本表单字段的长度应该与答案的长度匹配。这有助于为您寻找的答案类型提供一个提示，并避免因字段太短或太长而产生混淆。 - 表明需要格式化
如果您的文本字段需要某种类型的格式，您必须清楚地显示您正在寻找的内容。使用占位符文本或工具提示来显示文本应该如何格式化日期、时间或电话号码等内容。 - 确保必需的字段被清除
如果您正在使用必填项和可选字段，请确保所需的字段清晰。如果您要求实际上只为可选的敏感信息，这尤其重要。 - 减少单击次数
选择您使用的数据类型时，请选择减少点击次数以完成任务的类型。无论您是使用单选按钮，下拉列表，复选框或文本字段，请确保您选择的类型直观且易于使用。
- 利用空白
留白让事情感觉不那么复杂，让事情有喘息的空间。在没有足够空格的情况下把所有内容都塞进去，会让你的表单看起来比实际情况更复杂，导致潜在的放弃。 - 响应设计
除非您的表单仅为桌面，否则请确保它针对移动进行了优化。事情需要足够大的手指点击。作为一般的拇指规则，不要使任何令人震惊的东西小于44 x 44像素。
3.设计清除动作按钮
动作按钮一旦被点击就会触发一个动作。这可以包括提交、上一步、下一步、继续、继续或取消按钮。
- 确保标签清晰
与任何CTA一样，确保您的标签明确描述了将发生的行动。
- 按钮应该看起来像按钮
Jakob定律指出，用户喜欢使用熟悉的设计模式。确保按钮看起来像按钮。否则，它们可能会将其融入您的设计，或者您的用户可能无法理解它们会触发动作。 - 强调你的按钮
重要的事情，就像你的按钮一样明显不同的比其他元素。使用大小和颜色使你的纽扣突出。 - 区分主要和次要按钮
如果表单有多个操作，请确保使用主按钮和次按钮来突出显示预期的操作，同时提供替代操作。
4.使用验证和错误消息
当用户已成功完成任务时，应使用正消息传递，或者已成功完成任务或出现错误或错误。使用视觉提示和描述性语言确保您的消息传递尽可能清晰。
- 提供提交确认
避免用户意外单击“提交”多次“提交”，通过提供按钮被单击并成功处理按钮。
- 提供实时内联验证
人们会犯错误，所以表单验证很重要。通过对每个表单字段进行实时验证来减少摩擦。这样用户就可以在提交表单时看到错误发生的时间和地点。它还有助于避免令人沮丧的任务滚动整个表单，然后试图找到错误。
- 传递清晰的错误消息
确保您的错误消息是清晰和描述性的。当有人犯了错误时，请确保你告诉他们原因。他们留下了所需的字段吗？他们的格式错误吗？如果您的表单很复杂，您甚至可以在后端探索有4-10个自适应错误消息，以匹配不同的方案。 - 利用自动完成
自动补全通过减少打字次数减轻了工作量，并有助于减少错误。这对于地址文本字段尤其有用，因为地理位置可以减少手动输入多个地址相关字段的摩擦。
5.考虑表单可访问性
从网上银行到医疗任命，一切都在线移动。作为设计师，它是我们的工作，以确保这些经历可供每个人可以使用，包括在内的形式！
- 不是每个人都使用鼠标。确保您的表单可以使用键盘导航。
- 自动对焦所选的表单字段对于键盘(或鼠标)导航也非常重要，这样用户就可以清楚地看到他们所在的字段。如果您真的想鼓励人们启动您的表单，那么可以添加一个默认设置来自动聚焦第一个输入字段。
- 按钮、复选框、下拉框和文本字段应该有用于屏幕阅读器的描述性HTML标记。
- 用一个色彩对比的工具确保您的颜色通过可访问性标准。
- 16px可能一开始感觉有点大和笨重，但它是一个良好的基准易读性。
- 对于有点复杂的问题，使用工具提示来帮助解释你想问什么以及为什么。
6.不要忘记包容性内容
包容性设计帮助我们设计各种各样的人。不是每个人都是一样的，你的副本应该考虑到其他观点。由于表格倾向于要求个人信息，因此使用与尽可能多的人交谈的语言是很重要的。
- 总是要问:“你的中心是谁?”/你要漏掉谁?”想想历史和背景。
- 许多用户在出生日期，电话号码，种族和性别日期都有隐私问题。如果这些对您的表单不至关重要，请使其成为可选的。或者，只需删除它们！但如果您确实需要包含它们，请确保您包括解释为什么需要这些项目。
- 性别/种族问题应予以考虑。想了解更多信息，请查看这个很棒的资源尊重人口信息的收集．
- 如有疑问，允许使用开放字段和/或多项选择自我识别。例如，既有拉丁美洲人和亚洲人的用户应该能够选择他们想要选择两者。
7.评估和审核您的表单UX
您的表单设计达到了一些复选框，但并非所有复选框。那么现在怎么办？
形式长度总是一个很好的开始。然而，如果你正在寻找一种更系统的方式来区分优先级，那么试着使用一个5点排名系统来评估易用性和收益影响:
- 5 =严重；这是影响大多数访客的关键可用性问题，或者具有高潜在的收入影响。
- 4 =关键；这是一个关键的可用性问题，可能不会影响所有的访问者，或者对收入的潜在影响较小。
- 3 =大；这是一个主要的可用性问题，可能不会影响所有的访问者，或者有很高的潜在收益影响。
- 2 =未成年人；这是一个很小的可用性问题，可能不会影响很多访问者，或者对收入的潜在影响较小。
- 1 =吹毛求疵；这是一个很小的可用性问题，能见度低，对收益的影响也很小，但仍然值得修复。
对更多UX最佳实践感兴趣？
查看我们的UX清单博客系列:
