Cancel or Close? Ambiguous action design
The distinction between the two is critical to prevent users from losing the work done. Save changes before closing the window, use text labels instead of the “X” and provide a confirmation dialog before destructive actions
Once upon a time symbol X meant “this is the place on the map where the treasures are hidden.” In modern digital interfaces X no longer denotes a location, but rather serves as a way for users to cancel a process or close an intermediate screen. Is it safe to say that X means cancellation or closure? Unfortunately, sometimes not.
The main issue is the lack of a text label for the icon X… When an icon has multiple meanings in different interfaces but in the same contexts, its usability suffers because users cannot rely on one interpretation.
Avoid losing unsaved data
When users are about to close the modal by clicking the button Xinstead, the system completely cancels the process and removes all work done, which is disheartening at best, and maddening at worst. Yes, icon X usually recognized by users as undo or close, but the distinction between the two is critical to the success of the engagement.
In some cases, the distinction between undo and close is irrelevant. When the popup takes up most of the screen, clicking the X (as quickly as possible) allows you to simultaneously close that modal and possibly cancel any process it might have started. However, if a timer is running on the screen, a sound is playing, multiple filter options are selected, or there is some other type of unsaved data, it becomes more important to correctly interpret the value of the X. You may want to keep this timer or audio, apply the selected filters. Or you might want to close this window while saving your current progress to continue with other related actions.
For example, during the checkout process on the Sephora website, a modal window is used for free samples that users can add to their shopping cart. In the following example, a product has just been selected by clicking the “Add” under him. This action caused the button “Add“Has been replaced by the link”Remove”, Which looks like the sample has already been added to the basket. However, when the user has closed the modal by clicking the icon X, not the link “Done”(Done), he found that the item is not in the cart and needs to add it again.
Sephora: Even if it looks like the sample has already been added to the cart, because now it can be removed by closing the modal window (by clicking X in the upper right corner) cancels the probe selection process. To add an item to their cart, users first need to click Addand then apply this action by clicking the link Done.
In order not to lose unsaved data, the system must determine the user s intent – cancel or close – and provide clear options.
This can be achieved by one of the following:
- Ask the user to confirm their intention
- Use unambiguous text labels instead of ambiguous icons
- Provide two different buttons: X to close the view (with the effect of saving progress) and Cancel to cancel the process
1. Request confirmation
If the user clicked the icon X in a modal or intermediate view, where it has already performed an action, the interface, in order to validate a decision, can directly ask the user whether to apply that action before closing the view. This solution is ideal for a destructive “undo” actionwhich could result in data loss. Always ask for confirmation before committing destructive actions.
For example, users often accidentally close filter views and this results in the loss of selected options. This problem is especially common in mobile interfaces, because filter screens often take up most of the available screen space (if not all), making it difficult or impossible to determine if choices have already been applied.
To guard against potential errors, ask users who close the filter if they intend to apply the filter and close the view, or if they want to clear their selection. For example, the Lowes mobile app displays a confirmation dialog when the user tries to close the filter screen before applying the selected options.
Mobile app Lowes: Button press “X“Or arrows”Back to»Can reset the selection and return the user to the previous set of results. Right: after clicking on “X “ a confirmation dialog popped up to check if the user intended to apply or cancel the filter settings before returning to the list of results.
Likewise, the Duolingo language learning app shows a confirmation dialog when users try to close the current lesson – lessons cannot be left partially completed and must either be completed or canceled. At the very least, the application informed users about this limitation and made it possible to return to the lesson to complete it and thereby save the progress.
Duolingo: Button press X will complete the current lesson and you will lose your current progress. To avoid errors, the application added a confirmation dialog.
While the confirmation dialog is effective for disambiguating the meaning of the icon X, it adds additional steps. Moreover, users do not know what it is doing Xuntil they click on it, and so they may worry about the consequences of their actions.
2. Use descriptive labels
Instead of relying on confirmation dialog boxes, you can replace ambiguous icon X on unambiguous text buttons… The text will clearly communicate what will happen: cancellation or closure…
On the filter screen of the Yelp mobile app, there are buttons at the top of the screen. Cancel and Reset, and one big button Apply in the lower part. Likewise, the filter in the Etsy mobile app contains separate buttons with labels Clear and Done… (Note: Etsy uses Done, not Apply, because filters are applied as soon as they are selected, according to the toggle guidelines.)
(Left) Mobile application Yelp: text labels for Cancel, Reset and Apply clear and concise, which reduces the likelihood of unintentionally closing the view and losing selected filters (Right) Mobile application Etsy: text label Clear gives users a clear way to deselect. Link Done returns to the product listing page with options already selected.
3. Preferred option “Save and Close”
If it is necessary to use an X instead of text (to save space or because you are following your company s style guide), play it safe and save any intermediate data… In addition, provide a separate Cancel button to give users the option to abort the process. Moreover, it will disambiguate between the two possible values X (closing and canceling).
For example, Gmail automatically saves a draft message written in a modeless window. This practice allows users to optionally minimize or close the window while maintaining their current progress. Hovering over the X in the upper-right corner of the message box displays a hint confirming that the draft will be saved and closed. However, undo is still available (the trash can icon at the bottom right of the message box – away from the Save & Close option to avoid confusion).
Gmail: Hovering over showed that the icon X is designed to close the window, not delete the draft, allowing users to save and close message box without losing work in progress
The default save can also be a good solution for long running processes or processes that usually run in the backgroundsuch as timers. For example, the Glow Baby mobile app allows the user to view other areas of the app while the feeding or sleep timer is running in the background. Since these timers can run for a long period of time, this feature allows the user to perform other tasks in the application, such as browsing articles and forums. Clicking on the icon X in timer view will simply close the window without canceling the running timer.
Glow Baby: (Left) Click on the icon X in the window with the timer running, closes the window without canceling the timer itself, and thus allows the user to continue using the application to register other types of events, participate in community discussions, read articles, etc. (Middle) The status of the running timer was displayed in the banner at the top of the screen. (Right) Button click X while the timer is paused, calls the buttons Discard or Cancelto determine the user s intent.
Note that saving the current process before closing is proactive, but can sometimes be contrary to the user s intent. For example, if the user intends to cancel their selection by clicking the button X, automatic selection can be confusing and frustrating. That s why it s important to add a separate Cancel button to give users an alternative, not just force them to save and close the view.
Output
While the X icon is ambiguous and can often cause usability issues, it is unlikely that it will disappear from all interfaces anytime soon. Designers should be aware of the plural meaning of an icon X and disambiguate between closing and cancelingand also provide security measures such as confirmation dialog boxes or autosave so that you don t lose user work.
Remember when in doubt save data, and then leave the application.