B端产品的容错性设计

交互设计是对用户要完成任务的操作流程进行设计,目标是使用户在人机交互的过程中使用流畅,感觉简单和易用,而易用的一个重要的组成部份就是容错性设计。

一个产品设计得无论多么简单,都不可避免的会有用户在使用时会因为某种原因而出错,遇到错误时如果不能迅速的纠正错误或换回损失,即便这个产品拥有再多的用户,从交互设计上来说也是失败的。

看一个产品的容错性主要是看这个产品的用户在操作时出现错误的概率和错误出现后得到解决的概率和效率。出现错误的概率越低,且出现错误后得到解决的概率和效率越高,表明这个产品的容错性越好,易用性也就越高。

相对C端产品而言,B端产品的业务逻辑较为复杂、涉及的业务场景更为专业、对用户的要求比C端产品要高,那么用户犯错的可能性也较高,且错误的严重程度对用户的影响更大,因此容错性的设计对于端产品来说更加重要。

在B端产品交互设计中,容错性设计从用户操作步骤上可以分为3步:

第1步:用户操作前,有正确且有效的引导、提示、反馈及防错限制;

第2步:用户操作的过程中,及时反馈错误并提供纠错帮助;

第3步:用户操作后,错误易恢复。



对于这3步容错性设计的应用,详细阐述如下:

1、用户操作前须有正确且有效的引导、提示、反馈及防错限制:

1.1、提供新手引导,下图是谷歌广告投放系统(以下简称Adwords)的新手引导,新手用户登录后,可以沿着新手引导设计的路径去了解这个系统;也可以选择关闭,直接完成自己此次的操作目标。


1.2、为用户提供专业术语的引导:下图是Adwords的名词解释,这样的名词解释几乎遍布于该系统的每个角落,很多广告投放的用户,遇到新的术语时,习惯性的会把鼠标移到术语的位置,去查看是否有解释,所以界面中不需要特别用小问号来强调,Adwords对用户有可能不懂的术语都非常贴心的添加了解释。

名词解释中尤其要注意的是:不同须解释,这又分2两种场景:

场景1:后台常涉及到不同权限,不同用户有可能看到的内容会有些不同。而有些B端后台,可能会同一个人经常会以不同的帐户身份登录后台,比如一个客服带20多个客户,分属于8个行业,她每天都要去后台操作,而同一个产品对应不同行业的功能是不同。

那么,对于客服而言,我们就需要把这个“不同”进行解释,如果需要客服去记忆这些“不同”,非常容易会出错。

场景2:有些术语从表述上看通俗易懂,而在当前平台对其进行了重定义,它在这个平台的实际含义与用户对这个术语的预期理解不同,也需要解释。下图以Adwords为例,对可能会让用户产生误解的通俗术语“费用”进行了解释。

1.3、难以理解的图形,提供引导:

非文字图标需带上文案解释,以防理解出错。

“解释”的交互方式有多种,须达到界面简洁与解释能力的平衡,以Adwords为例,在用户没有触发操作时,只显示一级标题,便于用户快速浏览其功能,当用户对某个功能感兴趣时(鼠标移上去时),给出详细的解释文案,以帮助用户做决策。

1.4、表单填写引导及反馈:

表单中,如同时存在可填项与不可填项,则须区分;选中态与未选中态要有区分;默认态与激活太要有区分;数据展示须带单位,否则会给客户看数据增加难度。总之,同一个页面中,对应不同行为的元素,需要让用户能感知到不同的反馈。

如:可编辑、可拷贝、可跳转、不可点击,均用不同的反馈,以便让用户能产生对应的感知,避免用户理解出错。

1.5、操作提示的方式:分2种,一种是显性提示,一种是隐性提示。提示的格式一个系统要保持一致性,让用户很快能理解这是提示,而不是其它信息,此外,提示文案须言简意骇、提示文案的位置可根据内容多寡而定,以输入框为例:可依次选择输入框内、框右方、框上方、浮层。

显性提示:通常置于界面上,常用于不需要额外增加界面空间,或用户不太熟悉、专业性或风险性较高的使用场景,如财务信息处理场景,这种提示对界面的干扰较大,但是用户的需求度较高。

隐性提示:常用于用户比较熟悉的、通用的使用场景,如输入密码,这种方式的,对界面的干扰较小,根据用户的行为选择性的出现。以印象笔记的密码重置的输入新密码的隐性提示为例:

1.6、防错限制的设置。

将一些可能造成错误的操作入口设置障碍,或直接禁止操作,以避免错误的发生,如为表单设置默认项、为有要求的数字录入设计数字输入控件、不可点击的按钮置灰(需给出置灰的原因提示)等等。在后台的防错限制时特别容易将置灰和不显示混淆(后续会有文章单独细讲),以Ant design数字输入框示例如下,数字输入框可以设置输限制,如限制整数、小数点1位、小数点2位等,以达到避免用户输错的目的。

以Ant design网址文本输入框示例如下,将常用的内容摘出来,供用户选择,以达到避免用户输错的目的。




2、用户操作的过程中及时反馈错误、提供纠错帮助:

2.1、反馈,分为防错反馈和出错反馈。

防错反馈:如操作过程实时反馈,如Adwords的文本输入框,实时显示用户已输入字数及还可以输入的字数,以用户心理有个预期,避免输入出错:

出错反馈:由前、后端反馈组出,部分错误是可以通过前端进行实时校验的,可以实时反馈给用户,这个称之为出端反馈;部份错误,须由后端技术对比输入要求才能给出校验结果的,须等用户点击提交后,才能反馈给用户,这个称之为后端反馈。前端出错反馈以,Adwords的查询为例:

出错反馈文案须易理解,包含出错原因、出错位置、行为引导、建议,以Adwords的反馈为例:


2.2、允错,如允许用户输入错误,给予其修正的机会、任何弹窗、浮层都允许用户关闭、取消、用户的数据在一定范围内允许删除等。

如Adwords的文本输入框,允许用户输入出错,及时给出红色的错误的提示来引导用户修正:

2.3、错误提示:

如Adwords的表单设置中,客户设置不合理,系统会出警告提示:

2.4、涉及对用户影响较大、重要、不可挽回的操作时,给出提示。

如Adwords,用户删除数据时,会出再次提示,以免用户误操作:




3、用户操作后,错误易恢复:

每次用户执行操作后,特别是在操作步骤较多的任务中,要尽可能保留操作信息,以便能够及时恢复;如果一个任务结速后的操作错误,最好是能提供安全恢复到离错误点最近的一步的方式,使用户可以快速地从纠正错误的步骤转移到正确的流程上,从而换回损失或错误。

比较常见的,如WORD会保持系统问题导致软件中止时,用户的最后编辑内容;PS可以通过历史记录,返回到之前的操作步骤。对于B端产品来说,以广告投放平台为例,用户经常会误删内容,有存在着这样的需求,比如某用户误删除了大批关键词,需要恢复,但目前而言,只有凤巢在之前有过回收站这个功能,其它的广告投放平台尚无这个功能,可能是考虑到服务器也承截能力,毕竟有一些B端用户的数据量较大,不过,还是建议可以评估、考虑下类似的错误恢复功能,以提升用户操作的易用性。

因为产品的特性不一样,有的复杂、有的简单,对应的用户人群也不同,在具体的设计过程中,要根据产品及目标人群的特征来考虑,只要用合理的方式保证产品出错时不至于中断任务的执行,对出错提供了适当的引导,达到产品性能、界面的简洁性、防错效果的平衡就可以。 



参考文献

黄群,杨赛男. (2012). 交互设计中产品的容错性设计应用研究. 设计艺术研究.

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 230,321评论 6 543
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 99,559评论 3 429
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 178,442评论 0 383
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,835评论 1 317
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 72,581评论 6 412
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,922评论 1 328
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,931评论 3 447
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 43,096评论 0 290
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,639评论 1 336
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 41,374评论 3 358
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,591评论 1 374
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 39,104评论 5 364
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,789评论 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 35,196评论 0 28
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 36,524评论 1 295
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 52,322评论 3 400
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,554评论 2 379

推荐阅读更多精彩内容