User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
A common problem, where we have the answer at Norman Nielsen Group article OK-Cancel or Cancel-OK?:
Summary: Should the OK button come before or after the Cancel button? Following platform conventions is more important than suboptimizing an individual dialog box.
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.
I think placing "positive" buttons on right side is better choice since it gives you:
Very important is also visual weight of "positive" and "negative" buttons.
Yes button at the end? I really don't!
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.
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'.
