【513】如何在表单设计上留住用户？

链接：https://www.pmcaff.com/discuss/index/1707615024093248

今天这位读者的问题是：

用户在填写表格时可能会因为填写流程过于复杂放弃填写表格，怎样设计才能留住用户填完表单

@海巷  做出的回答是：

你的用户永远都是最忙的。所以不要尝试把一个复杂，无序，不经过推敲的表单直接p丢给用户。现在，不论是网页设计还是APP UI设计，表单都是界面中最常见、最重要的组件之一。它们的应用范畴非常广，用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等等等，从数据输入到信息搜索，几乎无处不在。

这里是几项表单可用性设计的建议：

1、梳理逻辑，只保留必须项。表单是同用户进行沟通的语言。和任何对话一样，它应当以符合逻辑的方式帮助双方完成交流。所以，你需要让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题，而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在，那么可以按照字母顺序来排布。以直觉的顺序组织选项。比如选项为日期的时候，按照周一周二周三这样的顺序来排布，而非乱序。时刻反思从用户那里获得的信息是否必要，如何使用。这样做是为了消除不必要的选项，提升完成率。

2、单列布局，提高输入效率。待填写的多列表单容易让用户漏填，并且打断填写体验。用户需要按照Z字形的轨迹来完成整个表单的填写，这样不仅影响整个书写路径，降低效率，而且具备一定的干扰性。但如果是使用单列的表单的话，这种填写路径是单一、直接而更为直觉高效的。

3、减少待输入成本。减少待输入的字段能够让你的表单更精悍，减少加载时间，对于信息量较大的表单尤其重要。单纯减少输入的字段数当然是不够的，你还要注意用户填写表单的方式、内容和工作量。通过打字录入内容是一种高交互性的输入方式，出错率高，时间成本高，所以，应当尽量减少用户打字输入的情况，多用复选框、单选按钮、下拉菜单等选项来降低用户犯错的概率。

4、标签置于相应输入框的上方。用户快速浏览表单是否足够方便？如果表单很难为用户快速扫视，那么填写所需的时间就更长了。所以，好看好填才是好表单设计的准则。Matteo Penzo 的文章曾经研究过表单中的表单和输入框应该如何布局才能让用户更好更快的浏览和填写，结论是标签应该置于输入框上方。如果你想用户尽快浏览，让标签和输入框纵向排列，靠左对齐。请注意，这里说的是快速浏览。这样的布局方式的优势在于，它们不需要太多的横向的空间，用户无需左右扫视而只需要向下浏览就好了，并且这样的布局更容易构成响应式的UI，兼容不同的屏幕和不同的应用场景。

5、不要混用占位符和字段标签。设计师通常会将文本占位符放到表单内，作为额外的提醒，作为示例告知用户如何填写。当用户开始在其中输入的时候，占位符文本会消失。有一些设计师会将出于降低表单长度、降低视觉混乱度的原因，将标签直接作为占位符置于输入框内。对于简单的表单设计，这种设计影响不大，当表单信息量大，内容类型多变的时候，这种方式就不合适了。这种设计的缺陷在于：一旦用户点击输入框，标签会消失，用户容易忘记谈需要输入的内容以及形式，当用户看到输入框中有内容填充的时候，会误解为这个字段已经被填写而无需输入了。

6、不要混淆可选和必填字段。正如同我在之前说过的，尽量避免在表单中加入可选填的字段。但是如果你非得加入，那么至少该明确哪些字段是可选，哪些是必填的。将选填字段控制在1~2个之内，并明确告知用户，这是可选的。

7、别用“重置”按钮。“重置”很容易让用户删除表单上所有内容并且从头开始，这样的风险太大了，在现实生活中这个按钮实际从来没有给用户以帮助，相反因为误触带来的伤害更多一些。

8、提供高可见度和特定的报错信息。理想状况下，用户完成表单的填写，上传就可以完成任务。但是实际的状况下，错误不可避免。所以，当错误发生的时候，要以高度可用、可见的形式告知用户，有问题发生了，所以，你所提供的报错信息应当符合下面的规则：当用户输入字段之后，应该实时告知用户他们填写的信息是对的还是错的，而不是等他们完成全部信息填写之后再告诉他们出错了。