【NNG译文】勿将破坏性选项和正向选项放一起

原文章：Dangerous UX: Consequential Options Close to Benign Options

原文标题截图

摘要：确认性操作和破坏性操作应远离；视觉上使用图标区分他们，以防用户点错。

原作者： Page Laubheimer/ 发布时间：2021-02-14

UX中有一个重要的原则：防错机制要比在用户出错后允许撤销更好。撤销犯的错误（不论是失误还是手滑），即使是短暂的几秒也会打断用户的行为，将注意力（或短期记忆力）转移到弥补所犯的错误上。不论产品的撤销功能做的多么智能（当然我们希望你做的很智能），最好的设计是不要让错误发生。

几天前我用火狐浏览器输入文字时，遇到了如下的拼写检查选项：

火狐内置的拼写检查器中，将【建议单词】和【添加错误单词到字典中】放在了一起

你注意到这个本来挺好用的快捷菜单中存在的问题了吗（你猜得出来我尽然点了哪个选项）？就刚好在“建议选项”的旁边有一个“添加到词典”。纠正错误的选项旁边是一个让我绝对会一直犯错的选项！非常气人，这俩选项靠得太近，当你想点击建议单词时非常容易误点成添加到词典。

用户可能没有太注意设计，这一点常常被设计师忽略。用户会进入无意识的状态，尤其是做一些重复的工作。在上面的拼写检查示例中，用户很可能已经多次在其他快捷菜单中选择了第二个选项（比如复制功能），这时候他可能就会受到之前的操作影响，无意识的选了第二项“添加到词典”。

这种情况并不只出现在快捷菜单中，实际上，把警惕性的操作和正向的操作放在一起的设计，是这几年来我们看到的“APP设计的10大错误”之一。这种错误总会发生——常见在列表、下拉菜单、确认弹窗、错误报告和引导中。

Ubiquiti的Unifi Network仪表板的“添加类别”和“清除类别”按钮，它们紧挨在一起并且视觉样式几乎一样。尽管是一些概念相关的选项，但如果无意中单击“清除类别” ，则会清除大量已有工作 Ubiquiti仪表板的另一个示例，一个显示了已连接到Wi-Fi的所有客户端的列表，将鼠标悬停在某设备上时会显示“阻断”和“重新连接”，它俩彼此紧邻。如果用户无意中点错选项，后果不堪设想，将永久的禁止设备连到Wi-Fi ThinkorSwim（一种股票交易软件），用户在订单交易时，“删除” 、“确认”和“发送”的按钮非常靠近 Trello移动端的更多操作弹窗上将“Watch"和“Archive Card"紧邻一起，若误点了Archive 后果非常严重

(译者备注：Trello没有Delete操作，只有Archive操作，Archive后可撤消。只有在Archive状态下的卡才可以Delete，这个时候，再Delete会提示是不可逆的操作。）

所以，如何避免以上这类错误呢？我们先简单了解一下UX的起源，然后再聊替代方案。

通过外形传达不同

现代UX学科的起源之一是在20世纪40年代将心理学引入工业设计。二战期间，阿方斯·夏帕尼斯（Alphonse Chapanis）等人一直研究，是什么导致频频发生B-17轰炸机在着陆期间因飞行员的失误导致坠毁的事故。他注意到飞行员控制起落的操纵杆和放下机翼襟翼的操纵杆外形相似，只是位置不同而已。外形的相似性很容易导致飞行员将两者搞混，尤其是在降落飞机等高压情况下。Chapanis更改其中一个操纵杆的形状重新设计了B-17轰炸机的控制装置，避免了飞行员的失误，有利于飞行员可以迅速判断出手中握的是哪个操纵杆。 

译者注：襟翼( flaps)是附着在机翼后缘的可动翼片，平时与机翼合为一体，飞机起飞或着陆时放下。

现代UX学科的起源之一是在20世纪40年代将心理学引入工业设计。二战期间，阿方斯·夏帕尼斯（Alphonse Chapanis）等人一直研究，是什么导致频频发生B-17轰炸机在着陆期间因飞行员的失误导致坠毁的事故。他注意到飞行员控制起落的操纵杆和放下机翼襟翼的操纵杆外形相似，只是位置不同而已。外形的相似性很容易导致飞行员将两者搞混，尤其是在降落飞机等高压情况下。Chapanis更改其中一个操纵杆的形状重新设计了B-17轰炸机的控制装置，避免了飞行员的失误，有利于飞行员快速辨别出他们手中的操控杆。

通过形状让用户感知到不同以此降低失误操作，这个创造性的发明引发了人们对其他物体设计的思考，比如在控制器的质感上使用纹理、更改用户激活物理控件的方式（如推、拉、旋转），然后使用一些相似的（或相异的）设计来区分控件功能。重要的是不仅让用户知道怎么操作，更要用的是让户无需花费太多注意力就能知道操作会带来怎样的结果。

利用物理感知的设计如此高效，部分原因是由于人类的认知。行为经济学家丹尼尔·卡尼曼（Daniel Kahneman）在他的现代经典之作思维中描述了人类的两种思维模式：“快速思维”和“慢速思维”：系统1为快速思维，是本能的、自动化的；系统2为慢速思维，是费力的、细致的、缓慢的。当用户做一些重复性行为时，通常不启动系统2（慢速的、需要逻辑的）——而是启用非意识自动化的系统1。为处于系统1模式下的用户设计，我们就要用系统1的响应特性——如意识前特性preattention traits，这是一种在我们有意识、充分思考前大脑就会做出自动响应的视觉特性。

视觉上新增图标进行区分

采用将正向操作和破坏性操作放一起的设计，背后通常有一定的逻辑思考——比如，操作控件具有相关性。但是两种操作会带来完全不同的后果（如保存和删除）。因此，设计师要尽可能将这两种操作在设计上加以区分。标签就是一种区分的方法，但可能还不够。当然，在做电子产品的设计时无法引用触感的设计，但我们可以在视觉上或位置上做文章。

例如，火狐的拼写检查插件中，“正确的单词”和“添加到词典”使用了同样的位置，但火狐使用了诸如颜色、图标、字体大小和对齐方式对比等方式加以区分，以防用户误点。

视觉上使用颜色、图标、文字大小和文本对齐方式来区分确认操作和毁坏性操作（正确拼写和添加到词典）

另一种方法是在空间上将破坏性操作（删除、放弃更改、静音、重置）和其他操作分开。可以使用“菲兹定律”，让一些具有破坏性的操作选起来不那么容易。和撤消一个重大失误所费的精力和时间比起来，用户多花几毫秒来移动鼠标或手指所花费的时间简直微不足道。在以上的示例中，我们可以将“忽略”选项往上移，因为它是一种介于中间的选项，不会带来特别严重的后果（在这个示例中意思是将拼写认为是正确的，但不将它加入词典，以后不再提示）。

Sonos iOS在潜在的破坏性操作（传输系统所有权和忘记当前Sonos系统）和破坏性小的操作（例如家长控制和系统更新）之间留了空间。 留出空间会在概念上创造分离感（利用格式塔的接近原理），并降低了手滑点错的可能性。

总结

设计时勿将确认性操作紧挨破坏性操作（用户无意点击后需花很多精力撤消）；留出空间或新增视觉符号加以区分，引起用户注意。