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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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.
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.
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.