X to Delete or X for Error? | Misunderstanding ‘X’ icon in User Interface.
I once received a complaint regarding the pop-up display on the website. When users selected an item and proceeded to confirm payment, an ‘x’ symbol appeared on the left side of the item. This caused hesitation in clicking the ‘complete order’ button. Many users interpreted this as an error, and some even assumed that the items were out of stock. The situation was depicted as follows:
In my role as Quality Assurance, I took the opportunity to clarify to users that the “x” symbol wasn’t an error, but rather a functional icon designed to remove an item from the payment confirmation list. I believe there’s room for improvement in this pop-up design.
A) Trash Can or Red Cross: Which Delete Icon Feels More Intuitive?
I read the forums on https://ux.stackexchange.com/questions/2834/most-intuitive-delete-icon , I noticed that the majority of users expressed a preference for the “Red Cross” icon over the Trash Can icon.
One of the most insightful responses I came across in the forum was:
I also came across examples of user interfaces from other sources that I could use as inspiration.
As it turns out, various examples employ different types of icons for deletion.
So, how can we decide on the most suitable icon for this situation?
B) Choosing the Right Icon for the Right Action
Before selecting the appropriate icon, it’s important to understand the action triggered when a user clicks on it.
The question to consider is:
1) Does it lead to permanent deletion?
2) Can it be deleted with the option to restore it to the payment confirmation list?
3) Does it signify deletion due to order cancellation?
Regarding the pop-up scenario I discussed earlier, the appropriate form of “delete” aligning with the business context is “cancellation.”
C) Weaving a Narrative through Icons
Having established that the suitable deletion type in this case is ‘cancellation,’ the question arises: which icon effectively communicates this action?
Considering the discourse that follows, the most fitting action is ‘remove.’
Remove means take the item off a list (for example) but it still exists.
Delete means destroy the object completely.
In my view, considering the user psychology, these statements hold true because people naturally associate the ‘minus icon’ with removal.
However, the question remains: Is the minus icon appropriate for this particular pop-up design?
Simplicity First: Applying Occam’s Razor Principle — Step 1
- If I were to select the X symbol once more, I would suggest avoiding the use of red color and opt for neutral tones like gray instead.
2. If I were to opt for a trash can icon, the design appears cluttered and doesn’t align with the narrative we aim to communicate to the user.
3) If I were to go with a minus icon, the presented action might appear peculiar, as users typically associate the minus icon with a numerical value, which could lead to a confusing experience.
Therefore, I’ve decided to opt for the number 1 icon.
Enhancing Clarity: Adding Hover Text for the ‘X’ Icon, Signifying ‘Delete’ —Step 2
To provide users with a clear understanding of the ‘X’ icon’s function, let’s include the text “delete” alongside it.
E) Usability Test!
I reached out to 3 users again to gather their feedback on the updated pop-up. They expressed a strong preference for the new version, as it is straightforward to comprehend in the context of cancellation.
One user shared: “I find the gray cross icon easier to understand than the red cross. The red one seemed like an error signal.”
Another user mentioned: “When I hover over the ‘X’ icon and the pop-up text appears, I immediately grasp that it means delete. This feature is quite helpful.”
This case taught me valuable lessons:
- A single color can have a significant impact on users. Selecting the appropriate icon for a specific action is crucial.
- The inclusion of pop-up text upon hovering is a truly helpful way to clarify actions for users.
