22

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.

9
  • 11
    Be aware that Green/Red color blindness exists. All buttons will be grey for those ppl.
    – ethrbunny
    Sep 30, 2013 at 14:55
  • Good point! We can choose different combinations and/or offer accessibility options.
    – user12741
    Sep 30, 2013 at 14:57
  • 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. Sep 30, 2013 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/… Sep 30, 2013 at 15:04
  • 1
    @ethrbunny red/green color-blindness is something to be aware of, but look at traffic lights. No one believes that color blind drivers are a menace to the road just because they can't tell that red means stop. Color is just as important as position.
    – cimmanon
    Sep 30, 2013 at 15:17

7 Answers 7

10

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

8

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

5
  • 2
    Either that or make it an action: [Keep item] and [Delete item]
    – fregante
    Oct 2, 2013 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.
    – user12741
    Oct 6, 2013 at 7:42
  • @bfred.it, good suggestion!
    – user12741
    Oct 6, 2013 at 7:43
  • @VincentvanScherpenseel I don't think that's a significant concern, see the updated post.
    – Denis
    Oct 6, 2013 at 10:08
  • 1
    To be honest, I've also found this very weird about Vista's control panel.
    – user12741
    Oct 7, 2013 at 11:32
4

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.

1
  • 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).
    – user12741
    Oct 6, 2013 at 7:44
1

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

1
  • 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, 2013 at 20:52
0

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?
1
  • 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!
    – user12741
    Oct 6, 2013 at 7:48
0

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.

1
0

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.

1
  • 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.
    – user12741
    Oct 6, 2013 at 7:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.