Summary: Distinguishing between these two actions is critical to avoiding losing users’ work. Save changes before closing a view, use text labels rather than an X icon, and provide a confirmation dialog before destructive actions.
Long ago, the symbol X meant “this is where the treasure is buried.” In today’s digital interfaces, X no 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 the X means cancel or close? Sometimes, unfortunately, you can’t.
The main issue lies with the common lack of a text label for the X icon. When an icon represents multiple meanings in similar contexts across different interfaces, icon usability suffers because users cannot rely on any single interpretation.
Avoid Losing Users’ Work
When users intend to dismiss a modal or view by clicking the X button, but the system instead completely cancels the process and clears all their work, it is disheartening at best, and maddening at worst. Yes, the X icon is commonly recognized by users to mean either to cancel or to close, but distinguishing between the two possibilities is critical for the success of the interaction.
In some cases, the distinction between cancel and close doesn’t matter. When a popup takes over the majority of your screen, hitting the X button (as quickly as humanly possible) serves to both close that modal and perhaps cancel any process it might have triggered. However, if a screen contains a running timer, is playing audio, holds several selected filter options, or contains some other type of unsaved work, it becomes much more important to correctly interpret what that X icon represents — you may intend to leave that timer or audio running, apply those selected filters, or save your in-progress work, while wanting to close that view to continue some other related activity.
For example, the Sephora checkout process used a modal window to present free samples that users could add to their cart. In the following example, an item had just been selected by clicking the Add button below it; that action caused the Add button to be replaced by a Remove link, which made it look as if the sample had already been added to the cart. However, when the user closed the modal by clicking the X icon rather than Done link, she discovered that the item was not in the cart and that she needed to add it again.
To avoid losing users’ work, systems need to determine the user’s intent — cancel or close — and provide clear options.
This goal can be accomplished by one or more of the following:
- Asking the user to confirm their intention
- Using explicit text labels rather than ambiguous icons
- Presenting two distinct buttons: X for closing the view (with the side effect of saving intermediate work) and Cancel for abandoning the process
1. Ask for Confirmation
If a user pressed the X icon on a modal or intermediate view where she had already performed an action, the UI could confirm her intention by directly asking whether to apply that action before closing the view. This solution is ideal for destructive cancel actions that 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 confirmation before committing destructive actions.
For example, filter views are often accidentally closed, and that action causes users to lose their work. This problem is particularly rampant on mobile interfaces, as filter screens often consume the majority — if not all — of the available screen space, making it difficult or impossible to tell whether selections have already been applied.
To guard against potential mistakes, ask users who close a filter view whether they intend to apply the filters and close the view or clear their selections. For instance, the Lowes mobile app showed a confirmation dialog when the user attempted to close the filter screen before applying her selections.
Similarly, the 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.
While confirmation dialogs are effective in disambiguating the meaning of the X icon, they add extra steps; moreover, users don’t know what the X does before they press it and, therefore, they may worry about the consequence of their action.
2. Use Explicit Labels
Rather than relying on confirmation dialogs to catch users before they unwittingly lose all their selections, you can eliminate the ambiguous X icon in favor of explicit text-labeled buttons. Text can reduce ambiguity and clearly communicate what action would occur: cancel versus close.
The filter screen of Yelp’s mobile app offered buttons labeled Cancel and Reset at the top of the screen and a single large Apply button at the bottom. Similarly, the filter view in the Etsy mobile app provided separate buttons labeled Clear and Done. (Note: Etsy used Done rather than Apply because the filters were applied as soon as they had been selected, as is recommended for toggle switches.)
3. Favor Close & Save
If the X icon must be used rather than text (to save space or because you’re following your organization’s style guide), err on the side of caution and save any intermediate work that has been done. In addition, provide a separate Cancel button, to give users an emergency exit out of the process and to disambiguate between the two possible meanings of the X (closing and cancelling).
For example, Gmail automatically saved a draft of a message composed in its nonmodal window. This practice allowed users to collapse or close the window when desired, while still saving their progress. Hovering over the X icon in the top right corner of the message window displayed a tooltip confirming that the draft was going to be saved and closed. Cancelling was also still available (using the Delete trash can icon at the bottom of the message window — far from the Save & close option at the top to help prevent mistakes).
Saving by default can also be a good solution for long processes or processes that tend to be run in the background, such as timers. For instance, the Glow Baby mobile app allowed users to browse other areas of the app while a feeding or sleeping timer ran in the background. Because these timers can run for a long period of time (hopefully, a very long time for the sleeping timer!), this functionality let the user accomplish other tasks in the app, like recording a past diaper change or browsing through articles and forums. Tapping the X icon in the timer view simply dismissed the window without canceling the running timer.
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 the X button, auto applying those selections could be confusing and frustrating. This is why it’s critical to also include a separate Cancel button, to give users an out rather than forcing them to only save and close the view.
While the X icon is ambiguous and can often cause usability problems, it’s unlikely that it will disappear from all interfaces any time soon. Designers should be aware of the multiple meanings of the X icon and disambiguate between close and cancel, as well as provide safeguards such as confirmation dialogs or autosaving to avoid losing any users’ work.
Remember, when in doubt, save, then out.