哈喽这里是兰亭妙微UI设计公司今天分享的是「如何化解错误时刻」。说到用户体验设计大家首先想到的都是“正常场景”注册流程顺畅、支付顺利完成、输入顺利通过。但现实并非如此用户总会不小心犯错误系统偶尔也会掉链子。但这些“问题时刻”往往最容易被忽略。要是产品没法帮用户解决问题所有错误的后果都得用户承担最后只会让他们焦虑。换句话说错误是用户体验的最大危机也是削弱用户对产品信任的关键节点。相关干货一、用“微设计”化解错误这里的“微设计”比我们常说的“微交互”范围更广包括文案、视觉元素还有各种反馈设计。这些小细节看似不起眼却能精准安抚用户的出错焦虑帮他们重新找回掌控感。微设计的三个核心要素微交互比如按钮点击时的震动反馈、输入框实时提示、自动聚焦到目标区域等微文本简短清晰的提示例如 “至少输入10个字”、“请检查您的网络连接”微视觉流畅的动画、柔和的颜色、让人放松的插画。在深入探讨具体案例之前让我们先来探究一下用户遇到错误的背景和原因。下面简要总结了用户出错的类型、背后的心理还有哪些场景容易出错。1. 两种出错类型失误VS错误在用户体验理论中错误分“失误”和“错误”两种前者是用户在执行操作时无意识犯下的错误后者是一开始就想错了。失误行为不当目标是对的但采取的行动有问题。例如不小心点错了按钮、着急打错了字大多是做熟悉的事时分心、没留意造成的。错误判断失误从一开始就误解了情况。比如看到一个显眼的按钮以为是自己要的功能结果点击后才发现不对。这种情况多是因为界面的信息混乱、层级不清晰呈现的内容含糊不清。通常“失误”发生在执行阶段“错误”发生在规划阶段但实际中两者经常一起出现。重点是搞清楚 “为什么会出错”并给出解决方案。2. 出错时的用户心理出错不只是功能出问题更会让用户慌张“万一没法恢复怎么办”恐惧、“我无法控制这种情况”无助甚至 “可能我根本不会用这东西”自责。最糟的就是自责——用户不怪产品怪自己压力越来越大最后干脆关掉页面、放弃使用。所以设计师的任务很明确别让用户背锅明确告诉他们“能补救”。先给情绪上的安慰“没关系你可以再试一次。”3. 增加焦虑的场景有些时候用户的选择压力和出错焦虑会被放大心里越没底越不敢动。操作不可逆删除文件、转账、重置数据等一旦点错就没法恢复让人不敢操作。操作反复失败连不上网、输密码总错越试越沮丧甚至会想 “是不是只有我用不了”尤其是对准确性要求高的场景比如金融、商务、B2B工具出错体验的设计更关键。有时候对于出错的恐惧比错误本身更影响用户行为。支付/转账错误导致资金损失的压力以及造成损失的可能性。传输/删除关键数据知道没法恢复更不敢操作。表单反复验证失败失败的次数越多就会越沮丧。应对错误的核心是“双管齐下”提前预防 (别让错误发生) 及时恢复 (错了能轻松补救)。单独用哪一个都不够需要根据场景灵活设计。二、8个设计技巧提前预防错误1. 主动限制风险操作从根本上阻止可能出错的情况或者用视觉提示帮用户识别风险。比如禁用按钮、提供有限的选项、防止重复点击。某种程度上哪怕稍微限制一点用户的自由也比让他们出错好。例如订酒店时对于有住宿天数要求的酒店预定的天数少于住宿天数时无法进行预订类似的还有“信息没填完时登录按钮是置灰的”、“加载时不能点按钮避免重复操作”都是这个道理。2. 自动补全智能建议在搜索框、输入框里加入自动补全或关键词建议不需要让用户记住全部信息输入又快又准。尤其在输入地址或者比较复杂的内容时这种方法能大大提高效率。例如在输入地址时搜索词会高亮显示并且会可能提供清晰的搜索建议想搜的是地铁、公交还是某家店铺方便用户减轻记忆负担快速做出选择在移动设备中键盘的局限性导致打字失误的情况频繁发生飞书的错别字自动修正提示能够很好地提高输入速度和准确性。3. 将常用选项设为默认对于需要重复做的操作可以把常用的选项设为默认帮助用户少费心。但默认选项不一定永远是对的如果存在错误的可能性得让用户能检查修改不然反而会“诱导错误”。例如在外卖软件中可以把常用地址加上默认标识省去了再次添加收货地址的麻烦。但当默认地址和当前的位置差很远超出配送范围时购物车中的商品会呈置灰状态无法进行购买。4. 保持内容暂存用户进行多步骤任务时 (比如注册)万一不小心退出了再进来保持之前填的内容还在。这样不需要用户重新填也不会忘记已经完成了哪些步骤减少失误的发生。编辑文章时内容可以自动保存到草稿箱中。哪怕退出登录过两天再进入草稿箱里的内容都还在对于用户来说也是一种很贴心的体验。5. 固定显示已选内容对于需要记住很多选择的流程(比如订酒店)把选好的日期、人数、筛选条件固定在屏幕顶部随时能看。这种设计方法允许用户在不依赖不准确记忆的情况下再次确认信息从而及早预防错误。像Airbnb会把要去的地点、 入住时间和人数这些筛选条件固定在页面的顶部让用户可以持续查看当前的预订情况这样在找房子的时候会觉得更踏实。6. 二次确认不可逆操作对于删除文件或重置数据这类不可逆的操作一定要增加 “确认步骤”进一步确认用户的意图。一旦出错无法恢复的操作可能会引发用户的强烈焦虑因此需要清晰传达操作的影响并通过问题和警告来确认操作例如“您确定要删除xx删除后不可恢复请谨慎操作。”但注意不能滥用确认弹窗过于频繁的确认弹窗可能会让用户在不仔细看内容的情况下习惯性地点击“确定”增大出错的风险。只在重要且不可逆转的操作中使用。例如删除文件时进行二次确认同时告知删除后文件的位置、删除后文件是否可以找回等一系列内容让用户对于删除的内容有清晰的认知对于确认后无法再修改的信息也最好来个再次确认让用户做到心里有数。7. 提供实时反馈对于表单输入这类容易出错的场景好的使用体验是在输入时就“实时”提供反馈而不是等所有信息都填完点击提交之后再提示错误。比如字符超了、密码格式不对立即用红色文字、错误图标、边框高亮、震动动效等形式反馈出来减少重复输入的麻烦。例如发动态时如果输入的标题字数不符合要求会在标题处有一段反馈提示提醒用户输入符合要求的标题填写多个表单时如果有多个表单未填写每个输入框下面都会有错误反馈而且每条错误反馈的内容会根据不同字段而调整而不是用“请填写内容”这种模板化的反馈。8. 先预览再提交对于操作后不好修改的场景中 (比如发表文章、发布视频、视频渲染)可以先给用户看 “最终效果预览”。确认没问题再提交这样用户就能提前发现错漏心里也踏实。例如在发布动态的时候上传视频封面后在推荐列表、视频动态中能提前预览封面效果有问题可以及时修改省去了动态发布后再去修改的麻烦视频软件中渲染一个视频通常需要几分钟甚至几十分钟通过提供“渲染预览”可以快速检查错误减少不必要的时间浪费。三、5 个设计技巧帮助用户从错误中恢复1. 通过撤销操作减少损失“撤销”功能允许用户立即挽回错误增强掌控感减轻错误带来的负担例如删错内容、发错邮件后点一下就能恢复。有了这个功能用户用着更放心也敢大胆尝试各种功能。在花瓣中采集图片后会提供一个撤销的功能方便用户快速撤销采集有误的图片在使用微信发消息、使用邮箱发邮件的时候也都支持在发出去几分钟内撤回尽可能帮用户挽回错误。2. 说清错误发生的原因如果错误不可避免需要使用通俗易懂的提示文案告诉用户哪里出现了错误出现了什么样的错误而不是用一些模板化的或是含糊不清的提示文案让用户感到困惑。例如上图中的登录失败提示会明确告知什么地方出现了错误、出现多次错误后会有什么后果、如何操作能解决错误这才是一个格式的错误提示填写新增地址信息时如果手机号码有问题会明确提示“手机号有误”而不是只说 “输入内容有误”。3. 提供下一步操作接着上一条不仅要说清楚错误的原因还要告诉用户“该怎么做”引导用户立即采取行动。例如添加“重试”、“返回主页” 按钮引导用户回到正确的操作流程里。如果访问的页面有问题可以提供返回首页或者联系客服的入口让用户可以继续探索其他内容例如苹果的Face ID连续5次识别失败后系统会锁定面容ID功能并提示输入密码验证后才能重新启用。4. 自动聚焦错误选项用户体验设计公司通过自动定位和聚焦错误输入项来鼓励快速更正。发现错误后系统自动定位到出错的输入框缩短错误从识别到更正的过程。尤其在那些表单特别多的后台页面中这种错误定位的功能还是很有必要的。5. 用视觉设计安抚情绪利用情感化的视觉设计例如柔和的色彩、插图和动效等提供了视觉上的舒适感缓解用户的焦虑和紧张。这不仅是简单的错误反馈还是展现品牌个性的好机会。比如谷歌浏览器离线时经典的“恐龙小游戏”让用户等待网络连接的同时进行有趣的游戏体验能让用户没那么烦躁。最后总的来说减少错误的根本策略是避免不必要的差异化并遵循熟悉的界面、交互和设计惯例。这里的“熟悉”不仅是风格问题更是整个用户体验设计的通用标准。当然再标准的设计也没法完全杜绝错误的发生。这时候贴心的微设计就派上用场了——帮助用户快速发现错误、轻松改过来。这些细节正是体验设计师存在的价值也是产品赋予用户的最大信任。你还有哪些化解错误的小妙招呢欢迎留言咱们一起聊聊