防止错误比帮助用户更好恢复从他们。这是ux中的重要原则。当用户必须从错误中恢复(无论是mistake或者), they must interrupt their task to devote precious cognitive (and工作记忆)解决问题的资源,即使它只有几秒钟。无论它如何容易访问您的撤消function (and we hope you do have one!), it’s better to not have to use it at all.

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

Firefox内置拼写检查上下文菜单显示一个拼写建议,直接旁边添加拼写错误到字典
Firefox的内置拼写检查将拼写建议放在一个选项中的拼写建议将拼写错误的选项添加到字典中。

您是否在此其他有用的小上下文菜单中注意到潜在的危险(并且您能否猜测我因不准确的悲伤而不小心点击的选项)?在使用其中一个建议的拼写选项旁边,有添加到字典。字面上,旁边修复错误是可以选择要永远犯同样的错误的选项!要增加伤害,这些选项彼此非常接近,所以可以轻松意外点击添加到字典中while trying to select the suggested correction.

设计师经常忽略了用户可能不会完全关注其设计的事实。用户经常滑入自动化, 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.

这种情况并非独特contextual menus。事实上,在密切接近的情况下放置破坏性和良性行动是顶部之一10申请设计错误我们在年复一年度见过。它一直发生 - 进来桌子,下拉菜单,确认对话框,error messages, 和奇才

Networking dashboard with Add Category and Clear Categories buttons in direct proximity
Ubiquiti的Unifi网络仪表板应用功能Add category清除类别buttons in direct proximity to one another, with nearly identical visual styling. While these are conceptually related options,清除类别, if clicked unintentionally, would undo a large amount of previous work
连接到WiFi网络的设备表与重新连接和块彼此重新连接
在ubiquiti的仪表板的另一个示例中,显示了连接到Wi-Fi网络的所有客户端的列表,在设备上悬停在设备上显示操作重新联系堵塞相互接近。如果用户意外点击它,则这些选项之一会导致令人头疼,永久阻止来自Wi-Fi网络的设备。
Stock trading application with Delete and Confirm buttons directly next to one another
在思想斯威姆,股票交易应用程序,按钮删除确认并发送当用户汇总贸易令时,靠近近距离。
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的手机应用程序的地方WatchArchive Cardnext to each other in the action-overflow menu, even thoughArchive Cardhas significant consequences if accidentally tapped.

那么,可以做些什么来避免这些错误?让我们快速绕开返回UX的开头,了解一些替代设计选项。

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(或缺乏)来区分每个控制的作用。主要的想法是我们可以signify不仅是如何相互作用with the control, but also suggest what影响the control will have in a way that doesn’t require 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:系统1,它是快速,本能的,有点自动,而且系统2是费力,体贴的,非常慢。当用户执行重复活动时,他们经常会这样做not参与他们的系统2(缓慢,逻辑)思考 - 他们依靠有点无意识的系统1,并且在那些时刻与他们沟通,我们必须使用系统1思维响应的设计属性 - 例如,preattentive traits,这是我们的大脑在我们支付完全,有意识的关注之前回应的视觉属性。

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删除)可能有很大的影响。

Therefore, designers must strive to differentiate between such options越多越好。标签是个人化的一种方式,但这还不够。当然,当我们设计网站和应用程序等数字产品时,我们不能使用触觉属性。但我们可以依赖视觉治疗和定位

例如,语法使用相同的拼写校正位置和添加到字典中作为Firefox的选项,但批判性地,使用诸如颜色,图标,文本的相对大小等几个其他提示以及对齐来防止用户滑倒。

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

另一种选择是分离后果选项(例如,删除,丢弃更改,静音,进行默认)通过将它放在离他们远离他们的其他方面。杠杆是可以的Fitts的法律并使它更难以选择后果选项,特别是如果它将破坏。少数几毫秒,它可能需要用户将鼠标或手指移动到另一个选项,而不是与撤消重大错误所需的挫折和时间相比。在上面的例子中,我们可以移动Dismissaction 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 (转移系统所有权忘记当前的Sonos系统)和较少的破坏性行动(如Parental ControlsSystem Update).这种少量空间会产生一个 概念分离(利用格式塔principle of proximity)并降低物理滑动的潜力(意外敲击错误物品)。

概括

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.思考,快速缓慢。纽约:弗拉尔,斯特鲁斯和Giroux。

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