Preventing errors比帮助用户更好恢复from them. That’s an important principle in UX. When users must recover from an error (whether amistakeor aslip), they must interrupt their task to devote precious cognitive (and工作记忆) resources to fixing the problem, even if it’s only for a few seconds. Regardless of how easy it is to access yourUndofunction (and we hope you do have one!), it’s better to not have to use it at all.

就在前几天，正如我在浏览器中键入的东西，我收到以下拼写检查选项：

Firefox built-in spellcheck contextual menu shows a spelling suggestion directly next to a the option to add the misspelling to the dictionary
Firefox’s built-in spellcheck places the spelling suggestion next to an option to add the misspelled option to the dictionary.

Do you notice the potential danger in this otherwise helpful little context menu (and can you guess which option I accidentally clicked due to inaccurate mousing)? Right next to the option to use one of the suggested spellings, there isAdd to Dictionary.字面上，旁边修复错误是可以选择要永远犯同样的错误的选项！要增加伤害，这些选项彼此非常接近，所以可以轻松意外点击添加到字典中while trying to select the suggested correction.

Designers often overlook the fact that the user may not be paying full attention to their design. Users often slip intoautomaticity, especially when they’re doing repetitive work. In the spellcheck example, it’s very possible that the user has repeatedly selected the second option from a contextual menu (for example,Copy)和is now on autopilot, falling prey to the habit created by the previous actions.

This type of situation is not unique tocontextual menus。事实上，在密切接近的情况下放置破坏性和良性行动是顶部之一10 application design mistakes我们在年复一年度见过。它一直发生 - 进来tables,dropdown menus,确认对话框,error messages， 和奇才。

Networking dashboard with Add Category and Clear Categories buttons in direct proximity
Ubiquiti’s Unifi Network dashboard application featuresAdd category和Clear categoriesbuttons in direct proximity to one another, with nearly identical visual styling. While these are conceptually related options,Clear categories, if clicked unintentionally, would undo a large amount of previous work
Table of devices connected to a Wifi network with Reconnect and Block options directly next to one another
在ubiquiti的仪表板的另一个示例中，显示了连接到Wi-Fi网络的所有客户端的列表，在设备上悬停在设备上显示操作Reconnect和堵塞quite close to one another. One of these options will cause quite a headache if the user accidentally clicks on it, permanently blocking a device from the Wi-FI network.
Stock trading application with Delete and Confirm buttons directly next to one another
在ThinkorSwim, a stock-trading application, buttons for删除和确认并发送are in close proximity when the user puts together a trade order.
Trello的手机应用程序的地方Watch and Archive Card next to each other in the action-overflow  menu, even though Archive Card has significant consequences if accidentally tapped. 
Trello的手机应用程序的地方Watch和Archive Cardnext to each other in the action-overflow menu, even thoughArchive Cardhas significant consequences if accidentally tapped.

So, what can be done to avoid these kinds of mistakes? Let’s take a quick detour back to the beginnings of UX for some alternative design options.

Shape Coding and Communicating to the Distracted

现代UX纪律的一个起点之一是在20世纪40年代在工业设计中的应用。在第二次世界大战期间，Alphonse Chapanis（其中）努力了解为什么导频错误导致大量B-17轰炸机在着陆期间。他注意到，用于降低着陆齿轮和降低机翼翼片的杠杆的杠杆是相同的并且仅通过放置来区分。这种相似性导致飞行员混合两个，尤其是在降落飞机等高应力矩。Chapanis帮助重新设计了B-17 Bomber上的控件，以避免通过改变两个杠杆之一的形状来避免导频误差，因此飞行员可以快速地讲述他们手中的杠杆。

Shape-coding controls so that theyfeltdifferent and didn’t require vigilance was a major innovation that led to other, similar design considerations, such as adding tactile textures to controls, changing how users physically actuate the control (e.g., pushing vs. pulling vs. rotating), and yes, usingproximity(or lack thereof) to differentiate what each control does. The main idea is that we cansignify不仅是如何相互作用with the control, but also suggest what影响控制的方式并不要求e the user to consciously attend to it — a physical lever that has some resistance, compared to one that’s easy to pull, for example, communicates that the hard-to-push lever is perhaps more consequential, even to a person who isn’t paying full attention.

为什么这么有效的一部分是由人类认知解释的。行为经济学家Daniel Kahneman在现代经典中概述了两种人类思想Thinking, Fast and Slow: System 1, which is fast, instinctive, and somewhat automatic, and System 2, which is laborious, considerate, and slow. When users perform repetitive activities, they often donotengage their System 2 (slow, logical) thinking — they rely on the somewhat unconscious System 1, and, to communicate with them in those moments, we have to use design attributes that System 1 thinking responds to — for example,preattentive traits, which are visual attributes that our brain responds to before we’re paying full, conscious attention.

Differentiate Controls with Redundant Visual Signals

There is usually some logic behind the decision to place benign and destructive options next to each other — for example, the controls are conceptually related. But two options that are related (like救和删除)could have very different effects.

Therefore, designers must strive to differentiate between such options越多越好。标签是个人化的一种方式，但这还不够。当然，当我们设计网站和应用程序等数字产品时，我们不能使用触觉属性。但we can rely on visual treatment and on positioning。

例如，语法使用相同的拼写校正位置和添加到字典中options as Firefox does, but critically, uses several other cues such as color, icons, relative size of text, and alignment to prevent user slips.

语法拼写检查拼写建议之间的额外差异化并添加到字典选项之间
语法使用颜色，图标，文本大小和对齐，以区分确认行动（拼写建议），以及潜在的破坏性行动(Add to dictionary)。

另一种选择是分离后果选项（例如，删除，丢弃更改，静音，进行默认）通过将它放在离他们远离他们的其他方面。杠杆是可以的Fitts的法律和make it a little harder to select the consequential option, especially if it’s going to be destructive. The few additional milliseconds that it might take a user to move their mouse or finger to the other option is nothing compared to the frustration and time it would take to undo a major error. In the above example, we could move theDismissaction up since it’s an in-between outcome with less serious consequences (accept the current spelling in this instance, but don’t add it to the dictionary so that it’s considered correct in future documents).

Sonos application places space between consequential and benign options
The Sonos iOS app adds space between potentially destructive actions (转移系统所有权和Forget Current Sonos System)和较少的破坏性行动（如Parental Controls和System Update).这种少量空间会产生一个 conceptual separation (leveraging the Gestaltprinciple of proximity) and reduces the potential for a physical slip (accidentally tapping the wrong item).

概括

Avoid placing highly consequential actions (that will require a lot of user work to fix if accidentally triggered) directly next to options that are benign. Add additional space and redundant visual signals to indicate which options are different than other, conceptually related commands.

参考

Matthias Deller，Achim Ebert，Michael Bender，Stefan Agne和Henning Barthel。2007.追求信息相关性的预测可视化。在Proceedings of the international workshop on human-centered multimedia(HCM '07), 2007, Augsberg.doi：http：//dx.do.org/10.1145/1290128.1290137.

D. Kahneman, 2015. Thinking, fast and slow. New York: Farrar, Straus and Giroux.

C. Kuang，R.制造厂，2019年。用户友好：隐藏的设计规则是如何改变我们的生活，工作和播放的方式。MCD.