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?

  • 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 '15 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 '15 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 '15 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 '16 at 1:43
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.

  • 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 '15 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 '15 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.

  • 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 '15 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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