Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

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?

share|improve this question
159  
Neither, if you're red-green color blind like 10% of men. –  Roddy of the Frozen Peas Jan 12 at 5:31
26  
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 Jan 12 at 12:28
65  
@RoddyoftheFrozenPeas (1) while some degrees of color blindness are quite common, thinking that 10% of men are red/green color blind is totally insane, (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'm quite surprised and worried that your horribly wrong comment managed to raise 4 votes... –  Lohoris Jan 12 at 14:14
10  
@wjl colorblind != red/green colorblind. –  Lohoris Jan 12 at 17:56
14  
@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 Jan 13 at 0:06

16 Answers 16

up vote 1033 down vote accepted

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.

share|improve this answer
20  
Great answer! Any particular reason to reverse the position of "Delete" button? –  Diéssica Jan 12 at 0:10
52  
@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 Jan 12 at 0:21
3  
@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 Jan 12 at 0:24
9  
"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 Jan 12 at 16:12
16  
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. –  T.J. Crowder Jan 12 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?

Delete

share|improve this answer
47  
What if I am chinese? Red means different things for non-westerners. And for colourblind people. –  JonW Jan 12 at 3:50
47  
@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 Jan 12 at 3:58
85  
Nonetheless it is still the ISO standard associated with the concept of danger. Stop signs are still red in China. –  circuitry Jan 12 at 4:14
34  
@DaveSherohman honestly, I don't believe you. –  Lohoris Jan 12 at 14:54
32  
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. –  Steve Jessop Jan 13 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.

share|improve this answer
59  
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. –  Jessica Yang Jan 12 at 22:04
15  
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. –  Graham Wager Jan 12 at 22:10
14  
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é Jan 13 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 Jan 13 at 18:38
9  
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 Jan 13 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 ...

Context

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

share|improve this answer
2  
Agreed. Icons are generally used as the information/warning indicator. –  Salman A Jan 14 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 Jan 16 at 17:34
    
@moonfly - Yea that would work for this specific example for sure! –  Code Maverick Jan 16 at 19:27
5  
IMHO "Delete" is a much better word for the button than "Confirm". That is the action, deleting the item. –  Asmo Soinio Mar 27 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. –  Bennett McElwee Jun 3 at 22:19

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

share|improve this answer

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

8  
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." –  3nafish Jan 12 at 2:55
5  
@JonW nope, red is associated with danger, so they will think twice. This answer is just correct, not sure why you're bashing it. –  Lohoris Jan 12 at 14:16
16  
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) –  Alan Haggai Alavi Jan 12 at 15:56
7  
@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 Jan 12 at 20:27
8  
@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! :) –  Bluewater Jan 12 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?).

share|improve this answer
3  
So, would you put a "happy face" or an "angry face" relating to the "delete" button? –  Kevin Fegan Jan 13 at 1:55
1  
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. –  David Bullock Jan 21 at 1:32

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 cancelled might be. If red is usually "cancel", but sometimes "continue", then you're just inviting user confusion.

share|improve this answer
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 Jan 15 at 19:24
    
So true! I can't believe people continue to upvote the dangerous nonsense proposed by JNMNRD instead of this... –  leftaroundabout Jan 18 at 16:57

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

Example from LinkedIn:

example

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:

example

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/

share|improve this answer

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.

share|improve this answer
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 Jan 12 at 3:53
    
Sorry, should have been a bit more specific. Usually in North America it's seen as go. –  Mike Mersereau Jan 12 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 Jan 13 at 17:52

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.

share|improve this answer

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

12  
Why should green always be positive? –  JonW Jan 11 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 –  glyph Jan 12 at 2:39
6  
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 Jan 12 at 15:18
6  
@bobobobo This sounds a bit too much like color psychobabble. Red also means a great many other things. –  Jessica Yang Jan 12 at 16:30
4  
@JessicaYang "Calm" green and "attention!" red are widespread in nature. –  Ark-kun Jan 13 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 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?"

share|improve this answer

Why do they have to be two different colors? It seems that 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 are for the most part 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" ?

share|improve this answer
1  
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 Jan 14 at 23:56
2  
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 Jan 15 at 14:38

Don't use any colour for such actions.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 scenario and doesn't help with the context.

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

share|improve this answer
    
It is okay to add color after a good design. But, you are right, the user expects to do this. –  please delete me Jul 17 at 15:07

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

share|improve this answer

@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, then 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.

share|improve this answer
    
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 Jan 15 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. –  Miguel Fernandez Jan 21 at 19:01
    
Not always. For example, the Windows shut down action has Cancel on the right. –  Andy Jan 21 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. –  Miguel Fernandez Feb 3 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 Feb 3 at 17:09

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.

share|improve this answer

protected by JonW Jan 12 at 3:50

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

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.