30

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?

For quick reference, see Noun Project searches for close and remove

Shopping cart mock

  • 3
    maybe keeping the close-x the way it is and using a red-colored X for "remove"? – msp Oct 31 '14 at 16:40
  • 5
    do you have any evidence that the x's are confusing? The comp shown uses proximity well that I can't imagine it would be an issue. – zzzzBov Oct 31 '14 at 18:51
  • 1
    That design has a lot of other issues btw., probably more serious ones than the diagonal cross. – Crissov Nov 1 '14 at 19:12
  • 2
    You could simply use a small trashcan icon. 100% obvious what it does – Martijn Nov 3 '14 at 10:15
  • 1
    @L.Möller Yes, most look similar/same to me. What's funny is that they all focused way in on changing what's next to the item, and several say that - is only associated with reducing the quantity. No one has yet suggested changing the x in the upper-right to a - to symbolize "minimize"... (Which makes sense here, as your shopping cart does still exist off in the background) – Izkata Nov 3 '14 at 20:16

12 Answers 12

21

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.

enter image description here

  • 18
    Completely agree here, but I want to add that words can be problematic when it comes to internationalization. Although not the case with "remove", some words tend to be pretty long in German or Russian. – Lovis Oct 31 '14 at 15:58
  • 8
    Be careful where you place the text. On @JonW's image a user might mistakenly think they are removing a quantity of 1 from their cart. I'd suggest moving under the actual product image. – FodderZone Oct 31 '14 at 16:14
  • @FodderZone Fair point. Perhaps it could be replaced with 'Remove all' depending on space restrictions. Or - as it's a destructive act anyway - the subsequent prompt on clicking 'Remove' could inform the user 'are you sure you wish to remove all items?' so they are clear what is actually going to happen. – JonW Oct 31 '14 at 16:22
  • I think this solution makes the most sense in the near-term for our design. Thanks! – charliesneath Oct 31 '14 at 16:46
  • 1
    @dan1111 If you opened up the shopping cart and had 5 of the item, then changed it to 3, then clicked Remove - that's where the ambiguity is. Am I removing all 5 or removing 3? – Izkata Nov 3 '14 at 20:09
57

A couple of other options:

  • An X that is styled differently. X is an easily-recognized symbol for both actions. I think any confusion mainly arises from the fact that you are using the same style for both, creating the expectation that both will perform the same action in your interface. If you had, for example, a red X with slightly different proportions for the remove action, I don't think anyone would have a problem understanding the interface.
  • A small trash can is another widely recognized symbol for remove.
  • 10
    In this case, the trash can would be a very viable option. – Kroltan Nov 1 '14 at 2:40
  • Trash is more about deletion of data for me. – bjb568 Nov 1 '14 at 19:08
  • 5
    @bjb568 Removing an item from a cart does delete the datum that the user wants to buy a particular product. – Damian Yerrick Nov 2 '14 at 0:34
  • @tepples I guess, but I meant larger amounts of data. Like deleting a file. – bjb568 Nov 2 '14 at 0:49
  • 1
    This is better than the accepted. I easily recognize straight X as 'close' and a stylized red X with curved lines as 'delete'. This is used in Windows and people are familiar with it. A trash can symbol is a very appropriate alternative too, but it has to be simple and not detailed. I think placing an icon is better than using the word 'remove' (esp when you translate the website, the icon remains the same). – ADTC Nov 3 '14 at 1:51
9

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)

enter image description here


Consider Walmart (uses the word remove)

enter image description here


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.

  • 5
    I cannot claim I am too impressed with Amazon's and Walmart's solution. The options to remove items from the shopping cart are difficult to find (is that maybe even intentional?), especially because they use "just" text (in the middle of other text), rather than a recognizeable icon. – O. R. Mapper Nov 1 '14 at 15:32
  • 1
    @O.R.Mapper FWIW Entering "0" for quantity and clicking "Update" also removes the item on the Walmart site. – Jason C Nov 2 '14 at 0:08
5

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.

  • 14
    I would interpret that as a control to reduce the quantity and not remove the item completely. – Matt Obee Oct 31 '14 at 16:21
  • 1
    @ѺȐeallү: i.imgur.com/r5Wm4J2.png – Ry- Oct 31 '14 at 19:09
  • 4
    That screams "block" to me, not remove. As if I were blocking someone on a social network site, or blocking incoming connections from a certain IP, or something. Not necessarily remove, just block. – Seiyria Nov 1 '14 at 0:14
  • 3
    @minitech I don't have an Apple device and would still not recognize that symbol. To me it just looks like a "do not enter" sign. – Jason C Nov 2 '14 at 0:07
  • 1
    @JasonC: The comment’s deleted now, but ѺȐeallү had said something to the effect of “that goes against every standard and looks like ‘minimize’”; I was just showing that it doesn’t and that I would never mistake it for a minimize button. – Ry- Nov 2 '14 at 4:48
2

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.

  • 4
    As pointed out in another comment on one of the answers here, a minus sign meaning remove is exactly a problem here, because with its direct proximity to a number, it is not clear any more whether the whole line gets removed, or whether the number gets decreased by one. – O. R. Mapper Nov 1 '14 at 15:28
0

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:

  • remove item (this is like usual)
  • close item

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.

0

I would

  1. Use "Remove item" as a text link because, because as already mentioned, words are less likely to be misinterpreted than single characters or images.
  2. Put the remove-item link to the immediate right of the item image because item image(s) is (are) the first point of focus as the result of the larger visual area. (No, Gatekeepers of UX StackExchange: I don't have a link to a study that reinforces something that you should be self-evident) Currently there's far too much space between the item and the price/quantity/remove information; the layout would be more intuitive if the item and remove-item link are spatially paired. It's like placing a light switch 25-feet away from the room that it lights--why do it?
  3. Lastly, let the user enter "0" for the quantity value to remove an item. It's easy to program and intuitive to use, maybe even more so than clicking a remove-item link. I believe that Amazon has this functionality. In any case, it's an accommodating fail-safe that you wonder why more people don't use, like gas stations with pump hoses that are long enough for vehicles of any common size and model (ie, gas-cap location relative to the pump).
0

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.

0

Using icons is wonderful, as long as I get what they mean.

It's okay to mark it with an x, but:

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.

Don't use - 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.

0

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.

0

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.

0

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.

protected by JonW Nov 4 '14 at 9:39

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?

Not the answer you're looking for? Browse other questions tagged or ask your own question.