by anthony on 10/04/10 at 3:39 pm
Have you ever wondered how users react to where you’ve placed your buttons at the end of your form? How you design your button is one thing, but where you place it is another important thing to think about. When placing form buttons, there are three possible ways. You can place them to the left, right or center at the bottom of your form. Where you place your form buttons could have an impact on how users feel about submitting their information to you.
If your form has multiple pages, it’s best to align your buttons to the right. On multi-page forms, you’ll usually have more than one button. You have a ‘back’ button that takes the user back to their previous page, and a ‘continue’ button that takes the user to the next page. Because multi-page form buttons basically act as pagination, the buttons need to follow the pagination conventions that users are most familiar with. Users expect a button that take users back to a previous page on the left and a button that takes users forward to the next page on the right. This pattern maps to the user’s natural left to right reading direction on a page, and the direction users turn pages when they’re flipping through a book.
On forms with multiple sections, it’s also best to align your buttons to the right. Multiple section forms are often long and consist of many fields grouped together. Aligning your button to the right will present your button as an action that applies to the entire form, not just a single section on the page. If you align your button to the left, it’s easy for users to mistake the button as an action that only applies a single section on your form. Placing your button on the right tells users that the button performs a system-wide action.
Left & Center Alignment
When should you align your button to the left or center? Left aligned buttons work best for single page forms because they’re easier for users to spot when they’re filling out a form. Users scan from left to right so there’s a clear and direct visual path to the button users can’t miss. The relation between the form fields and button are strong because these type of forms are short and simple.
Center aligned buttons are usually not recommended because they don’t display a strong relationship with the form fields. They’re in a neutral position that isn’t aligned with the left or right edges of the form. Without alignment to the edges, it doesn’t flow with the user’s left to right scanning behavior. A center aligned button will look off and out of alignment with form fields. This could turn some users away from filling out your form.
Where you place your form buttons is important to think about. That button is responsible for submitting user information. If it’s not placed properly, users could have trouble completing the form. Where you place your button should map to the user’s natural behavior. This will allow them to complete your form with ease. And it’ll allow you to receive more form submissions.