I'm working on a shopping cart design.
I'm currently using "X" to mean both "close" and "remove" in the interface. As shown in screenshot below.
Will this cause unnecessary confusion?
If you're looking for something that symbolises the word 'remove' then why not just use the word 'remove'?
It's not especially large a word. And you have plenty of space in that UI to fit it in there. Plus it removes any ambiguity as to what it means.
A couple of other options:
You have to be careful when using words. If you internationalize a word you may end up with an equivalent word with many more characters than your intention. If you use a graphic then you are language independent and character independent (which means spatially you are in the known) but there are still considerations based on culture and other factors.
Example If I wanted to represent a digital music player on a childrens' site and I use a symbol that looks like a portable cd player from the 90's many children won't associate the graphic with the underlining functionality.
When in doubt turn to applications that are driving preexisting mental models...
Consider Amazon (uses the word delete)
Consider Walmart (uses the word remove)
If you implemented a design similar to Amazon or Walmart then it might be safe to assume that anyone who has proficiency using Amazon/Walmart cart could also use your cart based on their existing mental model of how an electronic cart works.
I recommend using a minus sign enclosed in a circle (-). It should alleviate your text length issue while still implying a "remove" function as well.
This is a snap to test. I agree with + add, - remove, x close. You can use a tooltip to combine symbol and word labels. Mock up both and put it in front of about 5 users, get their feedback.
Alternatively you can allow the user to set the Qty to 0. Depends on when the trip to the server takes place and when the user sees a refresh.
Follow conventions/style of the app as a whole. Users will learn how to interact with your system. Consistency helps a great deal.
Thinking about the meaning of close and remove in the context of a shopping cart, you can think on behalv of a cart item as following:
Both of them are leading to the fact, that the item is not in the cart any more. So the meaning of close a shopping cart item is almost the same as remove it from the shopping cart.
So it's perfectly fine to use "X" for both, close the shopping cart and close a shopping carts item.
As for me it looks very confusing especially because of 'remove' icon has same spacing to top and right borders. Probably making it a little closer to combobox, scaling down a little and making it different color (e.g. red) would helps.
Using icons is wonderful, as long as I get what they mean.
Make the item-wise
x look more like it "belongs" with the item. Right now it's kind of sitting off in space. You could draw a box around the whole item row,
x included, to show that they go together.
-without a matching
Like a comment mentioned, a
- can easily be interpreted as "reduce this item's quantity by one" so run with the idea. Put up-down buttons by the quantity, and (critically) when the quantity is zero provide obvious feedback that this means you will order zero of this item.
On the other hand, it could be interpreted as "remove this entire line item, regardless of the marked quantity". In that case, *you should still provide a
+, but now the
+ should signify "add another line item".
Because of these very different interpretations, I would recommend staying away from this pair, and favor words instead.
My rule of thumb is, provide icons only if they add clarity to the majority of users, and even then don't rely only on the icon. Provide mouseover text or subtitles or something to fall back on if the symbolism of the icon fails.
I would suggest simply making the close x bigger instead of removing the x. Another thing you can do is to add "close" for the x on top on mouseover, and do the same but with "remove" on mouseover for the cart item. You already have lines to define sections and this does reduce any confusion that may arise with your current arrangement.
Keeping the same symbol for two different actions is definitely a questionable UI practice. Giving them different visual treatment would solve your problem only partially as the user would still associate the two different "X" symbols as related(since we all tend to recognize objects by comparing them against existing images). As a recommendation I would suggest you use a Minus sign (-) for removal of a product from cart. It would be most easily recognizable for the case of "removing" some entity, as it has been taught to us right from our elementary education. Also you can set a constant design language with (+) symbol for adding an item as well as (-) for removing.
I had the same issue with X for delete line or X for error line.
But now with apps, tablet, smartphone and flat icon we have now the possibility to use simple trash for delete action.
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?