防错设计一定程度上可以防止使用者操作错误,而产品设计人员可以从用户操作前、中、后三个维度入手,搭建产品防错设计策略。具体如何操作?本文作者就做了总结,一起来看看吧。

优秀设计案例分析(葵花宝典的启示)(1)

咱先讲个段子。

大家应该都听过葵花宝典的故事吧,讲的是一青年男子得到一本绝世秘籍,名唤《葵花宝典》。

翻开第一页赫然八个大字:

“欲练神功,必先自宫”

于是此男子心一横,手起刀落……然后练就一身绝世神功。

待他翻到秘籍最后一页时,瞠目结舌,口吐鲜血倒地而亡,沾血的秘籍仍被他紧紧握住,纸上八个大字:

“若不自宫,也能成功”

优秀设计案例分析(葵花宝典的启示)(2)

悲剧,悲剧!

若这几个字写在第一页,哪能如此结局啊!

哈哈哈哈,虽然是我现编的段子……但是你是不是也感受到了防错的重要性,所谓一失足成千古恨~~~

一、什么是防错设计?

防错,或者叫做防呆,一种预防矫正的行为约束手段,运用防止错误发生的限制方法,让操作者不需要花费注意力、也不需要经验与专业知识,凭借直觉即可准确无误地完成的操作。

——维基百科

简单讲就是防止你犯错的措施

其实防错已经被应用到了各个领域,下面咱们仅从互联网设计的角度上来进行叙述。

防错的设计方法有哪些?

断根、保险、自动、复制等防错原则相信大家也听过,分得较细,我个人更喜欢把防错设计分为三部分:

预防错误、纠正错误、后悔药。

为什么这么分?

用户使用软件的操作过程分为3个阶段,操作前、操作中、操作后,而对应这三个阶段的防错设计方法就是操作前预防、操作中纠正和操作后的后悔药。

比起太多的防错法则,我觉得浓缩成3步更好记忆。

那么下面就从这三个方面来讲述一些常见的防错设计方法。

1. 预防错误

预防错误意思是让用户没有机会犯错,最典型的如USB接口,老防错案例了,从接口形状上就把犯错的可能性给杜绝了。

优秀设计案例分析(葵花宝典的启示)(3)

产品设计中如何预防错误?可以从禁用和限制下手。

1)禁用

不可选的操作直接置灰处理,让你一眼就知道是不可用的,最常见的比如登录时未输入信息时按钮置灰。

优秀设计案例分析(葵花宝典的启示)(4)

但是这里需要注意一点,当我们遇到较长的表单时,最好不要使用置灰处理方式。

表单较长,意味着信息可能超过手机一屏外,当用户漏填时需要上下滚动来寻找自己未填写的信息。如果采用置灰处理,会让用户很难找到自己到底是哪一项未填写。

建议的处理方式是按钮可点击,点击后若有必填项为空,则焦点定位到该选项提示用户填写信息。

2)限制

针对一些特定的格式,在用户操作前就进行强制的限制,举三个案例:

  1. 输入手机号时限制只能输入11位数字。
  2. 抖音拍视频时设置预告卡片的位置的设计中,限制了卡片的操作区域。
  3. 有时长要求的短视频,在裁剪时限制了时长,用户如何裁剪都不会超过时长。

优秀设计案例分析(葵花宝典的启示)(5)

2. 纠正错误

纠正错误指的是用户在操作过程中犯了错或者即将犯错时,可以帮助用户纠正错误,可以提示用户让用户“知错”就改,也可以让系统识别错误后帮助用户改错。

下面从提示纠错和自动纠错两方面来举例。

1)提示纠错

提示纠错是最常见的纠错方式,此方式效果较好且开发成本较低,所以在产品设计中使用的最多。

提示纠错主要采用三种方式,提示程度从弱到强依次为:原地确认、弹窗确认、输入文字确认。

原地确认:干扰性最弱,用户使用时流畅度最好,若用户操作后不会出现很严重的后果可以使用此方法。

弹窗确认:干扰性中等,最常见的确认方式,大多数时候使用模态弹窗,对使用流程有阻断效果,用户必须完成弹窗的选择后方能进行下一步。

输入文字确认:比较少见,常用于删除重要信息时的确认操作,例如删除飞书的知识库时需要输入知识库的名称进行二次确认,对于删除知识库此类的大量数据时需要慎重再慎重,若使用一般的确认弹窗则可能出现用户由于习惯而导致的手滑误删,给用户造成不可挽回的损失。

优秀设计案例分析(葵花宝典的启示)(6)

我曾经就因为某个产品没有做这样严格的确认导致我删除了我的整个知识账户的情况,当时可真是心痛到无以复加,还联系了客服询问是否能找回数据,得到的答复是不能,到现在还心有余悸。

你可能会疑惑,既然你知道这个操作危险,为什么要去点击删除这个按钮?

这涉及到人类心理学范畴,可不要小瞧了人类的好奇心,尤其是对未知危险的好奇心,看看悬疑影视剧里的主人公为什么不听劝偏偏要去寻找黑暗中的不明动静就知道,好奇心总会驱使人们去做一些“危险”的事情。

而产品设计要做的事情,不是阻断用户的好奇心,而是在用户激发自己好奇心的时候帮助他不犯错。

3. 自动纠错

自动纠错需要更多的开发成本,所以不是每个产品都能做到自动纠错,下面列举几个常用的自动纠错的设计方法。

微信公众号中编辑文章时,若有疑似错别字的时候,会提示当前错别字的数量,点击可以跳转到错别字的位置,方便编辑者进行修改。