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?
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.
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
– jnmnrd Jan 12 '14 at 00:20
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.
–
Jan 12 '14 at 01:52
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.
– v.oddou
Jan 14 '14 at 00:51
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?
BTW here's how Springpad does it: http://i44.tinypic.com/28s0heo.jpg
– Konrad Morawski Jan 12 '14 at 13:13
delete red as well, that will make it complete and associate delete button with the word.
– Sergey Telshevsky
Jan 13 '14 at 15:22
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.
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:
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.
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?
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?).
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.
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/
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:
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.
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"?
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.
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"
@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.
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 '14 at 19:01Also, 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 03 '14 at 16:06Actually 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.
Github shows popup to make sure that user really want to delete the project or repository.
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.
Deleteis to put it on the right, associate with people's habit, look from right to left, and give them more time to decide. – twlkyao Jan 12 '14 at 04:43returnkey? – Paul Jan 12 '14 at 12:32Nobigger thanYes, or perhaps reduceYesto 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. – pulsar Jan 13 '14 at 10:11Noon 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 Jan 14 '14 at 00:45Do what the platform owner tells you to do– Ron Jan 16 '14 at 07:47