再谈表单设计

246 阅读6分钟
原文链接: zhuanlan.zhihu.com

上期我们通过两个案例来介绍了如何为自身业务来进行 Design System 的创建,这其中最重要的是确定需要解决的问题是什么,以此为出发点开始 Design System 的探索。

之前我们聊过几次关于表单的设计,在之后的时间里陆陆续续会收到一些关于它的问题。我们前面讨论表单更多是从业务和设计结合的角度,而很多同学关心的表单设计细节以及相应的具体设计规范。

所以本期的主题我们会结合大家之前咨询的问题,聊聊具体表单的设计。也将借之前和大家介绍过的 Lexicon(Liferay)来聊聊表单设计规范的制定。

表单为什么那么重要:

表单的重要性似乎是一个没有讨论意义的话题,大家都很清楚它的重要性。表单作为产品设计中非常重要的手段之一,能够帮助我们更好的获取想要的信息,进而提供相应的服务。

但从用户角度来说,表单并不是他们想要的。之所以存在而是因为在当前的情景下,它是了解用户需求最实用的方式。可是真实的情况是,用户都是“懒”的。大家都希望我们的产品能够足够的了解用户,将操作的成本无限度的降低。

比如我们在电商场景下的「猜你喜欢」,通过用户的日常操作行为来推断用户喜欢的商品,从而降低用户找商品的操作成本。

除了算法,各产品也在探索更多的方式来降低用户的“输入”成本,比如语音交互。体验过此类产品的同学应该都会有感触,现有的语音交互能力还并不那么成熟,更多是需要用户融入到“它”的情景中去使用。

所以就目前的现状来看,它们还不能很好的解决用户与系统交互的工作,表单还得继续存在一段时期。

大概 2 年前,研究机构 Baymard 做过一次电商平台收银台表单的可用性分析(有效样本 1000 多)。结果表明,除了需要用户创建账户,过于复杂、冗长的表单是阻碍用户完成支付操作最重要的原因(占比 27%)。

via: https://baymard.com/blog/checkout-flow-average-form-fields

分析报告中还提到,所调研的平台中收银台页面平均需要填写的字段有近 15 个之多,也就是它们将很多的用户拦在了支付成功页面之外。而事实上这 15 个字段有一半是有可能被去掉而不对支付操作产生影响的。

大家都知道「Less is more」,但回到实际的产品设计过程中还是会依旧不断的询问更多的问题来更好的获取用户数据。产品设计是需要克制的,我们想要抵制这些诱惑,不妨先从用户的角度来看看表单。

用户是如何看待表单的:

用户填写一张表单,是因为想要获得背后的那个结果信息。填写表单是他们不得不完成的一个步骤,而不是结果。

所以表单的存在于用户来说就是一种“麻烦”。既然当前情况下这些“麻烦”是肯定没法完全去除的,那么我们就需要尽可能的让这些“麻烦”变得简单一点。

我们再回到表单本身,作为表单它最核心的目标就是被完成。这里会有两个因素(心理成本 & 操作成本)影响到最后的完成率:

心理成本:

心理成本是一个容易被忽略的因素,很多人认为我把表单交互做的简单一些,那么用户填写起来也会轻松一些。

但其实有研究曾提到过,对于表单用户看到的第一时间是先扫读一下,看看需要填写的内容有多少,估算一下自己需要多久完成。所以为了不吓到用户,很多长表单会选择进行分拆,降低用户的心理压力。

除此之外,用户也会看一看表单中的字段有没有特别难填写的。比如在很多支付流程中的信用卡信息,需要用户从钱包里找出卡再对应着一步步的填写进去。

这是一个麻烦且容易出错的流程,很多用户会卡在这一步。所以在产品设计上会加入扫描信用卡识别来降低用户首次输入的成本,同时还可以记录信用卡信息来方便下次的支付操作。

用户对于一个表单的心理成本在填写过程中起到了至关重要的作用,表单的字段也多,用户内心的抗拒则越大。

操作成本:

至于操作成本这个因素,大家相对都还比较理解。比如下方的这个案例,很明显就是在交互设计上有些欠考虑,用户完成表单的实际点击、输入的操作步骤非常多、繁琐。

via: http://THEUXBLOG.COM

在产品需求既定的情况下,操作成本就是我们设计师最需要考虑的问题了。目标只有一个,让用户用最低的成本,最高效的完成填写操作。这里我挑选了一些常见的问题及相应好的案例来和大家进行分析、解释。


以上是 PinDesign 设计期刊的第 109 期的节选内容,在接下来的全文内容中(付费部分)将继续通过设计案例和表单设计规范的分解。

加入 PinDesign 会员,获取本期主题「再谈表单设计」的全文内容及本系列前 2 期文章的赠送,年付会员将获得近期的 10 期文章的赠送。

点击下方链接,了解 PinDesign 会员计划详细信息:

PinDesign 互联网产品设计周刊wap.youzan.com

已更新主题:

5key:什么是 Design Systemzhuanlan.zhihu.com图标5key:Design Systems 02 - 什么是 Design Principleszhuanlan.zhihu.com图标5key:Components 与 Patterns 究竟有什么区别zhuanlan.zhihu.com图标5key:你该为产品设计怎样的气质zhuanlan.zhihu.com图标5key:Design System 中的 Design Tokenzhuanlan.zhihu.com图标5key:Design Pattern 实例 - 用户通知与中断zhuanlan.zhihu.com图标5key:Design Pattern 组合实例 - 列表页设计思考zhuanlan.zhihu.com图标5key:Design Pattern 划分方式是对设计的逻辑思考zhuanlan.zhihu.com图标5key:Design Pattern - 页面的信息展示逻辑zhuanlan.zhihu.com图标5key:换个角度谈表单设计zhuanlan.zhihu.com图标5key:购物车的设计逻辑zhuanlan.zhihu.com图标5key:筛选与排序的设计逻辑zhuanlan.zhihu.com图标