Button Placement

Question

I'm currently developing a website and we have come across a few things on the placement with buttons that we are unsure about.

The website has a booking process and on this process we have right-aligned the buttons at every stage.

On contact forms and enquiry forms we have left-aligned the buttons to tie in with the left-alignment of the fields on the form.

Is it best to have all button alignment on the website aligned in the same way, or is what we have done at the moment a method that should work?

Answer 1

Benny has given a great answer and I agree with what he has to say with regards to the fact that the contact us form is not part of the booking process and there should be no hard focus with regards to right aligning the submit button just to ensure consistency.

However you should ensure that your form layout is such that it allows the reader to quickly scan the contents of the form and fill it out and the call to action button (the submit button) is located at a place which aligns with the form layout

To quote what "How Form Button Alignment Depends on the Layout" has to say on the subject :

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.

However just in case your contact us form has a two column layout for what ever reason,the article quotes:

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.

Here are some more articles for you to read about with regards to button placement on forms:

1. The Best Way to Align Buttons on Different Forms
2. Useful Ideas And Guidelines For Good Web Form Design - Doesn't really provide too many best practices or guidelines but has some good examples
3. Web Form Design Patterns: Sign-Up Forms
4. Why Users Click Right Call to Actions More Than Left Ones

Answer 2

No. The contact form and the booking form is not part of the same process, meaning it's OK to have the button placement differently. The contact form is usually a simple form with limited number of fields to enter, such as Name, Email, Phone and a Text field + the button. The button is often left aligned with the message textbox as seen below. There are variations where the send-button is right-aligned with the message textbox - but, as you say, the vertical alignment with the text is lost.

The booking can be a rather complicated process, with multiple steps such as a wizard. Then it's often the other way around where you right-align the button to give a feeling of turning a page in a book. Thus the buttons in a multi-page form is right-aligned (Note: there are variations here too).

Beware of cultural differences though. Some countries read books right to left where the book-analogy wouldn't work. As always it's recommended to study your target audience use on existing web sites before going into production.

Good Luck!