Saturday, September 15, 2018

placement - Position of negative/positive buttons



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



Answer



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.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...