14

Ask DN: Can I use "X" for both close and remove?

over 5 years ago from , a designer

I'm working on a shopping cart design.

There seems to be precedent for using "X" to mean "close" (in an upper corner), but it can also mean "remove," as in "remove item.

Does any one have any recommendations, considerations, cautions, or best practices for trying to "X" in both the "remove" and "close" contexts?

17 comments

  • Marc EdwardsMarc Edwards, over 5 years ago (edited over 5 years ago )

    I think minus (subtract) is often a better symbol to represent removing items.

    + Add

    – Remove

    × Close

    30 points
    • Charlie Sneath, over 5 years ago

      That makes a lot of sense. I do think that graphically, "x" is a bit of a stronger symbol than "-".

      Also, looking at the Noun Project page, it's a healthy mix of both "X" and "-" for remove.

      "X" is a clear winner for close, though.

      2 points
    • Jonathan ShariatJonathan Shariat, over 5 years ago (edited over 5 years ago )

      I just noticed that apple doesnt follow this pattern in Yosemite

      yosemite icons

      I guess minimize has been - for a long time too.

      Personally I see no issue with X being close and remove.

      0 points
      • Khaled Islam BouyaKhaled Islam Bouya, over 5 years ago

        Now that you said this, if you take Windows for example, the minimize icon make sense, since it's how the app would look on the task bar (rectangle). But here on OS X, it's different windows are minimized to the dock and doesn't look like that... Maybe it represent the action of subtracting the window from the screen... Another thing worth noting here is that the icons are color coded which helps a lot to understand their function.

        To answer the question of the OP, I think it's fine to use an X to remove items from the cart you can color code it as well, to differentiate from the X that closes whatever it closes (remove in red, close just white, grey, or even suiting the colors scheme on the interface you're designing). But the "—" would be way more accurate. Personally I would go for the "—" as long as you don't make it look as the bar on the wrong way road signage that would make it look like it's indicating a forbidden action.

        0 points
        • Christopher Mansfield, over 5 years ago (edited over 5 years ago )

          Hmmm '-' might represents the subtraction of the window though I had never thought about it before now. However by that logic the 'X' should multiply 'duplicate' the screen.

          0 points
      • P GP G, over 5 years ago

        Press Option when you mouseover the buttons. Fullscreen will change to +

        1 point
    • Seah C-BSeah C-B, over 5 years ago

      I disagree. While a plus / minus concept may work in other contexts, it makes no sense to have within a shopping cart.

      A minus sign would need to have a plus sign near it for it to be read as a removal indicator rather than a short horizontal line. The only place I can think you might have an add more sign within a cart would be to add to the quantity of an item. So, is the user forced to think "I would like a quantity of 0" if they want to remove something? Not very intuitive for them.

      If you're worried about clarity, the easiest thing to do is to literally write out the word Remove or Delete (this is the solution Amazon and Ebay use).

      I think that an X icon is a fine solution. The trash can and No symbol that others have proposed would also work.

      0 points
  • Tobias ReichTobias Reich, over 5 years ago

    How about a trash-can icon? Stands more for "delete" than "remove", but in some cases it fits better.

    9 points
  • Jian Wei LiauJian Wei Liau, over 5 years ago

    What about "bin", "trash" icon?

    delete

    4 points
  • Account deleted over 5 years ago

    Drew was pretty spot on about a screenshot. You may be hesitant to show us, but a lot of times the context makes a huge difference.

    For example, a minus symbol might be a poor choice because your cart has expandable and collapsable areas (hiding billing if same as shipping, perhaps)... or the x typically used for close might be great because you have no other instances on the site where the action might be confused with close.

    Sure, there are general best practices, but sometimes you need to evaluate the entire experience to get a true sense of what "feels" right.

    1 point
  • Drew ShimomuraDrew Shimomura, over 5 years ago (edited over 5 years ago )

    This may be worth posting on the UX stack exchange, especially with a screenshot if you can.

    My quick answer is "it depends"

    I think you could have "x" mean both and could differentiate by style (of "X", of what is being closed/removed)

    Size, shape, boldness, location on page--these could all together result in a clear distinction between the two.

    I think the more classical answer is "it's probably not a good idea," and I'd agree, but there are most likely ways to do it.

    1 point
  • Aaron SagrayAaron Sagray, over 5 years ago

    you can use the "no sign" for remove.

    1 point
  • Melvin TercanMelvin Tercan, over 5 years ago (edited over 5 years ago )

    I think (X), in a circle, is better to indicate remove, X by itself should be close.

    0 points
  • Account deleted over 5 years ago

    As for trash bins, my personal feelings are mixed. Again, I think it has to do with the overall context... but unless you can retrieve the item you "trash", I try to stay away from it. When you "trash" things in OS, Windows, or even Gmail... it never flat-out disappears... there is always a way to pull it back out of the trash.

    To be fair, one could argue that in the context of a cart, that the expectation of trashing something would be permanent... and it's honestly a very valid argument.

    0 points
  • Antonio PratasAntonio Pratas, over 5 years ago

    Not at the same time or screen. in a basket, it should be add (+) and remove (-), or if you only have the remove action try a trashcan as a delete icon.

    0 points
  • Michael AleoMichael Aleo, over 5 years ago

    If you're looking for the highest level of user comprehension, nothing is going to be "remove".

    0 points
  • Hawke BassignaniHawke Bassignani, over 5 years ago

    The word "Remove" is definitely the best option (a few other people have commented with that). Words are always clearer; close as an "X" and back as a left arrow only work well because they are universal in almost every OS on every device.

    I don't mind "-" for remove, but in a list view, seeing "+" and "-" icons usually makes me think of collapsables boxes with show/hide. That might just be me.

    Trash icon is good, and shouldn't be confused with "close."

    0 points