14

This question already has an answer here:

Consider two buttons:
- OK
- Cancel

Should the positive 'OK' button be placed on the right or left? Is there some rule or convention that needs to be followed in this case. Consider the following image. There's an Approve button and Decline link.
- Should the Approve button be on left or right of Decline?
- Should the 'Decline' option be a button as well or should it be a link?

enter image description here

marked as duplicate by Evil Closet Monkey, Charles Wesley, Code Maverick, Graham Herrli, msp Feb 25 '15 at 7:47

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 6
    Being a developer myself, I find it disturbing when the OK button isn't on the left – Alvaro Feb 24 '15 at 12:55
  • @Alvaro Can you elaborate that please? Why do you prefer it on the left as a developer? – Komal Waseem Feb 24 '15 at 12:57
  • 2
    It's not about being a developer. We are users too and I'm quite used to the confirmation being on the left. I'm just talking from my experience here, so this shouldn't make it past a comment. More than once I found myself about to cancel or confirm something I didn't want to, because the buttons were inverted (Of course, color and icons may revert this influence) – Alvaro Feb 24 '15 at 13:00
11

A common problem, where we have the answer at Norman Nielsen Group article OK-Cancel or Cancel-OK?:

TL;DR

Summary: Should the OK button come before or after the Cancel button? Following platform conventions is more important than suboptimizing an individual dialog box.

The long story

We get countless questions about small details in UI design that don't matter much to the overall user experience. One classic is the order of buttons in dialog boxes:

OK/Cancel

Cancel/OK

Both are reasonable choices, and people can argue for hours about their preferences:

Listing OK first supports the natural reading order in English and other languages that read left-to-right. Many other button sets have a natural progression (say, Yes/No or Previous/Next). You should always list these so that the reading order matches the logical order — in this case, OK/Cancel . Further, assuming users need OK much more frequently than Cancel, it's better to place this option first so that keyboard-driven users who tab to the buttons can get to their preferred choice with one less keystroke. Listing OK last improves the flow, because the dialog box "ends" with its conclusion. Also, as with Previous/Next, you could argue that OK is the choice that moves the user forward, whereas Cancel moves the user back. Thus, OK should be in the same location as Next: on the right.

  • 1
    So what would be the platform convention in the context of a cross-platform web interface? – user56reinstatemonica8 Feb 24 '15 at 12:22
  • The convention, is to determine what platform your using and then arrange the order based on the one in use on said platform. Duh! But that is a nightmare, and i would never advise it from a code maintenance perspective. – Patrick Pease Feb 24 '15 at 16:48
  • So, if someone switches the platform, the usability will suck for him. – Ray Feb 24 '15 at 20:01
  • 1
    In a truly universal app, just provide a setting they can toggle to reverse the button positions. After all, that's mostly just switching to an alternate CSS file. – phyrfox Feb 24 '15 at 21:15
  • 2
    @phyrfox: if you add a setting for everyone and their grandma's pet peeve, you'll be sending away everyone. Adding settings that doesn't matter indicates a failure to design due to indecision or lack of user research. – Lie Ryan Feb 24 '15 at 23:46
2

I think placing "positive" buttons on right side is better choice since it gives you:

  • faster visual flow
  • scanning is easier

Very important is also visual weight of "positive" and "negative" buttons.

  • 1
    good use of the term "visual weight." I feel that is the most essential thing in this question – sova Feb 24 '15 at 19:03
  • Do you like i.imgur.com/awQromy.png with the Yes button at the end? I really don't! – sergiol Aug 19 '16 at 13:52
  • There are 2 more important mistakes here then position of the buttons. 1) Visual weight of "positive" and "negative " button 2) Naming of the button. It would be better to name buttons e.g. "Restore" – matejceh Aug 22 '16 at 6:27
2

Considering your screenshot, as long as buttons for all rows are aligned and all positive buttons appear together in a column, having positive buttons first works best in english and other languages that are read left-to-right.

One logical reason for this would be conformance to Fitt's Law by keeping the positive actions first and closer to rest of the items of the page thereby making it easier to reach to these target actions.

0

In your example, you should first consider how your users will most often be interacting with these buttons.

A user who is interacting with a mouse will likely want the 'Approve' button on the left, where it is closer to the content.

On the other hand, if your users are all interacting with your form via mobile touch screen, putting the 'Approve' button on the right will put it in the most easily reached location.

If your users regularly interact through multiple interfaces, you should not change the button positions based on user device, because that inconsistency is more likely to confuse or frustrate users who use both. You should pick one button order and use that for all interfaces.


If your buttons were navigation buttons on a dialog box, that would be a different concern. As navigation buttons, where 'OK' and 'Cancel' are equivalent to 'Next' and 'Back', respectively, the 'OK' button should be on the right, as most existing interfaces use reading order of left being 'Back' and right being 'Next'.

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