10个友好的电子表单应具备的特质,助力用户体验

尽管现在人机交互技术在不断更迭,但电子表单仍是获取用户信息的最重要方式之一。用户使用某网站或APP是有明确目的的,而电子表单往往就是达成这个目的其中甚至唯一一个步骤。我们每天都会使用电子表单来完成一些基本操作——购物、社交媒体登陆、评价商品等等。

结果上来说,我们应尽量让电子表单变得简洁明了,既容易快速填写,又不会让用户感到困惑。作为填表的人的时候,我们花费的精力越少,也就会相对开心一些不是吗?作为设计师或开发人员,我们我目标就是让电子表单快速、精简、容易,并尽可能提升用户的体验。

29077481 - design, sharing - 10个友好的电子表单应具备的特质,助力用户体验

01.只索要你需要的信息

减少问题的个数可以让回答者更容易完成,因此你应该时刻反问自己,这些信息你为什么要求用户填写,它对你有用吗?试着尽可能减少问题的数量,毕竟没多出一个问题,就意味着转化率会降低一点。让自己的表单轻量化,尤其是当你的表单非常冗长的时候,试着缩减它!

02.给表单加入逻辑

960164 - design, sharing - 10个友好的电子表单应具备的特质,助力用户体验

在你制作表单时,想想你是如何进行日常对话的。在日常对话中,我们将问题进行逻辑归类,然后融入在讨论中,而你的APP和用户实际也在进行一场对话,这场对话的问题也应是有逻辑的,而且逻辑应该是对用户而言的,而不是你的数据库。比如说,通常我们不会在询问用户名字前就问他们的地址。

另一个重要方法是将关联的问题分组,并放在各自的区块内,这样用户就是一个区块一个区块地回答问题,而不是逐个回答,更有交流的感觉。将问题分组还有助于让用户搞清楚哪些问题是他们必须填写的。

上图是两个注册表单,表单如此之长,在你没有分组的时候会感觉过度夸张,而分组后虽然页面边长了,但填写的心理压力却得到了缓解。

分组必须在代码上得以体现,才能转化为视觉。你可以使用诸如<fieldset>和<legend>等标签来关联类似表单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
&lt;fieldset&gt;

&lt;legend&gt;Personal Information:&lt;/legend&gt;

&lt;div&gt;

&lt;label for="first_name"&gt;First Name&lt;/label&gt;

&lt;input type="text" name="first_name" id="first_name"&gt;

&lt;/div&gt;

&lt;div&gt;

&lt;label for="last_name"&gt;Last Name&lt;/label&gt;

&lt;input type="text" name="last_name" id="last_name"&gt;

&lt;/div&gt;

&lt;label for="gender"&gt;Profession&lt;/label&gt;

&lt;input type="text" name="profession" id="profession"&gt;

&lt;/div&gt;

&lt;/fieldset&gt;

03.使得标签尽可能短

标签指的是说明“此处该填什么”的文字,清晰的标签文字是使得UI更易用的关键途径。标签可以告诉用户设立这项表单的目的,但太长就不能一眼识别。因此,应确保标签简洁明了、意义清晰,请尝试控制在5个字(或两个英文单词)以内。

同时,注意用语的艺术

04.不要要求重复填写

50008638 - design, sharing - 10个友好的电子表单应具备的特质,助力用户体验

这常见于注册表单,网站常常要求你将电子邮件或密码填写两次。原本这是为了防止错误输入而设计的,然而在实际应用场景中,只要程序允许,用户就会将这些信息进行复制黏贴,如果原文错误的话,那重复一次也不会有任何帮助!

05.标注出可选项

首先,根据我们的第一条,最好还是没有可选项,因为既然你不需要,那就是浪费用户的时间。但如过你真的需要,拿你应该明确指出哪些是必填的。一般我们会使用一个星号(*)来表示必填项,或者在选填项后面写一个“选填”标签。

06.注意初始化数据

尽量避免在表单里使用初始化的默认数据,除非你确定大量的(至少是90%左右的)用户都会选择它,特别是当那是个必填项的时候。为什么?因为现在用户的浏览非常快速,你不可能奢求用户认真看完每一个选项,他们很可能看到这个选项已经被完成了(尽管他们自己没填),所以就忽略它。这可能会给你的表单带来错误。

07.减少输入需求

打字是一项耗时而容易失误的任务,特别是在手机上体验较差,因为用户可用的交互空间就那么大。而随着越来越多用户使用智能手机,想办法减少用户的输入任务是提升用户体验的好主意。你可以使用类似填充建议(智能联想)或下拉菜单的方式,这样用户只用输入很少的内容或直接选择需要的内容就可以了。

最艰巨的任务之一是填写地址,在这里智能联想可以帮上大忙,节约用户的时间。谷歌地图提供了JavaScript API,百度地图暂没有单独分离这个功能。

语音输入或许是个不错的主意,但前提是你用的恰当。

08.使用实时检查

34952206 - design, sharing - 10个友好的电子表单应具备的特质,助力用户体验

理想状态下,用户输入必要信息填完表单,然后就能顺利提交。但现实是骨感的,因为用户会犯错。如果你因为填错了一个信息,而要重新填写整张表单,那会是很恼火的一件事。

而实时检查系统,可以在用户输入项目时,实时提醒现在的输入是否符合了要求,从而尽可能避免上述的尴尬。它可以告诉你当前的输入是错误的,以让你尽快修复错误,而不需要等到按下了提交按钮后才知道。

另外,错误提示不仅要告诉用户“你填错了”,而且要告诉用户“你应该怎么修改”,这样能给用户信心,帮助他们完成填写。

Parsley是很棒的基于JavaScript的用于填写实时检查的开源库,它专注用户体验,你可以根据你的需求进行修改。下面是一个使用Parsley的填写检查代码示例,它的规则是:填写必须大约20个字符,小于100个字符。

1
2
3
&lt;label for="message"&gt;Message (20 chars min, 100 max) :&lt;/label&gt;

&lt;textarea id="message" class="form-control" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment." data-parsley-validation-threshold="10"&gt;&lt;/textarea&gt;

09.不要强制固定输入模式

表单最常见的一种错误是强制用户使用某格式,而导致用户不能正常填写,最常见的场景就是对电话号码格式的要求,比如看看这几种常见格式:

  • +8619800001234
  • +86 19800001234
  • 086 19800001234
  • 086-19800001234

它们都是正确的(仅仅说格式,上述号码应该是打不通的……),但如果的表单对格式要求严格,很可能有三种不能通过。最好的办法不是强制用户输入哪一种,而是在用户输入完成后,在显示和储存的时候再自动转化为需要的格式。

10.不要使用“重置”按钮

57869157 - design, sharing - 10个友好的电子表单应具备的特质,助力用户体验

重置按钮几乎不可能帮上用户,你能想象一个人在什么情况下会完成了整张表单,然后去点重置清空所有内容吗?更糟糕的是重置按钮可能会放在提交或保存按钮旁边……去掉它,你的网站会更可爱一点。

 

文章出自《Net Magazine》第288期,原作者Nick Babich,翻译:卡米雷特。

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注