Should "Yes, delete it" be red, or green?

  • Designing an interface for a CMS (Content Management System), I stumbled upon a paradox and I'm a bit confused about what to do and why to do it..

    Context

    Before deleting an album, the user is asked to confirm the action.

    Green "Yes"

    First option

    Red "Yes"

    Second option

    Which option is more intuitive for the user?

    The better way to put a button such as `Delete` is to put it on the right, associate with people's habit, look from right to left, and give them more time to decide.

    Neither, if you're red-green color blind like 10% of men.

    At one time, the Apple Human Interface Guidelines were very clear on this one: Green means "Go" and red means "Stop", so don't make the "Go" button red and the "Stop" button green. Period. Not sure if they still say that though.

    try this : green "Yes" (left), red "No" (right) and second one : green "Keep it" (left), red "Delete it" (right), I can't add picture, because question is protected, the source of your problem are internally contradicting massegas on buttons : "yes, delete it" = "do something negative" = green&red, "No, keep it" = "don't do something to make positive outcome" = red&green, using cancel button increase probability of choosing delete. More positive message then my short "Keep it" could be use, it's too short for positive outcome

    What happens if I hit the `return` key?

    @RoddyoftheFrozenPeas (1) while some degrees of color blindness are quite common, thinking that 10% of men are red/green color blind is an assumption that needs to be supported by some research, (2) **solely** using a color to point out something is bad for color blinds, but if the color is something "extra" on top of the main information, then it's perfectly fine.

    I disagree with @twlkyao ... I think alot of users "habbit" is to just click the button on the right or the "green" button without even looking... I would make the green button on the right the "cancel" button... that way if they click it via "habit" the worse that happens is nothing, they just go back and try again... but if they click the "delete" button on accident they've made a BIG mistake and they can't just "go back".

    @Lohoris you are calling people insane, but the 10% of males being colorblind is a well known number, and is extremely well-supported by statistics published by many sources, including the American Academy of Ophthalmology and the US National Institute of Health. Look it up.

    By stating two meanings (Yes/No and Delete/Keep) on each button you create the possibility of contradiction. The user must now read both words, understand both meanings, verify consistency, then decide which to click. You have quadrupled the mental effort required to use your program. People will dislike it, even without knowing why.

    @wjl colorblind != red/green colorblind.

    http://i39.tinypic.com/2it1xrr.jpg change the message on the buttons, it shold look much better

    also try moving away from this common pattern for confirmation if you really want users to think before deleting. Make the whole action different from all your other confirm actions

    @GuyGordon Forcing the user to consider the implications very carefully before performing a (presumably) rare und irrevocably destructive action is maybe even a good idea. -- In a similar situation to the question asked, I am totally annoyed when Windows tells me "Warning! Other users are still active and may loose data, do you really want to reboot?" and makes "Yes" the default button while recommending the nondestructive "No".

    @Lohoris: Depending on how much you trust wikipedia, it states 7-10% of red/green color blindness for men: http://en.wikipedia.org/wiki/Color_blindness

    @Lohoris, ChrisWue -- According to the National Institute of Health (US), it's "about 8%" of men. Wikipedia says 7-10% of men. I misremembered my statistics.

    @RoddyoftheFrozenPeas I'm red/green colorblind, but those are obvious distinctions. Using closer shades would be bad, but the shades we have here are distinctive and easy to differentiate. Especially because they're both on the same, solid background.

    @Jeremy - Out of curiosity, could you tell which one's which if you didn't have text on the button?

    @RoddyoftheFrozenPeas I can, at least. To me those colors are very distinct. The green is has a lot more yellow than a typical green does. If you search for red-green color blindness tests, you can tell which reds and greens it'll be harder for those who are color blind to see (I can't exactly tell you which colors those are, of course, but look at google image results like these.)

    Interestingly, the user interface of JUnit and other unit-testing frameworks (which use a green bar to indicate success and a red bar to indicate failure) is often described as bad for red/green colourblind users. The original designer of that standard interface, Kent Beck, is red/green colourblind and asserts that he has never had any issue using it. My understanding is that the common choice of using a brighter green and a darker red works well in most situations.

    perhaps you could use size differentiation rather than colour, e.g. make `No` bigger than `Yes`, or perhaps reduce `Yes` to a link instead of a button. devoid of colour, both boxes are of equal proportion === importance, and after reading the controversy surrounding use of colour in this post I can only suggest going with size.

    I would say that depending on what you did with other yes no question, but I would put always the yes the same color and always de no with the same color

    Red-green color blindness does not imply you cannot tell the difference between these two colors. I am red-green colorblind and I can see these two colors just fine - it's when you overlay the colors on top of each other that you start to have a problem.

    Green = Go, Red = No. That's the standard I see in most places where Red/Green is used, and is what I would go with here. Green = continue, Red = go back :)

    @JoshuaBarron: exactly. color blindness is rare, color confusion is common. Even I am a little orange/green blind, I only have problems with Ishiara's tests but never in real life. it is a cone resolution issue, so when the buttons are that big and that way appart, no problem.

    @Diéssica : you should put the `No` on the left because we read left to right, and we want to read all of our choices, and the most probable must be the last we read. This is a classic UI rule.

  • jnmnrd

    jnmnrd Correct answer

    8 years ago

    Both ways seem to pose a false-positive paradigm. This can be simpler and not have to force the user to spend time making sense of the color-to-label association.

    Simply make the "Delete" button more prominent. Make the "Cancel" button less prominent. In regards to the labeling within the buttons, there is no need to put much context into what essentially are simple actions (no/yes? or cancel/delete) as that requires more processing on the users part.

    enter image description here

    Users will usually associate an action such as "Remove" or "Delete" to red. And, as always, provide a way to "cancel" the action.

    This seems to me a much more streamlined approach to this problem. I also appreciate the simplification of button wording. Who doesn't understand "Delete" or "Cancel?" Good UX to me means the user doesn't have to think about the interface. Think about these buttons without any words. I bet you'd still know which button means delete in @JNMNRD's picture.

    Great answer! Any particular reason to reverse the position of "Delete" button?

    It really depends on which action the user will be doing more often at this point, which I assume would be delete. Most people are right handed. Assuming more users would want to use the "Delete" action, it makes sense to have it on the right given that the mouse pointer will be closer to that. This is referring to Fitt's Law which basically states that the time required to move to a target area is the function of the distance from and size of that particular target. In this case, the "Delete" button. http://en.wikipedia.org/wiki/Fitts's_law

    @Diéssica the short answer is: button position should depend on your target platform demographic, since action button position is different cross-platform. http://www.nngroup.com/articles/ok-cancel-or-cancel-ok/

    @JNMNRD I agree that predominant right-handedness of a demographic may play into button position (though I think platform is more relevant), however I disagree with "it makes sense to have it on the right given that the mouse pointer will be closer to that." How do you know a user's mouse is more likely to be on the right hand side of the screen just because they are right handed?

    @circuitry That's merely an assumption of mine and would be an interesting study I think. So that's assuming the designer is consistent with their button placement (i.e. cancel actions to the left of the main action button) and what the user did prior to this alert coming up. Likely another "Delete" action within an edit state for the gallery screen in this case.

    And to add, I can see a case where the cursor would be to the left, say the albums are in a card view and the album that the user wants to delete is on the upper left corner of the stack, then in that case my assumption would render false

    `Both ways seem to pose a false-positive paradigm.` Agreed, it looks like reverse psychology because the colors don't help the users pick a choice (they have to read the text, the colors just end up confusing them.) Websites that try to employ this trickery are notorious for doing things like making the cancel text small, adding fluff for the other button like "Sure, let me do this", etc. It's better to have unambiguous options, which is why this answer is good.

    Also, if you plan to let the User press enter or space to activate one of the buttons by default, it's best to be safe and choose cancel. Cancel should always be muted and default. The user must be protected at all cost.

    @JNMNRD What is the false positive paradigm in both the cases? Can you explain this please?

    @JNMNRD I don't see how this answers the question, as you have changed the texts that the OP asks about. In your example, there is no longer a yes/no answer to the question asked. Besides, I thought there was a consensus here to not ask the user "Are you sure" because the answer "no" would imply they were unsure.

    @Geek You have a green button that says "No, keep it". People associate green with "Go!" or "Continue", where in this case it would be in relation to a cancel item. Depending on what the users intentions are, say they do want to delete it, the green button which is perceived as something positive is actually doing something they don't want to do. And vice versa

    @MrLister No, I didn't answer the question by selecting which of the two were better, I provided a another alternative by simplifying what were trying to achieve here. Say we do keep the same text that the OP asked about, makes no difference. The two main underlying issues are one, the colors and users preconceived notions of what they relate to and two, the context within these actions. My suggestion basically simplified everything and required that the user did not have to think about what they're getting into when they press either one of the buttons

    While this is correct in general, this specific color-choice for the cancel button, makes me think the button is unabled.

    @Lohoris That was something I quickly put together to emphasize a point. What I wanted to get across was putting less emphasis on a cancel button and adding more prominence to an action item that had more of a consequence with no turning back.

    "Any particular reason to reverse the position of "Delete" button?" --- Yes extremely good reason, the language is read left to right, and the Delete action is the one that a productive user will be trying to find upon seeing this interface. Thus if it is the last thing they read it is the freshest idea in their memory, making life a bit easier.

    If the language of the site is read left-to-right, then barring a very good reason otherwise, the main thing the user will want to do should be on the left. E.g., the first thing they find when scanning. Handedness of the user has no role here, the mouse may be anywhere. OS defaults for positioning similar sets of buttons may well be worth considering, **if** the page as a whole has a similar UX to the OS.

    I still think a Yes/No question should have *Yes* and *No* in its answers.

    @HagenvonEitzen: Would you be happier with "Deletion cannot be undone. [Cancel] [Delete]" ?

    @MickLH What if this website is international and is read from right to left?

    @circuitry I agree with T.J. Crowder, where the main thing the user wants to do is what is read first. So for a language reading left-to-right (ie. English) it should be Delete.

    Whereas I disagree with @T.J.Crowder; people used to reading left-to-right tend to place more emphasis in their reading on things towards the end of lines (and the bottom of the screen), so placing the more important item on the right hand edge and at the bottom of the dialog is optimal. See http://uxmovement.com/buttons/why-users-click-right-call-to-actions-more-than-left-ones/ for a more detailed explanation.

    See also: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511279.aspx - there's an in-depth section there about eye movements and scanning that basically suggests that most users ignore the bottom left of the screen when scanning for important content.

    @Jules: The points raised by those articles argue for grouping the buttons toward the bottom right (as Microsoft generally does), not for putting the primary action button last within the group. The MSDN article also emphasizes that that's the scan order *"...all things being equal..."* and follows up with *"But in interactive UI, not all things are equal..."* :-) Both are excellent reminders of overall scan patterns and where to place the block, though, good links.

    @circuitry Its not so dependent on the language, but as everyone is saying, the scan pattern. I notice many people saying the main option should be first, but if you actually user acceptance test that you will notice the peoples curiosity/fear making them read the other options as well, and after that now they have enough information that they need to process it for a moment. As opposed to just naturally flowing through the decision process and being sure of their actions nearly instantly.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM