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.

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

Original suggested button color option

Suggested button color option

share|improve this question

3 Answers 3

up vote 6 down vote accepted

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:

enter image description here

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.

share|improve this answer
    
Thank you for your response and pointing me to the other question surrounding the 'Yes, delete it' post. I read through most of the comments regarding this but is there a reason that you suggest showing Cancel 1st? –  Busycloud Apr 1 at 20:57
    
@Busycloud - Because the default submit button in a form is the first button listed on the page. Putting Cancel in front of Remove User would make accidental form submissions cancel instead of delete. –  Code Maverick Apr 1 at 22:38
    
@Busycloud The cancel and remove user buttons should follow the same principal as the positioning of the next and back buttons. Think of cancel as your "back" action, and the confirmation (remove user) button as your "next" or "continue". –  Franchesca Apr 2 at 7:34

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:

mockup

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.

share|improve this answer

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
---------------
share|improve this answer

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.