作者：Momoh Silm
表格对于企业的采集个人信息至关重要。 收集数据, 表单设计形式方向变得至关重要。 因此, 创建方便友好用户的填写表单是提高表单完成率的主要因素。
剖析表单基本元素
表单在目的、内容和大小上各不相同, 但是有一些基本的元素可以帮助你的用户毫不费力地填充表单。
亚马逊"创建账户"形式的设计元素剖析
第一.表单名称或位置: 这些元素帮助用户浏览表单, 帮助他们完成整个过程。 当你将要收集的数据归类到不只一个表单类别时尤其有用。
第二. 标签: 标签告诉用户在任何特定的输入框中应该从他们那里得到什么数据。
第三. 输入框: 对标签的输入内容描述。
第四. 错误信息提示: 给用户反馈为什么他们的输入信息是错误的，错在什么位置。
第五.下一步点击按钮: 用户在表单输入结束后需要一个按钮（完成/下一页）。
表单状态
基本上, 在用户交互过程中, 你的表单应该经历三个阶段;
默认状态: 这是在用户输入之前表单的样子。
焦点状态: 这个方法强调用户与表单交互的输入区域的精确性。 这有助于提高用户注意力和减少反复扫描屏幕时间。
反馈状态: 这是用户接收反馈的地方(大多数时间错误消息)。 有时, 这种状态可能发生在用户移动到下一个输入域之后。 但如果数据无法立即验证, 于是当用户试图通过点击一个按钮提交表单时就会进行验证。
亚马逊的默认, 焦点和反馈状态
最佳做法
1. 保持简单
让你的表格简洁明了。 只收集必要的数据, 避免以验证的名义重复输入字段。不要重复密码字段, 让用户查看他们选择创建的密码。
在 Jumia 和 Amazon 上验证用户密码的不同选项
2. 使用及时验证反馈
当用户给出错误输入的反馈时, 最好将反馈附加到它所处理的特定字段上。
feedback 和 Amazon 采用了两种不同的验证反馈技术
3. 相关联的字段信息输入
对于关联字段进行组合, 并对其进行逻辑排序具有重要意义。 这可以帮助用户轻松地填写所需的数据, 而不需要太多的认知负载和最小的注意力。
4. 标签位于上方和输入框左对齐
总是把标签放在输入框上方(如上面的亚马逊表格所示)。 不要用标签替换输入框文本。 没有标签, 用户会发现在提交表单之前很难交叉核对他们的输入, 因为这会让他们思考很多问题。
使用标签时, 始终将它们排列在输入字段之上。 有一个全面的研究报告指出，这对于用户来说 是最有效的方法,
在其输入框上方左边放置一个标签（左对齐 右对齐）, 允许用户用单眼运动捕捉这两个元素热点图研究结果。
5. 将输入框与输入字段的长度成正比匹配
简单来说, 一定要确保输入域的长度与预期输入的类型成正比。输入字段的输入域应该比邮箱的输入域长。
输入字段大小与预期输入的长度成正比
Payporte的输入域与预期的输入数据不成比例
6. 按钮
所有表单的末尾都应该有一个按钮, 它是一个提交按钮或一个下一个按钮。 在必须有多个按钮的任何场景中, 应当强调主要按钮, 而次要按钮应该不那么突出。
亚马逊在更加强调主按钮方面做得很好
当使用网页来收集数据(在浮层形式)时, 另一个按钮是一个关闭按钮。 另一种方法是在右上角使用 x 图标作为替换按钮, 如下图所示。
在模态中, Medium 的符号使用 x 图标来关闭模态而不是'关闭'按钮
7. 搜索框
不要隐藏你的搜索表单, 特别是如果你的网站内容太多, 搜索可能是下一个重要的选择。
亚马逊的搜索框非常突出
此外, 在用户执行搜索之后, 在提交并显示结果之后不要清除搜索框。 这使得用户下一次可以很容易获得历史搜索记录, 知道他 / 她最初搜索了什么。
在显示结果后, Medium 在不清除搜索栏方面做得很好
第八. 清晰
向用户清楚地传达信息。 告诉用户期望他们填写什么, 并且尽可能清楚, 这样就不会有任何模棱两可的余地。 没有人喜欢填写表格, 更没有人喜欢填两次。
在尽可能清晰的标签方面, Cowrywise 做得很好 & 甚至连按钮的文字都是很好的描述
感谢阅读！！
Peace ✌🏽
原文链接：https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2
本文允许非商业转载，请保留译文链接，注明来自“UI头条”
