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?
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:
- Large Windows & Forms get the button on the bottom left.
- 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