作者:Momoh Silm

表格对于企业的采集个人信息至关重要。 收集数据, 表单设计形式方向变得至关重要。 因此, 创建方便友好用户的填写表单是提高表单完成率的主要因素。

剖析表单基本元素

表单在目的、内容和大小上各不相同, 但是有一些基本的元素可以帮助你的用户毫不费力地填充表单。抓住表单设计5要素,打造一个友好的输入表单-UI头条
 亚马逊"创建账户"形式的设计元素剖析

第一.表单名称或位置: 这些元素帮助用户浏览表单, 帮助他们完成整个过程。 当你将要收集的数据归类到不只一个表单类别时尤其有用。

第二. 标签: 标签告诉用户在任何特定的输入框中应该从他们那里得到什么数据。

第三. 输入框: 对标签的输入内容描述。

第四. 错误信息提示: 给用户反馈为什么他们的输入信息是错误的,错在什么位置。

第五.下一步点击按钮: 用户在表单输入结束后需要一个按钮(完成/下一页)。

表单状态

基本上, 在用户交互过程中, 你的表单应该经历三个阶段;

  1. 默认状态: 这是在用户输入之前表单的样子。
  2. 焦点状态: 这个方法强调用户与表单交互的输入区域的精确性。 这有助于提高用户注意力和减少反复扫描屏幕时间。
  3. 反馈状态: 这是用户接收反馈的地方(大多数时间错误消息)。 有时, 这种状态可能发生在用户移动到下一个输入域之后。 但如果数据无法立即验证, 于是当用户试图通过点击一个按钮提交表单时就会进行验证。

抓住表单设计5要素,打造一个友好的输入表单-UI头条亚马逊的默认, 焦点和反馈状态

最佳做法

1. 保持简单

让你的表格简洁明了。 只收集必要的数据, 避免以验证的名义重复输入字段。不要重复密码字段, 让用户查看他们选择创建的密码。
 
抓住表单设计5要素,打造一个友好的输入表单-UI头条在 Jumia 和 Amazon 上验证用户密码的不同选项

2. 使用及时验证反馈

当用户给出错误输入的反馈时, 最好将反馈附加到它所处理的特定字段上。抓住表单设计5要素,打造一个友好的输入表单-UI头条
 feedback 和 Amazon 采用了两种不同的验证反馈技术

3. 相关联的字段信息输入

对于关联字段进行组合, 并对其进行逻辑排序具有重要意义。 这可以帮助用户轻松地填写所需的数据, 而不需要太多的认知负载和最小的注意力。

 抓住表单设计5要素,打造一个友好的输入表单-UI头条

4. 标签位于上方和输入框左对齐

总是把标签放在输入框上方(如上面的亚马逊表格所示)。 不要用标签替换输入框文本。 没有标签, 用户会发现在提交表单之前很难交叉核对他们的输入, 因为这会让他们思考很多问题。

使用标签时, 始终将它们排列在输入字段之上。 有一个全面的研究报告指出,这对于用户来说 是最有效的方法, 

在其输入框上方左边放置一个标签(左对齐 右对齐), 允许用户用单眼运动捕捉这两个元素热点图研究结果。

抓住表单设计5要素,打造一个友好的输入表单-UI头条 抓住表单设计5要素,打造一个友好的输入表单-UI头条 抓住表单设计5要素,打造一个友好的输入表单-UI头条

5. 将输入框与输入字段的长度成正比匹配

简单来说, 一定要确保输入域的长度与预期输入的类型成正比。输入字段的输入域应该比邮箱的输入域长。
 
抓住表单设计5要素,打造一个友好的输入表单-UI头条
输入字段大小与预期输入的长度成正比
 
抓住表单设计5要素,打造一个友好的输入表单-UI头条
 Payporte的输入域与预期的输入数据不成比例

6. 按钮

所有表单的末尾都应该有一个按钮, 它是一个提交按钮或一个下一个按钮。 在必须有多个按钮的任何场景中, 应当强调主要按钮, 而次要按钮应该不那么突出。

 抓住表单设计5要素,打造一个友好的输入表单-UI头条

 亚马逊在更加强调主按钮方面做得很好

当使用网页来收集数据(在浮层形式)时, 另一个按钮是一个关闭按钮。 另一种方法是在右上角使用 x 图标作为替换按钮, 如下图所示。

 抓住表单设计5要素,打造一个友好的输入表单-UI头条

 在模态中, Medium 的符号使用 x 图标来关闭模态而不是'关闭'按钮

7. 搜索框

不要隐藏你的搜索表单, 特别是如果你的网站内容太多, 搜索可能是下一个重要的选择。

 抓住表单设计5要素,打造一个友好的输入表单-UI头条

 亚马逊的搜索框非常突出

此外, 在用户执行搜索之后, 在提交并显示结果之后不要清除搜索框。 这使得用户下一次可以很容易获得历史搜索记录, 知道他 / 她最初搜索了什么。

 抓住表单设计5要素,打造一个友好的输入表单-UI头条
 在显示结果后, Medium 在不清除搜索栏方面做得很好

第八. 清晰

向用户清楚地传达信息。 告诉用户期望他们填写什么, 并且尽可能清楚, 这样就不会有任何模棱两可的余地。 没有人喜欢填写表格, 更没有人喜欢填两次。

 
抓住表单设计5要素,打造一个友好的输入表单-UI头条
在尽可能清晰的标签方面, Cowrywise 做得很好 & 甚至连按钮的文字都是很好的描述

感谢阅读!!

Peace ✌🏽

 

 

原文链接:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

本文允许非商业转载,请保留译文链接,注明来自“UI头条”