掌握8个要点,设计友好的表单!  

表单结构

虽然表单类型多样,有不同目的的、收集不同内容的、不同尺寸的,但是却有一些共同的基本的元素可以帮你的用户快速且顺利地填写它。

1.jpg

【亚马逊创建账户的表单】
1. 类别或者条目(Category or Section):它可以帮助用户快速理解表单的作用,同时,当你要收集的数据多于一个类别时,比如:个人信息、职业信息、财务信息等……对数据归类整理具有很大的帮助作用。
2. 标签(Label):它的作用主要是告诉用户,在这一栏需要填写什么。
3. 占位符(Placeholder):对于标签下需要填写内容的额外注释。
4. 出错信息(Error Message):当用户填写的信息无法被录入时给予反馈。
5. 提交操作的主按钮(Primary CTA button):放置于表单底部,用户用来提交填写好的表单的按钮。

表单状态
基本上来讲,
你的表单在用户使用过程中存在三种状态:
1. 默认状态:就是用户在填写前表单的状态。
2. 焦点状态:在用户正在填写的栏目上做着重提醒,这样可以帮助用户聚焦正在填写的栏目,哪怕他的注意力离开了屏幕一会儿,回来后也能马上找到刚刚正在填写的栏目。
3. 反馈状态:这种状态一般是给用户一些反馈信息(大多数是出错信息)。一般情况下,这种状态会出现在用户移至下一个填写区域的时候。另外,当用户提交表单时,如果系统无法马上验证信息,也会出现这种状态。

2.jpg

【表单的默认状态,焦点状态,反馈状态】
好的案例

1.表单要尽量简单
尽量让你的表单短且简单。收集必要的数据,避免重复的输入。比如,把“再次输入你的密码”这一栏去掉,而是在“输入密码”区域增加一个“密码可视”的按钮,让用户可以选择看到自己输入的密码内容。

3.jpg

Jumia和亚马逊不同的用户密码验证方式】

2.使用框内提醒
向用户反馈“输入错误”提示时,最好把错误提醒放在对应的输入框内。

4.jpg

【Facebook和亚马逊不同的“错误提醒”方式】

3.将相关信息分组
这一点很重要,把相关的信息分组,并将这些组按序列排列。这样可以帮助用户减少认知负荷,并能更加专注地填写当下的信息。

5.jpg


学校地址:赤峰市红山区朝聚眼科医院院内左侧入口上三楼 电话0476-2240664 郑重声明:我校在赤峰地区仅此一家,无其他分校,请广大学子家长慎重选择。
©2017 赤峰东方教育版权所有 冀ICP备16029644号-2