『』如何设计合适的移动端表单?5个关键点助力提升用户体验( 二 )


『』如何设计合适的移动端表单?5个关键点助力提升用户体验
本文插图

(2)减少输入
我们希望用户在填写表单的时候能尽可能减少用户的负担心理 , 提高整体的表单填写成功率 。 我们可以通过“减少输入”来降低用户对于填写数量的感知 , 从而降低用户对于填写表单难度的心理预期 。 常常采用减少“输入项” , 借助移动端载体手机的相机等硬件支持 。 看下我们对于开户进件输入银行卡的改造:

  • 改动1:“单行文本项-开户银行”改造成“选择项-开户银行” , 预设了可以选择的银行名称
  • 改动2:增加“通过卡面拍照识别”功能 , 通过手机拍照获取银行卡照片后直接解析银行卡号 , 银行名称信息
通过这两个改动 , 可以成功的降低 , 用户对于填写银行卡需要输入的预期 , 从原先需要输入银行卡号 , 银行名称 。 变成了只需要输入银行卡号选择银行名称 , 甚至可以直接通过相机一步获取需要填写的数据 。
『』如何设计合适的移动端表单?5个关键点助力提升用户体验
本文插图

(3)合理化流程
通过合理化填写流程 , 也能起到减少用户的操作 , 特别是用户不必要的重复操作 。 一起看下用户进件案例中关于两种填写验证码的方式 。 一种是验证码是本表单内的一个填写项 , 另一种是验证码是表单内信息提交后再填写的 。 我们可以一起把两种方式的流程拆解开来:
  • 方式1: 填写表单 -> 获取验证码 -> 填写验证码 -> 提交表单进入表单校验流程 -> 通过校验上传数据
  • 方式2: 填写表单 -> 提交表单进入表单校验流程 -> 通过校验进入填写验证码流程 -> 获取验证码-> 填写验证码
上面主要描述了填写正常的流程 , 两者的操作步骤是一致的 , 但是在异常情况下呢?比如表单其中一个填写项填写错误 , 方式1不但需要重新填写错误项 , 还需要重新获取验证码 , 增加了用户的操作和填写成本;同时浪费了验证码次数 , 也增加了公司成本 。 而方式2 , 表单信息通过才能获取验证码的流程设计可以避免这种情况的方式 , 节省了用户和我们的成本 , 更有利于增加用户的填写完成度 。
『』如何设计合适的移动端表单?5个关键点助力提升用户体验
本文插图

3. 提供明确的反馈
用户的认知是有高低差异的 , 不同用户对于表单的填写容易度也是不同的 。 我们通过明确的反馈 , 帮助大部分用户能正确填写表单 , 顺利完成对表单的填写 。 同时增加了整体表单填写的成功率和回收率 。 明确的反馈包括引导用户正确填写的反馈和用户误操作后的错误提醒
(1)正确引导
通过正确的引导 , 要让用户明确知道 , 哪个需要填写 , 需要填写什么内容 , 怎么填写 。 通过正确引导 , 让用户明确了填写的方向 , 提高了填写的成功率 。 比如用户进件这个页面中 , 有引导和无引导下用户填写的成功率是完全不同的 。无引导下 , 用户不知道该填写什么 , 也不知道如何填写;有引导 , 通过暗提示 , 引导用户每个表单需要具体填写的内容;通过必填 , 非必填的区分 , 引导用户哪些是必须要填写的 , 哪些是选填的(一般情况下在标记选填和必填时 , 可以考虑对更少的那一类做标记 , 这里就是标记了“选填”的 , 这也是一种减少操作的方式 , 减少了用户视觉上的操作)
『』如何设计合适的移动端表单?5个关键点助力提升用户体验
本文插图

(2)错误提示
用户不但需要正面的引导 , 同时对于用户错误的行为 , 也要给用户明确的反馈 , 告诉用户哪里错了 , 错误的地方是什么 。 通过错误提示 , 帮助用户能正确填写变单 , 从而完成表单填写 。 比如下图中 , 错误提示1 , 只告诉了用户错误了 , 但并没有明确告知用户具体的错误;错误提示2就给出了明确的反馈 , 用户对于修改有明确的方向 , 对手机号码进行修改后 , 就能完成整个表单的填写


推荐阅读