日常生活中，我们经常会被要求填写各种各样的表单：登录/注册、提交申请、购买商品……等等。即使是很简短的表单人们仍然反感，因为用户目标和业务目标之间往往是不同的，产品希望获得更多的用户数据，而用户只想快速地完成表单从而实现自己的真实需求。好的表单设计既可以帮助业务实现目标，也可以帮助用户解决问题。
我们知道，表单至少有三个基本要素：标签、输入框和动作。每一个要素的设计好坏都会对表单产生影响。本文先来说说设计一个简单、易用、高效的表单的基本原则。
一、及时反馈
用户在填写表单时，无论操作后成功与否，都应当及时告知用户。
1.成功反馈
常见的成功反馈有非模态弹框和落地页两种。
需要注意的是：成功反馈不要阻碍用户进程，而是鼓励用户采取更多行动。
可以采用非模态弹框形式给予用户轻量型的提示。如下图是喜马拉雅APP的登录表单，当用户输入正确的验证码后，toast提示正在登录，登录成功后toast提示登录成功并引导用户设置密码。
喜马拉雅APP-登录
成功反馈最好能明确告知用户下一步操作是什么。这样能够帮助整个流程形成闭环，降低用户跳出率。下图是人人贷APP申请贷款额度表单：
人人贷APP-申请贷款额度
由于完成申请需要经历5步操作，因此必须提供清晰的引导和积极的反馈才能帮助用户顺利完成，人人贷在这里做的比较好：通过“识别成功，快点击下一步吧“的反馈和引导激励用户完成表单。这也是另一种常见的成功反馈——落地页的好处之一。它将提示融入到流程中，能够更好的引导用户进行下一步操作。
综上，toast较适用于单一的表单给予轻量的提示，落地页较适用于多个表单分步骤展示时，引导和激励用户继续下一步操作。
2.错误提示
用户在操作时出现错误是在所难免的，我们可以用更友好的方式帮助用户发现“错误”，改正“错误”：
（1）明确告知用户出现错误的位置及解决办法
如果用户在填写表单的过程中出现错误，则必须明确告知出现错误的位置，错误的原因及解决办法。试想，你花费好长时间填写完一个长表单，正当你觉得胜利在望准备提交时，忽然告诉你出错了无法提交，但是你不知道哪里出错了，你不得不从头到尾检查一遍，如果还没有找到错误的话，那简直要崩溃了。如果表单出现错误，则要明确告知用户错误的位置、原因及解决办法。下图网易云课堂的例子就比较好：
网易云课堂PC-填写表单出错时提示
将错误消息放到相关元素旁，帮助用户快速定位错误的位置；同时告知用户错误原因，便于用户及时改正错误。这里需要注意，如果出现错误的输入框在一屏以外，则应跳到表单出现错误的位置。如下图：
网易云课堂PC-出现错误的位置提示
还是刚才的表单，点击按钮后，页面定位到出现错误的位置，帮助用户在长表单中快速找到错误并改正。
（2）采用“双重视觉强调”帮助用户发现错误
我们的设计应该考虑到一些特殊用户比如色盲人士，如果只改变标签文字的颜色，可能不足以引起他们的注意，为了确保用户能够发现错误，建议采用双重视觉强调，即：输入框红色+红色文字提示；标签红色+输入框下方红色指导文字；图标+红色文字；背景色+指导文字。下图是错误提示采用不同类型的双重视觉强调：
错误提示采用双重视觉强调
这里需要说明，错误提示也可以用模态弹窗的形式，但不是好办法，也不适合表单。因为如果使用模态弹窗，错误消息无法与输入框联系在一起，且关闭弹窗后用户必须要记住弹窗内容才行。
（3）尽量避免用户犯错
除了帮用户尽快修正错误之外，我们还可以通过一些方式避免用户出现错误，让表单填写更顺畅。比如：把输入项改成选择项；减少输入项；带默认值的输入项……等，此处暂不具体介绍，详见下文第三条“减少多余输入”。
二、即时验证
1.当问题的“答案”不止一个时，应当为用户提供建议以帮助用户确认答案
我们在设计表单时，有些问题的答案是不唯一的，比如用户注册时需要设置昵称，虽然答案是不唯一的，但依然要遵守一定的规则。因此，用户在操作时对答案进行即时校验同时提供建议，能够帮助用户尽快确认答案，减少不必要操作。
下图是简书的注册页面，当用户输入一个已被占用的昵称时，给出了错误提示，虽然提示及时且明显，但忽略了一点——为用户提供建议。由于设置昵称这个问题的答案是开放性的，因此应当为用户提供建议以帮助其更快地确认答案，否则用户需要不断的尝试才有可能找对一个未被使用的昵称，无形中增加了用户的操作负担。
简书PC-注册
再看下图是百度贴吧的注册页面：
百度贴吧PC-注册
同样是设置昵称被占用，在提示错误的同时，基于用户已经输入的内容给出建议答案，用户可以选择重新输入，也可以直接使用建议答案，无需不断尝试就可以快速找到满意的昵称，提高了注册表单的填写效率。
2.即时验证，时机是关键
前文说过，用户填写表单时给予及时验证和反馈是比较好的体验，但是验证和反馈的时机很关键。
下图是人人贷申请出借的表单，未输入金额时提示输入1000元的整数倍，当用户刚输入1时就给出错误提示，这样分散了注意力，容易使用户有挫败感。
人人贷PC-申请出借
正确的做法应该是选择合适的时机给予用户及时的反馈。如果是长表单则可以在焦点离开输入框后进行校验和提示；如果是短表单则可以通过按钮或技术来实现，比如：未输入正确金额，按钮不可点击，或者技术限制用户不允许输入小数点等方法。
3.如果有输入限制，应当采用实时、动态更新的方法传递输入限制
表单设计中，有些问题没有明确的答案，但是有明确的限制规则，比如：限制用户输入内容的字符数，用户设置密码的长度和安全性提示等。此时采用即时验证，能够避免由于限制而产生的潜在错误。
如下图是美团提交意见反馈的表单，问题描述限定在200字以内，当用户输入内容后，右下角的计数器会实时更新显示当前已输入和限制字数。
美团APP-意见反馈
另一个常见的限制就是注册表单的设置密码功能，下图是新浪微博的注册页面，在用户输入密码的过程中即时验证，提示用户密码的正确性及安全性。
新浪微博PC-注册
三、减少多余输入
1.基于已有内容进行智能判断
根据用户已经输入的内容智能判断其他相关内容，从而减少用户输入，降低出错率。
下图是百度钱包和恒昌财富开通银行存管的表单对比：
百度钱包APP-减少多余输入
百度钱包在用户输入银行卡号后直接识别出所属银行，而右侧产品输入卡号后需要用户手动选择开卡行，增加操作成本。类似的还有根据生日判断年龄，根据手机号码判断所属运营商等。
减少多余输入对用户来说固然是好的，但是我们在运用该方法时需要注意，如果不能准确的判断相关内容，或者相关内容很重要，那么请允许用户自行修改。如下图：
人人贷APP-申请额度
用户申请贷款额度时需要进行身份认证，利用OCR技术扫描身份证减少用户输入，但是由于身份认证的信息很重要，需要用户反复核对，且无法保证技术0差错，所以在扫描身份证后自动带出扫描的信息同时提示用户可手动修改。这样既减少了用户输入又避免了错误。
再来看一个例子，下图是百度钱包提现页面：
百度钱包APP-余额提现
提现时可以选择手动输入金额也可以点击“全部提现”，点击“全部提现”后，账户内所有可提现余额自动填写到输入框内。这也是减少用户输入的一个贴心的设计细节。
再看一个长表单，是金融类产品坤元资产的信息认证表单：
坤元资产APP-信息认证表单
我们看到，需要填写的项有出生地和居住地，那如何尽可能的减少用户输入呢？考虑到目标用户中大部分人的出生地与居住地是相同的，所以在设计时提供给用户一个“同出生地”的按钮，用户不必重复填写相同内容，只需要点击“同出生地”，就会把出生地的内容全部带入到居住地输入框，极大的方便了用户，提高了表单的完成效率。
2.提供默认选项
若问题为选择项，则为用户提供默认选项也是一个好方法。如下图某OA系统，根据公司人事提供的信息，公司内请假申请类型最多的是调休假，因此在设计时将休假类型的默认选项设置为调休假，减少大部分用户的不必要输入。
某OA系统-提供默认选项
这里需要说明的是，由于大部分用户会保持默认选项，所以要注意，默认的选项要复合大部分用户的目标。另外，如果你不能确定初始默认选项是什么，是否符合大多数填写表单者的需求，那么最好不要提供默认选项，不然反而会弄巧成拙。
3.根据用户之前的操作设置个性化默认项
若表单为可重复使用的表单，当用户再次使用时，默认记住用户之前填写的内容，也是减少用户输入的另一种形式。
如下图，百度地图搜索路线的表单，起点默认为当前定位的位置，输入终点时（右图）在输入框下方有一个“家”，点击“家”之后直接将家的位置带入终点输入框，这就是根据用户之前的操作设置了个性化默认，值得我们借鉴。
百度地图APP-搜索路线
四、必要时提供帮助文字
帮助文字不是组成表单的必要元素，但有些情况需要提供帮助文字才能顺利完成表单填写：
1.用户不熟悉标签含义时
如图，是微信公众平台的注册表单：
微信公众平台PC-注册
我们看邮箱验证码标签，如果不做解释说明的话可能会引起用户歧义：什么是邮箱验证码？如何获取邮箱验证码……等一系列问题。因此设计师在输入框下方给出了帮助文字，详细说明了如何回答邮箱验证码这一问题。
2.需要向用户说明为什么要问这个问题时
如上图，还是刚才的微信公众平台，再看下“邮箱”这个标签，下方的帮助文字说明了为什么要填写邮箱——作为登录账号。向用户解释说明了为什么要问这个问题，能够减少用户的担忧，促成表单的填写。
3.涉及到安全或隐私问题时
下图是百度云平台创建工单页面，可以看到“机密信息”标签在输入框内给出了帮助文字，告知用户填写的内容会在后台做加密处理，确保信息安全。当表单涉及到用户的安全或隐私信息时，或者隐私信息可能会引起用户担忧时，应当提供帮助文字排除用户的担忧。
百度云PC-创建工单
4.建议回答问题的方式
这种情况一般是问题有特定的格式或特殊的要求，此时提供帮助文字能够使用户尽快确认正确答案。如下图的设置密码、填写工单标题、上传附件要求等例子，都有明确的帮助文字说明回答问题的方式和要求。
“帮助文字”能够向用户建议回答问题的方式
通过上面的例子，我们了解了帮助文字出现的时机，下一步我们该如何展现帮助文字呢？一般地，我们可以把帮助文字分成2种：自动即时帮助和用户激活的即时帮助。
1.自动即时帮助
指帮助文字是自动出现的，直接在页面中展示出来，不需要用户主动获取。通常如果人们知道表单问题答案，但不确定如何回答或为什么回答时，可以考虑使用自动即时帮助。
上文的微信公众平台填写邮箱和密码都是使用自动即时帮助的例子。
2.用户激活的即时帮助
指不直接将文字展示出来，当用户需要帮助时可自己主动获取。如果表单所含问题复杂，或者表单会被相同的人重复使用时适合用该方法。
下图是宜人贷的申请表单，在出借人适当性管理告知后面有一个问号样式的图标，鼠标悬停时会出现相关的解释说明文字。由于适当性管理告知是一个专业词汇，除专家用户外的其他用户很难理解。因此提供用户激活的即时帮助显得很有必要，无论何种用户，无论什么时候，只要用户需要帮助就可以主动获取。
宜人贷PC-用户激活的即时帮助
另外，必要时为用户提供帮助文字还有两点需要注意：
1.如果你选择了使用帮助文字，请一定要让它真的能够“帮助”用户
恒易贷APP-登录页面改版前后对比
上图是恒易贷的登录表单改版前后对比，我们发现改版后的帮助文字清晰的告诉用户：账号是手机号码，登录密码的规则。布局、视觉都没有变化，仅仅是文案的变化就能减轻用户负担，提升用户体验。因为每个用户都在使用很多不同的app，账户和密码的格式也各不相同，这样的提示就能很好的“帮助”用户快速正确的完成登录并使用产品。
2.用户激活的即时帮助，注意出现的时机
如果是鼠标悬停时显示帮助文字，则要扩大悬浮激活区域，方便用户操作；且要悬停5s以上再显示，来确认用户是真的需要帮助，而不是因为鼠标偶然通过触发区。
总结
通过以上的总结能够发现很多都是细节的设计，细节能够打动人心，细节能够决定成败。一个优秀的体验设计师，一定是在意细节又不拘泥于细节的人。
本篇文章就到这里吧，下一篇我将从表单的基本要素说起，谈谈各要素的设计要注意哪些问题。更多精彩，敬请期待！
推荐阅读书籍：《Web表单设计：点石成金的艺术》、《Web表单设计：创建高可用性的网页表单》
网友评论