大总管默默

上一篇文章讲了表单的基础知识《设计基础(6):表单基础知识解析》。

随着B端体验设计的发展,表单类页面已经形成了一定的设计模式,例如登录页面,场景比较明确、业务流程和设计模式都比较成熟了。

业务型表单设计与业务强相关。既需要考虑交互带来的用户体验,又要从业务角度出发满足用户的行为需求,相对比较复杂。不过也形成了一些固定的设计方法。今天我们先来看看「精简」策略。本文主要内容:

  • 删除,实现表单轻量化
  • 组织,让表单更加有层次
  • 隐藏,让表单更加灵活
  • 转移,扩展表单的异步空间

表单是系统与用户进行沟通的语言,它应当符合双方的认知逻辑。因此表单设计时,需要解决「产品」和「用户」2个方面的问题:

  • 表单需要用户提供哪些信息,保证信息的正常流转和业务的完整
  • 用户如何理解这些信息,如何更好地帮助用户完成表单填写

尤其是面对复杂表单,需要从这两方面寻找到突破口。

  • 在业务层面,设计师需要探究用户的实际需求,反思表单项是否必要,从而减少不必要的选项,提高用户效率。
  • 同时在设计层面,还需要基于用户认知习惯,通过合理的信息组织、交互形式帮助用户完成表单任务。

复杂表单通常包含多种业务场景,并且与其他业务存在关联和嵌套,导致表单内容信息量较大。我们需要通过「删除」、「组织」、「隐藏」、「转移」4个交互设计原则,让表单页面更加简单、有效。

图片

 

一、删除,实现表单轻量化

前几年,我们在银行或者移动营业厅开通一些新业务时,都会填写表单,通常是密密麻麻一堆信息。但是实际需要填写的内容可能只有2~3项,业务人员会特意勾选出来给客户,其余的都是非必填项,或者是业务人员填写的。

线上表单设计时,没有专门的业务人员指导,用户更容易迷失。所以设计师或者产品经理的首要任务就是尽可能地减少表单信息量,降低用户的认知负荷。

最近在做一个表单的优化,业务方要求增加“入参”、“出参”两个表格项,说是用户会看。与用户沟通后,反馈也说“会看一下”。但是在深度挖掘用户场景后,发现用户确实会查看这个信息,只不过不是在当前环节查看,而是在结果项中查看。

所以我们最终去掉了这两个信息量较大的表格内容,从而让整个表单的信息量得到了明显的下降。

因此面对复杂长表单,我们需要从需求入手,判断是否有必要让用户提供如此多的复杂信息。

 

二、组织,让表单更加有层次

当我们不得不面对复杂表单时,如果采用简单内容平铺,用户看到的是满屏的散点信息,造成信息识别困难,用户一时间难以找到填写思路,反而增加用户的心理负担。因此信息的层次性,对于复杂表单至关重要。

首先要从内容和视觉层面让复杂信息变得清晰、规整,更加符合用户的认知习惯。例如,可以利用分组标题、分割线、卡片,按照不同信息的类别、属性和相关性进行区块划分。

根据不同的布局和交互,主要有以下4种表单设计模式。

图片

 

1、顺序表单

表单分组后,可以按照业务逻辑顺序铺开展示。用户只要按顺序填写就可以了。但是对于超长表单,这种布局方式下,用户无法全览页面信息。页面上下滚动、定位查找带来的交互成本比较高。

1)平铺表单

图片

2)卡片表单

图片

因此顺序表单更多地用在业务信息比较简单的场景中。

 

2、锚点表单

为了解决长表单的定位效率问题,可以在顺序表单的基础上增加锚点。另外锚点还可以帮助用户快速了解表单所包含的内容模块。

根据锚点的布局,可以分为横向锚点和纵向锚点两类。锚点需要吸顶方便用户操作。本质上来说,锚点表单是顺序表单的优化版本。

图片

图片

 

3、标签表单

如果长表单内容没有依赖关系,还可以将表单拆分为几个相互独立的标签内容,这就是标签表单。

图片

不过标签表单更强调内容的并列关系,常用于配置表单中,例如 MAC 或者 Windows 系统的配置弹窗。

图片

标签表单在全新表单中应用较少。因为标签表单容易造成内容遗漏,并且无法告知用户哪些标签已经填写,哪些标签未填写,或者无法清晰地展示校验信息。来回切换标签查看信息,也会影响效率,因此主要用于用户有目的的配置行为中。

 

4、步骤表单

步骤表单是一种常见的表单拆分方式。通过节点将子表单串联起来,形成一个完整的业务闭环。例如阿里云的云服务器订单流程,或者一些开户流程等。

图片

 

步骤表单有几个特点:

1)过程串联

理论上来说,步骤表单有明显的操作顺序,用户需要按照节点完成内容填写,因此不会产生信息遗漏。当然也可以根据实际的业务场景,设置选填节点。但是总得来说,步骤表单更强调的是顺序操作。

2)业务引导性

对于复杂业务,步骤表单可以将分散在不同页面中的独立业务串联起来,在一定程度上具备新人教学功能,帮助用户了解业务逻辑。减少用户自定义操作时在不同页面的跳转,从而提供新人用户的操作效率。例如系统配置向导类的步骤表单。

3)逆向操作

由于步骤表单存在正向和逆向操作,因此设计时还需要考虑清楚逆向操作的设计逻辑。例如:

  • 当用户想要修改前面步骤信息时,除了逐步返回,是否可以步骤条直接跨节点修改?
  • 用户中途退出表单后,重启时是从第一步开始,还是直接从未填写的步骤开始呢?
  • 用户如果完成了步骤条表单填写,想要二次修改时,是用普通表单,还是仍然使用步骤表单形式呢?

4)节点的平衡性

步骤表单可以分拆信息,化整为零。但是信息节点也不能过多,否则同样会影响用户的操作效率。所以要减少不必要的流程节点。

最近在做设计时,发现步骤表单最后一步是内容预览。通过用户调研发现,部分用户会谨慎地预览前面4步填写的内容。而另一部分用户则认为,刚填写了内容不需要预览,强制预览的设计并不友好。该如何平衡设计呢?

最终我们选择了将预览节点取消,将预览功能调整到第4步,采用「预览」按钮的形式。既满足了部分用户预览的需要,另一部分用户也可以不做预览,直接提交申请。

所以步骤表单过程中的节点具有一定的强制性,需要谨慎对待,保证节点的合理有效。

 

三、隐藏,让表单更加灵活

1、模块隐藏

表单实际上是任务信息的集合,为了具有更高的适配性,内容通常是多种场景的集合。而场景有高频、低频区分,对于高频信息需要优先展示,便于提高用户的填写效率;对于低频场景,可以隐藏弱化展示,从而降低整个表单的复杂度。

例如我们常见的「高级配置」,通常在表单的底部默认收起展示。

图片

 

2、信息隐藏

复杂表单中信息会出现多级信息共存的场景。这种场景下,复杂表单默认展示当前选项对应的子内容,隐藏其他选项的内容,从而提高信息的指向性。

图片

 

3、合理的组件形式

比较典型的就是单选和下拉选择器如何选择。有人为了强调效率,一味地追求单选按钮平铺展示,认为单选更加直观,用户不需要点击下拉滚动查看备选项。但是用户同样需要逐个浏览选择,反而增加了整个页面的信息量。

所以单选框更多用在备选项较少的场景,如果备选项较多,建议优先采用下拉选择器,隐藏备选项。

 

四、转移,扩展表单的异步空间

1、信息转移

在表单设计时,可以将部分二级信息转移到弹窗、抽屉中,利用浮层空间拓展业务内容,根据用户操作逐级加载出来。从而减少表单的信息量。

例如下图中,没有将「所有配送区域及运费」直接展示出来供用户选择,而是放在了弹窗中,表单中只呈现最后的选择结果。既简化了表单的内容,又让选择结果更加突出,方便用户的查看和校验。

图片

 

2、记忆转移

现在很多浏览器都增加了密码存储功能,减少用户记忆成本。

而在电商购物网站可以设定默认的收货地址。系统自动读取调用,从而减少用户的输入操作。

 

3、行为转移

现在越来越多的网站支持「手机短信验证码」免密注册登录方式,或者第三方登录方式,或者手机端扫码登录。将原有的表单填写转变为系统行为,从而降低用户的行为成本。

图片

好了,以上就是我总结的表单设计的内容~

 

重复一遍:

  • 删除,实现表单轻量化
  • 组织,让表单更加有层次
  • 隐藏,让表单更加灵活
  • 转移,扩展表单的异步空间

 

原文地址:子牧UXD(公众号)

作者:子牧先生

图片

转载请注明:学UI网 » 设计基础(7): 简约设计4原则在表单设计中的应用

登录收藏
 
你可能喜欢的:
大咖说|云音乐设计专家|对设计师说:大咖说|云音乐设计专家|对设计师说:”设计是道证明题”
上手即用的B端图表资源~上手即用的B端图表资源~
设计基础(9):拆解B端产品,总结界面框架设计的3原则设计基础(9):拆解B端产品,总结界面框架设计的3原则
实现设计提效22%——网易天枢研发纪实实现设计提效22%——网易天枢研发纪实
哦,原来这样可以更高级!哦,原来这样可以更高级!
这么好的设计排版技巧,不看亏了啊!这么好的设计排版技巧,不看亏了啊!
工作经验|使用组件做B端产品,设计师的工作价值还有哪些?工作经验|使用组件做B端产品,设计师的工作价值还有哪些?
B端设计经验总结-帮助新人快速上手B端设计经验总结-帮助新人快速上手
搜索交互哪家强?4家大厂盘其详!!搜索交互哪家强?4家大厂盘其详!!
设计基础(8): 表单设计中的认知与交互设计基础(8): 表单设计中的认知与交互