Sunday, July 5, 2015

position - Submit Buttons on the Left or the Right?



We have been puzzling over where to put the submit button, on the left or the right. In researching, we noticed that many sites put buttons on the bottom right in dialogue boxes, and on the bottom left in forms.


It makes sense: in a dialogue box it seems to denote finality, being in the endpoint of the window for left–right readers; in a form, the bottom right could be in a different position relative to the rest of the form if the window is resized.


It seems to be a convention, but I don't see anyone talking about this specific phenomenon in the following questions, nor the articles referenced therein:


Should the OK/Cancel buttons be aligned right or centered?


OK/Cancel on left/right?


http://www.lukew.com/resources/articles/psactions.asp


So, is this level of button position optimization worth it if it creates an inconsistency in button placement? Is this a good way to go?



Answer



We decided that in order to meet user expectations, it was best to put the button in the place that users expect to find it in the context of the form or dialogue they are using and with regard to the window size.


Forms tend to be left justified while the browser window can leave a ton of white space to fill up a large monitor (especially in full-screen mode). Since the users' eyes never leave the left portion of the window, we place the button on the bottom left. This is especially important for forms that use the field name above the field, with most fields lying flush left on the form (as opposed to fields to the right of their names).



Small Dialogue & Modal Windows are fixed width and tend to be small. Most contain simple phrases or questions, read right to left: having a button on the bottom right feels like both the most progressive position and the final resting place for the eye. Were the modal window large enough to contain a long form, we would probably follow the first principal for forms.


In the end, our heuristic is this:



  1. Large Windows & Forms get the button on the bottom left.

  2. Small Windows & Dialogues get the button on the bottom right.



Note the buttons on ux.stackexchange.com:





  • Post Your Answer button at the bottom-left of the longer form




  • Add Comment button to the right of a small field







Update 2015-2-26


With mobile-first responsive being the new law of the land, the button placement varies even more based on context and user expectation. Sometimes, it's in the middle, too!



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...