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

由卡米雷特 · 发布日期 2018年1月17日 · 已更新 2019年1月9日

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

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

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

01.只索要你需要的信息

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

02.给表单加入逻辑

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

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

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

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

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



<fieldset>

<legend>Personal Information:</legend>

<div>

<label for="first_name">First Name</label>

<input type="text" name="first_name" id="first_name">

</div>

<div>

<label for="last_name">Last Name</label>

<input type="text" name="last_name" id="last_name">

</div>

<label for="gender">Profession</label>

<input type="text" name="profession" id="profession">

</div>

</fieldset>

03.使得标签尽可能短

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

同时，注意用语的艺术。

04.不要要求重复填写

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

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

05.标注出可选项

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

06.注意初始化数据

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

07.减少输入需求

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

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

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

08.使用实时检查

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

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

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

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

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



<label for="message">Message (20 chars min, 100 max) :</label>

<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"></textarea>