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..
Before deleting an album, the user is asked to confirm the action.
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.
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
@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.
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.
@v.oddou Who wants to read all choices?? I just hit the green button if it's a confirmation and be done with it.
@AndreiD: you must be a very stressed person to stop at the first choice that you find ok without looking at the rest. http://www.fastcodesign.com/1664046/design-basics-flow-is-why-ok-buttons-are-always-on-the-right
@v.oddou So why are the most important items in menu's at the top then? And won't this scan direction different in cultures where they read right to left?
Personally don't rely on colors, it adds an extra layer of complexity. I prefer to stick with the OK (on the left), Cancel (on the right) convention.
PLEASE PLEASE PLEASE TELL US THE PLATFORM!! If this is for certain mobiles or Mac then I agree with @JNMNRD (CANCEL/OK), but if it is a Windows app then most (all?) follow the OK/CANCEL style. `Do what the platform owner tells you to do`
it's hard to choose when you only have 2 choices, I suggest to use the same color for both buttons but not green or red, grey maybe a good choice
I suggest you to keep "Yes, Delete it" green and "No, Keep it" red. Since for any question the positive answer according to the question should be in green and negative should be in red.
If deleting an item is a positive thing, than it should be green, otherwise it should be red. E.g. For example, deleting duplicate entry is a positive thing, so it should be green. If deleting an item might have bad implications, than 'No' should be green.
How necessary is it to have the question "Are you sure you want to delete this album?" to begin with? Why not simply have two buttons that say Yes, delete it. and No. Then, the colors become trivial and unlikely to fool as there is literally nothing distracting the reader from actually reading the buttons, assuming they are literate in the language of your choice and not basing their decisions on colors.
@Jeremy: According to some source I googled, the red/green color confusion occurring frequently in males further splits relatively evenly into two categories: One where the green receptors are missing and the more impairing one where the red receptors are missing (more impairing because the latter apparently actually narrows the visible range of light - something that interestingly doesn't happen in the exceedingly rare case of missing blue receptors at the other end of the spectrum). Which type are you?
Keep it simple. There is no need for a new kind of user interface.There are many thousands of applications that ask the user if he really wants to delete a selectd file. So an "OK" button for proceeding and a "cancel"button to cancel the action. No different colors, sizes or shapes or sounds when pressing the button. Why bother the user with learning a new user interface?
Sorry, I'm a bit late here, but I'm not sure why this answer gets so many upvotes (perhaps the all time highest?)? While it poses a relevant question to many of us here, it doesn't really "show research efforts", a primary criterion required for a upvote. It is arguably "useful and clear", but to gain this many votes is different. Can someone shed some lights for me please? Sorry the OP, I really don't mean to offend, just out of curiosity.
If you have a question like this, your users might have the same question. As such, i would drop the idea of adding those colors. Why add confusion?
Everyone hates confirmation dialogs and questions. A user want to do things with his computer and not to answer questions!
I would say the *No* has no color but *Delete* is red. It would be even cooler if the red has like warning tape like stripes at the top and bottom because then it's 100% clear what what is because warning tape looks like danger. You should always keep in mind that the person looking at it might not know the language or just doesn't want to read
I respectfully disagree with roddy of the Frozen Peas; For color-blind people, I'd suspect it is more of a positioning you'd need to be more concerned with but I also think color-blind people may have it a _little_ easier as a result since they would not have the color to influence their click behavior - instead they have two factors (wording and position) where as non-color blinded people have three factors to influence their click decision.
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.
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.
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]" ?
@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.
Can you explain why you're still using red for the Delete button, if all it needs to be is more prominent than Cancel?
I always assume what I want to do is the last button. Like this answer. Cancel is always on the left and the Submit/Delete/Next is on the right.
@T.J.Crowder: You were on the right track about `first thing they find when scanning`. however, have you EVER clicked a button because it was good enough for you the first time you read it, without even looking at the other options ? A better answer that continuates your train of thought ends up actually saying the opposite conclusion, the button of the most common final choice should be on the RIGHT, because it is when you are finished reading all your options, thus no need to scan back to your best option which was on the left.
One issue I've occasionally had with buttons labeled "Cancel" is when the action you're confirming is a cancellation, e.g. removing an event from a scheduling system. In that case, does "cancel" confirm that you want to cancel the event, or does it cancel the action of removing the event?
@Barmar Given that the user is already aware of where they are and that this is a CMS in which they are managing their albums I don't think they'll really associate "Cancel" with canceling an event per se. The question the alert states is "Are you sure you want to delete this album?". Not "Do you want to Cancel this event?" where in that case, there's a whole conundrum there :P
@JNMNRD Yes, the trickiness comes from the double negative issue. Saying 'No, keep it' is wrong because it's negative wording for a positive action (not deleting the album.) Cancel is straight-forward and positive - let's cancel the delete process. Saying Delete is also straight-forward and positive - there is no ambiguity there. The red color is reminding the user it is a dangerous action and therefore less likely to click hastily. It forces them to pay attention to the "Delete" text.
@JNMNRD Therefore, if I may make a suggestion, you should edit into your answer that green has no place in an action like deleting something. The colors should reinforce the actions, not be used to differentiate two actions. You should just as easily make the cancel button white (as a counter to the "muted" problem. But white is obnoxious, so there's that.)
I really like this approach by @JNMNRD (Delete=red, Cancel-grey), but some food for further thought: The ambiguity here is caused by the fact that the positive answer to the question above the buttons leads to a dangerous action. Is there a way to rephrase the text above the buttons so that it's no longer the case? Something like: "You are about to delete the album" (note: no question, nothing to say "yes" to, less ambiguity - I know, not ideal, but less confusing). Or "Deleting album. Undo?" or some other question where "yes" is safer than "no".
I strongly disagree with this answer. Deleting _on purpose_ is not perceived as something dangerous at all, so in the normal use case you won't associate it with red; thus the red button will mainly cause unnecessary alarm. When the user did _not_ really intend to delete, they'll think "heck no, you're right, stop it!" and thus more likely go for "stop sign, danger" red, with disastrous consequences.
"Make the "Cancel" button less prominent." No! Bad, bad idea. Making one button less prominent makes it look *disabled*. I noticed a program or two that did that and i reported a bug before realized it wasn't disabled.
This solution is surely a bad one if you expect non-English mothertongues to use your application. For example in Italian *cancellare* means *to delete* so at a first glance what an Italian reads in those button is: *delete* -- *delete*. Only with a bit more thought he gets that *cancel* actually means *abort the operation* (assuming he does indeed know some English, which isn't obvious). Don't forget to localize your app to avoid this kind of errors [in that case the Italian term for *cancel* would be *annulla*]
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.
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?
What if I am chinese? Red means different things for non-westerners. And for colourblind people.
@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.
@JonW red-green blindness won't prevent you from seeing red. What does red signify in Chinese that's in opposition to "danger"?
@ashes999 In Chinese culture red can mean: good fortune, joy, good luck, happiness, communism, etc. (http://en.wikipedia.org/wiki/Color_in_Chinese_culture#Red) (citations needed)
Nonetheless it is still the ISO standard associated with the concept of danger. Stop signs are still red in China.
No, if I saw that out of context, I would have no idea which was the "delete" button. I would probably default to assuming that the grey one was "go ahead and delete it" and red was "cancel", mostly because of years of seeing "OK"/"Cancel" dialogs - and I would be wrong.
If I saw them without words, I'd be more likely to guess that red means "delete", and if I got it wrong, then it would be more likely because of the position, not the color (like Dave, I'm used to Windows "ok / cancel" convention as opposed to Apple's "cancel / ok"). BTW here's how Springpad does it: http://i44.tinypic.com/28s0heo.jpg
@ashes999 tangential (but important) fun fact: in China, stock market gains are red and losses are green. Very confusing for people who aren't used to it!
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.
@Lohoris, when/if you are in a setting were you test an application with a regular user, and the user give you a response. Would you ever think of their answer as "I don't believe you"? - Even though you disagree and feel that their answer is irrelevant (no answers are irrelevant btw.) - You have to take _all_ the users behavior into consideration...
@Bluewater we are _not_ "in a setting were you test an application with a regular user", though.
I see logic in your answer, but I suggest coloring the word `delete` red as well, that will make it complete and associate delete button with the word.
most color blinds will be able to distinguish red from grey easily when the widgets have such a large size. again, color blindness is a just a word, the real problem is a lack of cones which diminishes resolution of color perception. it causes problems only in noisy environments (high frequencies), this is a very low frequency example and only the most severe color blind will have an issue here.
@Jonw I don't think you know what colour-blindess is then. (It does not mean you cannot see colours). In most cases, it only causes a very minor palette shift, but in no way impacts your ability to distinguish the main colours (with some very rare exceptions). In fact many colour-blind people can spot subtle colour differences in certain colours which non-colour-blind people cannot see, as emphasised on the standard Ishihara test.
@NickG: I actually know quite a lot about colour blindness, particularly in the web accessibility perspective. You're right, being colourblind doesn't mean you can't see colour, but that (in the simplest sense) you may have difficulty distinguishing one from another. Colour contrast is one of the biggest factors here. So for example; the two unlabeled buttons in the image above (with red and grey buttons) do not have sufficient contrast between the colours so would be hard to distinguish between for some users.
@JonW Typically this would difficulty in distinguishing one shade of orange (and it usually is Orange) from another very very similar orange. Very few colour-blind people would not be able to tell the difference between orange and grey. There is only one type of colour-blindness which would make distinguishing between red and grey difficult but this is extremely rare (< 0.0001%). As the buttons are clearly labelled with text, there is no reason to compromise the look of a UI with garish colours for the sake :)
@JonW Bear in mind we're colouring the buttons to help the 98% of people who *can* distinguish colours - not for an accessibility reason (where it provides almost no benefit). Those with a significant colour problem will be more used to scanning the text and will be better at this than non-colour-blind people anyway. I am colour-blind myself.
An admittedly pedantic comment: the Bootstrap *default* color scheme assigns green to success, red to error, yellow to warning, etc. The color scheme is configurable (see http://getbootstrap.com/customize/#variables-form-states).
For better accessibility use large bootstrap glyphs or other icons in addition to text & color: e.g. glyphicon-trash for "Delete", glyphicon-step-backward or some other "undo" symbol for "Cancel". Just use this undo/delete symbols consistently in your app.
I was confused by the example. I thought the red button meant don't do this action. I read it as "STOP".
@NeilMcGuigan Ooh, good thinking. We also shouldn't use words, because that would be discriminating against illiterate people.
This answer poses a good question but how do I know if my assumption was the correct one? Just saying...
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:
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.
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.
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.
Indeed: Never use a warning when you mean undo (http://alistapart.com/article/neveruseawarning). People simply don't read the message anyway, so why bother with it?
@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.
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.
@Danqing - Does GMail do this automatically now? I have had to add a plugin to add the "Undo" sending of an email. I don't think it is part of GMail.
@1.21gigawatts I believe that plugin (or rather, an "experiment feature"), is also developed by the gmail team. It's just that for some reason it's not default to On.
Strangely enough, this is something that Sharepoint gets right. Having a recycling bin for web stuff is pretty handy.
@JessicaYang If you enable keyboard shortcuts in Gmail, you can push **z** to undo instead of scrambling with the mouse.
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:
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.
Talking about icons, I'd rather put a wastebin (say, icon-trash from http://marcoceppi.github.io/bootstrap-glyphicons/, or think Windows/MacOS trashbin) next to Delete and a revert-arrow (e.g. icon-unshare from http://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.
IMHO "Delete" is a much better word for the button than "Confirm". That is the action, deleting the item.
@AsmoSoinio - I have to disagree with you. This is the confirmation modal after already clicking a delete button. So the action here is confirming that what you already did was accurate.
@CodeMaverick The whole point of a confirm dialog is to allow for the case where the user mistakenly clicked the Delete button. The user may literally not know what they are doing. That's why we must be explicit by using "Delete" rather than "Confirm".
@BennettMcElwee - So you are saying that the statement of *"Please **confirm** the **deletion** of this album:"* is not explicit?
@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.
@BennettMcElwee - I can see it either way: **Confirm** or **Delete**. However, for this specific case where the user has clicked the Delete button prompting the confirmation dialog, the statement of *"Please confirm the **deletion** of this album"* includes the word delete and not only that, but you have the icon of the trash can to further notify you of the action of the confirmation. I think Confirm fits better, but that's just my opinion.
@CodeMaverick When comprehension is important, I prefer to be terse. "Delete this album? [Delete] [Cancel]" is shorter and clearer than "Please confirm the deletion of this album: [Confirm] [Cancel]". You could always test to find out which works better.
@BennettMcElwee - Yea, you definitely have a valid point there. With both being correct, usability testing would be the best way to figure out what works for the intended target audience. I agree.
I voted for this answer, because of the looks. I do agree that for a confirmation, the 'confirm' button should be the obvious choice. No red and green, but a clear "Do this" action (for which yellow is okay, but green or even white or any other contrasting color will do) and a less obvious "No! I misclicked/changed my mind" escape. I'm not so sure about the text. ...
.. The buttons could say OK/Cancel, or Delete/Cancel, and the caption text could have more emphasis on the action of "deleting the album" than "confirming the delete", but all that is secondary. Since, as a user, I was already expecting this confirmation dialog, and the button I have to press is perfectly clear. Probably, I won't even read any of this text.
@GolezTrol - I've updated the answer with what I hope everyone agrees is a much better choice of words.
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?
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."
Red draws your attention more than grey, so that means people are *more* likely to press the red than the grey button, surely?
@JonW nope, red is associated with danger, so they will think twice. This answer is just correct, not sure why you're bashing it.
**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: http://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)
@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?
@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. http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx 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! :)
**circuitry**, **Bluewater**: Did you read the specific section in Wikipedia that I shared the link to? It clearly sums everything up. In the current context ("Do you really want to delete this album?") it is evident that there is going to be destruction of data if the 'Delete' button is pressed. The user has to be alert. Red is the best colour for this. It signifies **danger**. The user thinks twice.
**Bluewater**: The *evidence* that you shared proves my point again. Red (instead of green) **caught the attention**. When one is **alert**, one thinks. That is what is relevant in the current context. The 'Delete' button has to make the user think.
@AlanHaiiaiAlavi If a red makes the user think twice, why did the users in the example push the red button more often than a green button? - Your wikipedia-article states: "Several studies have indicated that red carries the strongest reaction of all the colors, with the level of reaction decreasing gradually with the colors orange, yellow, and white, respectively." - If you are working with saws or dangerous machinery, I see how an "emergency stop button" need to be pushed fast - and thus need a strong or quick reaction.
@Bluewater an "emergency stop" is, again, something associated with danger, so it's normal it's red.
@Bluewater: It is worth noting that an emergency stop button is the *last* button that you should hessitate to hit if the shit hits the fan. Far better to press it 100 times too often, than once when it should have been and somebody loses a limb... A Delete confirmation button is exactly the opposite. So it seems weird to use the same signal color for boh.
@André: you make an amazing point. And I also always thought through my years of industrial engineering studies that we never touched those emergency buttons, and when the time come we will never think of them. This is what happened to the train driver that killed 60 in Paris Gare de Lyon, he forgot he had electrical brakes because he never used them.
@Bluewater I can post something on a blog that says to the contrary. That doesn't make it "evidence". Sometimes common sense is just common sense. Red is bad. Green is good. This is practically universal and is heavily embedded in our psychology.
@Cypher But it's not universal, red means good fortune and joy in Chinese culture.
@MattRockwell Obviously some context is required. If this application is targeted at a Chinese web audience, and that target audience is used to red meaning "proceed", and green meaning "cancel", then assign your colors as such. However, it's all about context. In this context, I don't see how Chinese culture has anything to do with the question.
Red elicits the most reaction (as someone just said in the comments - with a source). If the user wants to click delete, he will have to look at the button first to bring the cursor on it. If the button has a red background, I believe it will raise the chances that he reads what's written, since I associate reaction with attention (I don't think that needs much proving, but if someone feels so, I don't think I can be bothered to reaseach it, frankly), therefore if it's red, there is a higher chance that he would read it, or at least give it more attention then if it was gray before clicking.
PS: attention is really what you want, when you are triggering a confirmation dialog. Red elicits attention. You want to make sure the the user sees the red to get his attention, before clicking on Delete. The best way to make sure that he sees the color red before pressing delete, is to put it under "Delete". You just want to attract the user's attention on what he's doing (deleting an image), to make sure that he's making a conscious action, not on what he's not doing, or his alternatives!
@AlanHaggaiAlavi While I agree with the premise of this answer, I have to disagree with your assertion that "Something so trivial requires no evidence." There have always been things throughout history that have been "so trivial" that when evidence was presented to the contrary, people refused to be accept it. Round earth, galactic time lines, evolution, etc. Every assertion no matter how trivial must withstand the rigors of the scientific method, and the analysis of supporting evidence is fundamental to that.
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?).
So, would you put a "happy face" or an "angry face" relating to the "delete" button?
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.
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.
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
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.
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
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...
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.
Are you sure that green is usually used to signify Go? What country are you referring to when you say this is the case?
Sorry, should have been a bit more specific. Usually in North America it's seen as go.
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.