Color of destructive primary button

Question

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:

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

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

 

2) Make it more obvious that primary action is destructive

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

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

Answer 1

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:

Twitter bootstrap does the same thing:

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

Answer 2

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:

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:

Answer 3

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.

Answer 4

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

Answer 5

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?

Answer 6

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.

Answer 7

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.