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.

In our app we use green buttons to signify primary actions (located on the right, but that's a whole different discussion) and grey buttons to denote secondary actions ('Cancel'). For example: Generic confirmation modal: grey / green buttons

The question is: what color to use for confirmation modals where the user will destroy data?

Note: in this example I'm focusing on deletion of data. The same case applies to other actions that have a bigger impact (regardless of whether it has impact on the state of the system or the amount of time it takes to reverse an action). Of course we should add methods to undo actions, explain the results of an action in (micro-)copy, not use modals in the first place, etc., but for now I just want to focus on the color of the button. We seem to have three options:

 

1) Be consistent with generic modals in the app

Delete confirmation modal: grey / green buttons

Drawback: 'Delete' feels too much as a safe action.

 

2) Make it more obvious that primary action is destructive

Delete confirmation modal: grey / red buttons

Drawbacks: 'Delete' may be discouraged too much, let's not forget that the user initiated the delete action before the modal appeared.

 

3) Combine green and red colors

Delete confirmation modal: green / red buttons

Drawbacks: Although it communicates which action is 'safe' and which one is 'unsafe', it may be confusing and slow users down too much.

share|improve this question
9  
Be aware that Green/Red color blindness exists. All buttons will be grey for those ppl. –  ethrbunny Sep 30 '13 at 14:55
    
Good point! We can choose different combinations and/or offer accessibility options. –  Vincent van Scherpenseel Sep 30 '13 at 14:57
    
Using color also indicates a regional / geographical bias. I think you would be better served by having 'are you sure' sorts of questions for your 'destructive' paths. You could have 'don't show me this again' if you wanted. –  ethrbunny Sep 30 '13 at 14:59
4  
@ethrbunny Please note that being red-green colorblind does not mean you can't see red and green; I am red-green colorblind and can see the different colors just fine. The confusion only comes when you closely overlay the two colors, and even then afflicted people like me only have trouble differentiating the hues. There is no such thing as color blindness when only a single color is presented. –  Joshua Barron Sep 30 '13 at 15:01
1  
@ethrbunny Yeah, that's probably a little overzealous. I think you are just fine using red and green - just don't do this: colour-blindness.com/colour-blindness-tests/… –  Joshua Barron Sep 30 '13 at 15:04
show 4 more comments

7 Answers 7

Given that you mentioned yourself that the user has already initiated the action, it is likely that the user will want to confirm the action.

Cancel is not really an action, but rather a dismissal of the modal dialog. Given that, I suggest you strongly de-emphasize the cancel button. If you do, it becomes clear that you do not need the color coding in the first place:

A dialog box with a button "Delete" and a link "Cancel"

It might seem that users are accustomed to link-like buttons only on websites, but that is not true. Windows uses links a lot in its applications:

Windows 7 control panel, where actions are activated using links

share|improve this answer
2  
Either that or make it an action: [Keep item] and [Delete item] –  bfred.it Oct 2 '13 at 0:49
    
Thank you for your suggestion. Considering the fact that my question was about an app instead of a website I'm not very sure about your suggestion to use a link. It's definitely not unheard of, but it's far less common to use that in an app than in a website. –  Vincent van Scherpenseel Oct 6 '13 at 7:42
    
@bfred.it, good suggestion! –  Vincent van Scherpenseel Oct 6 '13 at 7:43
    
@VincentvanScherpenseel I don't think that's a significant concern, see the updated post. –  Denis Oct 6 '13 at 10:08
1  
To be honest, I've also found this very weird about Vista's control panel. –  Vincent van Scherpenseel Oct 7 '13 at 11:32
add comment

If it's a customizable modal window, then I would style Cancel as a plain text-link and style Delete as a button that is red or at least is a color that matches the site branding. The button styling of Delete, regardless of its color, would be instantly distinguishable from the Cancel option. I would place the options fairly close together; I'm not a fan of sibling options being flush against opposite sides of their parent container.

The link that brings up the modal window could be red to better distinguish it from its siblings, assuming that said link is part of some menu.

share|improve this answer
    
Thank you for your input. The button are placed next to each other with about the size of a finger in between them (since this is a tablet app). Good point on styling the modal differently! That could very well, by styling the header of the modal red (or using some icon or different text styling), yet sticking with the generic color scheme for the buttons. –  Vincent van Scherpenseel Oct 6 '13 at 7:51
add comment

Two things I'd like to talk about.

  1. There is too much of action information shown to the user. Eg. When the user clicks "Delete" option system shows a modal with header "Delete item" content that says "Are you sure you want to delete" followed by the action button labeled "Delete". I hope you know what I mean. I'd suggest that you use action buttons labeled "Yes, No" or "Ok, Cancel"

  2. Moving on to the color scheme to follow, for a consistent scheme the user may be used to going over modals casually but if you have to make user stop and think for a while before proceeding you will have to use some visual cue. Either change the primary action button color to something like orange which is neither too intimidating nor too subtle and will catch the users eye, or you can carry on with the same color scheme for consistence and have some warning or alert icon on the modal that can stop the user for a while before blindly clicking the green button.

share|improve this answer
1  
Dialogs must avoid using "OK" and "Cancel" or "Yes" and "No". Use a label so that users can only read the buttons and know what to do. See: Should I use yes, no or ok, cancel on my message box –  Pesikar Oct 2 '13 at 7:36
add comment

A really good point

My approach would be to:

  • Avoid pop-ups in general. If the user gets a pop-up notification, it is only because they should stop a bit and think. If there is no pop-up pollution, they are more likely to read it
  • Instead of pop-ups, for notifications and most of the stuff, use on-page notifications that do not need to be dismissed by clicking
  • I'd leave unnecessary confirmations out. For the example with log-out, I would not use a confirmation, unless it would be particularly cumbersome for a user to log back in.
  • When using pop-ups sparingly, use the same color coding as usually (primary function: Delete = primary color, secondary function = use secondary color).
  • As a general comment, perhaps some other color than green is better for the primary color?
share|improve this answer
    
Thanks for your input! I've cut down on modals as much as possible, but I can't dismiss them everywhere. Also it's worth nothing that this is for a mobile web application and logging out does have a (relatively big) drawback: when the user is without network coverage it won't be possible to login again (app has to authenticate on the server-side). I like your suggestion to go for a non-green primary color, very good point! –  Vincent van Scherpenseel Oct 6 '13 at 7:48
add comment

Applications all over the place tend to rely on a color scheme that has already, to a certain extent, become a standard.

Red means: Oh no! Careful! Beware! ATTENTION!!!

Green means: Safe. Go for it. Ah yes, nothing to worry about.

I don't think it slows a user down, quite the contrary actually. Since universally applications have adopted red and green to be colors of "be aware" and "you're ok," actions are a lot easier to perform.

Don't break a standard, unless you have a really good reason to do it.

Don't re-invent anything unless you have a good reason to. This reason being because people have seen it multiple times everywhere, they already expect a certain thing/color to do/mean something.

If you've noticed apple's red means the same thing:

enter image description here

Twitter bootstrap does the same thing:

enter image description here

People are already accustomed to what is being used universally, so why break the standard? Gray out what ever is secondary. Primary is always colored, and in this case, it's red/green depending on the action (delete will be red, confirm will be blue, accept will be green, etc).

share|improve this answer
add comment

Although the question does ask specifically about the colour I would like to make the following suggestion:

With a critical function such as the one you describe you want to make the function interaction steps different from other interaction steps associated with less destructive actions to avoid a user following a repetitive, almost sub-conscious pattern as they might for common functions.

You could achieve this just by swapping the buttons, or better still by making the delete function differ completely, for example, by activating the delete function before allowing it to be carried out.

Colour alone will not necessarily be sufficient.

share|improve this answer
    
Thanks for your suggestion. Good point, although because I try to limit the use of modals as much as possible there are only a few non-destructive ones (logout is one of them). –  Vincent van Scherpenseel Oct 6 '13 at 7:44
add comment

I would go with a non-ambiguous button name and then be consistent with the colours you are using. "Confirm delete".. or something similar.

share|improve this answer
1  
I concur with Meem... Unfortunately, you chose green as your primary action indicator. Green as discussed has a connotation of "go ahead". (I think) that's why many framework colors like bootstrap chose blue for the primary. No matter, if this works. Destructive actions often make use of a confirmation and this is a good pattern to employ. –  Itumac Sep 30 '13 at 20:52
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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