表单作为B端产品中的基础通用组件，也是在各个B端产品中出现频率最高的元素之一。表单的设计也是比较考验设计师综合能力和设计细节的。一定程度上，表单设计的好坏也决定了产品的成败。

看似简单的表单，在实际项目中会给用户和设计造成哪些困扰呢？举几个例子：随着B端产品的复杂化，出现冗余的视觉干扰信息，降低了信息传达的效率，使得用户认知成本高，操作难度大；不同信息内容风格及交互不统一，用户难以建立统一心智；整体页面操作时间长，安全感低用户跳脱率高。这些问题都会成为影响用户最终签约/续费产品的重要因素。

所以提升表单的易用性成为了设计师必须解决的问题。本文从4大方面阐述全面提升表单的易用性。

一、表单的构成及应用场景

表单由表单标签、表单域、提示信息、操作按钮组成。

在页面中表单无处不在，比如：注册/登陆、新增功能、功能设置、请假申请、发布新品、创建信息等。

二、为什么要提升表单的易用性

在我们设计B端产品的过程中，总会遇到用户信息填写逻辑混乱、资料收集不全的状况，导致用户在浏览和编辑时的操作体验大打折扣。主要反映在以下几个方面：

心智乱：

1、用户浏览信息顺序混乱，信息层逻辑不清，认知成本高，操作难度大

2、不同信息内容风格及交互不统一，用户难以建立统一心智

视觉陈旧：

1、冗余的视觉干扰元素，降低信息传达的效率

2、重要信息不凸显

安全感低：

1、整体页面操作时间长，用户跳脱率高

2、页面反馈不及时

三、设计原则

表单设计的3大原则：明确、高效、安全感

四、如何提升表单易用性

4大方面迅速提升表单易用性：

1、视觉降噪 2、高效智能 3、防错纠错 4、所见即所得

1）视觉降噪

信息降噪：

根据倒金字塔设计原则，最先呈现最重要的资料，然后呈现附加的详细信息，重要性依先后顺序递减，能够快速传递重要信息，让浏览变得更有效率。

视觉动线流畅：

依据尼尔森F型视觉模型，用户在第一次浏览页面的时候，视线通常会将关注点放在左边，阅读前几行时视线会形成F的第一条横，阅读第二部分视线会缩短，形成第二条横，最后用户以垂直的视线浏览最后的内容。所以尽量采用单列布局避免“Z”字型布局。

逻辑分组+合适折叠度：

依据尼尔森十大可用性原则中的简约设计原则，重点太多相当于没有重点，在设计中要增强一些信息就意味着要弱化另一些信息。

2）高效智能

依据尼尔森十大可用性原则中的灵活高效和协助记忆原则，做到灵活、易用、高效、智能，尽量减少用户对操作目标的记忆负荷。

让中级用户用起来得心应手，让初级用户顺利上手，让高级用户能够进阶。

提供合适的默认项

让用户减少操作步骤，提高操作效率

自动获取/搜索

系统根据上下文或搜索自动获取填写信息，降低用户的记忆负荷，提升效率

组件化设计

通过设计评审敲定后提炼出规范，组建标准，提取组合用法以覆盖各个业务场景。实现设计和开发一体化，让设计面向开发，让开发贴近设计，减少设计及开发人员的额外工作量，让工作变得十分高效。

OCR自动识别

对于一些标准证件、文本信息的录入，可以通过OCR识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动录入。

如果图片不清晰或存在水印，此时也应提供修正渠道，可逐一校对并修改。

3）防错纠错

依据尼尔森十大可用性原则中的容错、防错以及反馈原则，在操作的前中后分别进行防错、实时反馈、提醒和纠错，保持页面的状态可见、变化可见、内容可见，让用户知道发生了什么，在适当的时间内做出适当的反馈。

4）所见即所得

依据尼尔森十大可用性原则中的贴近场景原则，遵循真实场景的认知、习惯，让信息的呈现更加自然，易于辨识和接受。

实时预览表单配置结果

五、如何量化体验度量衡

通过用户点击数据，辅助设计洞见。从4个方面量化体验度量衡：任务完成率、任务完成时长、必填项目数、易用度评分

1）任务完成率

通过埋点获取数据使用公式进行计算或让技术搭建看板直接看。新版上线后，用户会有一定的学习适应周期，最好选取一个月以后的数据，比较具有参考意义。

2）任务完成时长

数据分析发现，任务完成时长数据呈现伪正态分布状态，取众数最具代表意义。

3）必填项目数量

结合业务场景，减少不必要的必填项，只设置必要的信息填写，能自动获取则自动获取，减少操作步骤，增加操作效率。

4）易用度评分

通过在产品后台投放调研问卷，获取真实的用户，使用登门槛效应让其进行评分。最后可把被筛选的对象圈到访谈对象池，有机会可以成为产品成长用户。

六、总结与反思

表单的优化，对于公司、用户、设计师都具有一定的意义。

对于公司

提高表单的易用性可以使公司降本增效，优化框架结构，提升用户的签约续费率。

对于用户

用户可以从低效率的工作中解放出来，提高信息内容理解和操作效率，更便于管理账户。

对于设计师

设计师提高了工作效率，可以有时间参与到更多的其他工作中去，发挥更大的设计价值。

参考文献如下：

1、ZAN-DESIGN 的有赞网站

2、ANT-DESIGN 蚂蚁金服等网站

Powered by Froala Editor