遵守这8个原则,帮你创建用户友好型表单 - 优设网 - UISDC

遵守这8个原则,帮你创建用户友好型表单

2018/07/17 14905评论区

表单对于企业和个人同样至关重要,当涉及到数据收集时,我们大多数情况下会采用表单(或许是因为在互联网繁荣之前我们就已经在线下使用了很久的表单)。因此建立一个用户友好的表单是增加填写完成率的关键。

一、表单解析

表单的目的、内容、大小长度等虽然各不相同,但基本元素比较固定;合理组织这些元素有助于用户轻松完成表单填写。

△ Amazon创建账户表单解析

  • 标题:这个元素帮助用户引导完成表单填写的整个过程,当你把信息分成很多组来让用户填写的时候,标题就特别有用。例如:个人资料、职业详情、财务明细。
  • 标签:标签告诉用户在任何特定的输入区域期望他们填写什么内容。
  • 占位符 :占位符是对标签进行额外的信息描述。
  • 错误信息提示:错误信息提示给予用户错误反馈,提醒用户为什么填错了。
  • 动作按钮:动作按钮是在表单的结尾,有个确认提交的动作控件。

二、表单状态

基本上,表单在用户的交互过程中需要经历三个阶段。

  • 默认状态:用户在未进行任何操作前表单的状态。
  • 聚焦状态:这个状态强调用户正在填写的区域,帮助用户聚焦和减少反复扫描屏幕的时间。
  • 反馈状态:反馈状态是指用户收到反馈时的页面状态(大多数是指错误信息反馈)。有时候对于上一个输入信息的反馈在用户聚焦到下一个填写区域时就会显示。然而,如果数据不能得到立即验证的话,就要等到用户点击提交按钮后再给予反馈提示。

△ Amazon创建账户表单的「默认、聚焦、反馈」页面状态

三、最佳实践

1. 保持简洁

让你的表单保持简短精炼,只保留最有必要的数据,避免以验证的名义让用户重复输入,例如不要重复密码字段,取而代之的是要让用户直接看到他们输入的密码。

2. 使用及时验证

当给予用户输入进行报错时,最好将反馈定位到具体位置。

△ Facebook和Amazon采用了两种不同的验证反馈方式

3. 将相近的字段打组

将相关信息进行分组并按照常见规则排序很重要。这样的话可以帮助用户减少认知负荷和注意力消耗。

△ 付款页面相近的功能区域被适当地分组

4. 将标签左对齐

要将标签放置到输入框上面(像上面所解析的 Amazon 的表单一样)。不要把占位符文字作为输入框的标签,那样的话用户输入完成后将看不到标签,用户将很难对已输入的内容做最终的核对,会让他们思考很多。

始终将标签放置在输入框上面并左对齐,这是高效率的做法。

5. 输入区域与内容类型或尺寸相匹配

简单地说,要保证输入字段的长度与预期的输入类型相匹配,例如:地址就要比邮政编码长。

△ Flutterwave’s Rave的登录页面,输入区域的尺寸与预期的输入字段的长度比例一致

△ payporte的输入区域与预期的输入字段的长度比例不匹配

6. CTA(call to action)按钮

在表单的末尾通常会有个确认按钮或者下一步按钮,在有些场景下,必须有一个以上的按钮。要强调主要的按钮,弱化次要按钮。

△ Amazon的主要次要按钮处理的很好

当运用模态弹窗进行信息收集时(表单在模态弹窗上),那么次要按钮有时候就是关闭按钮,另一种弱化它的方法就是使用 X icon 代替关闭按钮,如下所示。

△ Medium的登录模态弹窗使用X icon 来代表关闭按钮

7. 搜索区域

不要隐藏你的搜索框,特别是你的网站内有大量内容时,搜索或许是最好的选择。

△ Amazon的搜索框特别的显眼

当用户执行了搜索操作后并显示了搜索结果,不要立即清除搜索框内的内容,以便可以让用户很容易地去回顾他起初所搜索的内容。

△ Medium没有清除搜索后的输入内容

8. 清晰

给用户传达清楚的信息,给予他们所预期的,不要模棱两可。没有人喜欢填写表单,没有人愿意填写两遍。

△ Cowrywise的标签内容非常的清晰,甚至按钮的文字都描述得很好

原文链接:《Creating User-friendly Forms》  Momoh Silm

欢迎关注点融设计中心DDC微信公众号:「ID:DR_DDC」

ddcqr

图片素材作者:asifzuo

「表单设计一网打尽」

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/8-principles-to-create-user-friendly-forms

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 优设大课堂 设计师干货 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里