3

I'm in the process of putting together a style guide for a web application, in particular, a section about buttons (it's visual weight, position and labelling).

I'm almost there, I've done a lot of research on various articles and blogs, and have come to the decision to place Positive action buttons on the right, and Negative/Neutral buttons on the left.

But I'm not sure how to handle situations where you may have a combination on all three types.

Here's an example.

enter image description here

What is the best method? I'm leaning towards B, for the reasons that the user is less likely to accidentally hit the Negative (Reject) option, when going for the Positive (Approve). Hitting the Neutral (Cancel - which in this contrived example would close a dialog box) by mistake wouldn't be that big of a deal.

However, having such a gap between the Negative action might mean that it is missed. The eyes also have a larger area to scan.

Can somebody please help me out on this?

Improve this question
4
  • I definitely agree with Dan's logic - so I vote for "A". Further, I would make the cancel a different type of button altogether.
    – Fattie
    Oct 22, 2015 at 12:42
  • Thanks Joe. A neutral action wouldn't always be Cancel though, so I wanted to keep consistency and if it's a button, for it to look like a button. What would you suggest?
    – Gareth Lewis
    Oct 22, 2015 at 15:18
  • For me, i would make it a different type of button. For example, the other two could be your "regular" width (say "100"). But the cancel one could be only 50 width. Or, it could be double height (ie, sitting beside a stack of the other two). Consider a car dashboard, it's the norm that wholly different functions have different "categories" of buttons.
    – Fattie
    Oct 22, 2015 at 19:46
  • What is the 'disabled' state for the button? Unless you don't display buttons in a disabled state, I think it might be confused with the neutral action.
    – Michael Lai ♦
    Feb 11, 2016 at 1:43

2 Answers 2

Reset to default
2

Approve and Reject are a corresponding pair of actions, while Cancel is "something different"--the choice to not take any action after all.

Therefore, I would prefer option A or C.

I find B confusing, since it appears to imply Approve and Cancel are closely related, while Reject is not. At a glance, one might think "Cancel" is the opposite of Approve based on the placement and accidentally hit that rather than Reject.

I think a logical arrangement of actions is the most important for avoiding mistakes. As long as the buttons are adequately sized, mentally misreading the options seems a more likely source of error than accidentally hitting the wrong part of the screen.

Improve this answer
2
  • Thanks Dan. I was actually discussing this with a colleague of mine and he mentioned pretty much the same thing in regards to Approve and Reject being a corresponding pair of actions.
    – Gareth Lewis
    Oct 22, 2015 at 12:00
  • I have since come across this article - uxmovement.com/buttons/why-the-ok-button-is-no-longer-okay - which has an example of a dialog box from (by the looks of it) a Mac app. This seems to follow the pattern I had in B. It's definitely not a 'black & white' decision is it? Although I do believe that your reasoning is sound, so I will probably go with A or C positioning like you suggested.
    – Gareth Lewis
    Oct 22, 2015 at 15:23
1

Surely, depends upon context. But I was discussing a similar scenario with a friend today. I suggest, if the situation permits - for example, if its a pop up window a X button at the top, makes it much simpler. Again, if the scenario permits. The intention was to avoid the Cancel button itself, as it function is nothing but get back to what user was doing, without committing any action.

Improve this answer
1
  • For a modal or pop up dialog, I agree. I was trying to come up with a good example where there would be a valid need for a Negative, Neutral and Positive action. Having trouble thinking of a good one though! I don't image many scenarios where this is the case though.
    – Gareth Lewis
    Oct 22, 2015 at 15:16

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.

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