Forms

Aligning Submit Buttons on Form Column Layouts

The submit button is the last thing users see when they fill out your form. If they have trouble finding it, they could abandon your form, and you could lose that sign up. That’s why it’s important to align your submit button with the user’s eye flow.

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 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 end on the right side of the page. Aligning your button to the right will help the user’s eyes land right on the button when they finish scanning.

The general rule of thumb to is to align your submit button at the end of the user’s visual path. There are other types of forms where optimal button placement is important to consider. How you align your submit button will either make the user’s sign up experience comfortable or awkward. Choose comfortable.


Subscribe to Newsletter

Books

DV-tout

Toolkits

WP-tout
FP-tout
PP-tout

Affiliates

elegant-themes

Article written by anthony

Author and founder of UX Movement. Creating a better digital world for mankind by teaching and evangelizing best practices, standards, and techniques in user experience design.

This Post Has 7 Comments

  1. Robert Hsu Reply

    As usual, simple yet pretty effective observations. Thanks.
    Robert

  2. Mary Reply

    Hi Anthony.
    Do you have any posts about form labels inside text boxes versus outside text boxes?

    Thanks,
    Mary

  3. kjz Reply

    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

  4. Richard Payne Reply

    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

  5. Scott Wasson Reply

    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.

  6. WJ Reply

    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…(?)

Leave a Reply

Your email address will not be published. Required fields are marked *