Two lines that affect the usability
How can we increase the usability of symbol x?
We all are familiar with the symbol X on our website and mobile apps. Did you ever doubt or errored while dealing with this symbol?
Errors have a big deal in UX. Increasing errors in design will decrease usability. Error prevention is one of the 10 usability heuristics. In today’s digital interfaces, X no longer marks the spot but rather functions as a way for users to cancel or to dismiss an interim screen. How can one tell for sure whether the X means cancel or close? Sometimes, you can’t.
In most cases, the distinction between cancel and close doesn’t matter. But distinguishing between the two possibilities will decrease the interaction cost. (The interaction cost is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.)
Suppose 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, otherwise, the user will dismiss the screen precipitously and they will lose the work.
So it is important to save users from losing their work. We can accomplish this by 2 methods.
- Providing confirmation screen or avoid pop up
- Using labels and hover
Providing confirmation screen or avoid pop up
A confirmation screen asks users whether they are sure that they want to proceed with a command that they have just issued to a system. This prevents users from taking actions accidentally. 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.
Another method is avoiding popups. We can save users from losing work by avoiding the pop-up. Let’s take a look at the filter screen of the app Flipkart. They tackle the X symbol problem by neglecting the popup screen.
Using labels and hovers
The second method to save users from losing their work is by using labels and hovers. Using the close button with a label will give a clear understanding of the action to be done. This will help them to avoid unintended actions. Thereby we can attain a minimum interaction cost.
The next method is providing hover to the close button that says the function of the button. 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. Canceling the draft is also available (using the Delete trash can icon at the bottom of the message window — far from the Save and Close option at the top to help prevent mistakes).
When designers put an X icon in the design, they should provide a signifier to close and cancel, as well as provide safeguards such as confirmation dialogs or autosaving to avoid losing any user’s work.
That’s all for now, folks. Thank you again for reading.….!
