很久以前,符号X意思是“这是宝藏被埋葬的地方。”在当今的数字接口中,Xno longer marks the spot, but rather functions as a way for users to cancel a process or to dismiss an interim screen. How can one tell for sure whether theX方法取消或者close?有时候,不幸的是,你不能。

这main issue lies with the common缺乏文本标签为了X图标。当一个图标表示不同接口的类似上下文中的多种含义时,icon usability因为用户不能依赖任何单一解释。

Avoid Losing Users’ Work

When users intend to dismiss a modal or view by clicking theX按钮,但系统完全取消了这个过程并清除了他们所有的工作,它充其量令人沮丧,并且在最坏的情况下疯狂。是的Xicon is commonly recognized by users to mean either to取消或者close, 但区分两种可能性对于互动的成功至关重要

在某些情况下,取消与关闭之间的区别无关紧要。当一个弹出窗口接管大多数屏幕时,击中X按钮(尽可能快地,人类可能)为近距离接近modal也许取消可能触发的任何进程。但是,如果屏幕包含一个正在运行的计时器,则播放音频,包含几个选定的过滤器选项,或包含一些其他类型的未保存的工作,正确解释该类型更重要X图标表示 - 您可能会打算留下将该定时器或音频运行,应用选定的过滤器,或保存正在进行的工作,同时希望关闭该视图以继续其他相关活动。

例如,Sephora Checkout Process使用模态窗口来提供用户可以添加到购物车的免费样品。在以下示例中,单击刚刚选择了一个项目Addbutton below it; that action caused theAdd按钮被a替换消除链接,它看起来好像样本已被添加到购物车中。但是,当用户通过单击关闭模态时Xicon rather than完毕链接,她发现该项目不在购物车中,并且她需要再次添加它。

Sephora网站:选择试用产品模态窗口的屏幕截图
Sephora:尽管它看起来好像已经将样本添加到购物车,因为它现在可以删除,关闭模态(通过点击X在右上角)取消了选择试用项目的过程。要将项目添加到购物车,用户必须首先点击Add和then apply that action by clicking the完毕关联。

为避免丢失用户的工作,系统需要确定用户的意图 - 取消或关闭 - 并提供清晰的选项。

这一目标可以通过以下一个或多个来实现:

  1. 要求用户确认他们的意图
  2. 使用显式文本标签而不是模糊的图标
  3. Presenting two distinct buttons:Xfor closing the view (with the side effect of saving intermediate work) and取消为了放弃这个过程

1.要求确认

如果用户按下X在她已经执行了一个动作的模态或中间视图上的图标,UI可以通过直接询问是否在关闭视图之前询问该操作来确认她的意图。该解决方案非常适合破坏性取消actionsthat would lose the user’s work. Here, the old adage that it’s better to beg forgiveness than ask for permission is absolutely not true — always ask for在承诺破坏性行动之前确认

例如,筛选视图通常意外关闭,并且该动作导致用户失去工作。此问题在移动接口上特别猖獗,因为过滤器屏幕通常消耗大多数 - 如果不是全部 - 可用的屏幕空间,这使得难以或不可能判断是否已应用选择。

To防止潜在的错误请询问关闭过滤器视图的用户是否打算应用过滤器并关闭视图或清除其选择。例如,Lowes移动应用程序在用户在应用她的选择之前尝试关闭过滤器屏幕时,显示了一个确认对话框。

Lowes移动应用:2筛选屏幕和确认对话框的屏幕截图
Lowes mobile app: Tapping either theX按钮或者后退箭头可以重置任何选择并将用户返回到上一个结果集。右:敲击后X,似乎在返回结果列表之前检查用户是否意味着应用或取消过滤器细化。

类似地,language-learning app Duolingo showed a confirmation dialog when users attempted to close an in-progress lesson — lessons could not be left partially completed and had to be either finished or cancelled. At least, the app communicated this constraint to users and gave them the option to return to the lesson to maintain progress.

Duolingo移动应用程序:离开课程前确认对话
Duolingo: Clicking theX按钮将结束当前的课程并丧失任何进展。要防范错误,该应用程序包含一个确认对话框。

While confirmation dialogs are effective in disambiguating the meaning of theXicon, they add extra steps; moreover, users don’t know what theX在他们按下它之前确实如此,因此,他们可能担心他们的行动的结果。

2. Use Explicit Labels

你可以在他们不知不觉中丢失所有选择之前抓住用户,而不是依赖确认对话框,而不是依赖确认对话框。消除模棱两可Xicon in favor of explicit text-labeled buttons。Text can reduce ambiguity and clearly communicate what action would occur:取消相对close

Yelp的移动应用程序的过滤器屏幕提供标有按钮取消重置在屏幕顶部和一个大的Apply按钮在底部。类似地,filter view in the Etsy mobile app provided separate buttons labeled清除完毕。(Note: Etsy used完毕而不是Apply因为一旦选择,滤镜被选中,建议用于切换开关。)

Yelp Mobile App和Etsy Mobile App Filter屏幕的屏幕截图
(左)yelp移动应用程序:文本标签取消,重置, 和Apply直接和清晰,使用户不太可能无意中关闭视图并丢失过滤器选择。(右)etsy移动应用程序:文本标签清除为用户取消了他们的选择,给出了一个明确的方式(请原谅双关语)。这完毕链接返回到产品列表页面,已应用选择。

3.有利于关闭和保存

如果是Xicon must be used rather than text (to save space or because you’re following your organization’s时尚指南),谨慎行事救any intermediate work已经完成了。此外,提供单独的取消按钮,给用户一个紧急出口退出过程并消除两种可能的含义之间的歧义X(结束和取消)。

For example, Gmail automatically saved a draft of a message composed in its非透镜窗口。这种做法允许使用rs to collapse or close the window when desired, while still saving their progress. Hovering over theX消息窗口右上角的图标显示了一个工具提示,确认该草稿将被保存和关闭。取消也可用(使用删除垃圾可以在消息窗口底部的图标 ​​- 远离保存和关闭最重要的选择有助于防止错误)。

Gmail站点:屏幕截图显示X图标的工具提示编译非透镜窗口中
Gmail: Hover revealed that theXicon was for dismissing the window and not for deleting the draft, allowing users to保存和关闭消息窗口而不丢失正在进行的工作。

Saving by default can also be agood solution for long processes or processes that tend to be run in the background,如计时器。例如,发光婴儿移动应用程序允许用户浏览应用程序的其他区域,而馈送或睡眠定时器在后台运行。因为这些计时器可以长时间运行(希望,睡眠定时器的很长一段时间!),这一功能让用户在应用程序中完成其他任务,例如录制过去的尿布改变或通过文章和论坛浏览。manbetx官网手机登陆敲击X定时器视图中的图标只会在不取消运行计时器的情况下拆除窗口。

发光婴儿移动应用程序:3护理计时器的屏幕截图,可以获得自动保存或呈现确认对话框
发光宝宝:(左)敲击Xicon in a running-timer view dismissed the view without canceling the timer, and thus, allowed the user to continue using the app to log other types of events, participate in the community discussions, read articles, and so on. (Middle) The status for the running timer was displayed in a banner at the top of the screen. (Right) Hitting theX虽然计时器暂停了丢弃或者取消buttons to detect the user’s intention.

Note that saving intermediate work or maintaining an ongoing process before closing is proactive, but sometimes can be contrary to the user’s intention: If users intend to cancel their selections by clicking theX按钮,自动应用这些选择可能会令人困惑和令人沮丧。这就是为什么还包括单独的原因取消按钮,给用户一个out rather than forcing them to only save and close the view.

结论

虽然这一点X图标是暧昧的,并且通常会导致可用性问题,但它不太可能从所有接口都会随时消失。设计师应该意识到多种含义Xicon and disambiguate betweenclose取消,并提供保障措施,例如确认对话框或自动送视,以避免丢失任何用户的工作。

记住,疑问,然后出去了。