by anthony on 02/22/11 at 7:54 pm
The submit button is the last thing users see when they fill out your form. If they have trouble finding it or feel uncomfortable clicking it, they could abandon your form. As designers, we want to give users the best form experience possible. That’s why it’s important to align your button to where users can easily see it on different column layouts.
One-Column Form Layout
How you should align your form button depends on the column 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 is to align your form button to where the user’s visual path ends. There are other types of forms like multi-section and multi-page forms that need optimal button placement to work well. Aligning your submit button correctly to your form fields can help users complete your form with speed and comfort.