提高复杂表单输入效率的设计思考

最近做了一个复杂表单的改版需求，在优化改版的过程中，对如何提高用户输入信息效率方面做了多次设计探索，有些探索被保留了下来，有些探索被无情地干掉了。

表单用于向用户收集或验证信息，无论是收集还是验证信息，都需要付出一定的时间成本，尤其是C端产品，稍有不慎就会惨遭用户抛弃。所以，信息输入能避免就避免，实在避免不了，也要采用多种方式优化输入整个体验过程。但是，对于B端用户来说，信息输入是工作，再复杂也得硬着头皮完成。作为产品设计者，我们既可以优化输入信息体验过程，也采用多种措施来提高用户输入信息的效率，帮助企业实现降本增效的目标。

首先，我们明确一个概念：什么是复杂表单？

换句话说，如何衡量一个表单是不是复杂表单？

复杂表单之所以复杂，主要是由表单所承载的产品本身的业务和功能决定的。以新增课程为例，一门课程由四大部分组成的：1.课程基本信息 2.商品信息 3.章节信息 4.老师信息。课程基本信息和商品信息这两部分虽然复杂，但因为其内容是由课程性质决定的，所以输入表单条目数量是固定的。但是章节信息，是这门课所包含的内容，内容的多少是由实际的业务所决定的，业务覆盖面越大，课程越复杂。

从数量上讲，如果表单条目超过15个的话，就可以称作复杂表单。即使表单本身的业务和功能比较简单，但是表单条目超过15个，对于用户来说需要付出较多的时间成本来完成，也可以称之为复杂表单。而且，从分屏的角度来讲，15个表单条目这大概可以放一屏。如果超过15，就需要显示到第二屏，这时可以考虑分屏的问题了。一旦分屏，就要开始考虑是分步填写还是分标签等方式填写的问题了。

如何设计才能提高复杂表单的输入效率？

效率：指在单位时间里完成的工作量。所以，想要提高复杂表单的输入效率，必须从两方面入手：1.减少工作量；2.缩短时间。减少工作量是指输入表单条目数量的减少，而缩短时间则是指完成表单的时间比之前缩短了。下午将从减少工作量和缩短工作两方面讨论如何提高复杂表单的输入效率，希望可以抛砖引玉，引发大家积极的思考。

减少工作量--减少表单条目的数量

第一 梳理业务流程和功能流程，缩短路径，实现流程简化

流程简化是减少表单条目数量最直接的手段。流程是指基于时间完成某一件事的整个过程，其包括业务流程、功能流程和页面流程。对于设计师来说，流程图一点儿也不陌生，每做一个需求，都需要采用泳道图来绘制流程图。改版也不例外，要提高表单的输入效率，我们首先要绘制流程图，然后进行严谨的流程分析，在流程各节点中寻找可以判断用户意图的节点，跳过不必要的流程，合并必要的流程。

第二 去掉可有可无的信息

所谓可有可无的信息包括：1.约定俗称不需要特定说明的信息 2.对用户完成目标没有任何帮助的信息。例如此次新增课程改版设计中，首先去掉【使用语言：简体中文】。作为一个全球化的产品，系统被翻译成不同的语种。既然是在中文状态下填写信息，那么使用的语言肯定是简体中文呀。

需要说明的是，无论是【简化流程】还是【去掉可有可无的信息】，都是在不增加用户的理解成本基础上所做的优化。如果也因此增加了用户的理解成本，那么优化毫无意义。

经过【流程简化】和【去掉可有可无】的信息两个步骤，表单还是很复杂，那么我们只能接受。美国认知心理学家、产品设计领域的大师诺曼曾说过 “复杂是世界的一部分，但它不应该令人困惑 ”当复杂不可避免，我们就要试着去接纳，去管理，以及考虑其以何种形式流向用户，以降低其认知成本。

缩短时间--提高信息输入效率

第一 以权限为基础--减少用户的识别成本

B端产品离不开权限，权限是B端产品的基础。权限包括功能权限和数据权限两部分，这两部分经常组合出现，以删除课程为例，删除是功能权限，删除哪些课程是数据权限。如果不引入权限会出现什么问题呢？举个例子，小成有吃饭和睡觉的权限，而小明只有吃饭的权限。但是小明和小成都面临同一个选择：吃饭还是睡觉。这个时候小明悲催了：睡觉是啥？我不是只能吃饭吗？你把睡觉的权限放到我面前是啥意思？小明的疑问增加了运营的工作量。

以新增课程为例，我们将用户分成两类：

·A类企业用户：他们的课程只能在C APP中被消费者学习使用

·B类企业用户：他们的课程既可以在C APP中被消费者学习使用，也可以选择跳转到他们自己的APP中被消费者使用

如果不引入权限，那么两类用户看到的新增课程内容是一样的，他们都需要对课程使用形式进行选择。B类企业用户进行选择情有可原，毕竟他们两种权限都有，自主性大。而对于A类企业用户，明明有且只有一个权限，却也面临两个选择，难怪用户会对这种设置发出疑问。

套用一句俗套的话，什么锅配什么碗，什么权限的用户就配什么内容的表单，千万别想着简单，而采用一刀切的方式。产品设计者的工作是简单了，用户的工作却繁琐了。

第二 自动识别--基于判断显示结果

当系统可以提前侦测到用户的预期，可将用户期望的结果展示出来，而不需要用户参与。以新增企业信息为例，我们一贯的做法是先填写企业名称、经营范围等信息，然后上传营业执照图片。如果先上传营业执照图片，然后系统自动识别，将识别到的企业名称等信息自动展示到对应的输入框中，也是一种提高输入效率的方式。

同样，上传文件名称映射--也是自动化替代用户手动输入的一种方式。当上传图片后，图片名称去掉格式后缀后，自动映射到文件名称上。

第三 信息分类，结构清晰

微信之父张小龙曾说过，设计就是分类。这句话是否全面，这并不重要。重要的是他直截了当地表明了信息分类的重要性。条目数量少的表单要进行分类，条目数量多的表单更要做好分类。原因如下：1.给用户树立严谨的品牌形象； 2.让用户对信息框架有整体认知；3.避免用户思维过度跳跃和混乱；4.降低用户的认知成本 ；5.为接下来的分步填写做好准备。

信息分类是将具有相同特征的事物聚集在一起。以新增课程为例，新增课程划分为四个类别：

·课程信息

·商品信息

·老师信息

·章节信息

这四类组成了新增课程信息输入的所有内容，用户对新增课程也有了整体印象，可以着手准备信息输入的老师信息，章节信息，商品信息和课程信息等资料，这样输入效率也会得以提高。

第四 分步填写，任务拆解

遇到困难的任务，我们总喜欢把任务拆解成一个个小的任务，然后逐一攻破。分步填写适合各步骤之间存在先后顺序和很强的关联性，把复杂的表单按照不同的主题分成两个以上的步骤，当然步骤也不能太多，太多的步骤不仅没有起到减轻用户心理负担的目的，反而让其还没开始输入就被过多的步骤吓得退避三舍。因此，步骤最好控制在四个以内，最多不能超过五个。下图是小鹅通的支付设置，就是将复杂的支付设置拆解成4个步骤，用户按照步骤逐一进行填写，完成信息输入任务。

当然，还有一种分标签填写，适用于信息分组没有很大的关联性和先后关系。如小鹅通的发票填写：电子发票和增值税发票的填写，这两组信息没有很大的关联性和先后关系，因此可以采用这种Tab 标签填写。

第五 收起不重要和不希望用户过多关注的信息

在复杂表单中，某类信息不是必输项，用户可根据实际情况选择是否需要输入，这类信息可考虑收起。同样，如果产品设计者不希望用户过度地关注某些信息，也可以将其收起。下图中，基础配置是基本信息，无论设置什么班次都需要填写。对于对于一些员工，基础配置无法满足其需求，那么可以点击更多配置，对其进行个性化配置。

第六 让用户多做选择题

我们向老板汇报工作的时候，都知道出现问题，要把解决方案罗列出来，让领导做选择题，而不是是把问题抛给领导让他做填空题。同样道理，我们在设计产品的时候，竟可能多的给用户做选择题，而不是填空题。原因有以下三点：

1.选择题将范围缩小，比填空题容易

2.用户的文化水平参差不齐，不一定能完整表达出来

3.填空题容易出现各种报错，增加开发成本

下图中，游戏类型如果采用填写的方法，用户可能会懵，一时之间不知如何填写。但是如果换成下拉选择的话，用户的认知成本降低了，知道该怎么选择。

第七 采用记忆法减少输入

对于一些需要重复使用，且添加或查找起来比较困难的信息可以保存下来，成为常用信息。用户再次填写信息时，这些保存的信息可以一键使用。当然，为了保持灵活性，这些信息可以被再次编辑。

第八 判断信息前置

关于“是”和“否”、“需要”和“不需要”或者“同意”和“不同意”等这些需要判断，并且判断结果影响到接下来的信息输入的信息，一定要放在前面，这是由人类由上而下获取信息决定的。

上图中，是否支持教育中心直购影响到发货通知地址和商品ID的填写。如果选择支持教育中心直购，用户则需要填写发货通知地址、商品ID等信息。在旧版设计中，发货通知地址和商品ID是放在是否支持教育中心直购的前面，就会出现当用户苦兮兮地填完发货通知地址和商品ID后，才发现有是否支持教育中心直购这个选项，选择支持还好，前面的努力没有白费。如果发现自己不需要支持教育中心直购，那就悲催了，刚才苦逼兮兮填写的发货通知地址和商品ID两个选项都没有了！这个时候，很难用一句话来形容用户的心情了。

第九 复制表单

一些表单内容相似单极高，用户只需要修改一些内容便可以提交表单。这种情况下，使用复制可以极大地提供用户的工作效率。但是复制也并不是完全地复制，例如ID可以按照制定的规则系统自动生成，而名称也可以自动生成，但是也给用户按照自己的意愿进行修改的权限。

第十 批量导入信息

批量导入功能来自于实际工作需要，工作中我们很多习惯把信息储存在Excel中，一键导入可以极大地提高信息输入的效率。导入信息的前提是要提供给用户模板，用户先下载模板，然后根据模板填写信息。导入的信息和系统需要的信息才能匹配上。同时，还要考虑异常场景，例如导入的信息有误，我们该怎么通知用户哪几行信息出现问题，毕竟信息条目过多，如何定位信息，让用户快速捕捉错误，并修改错误是需要解决的问题。

第十一 视觉重心偏左，提高操作和阅读效率

我们都知道，人的视觉动线遵循F型视觉模型。当表单数据较少时，我们可以把表单视觉重心居中，这样更利于聚焦业务，快速完成任务。但是，对于复杂表单来说，视觉重心偏左，更利于提高操作和阅读效率。

小结

对复杂表单进行设计之前一定要先了解业务，理解其底层业务逻辑。只有理解了业务，才能更好地展开设计。B端产品有很多业务确实比较复杂，理解起来很费劲。作为交互设计师，一定要多问，问产品，问运营，熟悉了业务之后，我们才能展开用户调研，了解用户在复杂表单输入过程中存在什么问题，并采用设计手法解决这些问题。