取消与关闭：设计差异区分

文章来源：Nielsen Norman Group 作者 @Aurora Harley

简介：区分这两个操作对于避免丢失用户的工作至关重要。在关闭视图之前保存更改，使用文本标签而不是X图标，并在破坏性操作之前提供确认对话框。

很久以前，符号X意味着“这就是宝藏被埋葬的地方。”在今天的数字界面中，X不再标记该位置，而是用作取消进程或解除临时屏幕的方式。如何才能肯定地告诉了是否X意味着取消或关闭？有时，不幸的是，你不能。
主要的问题在于与普通缺乏文本标签的X图标。当图标在不同界面的类似上下文中表示多个含义时，图标可用性会受到影响，因为用户不能依赖任何单一解释。

避免失去用户的工作

当用户打算通过单击X按钮来关闭模态或视图时，系统会完全取消该过程并清除所有工作，但它最多是令人沮丧的，并且最坏的情况是令人发狂。是的，用户通常认为X图标表示取消或关闭，但区分这两种可能性对于交互的成功至关重要。
在某些情况下，取消和关闭之间的区别并不重要。当一个弹出窗口占据你的大部分屏幕时，点击X按钮（尽可能快地）可以关闭该模态并可能取消它可能触发的任何进程。但是，如果屏幕包含正在运行的计时器，正在播放音频，保存多个选定的过滤器选项，或包含其他类型的未保存的工作，则正确解释X图标代表的内容变得更加重要- 您可能打算离开该计时器或音频运行，应用这些选定的过滤器，或保存正在进行的工作，同时希望关闭该视图以继续其他一些相关活动。
例如，丝芙兰结账过程使用模态窗口来呈现用户可以添加到购物车的免费样品。在以下示例中，通过单击下面的“ 添加”按钮刚刚选择了一个项目; 该操作导致“ 添加”按钮被“ 删除”链接替换，这使得该示例看起来好像已将样本添加到购物车中。但是，当用户通过单击X图标而不是完成链接关闭模式时，她发现该项目不在购物车中，并且她需要再次添加它。
丝芙兰：尽管看起来样品已经被添加到购物车中，因为它现在可以被移除，关闭模态（通过单击右上角的_X ）取消了选择试用项目的过程。要将项目添加到购物车，用户必须先单击“添加” ，然后单击“完成” 链接应用该操作。_
为避免丢失用户的工作，系统需要确定用户的意图 - 取消或关闭 - 并提供明确的选项。
此目标可以通过以下一项或多项来完成：

1. 要求用户确认他们的意图
2. 使用显式文本标签而不是模糊图标
3. 显示两个不同的按钮：X用于关闭视图（具有保存中间工作的副作用）和取消用于放弃该过程

   1.要求确认

   如果用户在已经执行操作的模态或中间视图上按下X图标，则UI可以通过在关闭视图之前直接询问是否应用该操作来确认其意图。此解决方案非常适合会破坏用户工作的破坏性取消操作。在这里，乞求宽恕比要求许可更好的古老格言绝对不是真的 - 在做出破坏性行动之前总是要求确认。
   例如，过滤器视图通常会被意外关闭，并且该操作会导致用户丢失其工作。这个问题在移动界面上特别猖獗，因为过滤器屏幕通常占用大部分（如果不是全部）可用的屏幕空间，这使得很难或不可能判断是否已经应用了选择。
   为了防止潜在的错误，请询问关闭过滤器视图的用户是否打算应用过滤器并关闭视图或清除其选择。例如，当用户在应用她的选择之前尝试关闭过滤器屏幕时，Lowes移动应用程序显示确认对话框。
   Lowes移动应用程序：点击 X 按钮或后退箭头可以重置任何选择并将用户带回到之前的结果集。右：点击 X后，会出现一个确认对话框，检查用户是否打算在返回结果列表之前应用或取消过滤器优化。
   同样，当用户试图关闭正在进行的课程时，语言学习应用程序Duolingo显示了一个确认对话框 - 课程不能部分完成，必须完成或取消。至少，应用程序将此约束传达给用户，并为他们提供了返回课程以保持进度的选项。
   Duolingo：单击 X 按钮将结束当前课程并放弃任何进度。为了防止错误，该应用程序包括一个确认对话框。
   虽然确认对话框可以有效消除X图标的含义，但它们会增加额外的步骤; 此外，用户在按下X之前不知道X做了什么，因此，他们可能会担心他们的行为后果。

   2.使用显式标签

   您可以消除模糊的X图标，而不是依赖于确认对话框来捕获用户，而不是失去所有选择，而是使用明确的文本标签按钮。文本可以减少歧义并清楚地传达将发生的操作：取消与关闭。
   Yelp移动应用程序的过滤器屏幕在屏幕顶部提供了标记为取消和重置的按钮，在底部提供了一个大的应用按钮。同样，Etsy移动应用程序中的过滤视图提供了标记为“ 清除”和“完成”的单独按钮。（注意：Etsy使用Done而不是Apply，因为过滤器在选择后立即应用，就像切换开关一样。）
   （左）Yelp移动应用程序：取消，重置和应用的文本标签直接且清晰，使用户不太可能无意中关闭视图并丢失其过滤器选择。（右）Etsy移动应用程序：文本标签 Clear 为用户取消选择提供了明确的方式（原谅双关语）。在完成链接返回到产品清单页面，通过已经应用的选择。

   3.赞成关闭并保存

   如果必须使用X图标而不是文本（为了节省空间或者因为您正在关注组织的样式指南），请谨慎使用并保存已完成的任何中间工作。此外，提供单独的取消按钮，为用户提供紧急退出流程，并消除X（关闭和取消）的两种可能含义之间的歧义。
   例如，Gmail会自动保存在非模式窗口中组成的邮件草稿。这种做法允许用户在需要时折叠或关闭窗口，同时仍然保存他们的进度。将鼠标悬停在消息窗口右上角的X图标上会显示一个工具提示，确认草稿将被保存并关闭。取消仍然可用（使用消息窗口底部的删除垃圾桶图标 - 远离顶部的保存并关闭选项以帮助防止错误）。
   Gmail：Hover透露， X 图标用于解除窗口而不是删除草稿，允许用户保存并关闭消息窗口而不会丢失正在进行的工作。
   默认情况下保存也可以很好地解决往往在后台运行的长流程或流程，例如计时器。例如，Glow Baby移动应用程序允许用户浏览应用程序的其他区域，同时在后台运行喂食或睡眠计时器。因为这些计时器可以运行很长一段时间（希望，睡眠计时器的时间很长！），此功能允许用户完成应用程序中的其他任务，例如记录过去的尿布更改或浏览文章和论坛。点击计时器视图中的X图标只需关闭窗口而不取消正在运行的计时器。
   Glow Baby :(左）在运行计时器视图中点击 X 图标，取消了视图而不取消计时器，从而允许用户继续使用该应用程序记录其他类型的事件，参与社区讨论，阅读文章， 等等。（中）运行计时器的状态显示在屏幕顶部的横幅中。（右）在计时器暂停时按下 X 会调出 Discard 或 Cancel 按钮以检测用户的意图。
   请注意，在关闭之前保存中间工作或维持正在进行的过程是主动的，但有时可能违反用户的意图：如果用户打算通过单击X按钮取消他们的选择，则自动应用这些选择可能会令人困惑和令人沮丧。这就是为什么还必须包含一个单独的取消按钮，为用户提供一个而不是强迫他们只保存和关闭视图。

   结论

   虽然X图标含糊不清并且经常会导致可用性问题，但它不太可能很快从所有接口中消失。设计人员应该了解X图标的多重含义，并在关闭和取消之间消除歧义，并提供保护措施，如确认对话框或自动保存，以避免丢失任何用户的工作。
   请记住，如果有疑问，请保存，然后退出。