京东｜产品设计中的容错性思考

原文链接：https://www.zcool.com.cn/article/ZMTE5Mjg2OA==.html

使用互联网产品过程中，会有很多因素造成操作错误或失误，导致无法顺利完成任务。因此产品的容错性设计是交互设计中的重要内容。

用户在实际使用互联网产品的过程中，会有很多因素造成操作错误或者失误，而导致无法顺利完成任务，或者完成任务的效率很低。产品自身所具备的容错能力对于各种使用场景的有效覆盖，可以提升产品纠错效率、降低用户操作出错概率，因此产品的容错性设计是交互设计中的重要内容，也是提升用户体验不可忽视的一个环节。

1、容错性是什么

容错性概念源于计算机领域，容错性是指计算机系统在发生故障的情况下，依然能够保证系统正常运行。计算机这种保证系统正常运行的能力也被称为容错能力。

本篇内容我们讨论的是容错性在互联网产品领域的内涵和意义。延伸到互联网产品设计领域，容错性的范畴更为宽泛，涉及产品对错误操作承载能力的多个方面，包括：如何降低用户操作的出错率，如何及时提供纠错帮助，以及如何给用户提供解决方案等内容。

2、为什么需要容错性设计

「 即便你的产品90％的时间都运行良好，但是如果在用户需要帮助时置之不理，他们是不会忘记这一点的。——《Getting Real》」
一个产品设计的无论多么简单，用户都难免在使用过程中因为各种原因而犯错。互联网产品面向的用户群体是复杂多样化，教育背景的不同，行为习惯的差异，复杂的使用场景，都会使得用户的真实操作相比产品设计之初的预期有一定出入。此外，一些产品本身存在的因素，例如产品路径复杂，逻辑不畅等，也有可能造成用户无法顺利完成任务，亦或是完成任务的效率低，出错率高。产品在遇到错误如不能够及时纠错帮用户挽回损失，会给用户带来不好的用户体验，也是产品的一种设计缺陷。因此设计师应具有良好的容错性设计思维，尽量避免用户错误操作的出现，当用户出现错误操作时，帮助用户识别、诊断，及时反馈问题所在，并提出有效的解决方案，帮助用户快速从错误中恢复。最终达到使产品更可用、更易用的目的，给用户带来更优的用户体验，使用户与产品的交流更加顺畅。

3、容错性的设计方法

互联网产品的容错设计可从用户使用产品的三个阶段来考虑，即操作前、操作中、操作后。可大致归纳为以下几方面内容：首先在用户操作前给予正确有效的引导；其次在重要的操作步骤给予用户及时有效的提示；当用户发生操作错误或失误时及时为用户纠错并提供有效的解决方案；最后帮助用户在错误发生后迅速回到正确状态。

3.1给予用户正确有效的引导

在用户开始任务操作前给出用户正确有效的提示，可减少错误操作的发生。需要注意的是，引导应尽量醒目且简单易理解，确保能引起用户注意，并且在用户注意到后快速获取信息，到有效的防错帮助。
产品常见的引导主要针对两种情况。第一种是针对于新手用户的功能介绍，不同于曾使用过产品的用户或者高级用户，新用户首次使用产品的过程其实是一个学习的过程，此时需要让用户快速了解产品核心功能及主要的操作，帮助他们更快地上手。
例如下图导航APP新版本的新手引导【如图1】，在用户首次启动产品时，产品用趣味性的图文形式给用户展示了打车、公交乘车、实时公交路线等功能的信息介绍，能够让新用户快速熟悉核心功能，并在正式使用产品的过程中提升效率，降低出错率。

图1-导航APP新手引导

第二种情况是针对产品上线的新功能或者较大的功能变动而设计的初次引导，产品的功能改动可能会是用户产生不同程度的陌生感，适当的提示可帮助用户快速熟悉新功能点或页面信息的调整。初次引导常见的方式有很多种，包括：遮罩式引导、弹窗式引导、气泡、浮层式引导等等。
例如版本升级后的音乐APP【如图2】，首页使用情感化图文设计加遮罩式的引导，可以有效将注意力集中到特定功能上，用户进入页面第一时间就注意到，确保了信息传达的有效性。

图2-新版首页的遮罩引导

以上列举的内容属于狭义层面的引导，用户尚处在被动接受引导的学习阶段，在此阶段引导的目的是提醒和防错。从广义的层面来讲，我们可将对用户的引导理解为”消减信息的不对称性“，当用户面对可影响其决策的因素时，给予用户关键性的信息提示和说明，可以促使用户做出正确的决策。

针对需要加工时间的特殊品类，如烘焙蛋糕，京东到家在用户决策的关键页面和步骤展示时效提醒【如图3】，避免用户在完成订单信息填写或结算后才发现商品的配送时间超出用户的期望，会给用户带来极为不好的购物体验。

图3-京东到家页面中的时效提醒

3.2 给予用户及时有效的提示

当用户进行一些如修改、删除、覆盖等不可逆操作时，系统需要在用户做出这类操作指令后告知其产生的后果，让用户自主决策是否选择继续执行。在此阶段的提示需要注意从以下两个角度考虑：一是提示的方式，二是提示的时机。

3.2.1提示的方式

在用户完成任务的操作路径中，大部分产品首先会选择以弹框的形式对用户进行信息提示。弹框可以分为模态弹框和非模态弹框两种大的类型【如图4】，主要区别在于是否强制用户进行交互操作。如何选择合适的弹框形式对用户进行提示，要依据提示信息的优先级和视觉权重的大小，同时要清楚不同类型的弹框适合的场景。

图4-弹框分类

模态弹窗是较重的提示方式，在用户进行重要且有风险的操作时可优先考虑使用。其优点是可以快速获取用户的视觉焦点，缺点是会打断用户当前的操作流程，用户需要进行如单击“确定”、“取消”、“关闭”按钮等操作指令将该对话框关闭后才可继续操作。

而非模态弹框属于轻量级的提示方式，其优点是不强制用户进行交互操作，或者用户依然可以在页面进行其他操作。弹框出现一段时间后会自动消失，所以但不利于承载过多文字信息。非模态弹框对用户造成的干扰较小，但也因此容易被用户忽视。

3.2.2 提示的时机

给用户的信息提示还有一点不可忽视的是反馈时机，应确保用户在关键的操作步骤得到及时的反馈，因为滞后的反馈可能会导致用户因为某一个环节的错误操作不得不重复操作一遍之前的流程，或者要修改关的一系列信息。
【如图5】中的登录页面，用户登录需要依次输入手机号、密码、图片验证码，但如果用户输错了密码并不能马上得到反馈，依然可以继续填写验证码，只有在全部信息填写完之后点击登录，系统才会校验密码，并提示用户密码错误重新确认，用户需要再次输入密码以及识别并输入一次验证码。但如果系统验证密码可以提前到输入图片验证码的步骤之前，在用户在得到密码填写错误提示后则可以停止操作后面的步骤，马上修改密码。

图5-登录页面中的提示滞后

3.3 为用户提供纠错帮助以及解决方案

一旦用户出现错误或失误操作的情况，系统需要为用户及时提供纠错帮助及有效的解决方案，以提高用户操作的成功率。关于纠错文案的表达应注意尽量简洁清晰、精炼准确，避免使用难懂的术语，不要在出错信息中使用威胁或者责备的语气。应主动识别用户的情感状况，语气友好，让用户感受到“情感支持”，尽量为用户缓解因操作失误产生的挫败、焦虑等负面情绪。此外，纠错信息内容不可仅描述场景，还需要向用户反馈出错原因，并且有明确的指向性，为用户指出错误出在什么地方。例如在填写部分内容较多的表单时【如图6】，当证件号填写出错时，系统及时为用户纠错并用一条红色的下划线明确指出了信息填写错误的位置，用户可以立即定位并修改错误信息。

同时，尽量为用户提供相应的解决方案，这样可以提升纠错信息有效性。BOSS直聘会因为手机储存空间不足给用户报错，并且会告知用户如何去管理储存空间，以解决此问题【如图7】。

图6-多行表单报错页面

图7-存储空间不足报错提醒

在产品设计中，为降低操作的出错率，限制也是一种方式。在可能造成错误操作的入口适当设置操作障碍或者禁止操作，增加不可逆操作的难度，可以有效规避错误操作发生风险、减少误操作概率。例如常见的页面信息置灰、按钮置灰的设计，可以有效避免用户的误操作。

此外通过让控件、动作、选项等变得可见，尽可能减少用户记忆负担，把需要记忆的内容作为辅助信息提供给用户，或帮助用户自动完成信息填写也可以帮助用户快捷高效地完成既定任务，降低出错率。例如【如图8】在信息填写的步骤，可在用户已复制的内容和上传的图片中自动识别姓名、电话、地址等内容，并在用户确认后自动帮用户填写对应信息，为用户大大节省时间和记忆成本，快捷高效地完成既定任务，降低出错率。

图8-系统自动识别用户复制文本中的姓名、电话、地址

3.4 帮助用户在错误发生后迅速回到正确状态

在用户执行操作后，应尽可能的为用户保留已操作的信息，以便在发生错误或失误后可撤销之前的操作。针对一些流程较为复杂的操作任务，记录用户在每一步骤的操作信息，让用户可以从出错的步骤上及时恢复到正确的流程上，或恢复到距离错误操作最近的步骤，可有效的帮用户挽回失误。例如很多图片编辑的APP都支持用户撤销当前的操作，在用户对照片进行多编辑后页面上会有回到上一步和下一步操作的按钮，可让用户有机会恢复到上一步操作结果上。

图9-图片编辑页面顶部切换上一步和下一步的操作按钮

总结

以上是关于互联网产品中容错设计的概念、重要性以及设计方法的一些阐述和思考。在产品设计的实际应用的中，可以模拟使用场景，对目标用户使用产品的真实操作进行行为观察，分析对比产品设计的操作路径与用户真实操作的差别，发现并收集用户可能发生错误或失误操作的关键步骤，验证产品的容错能力是否能达到有效覆盖。同时，也要通过产品数据的对比分析得出用户操作错误及失误的真实原因，指导并提升产品容错能力的设计优化，进而不断提升产品的可用性和易用性。

参考文献：[1]王争.争论点.电子工业出版社.（2019-05）[2]梁嘉琪.产品设计方法之容错性02：如何进行产品的容错性设计？http://www.woshipm.com/pd/579104.html