Why Form Button Alignment Depends on the Layout
by anthony on 02/22/11 at 7:54 pm
Your form button is usually the last thing users see when they fill out your form. If they have trouble finding it or feel uncomfortable clicking it, users could decide to abandon your form. As designers, we want to give users the best form experience possible. The experience starts at the top of the form and ends at bottom with the submit button. When you align your button to where users can easily see it, more users will be able to complete your form successfully.
One-Column Form Layout
How you should align your form button depends on the form layout you choose. If your form uses a one-column layout, your button will be more visible to users if you align it to the left of your text fields. In a one column layout, the user’s eyes primarily move in a vertical direction to fill out the form. When users get to the bottom of your form, they won’t have to move their eyes to the left or right to find your button. They’ll only need to continue in their vertical direction to see and click your form button.
Two Column Form Layout
Another form layout you might use is a two-column layout. When users fill out a form with a two-column layout, their eyes move in a left to right, zig-zag direction. As the user gets to the end of the form, their eyes will usually end on the right side of the page because in the western culture people read from left to right. Aligning your button to the right of your text fields in a two-column form layout will help users land right on the button when they finish scanning the form.
The general rule of thumb to follow is to align your form button to where the user’s visual path ends. There are also other different types of forms besides one and two column layouts. This article, The Best Way to Align Buttons on Different Forms, shows you how to align your buttons for multi-section and multi-page forms. An ideal form experience is one that seamlessly leads users from start to finish. Your form may start strong, but if your submit button isn’t aligned in a place where users can easily see it, it’s not going to finish strong.
Robert Hsu
Feb 22nd, 2011
As usual, simple yet pretty effective observations. Thanks.
Robert
Mary
Feb 23rd, 2011
Hi Anthony.
Do you have any posts about form labels inside text boxes versus outside text boxes?
Thanks,
Mary
anthony
Feb 25th, 2011
I’ll be posting that one next week.
kjz
Feb 23rd, 2011
I would like to suggest the jQuery autobox plugin to achieve the inside label effect used in these forms:
http://plugins.jquery.com/plugin-tags/autobox
Richard Payne
Mar 3rd, 2011
From a UX point of view, labels inside forms could be seen as bad practice, in that if a user clicks or tabs onto a field before they have assessed the text within, they have to then interrupt the flow of their work to click away from the field to see the label contained within.
People may also perceive that fields are already filled in.
Take a look at this article:
http://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-text-boxes-in-web-forms.php
Scott Wasson
Mar 3rd, 2011
I have to agree with Richard Payne. Having the input label in the field as a watermark can be seen as bad practice. The example he describes is true. Also, if the form is already filled with data, as in an edit mode of that form, you have no input label at all just the data or value that’s in the field. And god forbid that field is in say an online tax form where there are random integers (as opposed to an easily identifiable one like “State” or “City” — it’d be a difficult task figuring out what that random integer was without a label.
WJ
Jun 6th, 2011
This is a little thing that people may not thing about it but very interesting! Anyway, i have a question…
For 2-column form, regarding to human zig-zag eye direction, if number of rows is 3 then we should place the button on the bottom left…(?)