Primary Action Button Colors

Question

There was some debate at my current place of employment regarding the order of primary buttons.

In this case, a user has taken action to remove a user. There is a small call to action that launches the modal shown below.

Originally the primary action color was placed on the 'Cancel' action instead of the Remove action. (See letter A)

QUESTION: Does it make better sense to place the primary color on the Remove User button since that is the main action that is taking place? (See letter B for the intended solution.)

Answer 1

This is very similar to the Should "Yes, delete it" be red, or green? question.

Here is my answer to that.

---

With respect to your particular question, Option B is what makes the most sense, as that is where your eye is naturally drawn to.

That said, I would like to suggest an Option C:

I would switch the order of the buttons so that the default form action is on Cancel button, as you don't want the default action to be the dangerous one. Like I mentioned in my other answer, to further the usability of the confirmation modal, you can embolden the Remove User button to make it stand out just a bit more. For those that have color blindness or reading issues, I typically put an icon matching what is being confirmed. In this case, a user icon seems to fit.

Answer 2

One school of thought is to make the most destructive operation the less obvious option. The reasoning follows that the increased cognitive load required to select the destructive option implies that the user is consciously deciding to do so

So for example, you could do something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Related, giving the user the option to "undo" the action right after they performed it would further protect the user from doing something they might not have intended.

Answer 3

The order and color is less important than consistency. There are those that argue primary to the left, there are others that argue primary to the right.

The bigger concerns, IMHO, are proximity and contrast.

When one of the actions is relatively destructive, I would argue that it shouldn't even look like the primary action. If the primary action is a button, the secondary, destructive one should:

1. Not look like a button
2. Not be in close proximity to the primary action.

Do build off of Charle's recommendation, which handles contrast well, I'd also add increased distance:

--------------    
|   Cancel   |                                X Delete User
--------------

The distance adds a bit of cognitive effort, but that's a good thing in this case. You don't want the user flying through the form, clicking the first button they see, and then realize they took a wrong turn.

Today, the distance also protects accidental taps on a touch device, which is a nice bonus as well.

In your particular example, however, it appears DELETING user is the primary action. So in that case, I think it's less of a concern that they are both buttons and close to each other. That said, you could still use the same visual model and just flip them:

---------------    
| Delete User |                                X Cancel
---------------