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..


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?

  • 256
    Neither, if you're red-green color blind like 10% of men. Commented Jan 12, 2014 at 5:31
  • 41
    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
    – Qbik
    Commented Jan 12, 2014 at 12:28
  • 91
    @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.
    – o0'.
    Commented Jan 12, 2014 at 14:14
  • 13
    @wjl colorblind != red/green colorblind.
    – o0'.
    Commented Jan 12, 2014 at 17:56
  • 26
    @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
    Commented Jan 13, 2014 at 0:06

17 Answers 17


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.

  • 47
    Great answer! Any particular reason to reverse the position of "Delete" button?
    – Diéssica
    Commented Jan 12, 2014 at 0:10
  • 76
    @Diéssica the short answer is: button position should depend on your target platform demographic, since action button position is different cross-platform. nngroup.com/articles/ok-cancel-or-cancel-ok
    – circuitry
    Commented Jan 12, 2014 at 0:21
  • 4
    @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
    Commented Jan 12, 2014 at 0:24
  • 15
    "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.
    – MickLH
    Commented Jan 12, 2014 at 16:12
  • 22
    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. Commented Jan 12, 2014 at 16:26

I'm not so sure you should be thinking only in terms of red and green. Red has typically been associated with danger, potentially dating back to the middle ages (citation needed). A quick Google image search for "delete" yields almost entirely red images.

To me (and to bootstrap) green indicates success, red indicates danger.

Bootstrap buttons

As deleting is a dangerous action I would recommend keeping the delete button red. Are you restricted to using green/red? If so I would recommend using your second image. U.S. stop lights indicate to me that green means "continue." Using this rationale you could say a green "No, keep it button" means "No, keep it and continue" and a red "Yes, delete it" means "Yes, delete it even though it's dangerous." Anyhow, I would consider making the "No, keep it" button blue because it is a pretty standard action color (for instance it is the default color of unstyled links).

Edit: I think @JNMNRD has the best answer on this. Here is @JNMNRD's image without words. Can you tell which button means delete?


  • 70
    What if I am chinese? Red means different things for non-westerners. And for colourblind people.
    – JonW
    Commented Jan 12, 2014 at 3:50
  • 68
    @JonW Good point. ISO 3864-2:3.7 denotes red as the hazard severity code for danger (www.clarionsafety.com/assets/common/pdfs/whitepapers/3864-2.pdf). Since this is an international standard it is likely red is used internationally to indicate danger.
    – circuitry
    Commented Jan 12, 2014 at 3:58
  • 121
    Nonetheless it is still the ISO standard associated with the concept of danger. Stop signs are still red in China.
    – circuitry
    Commented Jan 12, 2014 at 4:14
  • 53
    @DaveSherohman honestly, I don't believe you.
    – o0'.
    Commented Jan 12, 2014 at 14:54
  • 42
    Pretty clear example of a route for bad UX to come about there: when the tester is so sure of the design's brilliance that those users (albeit in a minority) who report difficulty understanding a UI are told that they are mistaken or lying. I'm with Dave Sherohman, I would not be certain which text-less button was which. The red suggests to me "delete" but also suggests to me "cancel", and I generally expect to be asked "yes/no" questions, not "no/yes" questions and so the position on the right also suggests to me "no". If forced to guess I'd be wrong sometimes. Commented Jan 13, 2014 at 2:41

Looking at this from a slightly different angle, where possible you could consider removing the confirmation entirely and switching instead to an "Do/Undo" process.

This method is often used across the Google services:

enter image description here

It has the advantages that it's culturally neutral and more efficient for the user (one-click rather than two to delete).

Disadvantage is that it is transient link, and it is overridden when another action is taken - for example when reporting another email as spam. It also gets discarded once you logout, lose focus or refresh.

To help avoid these disadvantages, you could consider including some kind of recycle bin functionality on the site much like SharePoint does.

  • 93
    Something that's always bugged me about these is how the Undo disappears after a while though - at least it does in Gmail. There's always a mad scramble to get the cursor to the top of the screen in time. Commented Jan 12, 2014 at 22:04
  • 21
    Yes, I agree. When I implement these, I tend to have a "recycle bin" of sorts also available to the user, so the deleted item can still be retrieved for some time. Commented Jan 12, 2014 at 22:10
  • 19
    Indeed: Never use a warning when you mean undo (alistapart.com/article/neveruseawarning). People simply don't read the message anyway, so why bother with it?
    – André
    Commented Jan 13, 2014 at 15:19
  • 7
    @JessicaYang I think the Undo disappearing thing is for sending an email. Google holds your mail for 10 seconds, during which time you can undo. After that 10 seconds the email is sent and you cannot undo from that point on.
    – danqing
    Commented Jan 13, 2014 at 18:38
  • 19
    I like the way Netflix handles the DVD queue. If you remove a DVD from your queue, it changes to show the row as deleted with an undo action. The undo action sticks around until you refresh the page. This is the method I try to use in the web apps I build and users seem to appreciate it.
    – Brian
    Commented Jan 13, 2014 at 22:28

With all due respect, I think every answer so far has missed the mark somewhat.

First of all, based on the Context section of your question ...


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

... we can deduce that this is not a success or error modal, but rather it is a confirmation modal, which implies a warning or caution color like yellow, not green or red, as success and error colors imply respectively. And since it is a confirmation modal, the wording should probably change to something like:

Please confirm the deletion of this album:

To further the usability of the confirmation modal, you can embolden the Confirm button to make it stand out just a bit more. And for those that have color blindness or reading issues, I typically put an icon matching what is being confirmed. In this case, a trash can seems to fit.

When you add all that together, here is an example of what you get:

confirmation modal

Update based on comments about the wording of the buttons ...

I've been thinking about the wording of this for some time now. The comments lean toward using Delete instead of Confirm, but I think there's something better. Since the icon is a trash can and we are talking about getting rid of an album, I think the wording should match that instead.

So, I thought about it and came up with Keep and Trash instead. They both coincide with the question of whether one should delete the album or cancel the action, not to mention the colors still work for color blind users, the emboldened Keep makes it clear what the default action is, and together, the words make it 100% clear on what action one is confirming.

updated confirmation modal

  • 3
    Agreed. Icons are generally used as the information/warning indicator. Commented Jan 14, 2014 at 10:14
  • Talking about icons, I'd rather put a wastebin (say, icon-trash from marcoceppi.github.io/bootstrap-glyphicons, or think Windows/MacOS trashbin) next to Delete and a revert-arrow (e.g. icon-unshare from marcoceppi.github.io/bootstrap-glyphicons, or think MSWord's "Undo") next to Cancel. That way it's more context-specific, and thus less confusing, than a generic "exclamation mark" icon.
    – moonfly
    Commented Jan 16, 2014 at 17:34
  • 8
    IMHO "Delete" is a much better word for the button than "Confirm". That is the action, deleting the item. Commented Mar 27, 2014 at 7:21
  • 1
    @CodeMaverick No, I'm saying the button label "Confirm" is not explicit. Ideally the user should not have to read the text, because often they won't anyway. For example: The user intended to click the Decorate button (OK, that's a stretch) but accidentally clicked the Delete button. A dialog box pops up. The user reads, "Please confirm the yada yada yada" and clicks the Confirm button because yes, they do want to invoke the Decorate function. Hilarity ensues. Commented Jun 3, 2014 at 22:19
  • 1
    I also like this Idea. I like the "Keep" and "Trash" labeling because I have no clue what the button does when i just press "cancel" without reading the other button
    – BlueWizard
    Commented Jun 11, 2015 at 15:32

Users are more likely to think twice before clicking on something that is red. For which one of the two options do you want them to think twice before clicking?
Which one of the two choices will potentially trigger more irreversible events?

Source: http://en.wikipedia.org/wiki/Red#Warning_and_danger

  • 9
    Welcome to the site @Rolf! Do you have any evidence to support your assertion that "Users are more likely to think twice before clicking on something that is red." Commented Jan 12, 2014 at 2:55
  • 9
    @JonW nope, red is associated with danger, so they will think twice. This answer is just correct, not sure why you're bashing it.
    – o0'.
    Commented Jan 12, 2014 at 14:16
  • 21
    JonW: This answer is absolutely correct. Something so trivial requires no evidence! Red is the international colour for representing important alerts (dangers). So, people pay attention to it. Look at the traffic lights! In football, it is a red card that is given for serious fouls, and never a grey card. I recommend that you read: en.wikipedia.org/wiki/Red#Warning_and_danger. Here is a question for you to answer: "Where did you find grey to represent dangers/alerts?" (alert: the state of being watchful for possible danger) Commented Jan 12, 2014 at 15:56
  • 9
    @AlanHaggaiAlavi It is perfectly valid to ask for evidence to back up an assumption. Red is the lowest frequency on the visible light spectrum, so you might argue that red is the most passive color of all, and that the color violet makes more sense to indicate danger. Without good evidence that red is seen as danger worldwide how do we know this answer is not ethnocentric?
    – circuitry
    Commented Jan 12, 2014 at 20:27
  • 10
    @AlanHaggaiAlavi A statement as "Something so trivial requires no evidence" - Is one of the worst things you can ever say. What is trivial? Your opinion of trivial? I have evidence on the opposite. blog.hubspot.com/blog/tabid/6307/bid/20566/… This article is testing red vs green "call to action" - color in a landing page. The red button outperformed the green button by 21% - So, back to the question, do you actually have any evidence to support your trivial argument? If yes, I would gladly read it! :)
    – Velkommen
    Commented Jan 12, 2014 at 21:39

I did a bit of research after reading through your questions and the current answers, and found that there is some evidence to suggest that preference for the color red in humans, like in other nonhuman primates, depends on the whether the context is friendly or hostile (Maier et al., 2009 and follow-up studies).

As summarized in the abstract (emphasis mine):

Three experiments were conducted on color preference using a spontaneous selection paradigm with infant participants.

Experiment 1 demonstrated that participants prefer red over green in a friendly laboratory environment.

Experiment 2 demonstrated that participants’ preference for red varies with the context in which the color is presented: Red is preferred in a hospitable context (following a happy face), but not in a hostile context (following an angry face). The opposite pattern was found for the control color green.

Experiment 3 used the same context manipulation, but a second control color, gray, was added to clearly examine whether context affects preference for red only. As predicted, given a second alternative choice, context-dependent preference for red, but not green or gray, was found. These results represent the first evidence of context moderation in the color preference literature.

(PsycINFO Database Record (c) 2012 APA, all rights reserved)

One wonders if the context of this action - deleting something - would be enough to push it over into 'hostile' territory. My intuition is that it would be if the deletion was accidental (user hits 'delete', realizes they didn't mean to do it, and are being presented with a last chance to save their work), and possibly still so even if it were intentional (user frustrated at having to clear another hurdle in the way of the goal?).

  • 3
    So, would you put a "happy face" or an "angry face" relating to the "delete" button? Commented Jan 13, 2014 at 1:55
  • 4
    I would use an icon of the document dangling over the Great Pit of Carkoon, and a scissor icon (red, of course) for 'delete' and a fishing-reel icon (green) for 'pull back'. But then, I'm a wookie. Commented Jan 21, 2014 at 1:32

You can choose to set a primary and secondary call to action.

Example from LinkedIn:


This provides a single and obvious confirmation action the user can take without the disrupting concern for accessibility, cultural bias and decision confusion which can come from splitting the options by colour alone.

Also, how it is written in the example above is very clear. How the question is can be rephrased leaves no ambiguity:

Are you sure you want to delete this album? YES / Cancel

Also think about the user flow for this. It's not good practice to provide an absolute action without a fail-safe.

provide an undo

Source: What are some alternatives to the phrase "Are you sure you want to XYZ" in confirmation dialogs?

Here is also another take on providing the ability to delete:


Users can make mistakes on confirmation windows. If the user is about to delete something important that they will never get back, it’s important that you make sure users are absolutely certain before they continue. Instead of giving users a confirmation button that they could mistakenly press, give them a text field and ask them to type the word “delete” to confirm. When the user types “delete” in the text field, there is no doubt that they want to delete. There is no accidental pressing of the delete button. There is no regret when the user deletes, because the confirmation text field makes them certain about what they’re going to do before they do it.

Source: http://uxmovement.com/buttons/how-to-make-sure-users-dont-accidentally-delete/


What is the existing standard in the rest of your application? Do you use red buttons to indicate "I want to complete this action" and green ones to mean "cancel this action"? Or is it the other way around?

If it's anything like, well, pretty much every piece of software I've ever seen, then my money's on green for "go ahead and do it" and red for "abort! abort!".

While "red" for "warning" is a fair point, its place is before reaching this stage - make the original "delete" button red. But you're asking here about the confirmation stage, which should always treat "continue" and "cancel" consistently, regardless of what the operation being continued or canceled might be. If red is usually "cancel", but sometimes "continue", then you're just inviting user confusion.

  • 1
    Your last point is, I think, the most important part. Whether a confirmation or an undo feature is involved, the initial button press is what matters most. If the Delete button (pre-confirmation) is large and red and says "Delete" and has an icon indicating deletion, you would think people would not press it by accident very often.
    – Andy
    Commented Jan 15, 2014 at 19:24
  • So true! I can't believe people continue to upvote the dangerous nonsense proposed by JNMNRD instead of this... Commented Jan 18, 2014 at 16:57

My solution for deleting things is a button with a trash icon which opens a little popover. I think this is a good solution because:

  • no disturbing dialog, everyone hates confirmation dialogs!
  • confirmation is required. no accidential clicks
  • user has only to read two words, no annoying question
  • red color indicates that it is really deleted, you can empasize it by adding "irreversible" to delete
  • minimum of mouse and eye movement
  • minimum of space wasted
  • no context switch

screenshot## Heading ##

  • 10
    I don't even read German and it's clear.
    – prototype
    Commented Jan 16, 2015 at 4:35
  • English please.
    – Ravimallya
    Commented Jun 24, 2015 at 9:21
  • 1
    Ho no...and how you will do with mobility. And the most important in mind of every user now trash icon is synonym of delete not synonyms of "are you sure you wante to delete ?" @user645715 I disagree what in pop over distinguish validation from annulation...there is no icon...think about color blindness who see red in grey... Commented Jul 9, 2015 at 17:30
  • to add to what pierre-lebailly 's comment, to me, on a Windows or Mac, you can still get things out of the trash.
    – HPWD
    Commented Nov 9, 2015 at 21:53

Green is usually used in interfaces and places to signify "go", "continue", or "yes". In your case, that's exactly what the user is trying to do. They're continuing with their past action (which was to hit the delete button). Red is seen as a stop, like "stop, I've changed my mind!"

In your case, I would go with what users are used to: green for continue and red for cancel.

  • 1
    Are you sure that green is usually used to signify Go? What country are you referring to when you say this is the case?
    – JonW
    Commented Jan 12, 2014 at 3:53
  • Sorry, should have been a bit more specific. Usually in North America it's seen as go.
    – Mike
    Commented Jan 12, 2014 at 15:31
  • 3
    That's a bit out of context to say. This isn't a case of "Continue-NEXT", it's a matter of "Continue-CONFIRM". In psychology this is known as a "Pattern Break" - breaking a person out of a predetermined pattern of action they may or may not be aware of. They're not "continuing with their past action"; they're confirming that they intended to make that action at all in the first place, because of the degree to which continuing would change things/files/etc.
    – Arman
    Commented Jan 13, 2014 at 17:52

Why do they have to be two different colors? It seems that this is making things more complicated because of cultural differences and other issues that have been brought up (although, I'm not sure of what the audience is for this application or website. So maybe cultural differences, for the most part, are irrelevant if it is a very specific user base for an application).

As someone else mentioned, why not make the primary action button more prominent and the Cancel button less prominent? In iTunes for example, when you delete a music file, the prompt window has a grey button for the Cancel button, and the primary action button is blue. In addition to being blue, the color pulsates to call attention to it.

Also, in your initial example, the button labels seem wordy. You are already asking them "Do you really want to delete this album?" Why not label the buttons simply "No" and "Yes" or "Cancel" and "Delete"?

  • 2
    I'm downvoting this because of your last sentence. Buttons being 'too wordy' is not a negative thing, it's a positive thing. You should name buttons with what they do. A button saying 'yes' doesn't make any sense on its own and requires the user to read the dialog message and the button text and then correlate which button applies to which action. Button labels should be verbs
    – JonW
    Commented Jan 14, 2014 at 23:56
  • 3
    You are correct when you say that "A button saying 'yes' doesn't make any sense on its own", but that isn't what has been presented in the initial post, there was a dialog message. And if we are presuming that nobody should have to read the dialog message, then why include one? I agree with you that the buttons should say what they do, but I do think that wordy buttons can often force people to have to think more than if the button were to include one-word actions after a simple dialog message.
    – Dmacatude
    Commented Jan 15, 2014 at 14:38

Green should always be positive, relating to the "Yes, go ahead" option, so it should be green. The fact that you're deleting something rather than creating it is immaterial.

Red is used to "No, I've changed my mind" or "No, I don't want you to do that", whatever "that" is.

  • 16
    Why should green always be positive?
    – JonW
    Commented Jan 11, 2014 at 23:45
  • 3
    Positively removing something though, it's ambiguous because the thing in question will stop existing, when you proceed (go forward) with the deletion. The red green stuff is particularly backwards in IE browser, where "close this web page" is green. Delete/Cancel above without green is the best solution
    – 111
    Commented Jan 12, 2014 at 2:39
  • 7
    Because green is trees, green is nature. Green means "new" or "fresh", or something positive. Red means blood, violence, fire, and destruction. Red is power.
    – bobobobo
    Commented Jan 12, 2014 at 15:18
  • 9
    @bobobobo This sounds a bit too much like color psychobabble. Red also means a great many other things. Commented Jan 12, 2014 at 16:30
  • 5
    @JessicaYang "Calm" green and "attention!" red are widespread in nature.
    – Ark-kun
    Commented Jan 13, 2014 at 9:46

Buttons are used to submit/send information or take action, not to prompt inaction. The only button should be one that proceeds through the flow. Any other action should be represented by a link. In this context, I would advocate the use of a button color that is not used anywhere else on the site, or which is reserved for only the most serious of actions. I assume this would be red. The point is to force the user out of a passive mental state of clicking buttons of color X in position Y (green, bottom right) and to get them to explicitly ask "what will this do?"


Don't use any colour for such an action. Both actions have equal importance. Maybe the user had accidentally clicked 'Delete', or the user really does want to 'Delete' the Album.

Colour is an unnecessary distraction in such a scenario and doesn't help with the context.

Allow the text on the button labels to confirm the actions: "Cancel", and "Delete Album"

  • It is okay to add color after a good design. But, you are right, the user expects to do this. Commented Jul 17, 2014 at 15:07

@JNMNRD has the best solution.

Normally, the action you want users to take should be placed on the right, and as this is a confirmation message, then the delete action should be placed on the right.

Also, by giving two colors to the different actions, you are in a way giving them the same hierarchy. Whereas if users already made an action to delete, and this is just a confirmation, actions shouldn't compete. This should work only for validation purposes.

That's why leaving the cancel option neutral is the most usable thing as your user will read the instruction an immediately focus on the delete button, but still, if they regret, they will have the chance to cancel.

  • In the context of confirming deletion, is deletion the action you "want" your users to take? More importantly, why should the action you want users to take be placed on the right?
    – Andy
    Commented Jan 15, 2014 at 19:28
  • Yes, in this case, the action that users took to receive this confirmation window, was deleting an album, so you are just confirming the action they just took: delete. Normally on all confirmation messages, dialog windows, overlays, etc. the main action is placed on the bottom right, because the eye happens to be looking there after reading the prompting message. If you have a mac, for example see how when you are going to Shut Down your computer, the shut down action is to the right and cancel to the left. See how this pattern in consistently repeated in dialog windows. Commented Jan 21, 2014 at 19:01
  • Not always. For example, the Windows shut down action has Cancel on the right.
    – Andy
    Commented Jan 21, 2014 at 21:23
  • None of these are a constant. Are common practices, but it's not a law. It always depends on the context. Also, in windows, there doesn't seem to be a common pattern across. But again, these are some insights to inform your decision. Not something you should follow if it doesn't apply to your case. Commented Feb 3, 2014 at 16:06
  • Yes, none are constant, but they are pretty common. As you mentioned earlier, the color is helpful too; perhaps even more so than positioning in cases like the Mac shutdown. In any event, the placement, color, etc. of dialogs should be subject to user testing like everything else. You want the process to be intuitive and have the shortest learning time for the most users.
    – Andy
    Commented Feb 3, 2014 at 17:09

Actually I am very much fond of Github user experience while deleting a project, the color of typography along with the border is changed to red which indicate clearly that something danger is happening.

enter image description here

Github shows popup to make sure that user really want to delete the project or repository.

enter image description here


In areas the read left to right, having the continuation or move forward button on the right, and the go back/abandon button on the left is popular. There are example for and against. Windows in particular is an offender as the Cancel button is on the right, or in whatever position the developer felt like. Red or green both have pros and cons discussed by other great answers. Try putting your continuation button on the right and then experiment with the colors again.

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