编辑导语:我们在工作中经常会遇到一些关于表单优化的问题。虽然表单听起来是简单而常见的设计元素，但为了设计出简洁、直观和清晰的表单，还需要考虑更多的细节。本文总结了一些如何设计简单包容的表单的小技巧，希望对你有所启发。
我最近的工作涉及到一个困难的任务——如何为我的产品设计一个体验更好的表单。我接到这个任务的时候，根本不知道好形态和坏形态的区别。我需要思考:我应该设计一个多步表单还是一页表单？我应该使用占位符吗？怎样才能让自己的形式更符合包容性设计的原则？
几乎web端的每个重要交互，从注册和登录、购买产品和服务到启动客户帮助或获得反馈，都需要通过表单来完成。因此，虽然表单可能不是设计中最令人兴奋的设计元素，但学习如何设计一个好的表单是一项非常有价值的技能。
在学习了一些资料后，我列出了我认为最好最有效的表单设计。但是，我们需要记住的是:形式是一个高度依赖语境的设计元素，所以实践中也有例外，设计师需要具体情况具体分析。开始之前，让我们快速回顾一下表单的五个主要元素:
结构:表单的布局和表单项的顺序。输入框:文本框、单选或多选等界面元素。输入框标签:输入框的相应提示。文案动作按钮:用户执行一个操作，比如提交自己的个人信息反馈:让用户意识到自己的提交是否成功。反馈可以是视觉提示或听觉提示。
一、让表单尽量保持单列
首先，尽可能保持表格的单一。
多列表容易被误解:用户非常容易忽略一些必填内容，填写错误的文本框或完全放弃填写表单。下图是面对多个列表时，用户的眼睛是如何移动的。
当一个表单没有提供清晰的填写路径时，用户需要很长时间才能理解，更不用说完成了。当一个表单的填充路径是线性的，比如单栏表单，用户完成的时候就不会产生误解。
2.过程、顺序和分组1。删除所有不重要的输入。
确保用户只输入我们真正需要的东西。但是请记住，您要求用户输入的信息越多，他们就越不想填写这个表单。因此，这将影响转化率和其他因素，并导致销售损失。设计师需要明确要求用户填写这些信息的目的。在这里，我们可以使用一种称为“问题协议”的系统方法来确定表单的内容。
2.用清晰的逻辑排列表单项目。
好的形式是在合适的时间向用户索要合适的信息，否则可能会让用户失去兴趣。回想一下我们自己的网购场景:如果网站要求你在买东西之前填写支付信息，你会怎么想？还是要先填地址再填名字？所以要尝试从用户的角度去思考如何建立表单的排列逻辑。
3.分组表单项目
创建表单项的逻辑分组有助于用户更清晰地理解信息，因为用户在同一时间只能关注一个组，而不是被众多杂乱的信息所干扰。分组在一个组中的信息意味着它们彼此相关。因此，视觉上区分不同的组也很重要，比如在组之间添加空白***域。
第三，使用清晰有效的标签
首先，标签应该尽可能在顶部对齐。根据眼动测试的研究，将标签放置在输入框的上方而不是旁边，将有助于用户更快地理解信息。
从包容性设计的角度来看，标签也很重要。视力正常的用户可以阅读，视力受损的用户可以在屏幕阅读器的帮助下听到，运动障碍的用户可以在更大的点击区域使用。
四。避免使用占位符文本
因为占位符并不意味着用户必须阅读HTML规范中的某些内容。在表单中使用占位符是因为它们在用户输入信息时提供了额外的指导。但问题是这些文字是灰色的，低对比度的颜色让用户很难读懂。在包容性设计的研究中发现，占位符往往会被浏览器或某些屏幕阅读器的自动翻译功能忽略，不会翻译或阅读。
那么我们为什么要使用占位符呢？使用占位符的原因是它们在视觉上节省了大量的空。但问题是，当用户点击时，占位符会自动消失，因此用户无法仔细检查他们是否在正确的输入框中输入了正确的内容。
一种常见的解决方案是使用浮动标签，并将它们用作占位符。当用户开始输入一个表单项时，标签将被悬挂在输入框上方。这种方法很受欢迎，因为它可以节省空。总的来说是非常优雅自然的模式。
但是，浮动标签的缺点大于优点。首先，设置提示文本缺少空空格，因为标签和占位符是一样的。其次，标签小，对比度低，用户很难分辨是占位符文本还是真正的数值。最后空之间的节省不会特别大，因为标签需要在空之间移动。
那么我们该怎么办呢？我们可以把提示文字放在输入框的顶部，就像下图一样。所以屏幕阅读器不会跳过这几个字，还提供了更大的点击区域。
5.标记可选或必需的输入框。
传统上，我们使用红色星号来表示所需的表单项，但如果您知道我上面提到的“问题协议”工具，大多数表单项都必须填写。因此，帮助用户标记可选输入框将更加方便和有意义。当我们想让某些元素脱颖而出的时候，我们会用视觉设计来突出这个元素的与众不同。
对于设计师来说，我们可以很快理解红色星号的含义，但总有人对此感到困惑。在标签上加上“可选”字样，会比使用视觉符号更清晰明了。
在包容性设计中，有关于如何使用红色星号作为必填字段的建议:可以在表单中添加标记，以便屏幕阅读器在阅读时可以说“这是必填的表单项”，从而帮助用户理解。
不及物动词出现错误时提供反馈。
当用户提交的内容出现错误，需要通知用户时，界面上应该有三个方面的呈现。
1.页面标题显示了错误的数量。
在html网页中，浏览器标题栏中出现的标题用于定义网页的名称。标题是屏幕浏览器开始阅读时第一个需要阅读的部分。所以在这里显示“用户提交的信息是错误的”可以最有效最快速的反馈给用户。
这种解决方案需要使用javascript来计算表单中的错误并显示出来，所以可能不属于一个设计师的功能。你只需要确保通知开发者这个功能。
2.在表单的开头显示错误提示摘要。
这种类型的错误反馈越来越清晰。表单上显示了错误的摘要，因此用户知道他需要修改内容的哪一部分。
好的错误摘要不仅包含错误信息，还包含错误位置的链接。错误的链接允许用户快速跳转到表单的错误部分，而不是要求用户先记住错误发生在哪里，然后从头阅读表单，从大量信息中找到自己的错误。
当然，当没有错误时，需要隐藏错误汇总模块。
3.错误的实时警告
在理想情况下，所有的错误提示都是实时的，这意味着当用户填写一个表单项(或者不填写)时，表单项附近会出现一个错误提示文本，可以有效减少用户上下滑动查找错误提示信息的时间。
最近，还有一种趋势是将错误消息放在文本框的顶部。这是因为有些自动填充功能可能会屏蔽这些消息，定位器上的键盘也会屏蔽这些关键消息，所以用户很容易忽略。
例如，对于稍微复杂一点的表单输入，输入一个新密码。一个很好的解决方案就是用实时提示显示密码的强度，也就是在用户打字的时候，可以实时显示当前密码的强度。这将最有效地让用户知道他们是否符合该表格的填写要求。
七。动作按钮1。在动作按钮上使用动词。
CTA操作按钮应该使用描述性语言，而不是模糊的语言。动词将帮助用户理解接下来会发生什么。虽然动作按钮上的描述要简短，但也不能牺牲语言的清晰性。一定要用大家都能听懂的语言。
2.主要按钮和次要按钮
对一级按钮和二级按钮进行清晰的视觉区分，主要是为了避免用户按错按钮。视觉上的区别可以导致最预期的操作。
3.动作按钮的位置
一般情况下，提交按钮应该放在表单的底部，因为大多数用户会从上到下填写表单，然后提交。另一个需要考虑的点是按钮对齐位置是左、右还是中间。我觉得更好的解决方案是靠左对齐，因为表单中的标签也是靠左对齐的，所以当用户把视线下移时，自然会看这个位置。
在需要使用后退按钮的表单中，比如多步表单，提交按钮仍然应该靠左对齐。但是后退按钮应该放在表单的顶部，这样可以帮助用户区分一级按钮(即提交按钮)和二级按钮(即后退按钮)，帮助用户误点后退按钮。
八、如果内容复杂，可以采用多步形式。
当表单中填写的内容可以分类时，使用多步表单可以提高表单的可用性。将一个较长的表单分成几个较短的表单可以帮助用户更清楚地填写表单。当需要填写大量信息时，最好使用多步表单。同时，你也可以向用户展示填充的进度，这是提高用户参与度的好方法。
进度指示器将表单内容分成许多逻辑和顺序步骤，向用户显示当前进度。这就给了用户明确的反馈，让他们知道自己完成了多少，还有多少没完成。
但是，除非你确定整个表格有几个步骤，没有偏差，否则不要用数字来标注，这样会导致更多的混乱。
1.尽早并频繁地测试设计草案。
最后，设计师需要证明每个表单元素存在的必要性。对于表单用户来说很枯燥，但是设计者的任务就是让表单尽可能的可用和易用。和其他设计一样，表单可以通过测试不断优化，所以要尽早、频繁地测试，让测试结果推动下一步的设计改进。
欢迎大家评论，喜欢或者自由分享。
作者:奥马尔·安达尼；；译者:王英瑞；评论:李和；编辑:孙
原文链接:https://UX design . cc/8-ways-to-***ke-forms-more-user-friendly-50 F3 f22 c 708 c
本文由@TCC翻译情报局翻译发布。每个人都是产品经理。未经许可，禁止***。
题目来自Unsplash，基于CC0协议。
本文来自笑醉生梦投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/612595.html
微信扫一扫 
