17

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?

3
  • 2
    Consistency is key, certainly within pages and preferably between pages, but the former trumps the latter. I've no evidence for this - hence the comment rather than an answer
    – ChrisF
    Mar 20, 2012 at 13:15
  • Could you perhaps make your title a little more decriptive. Perhaps "Placement of buttons in relationship to forms" or something that describes the issue.
    – JGallardo
    May 31, 2013 at 19:44
  • 1
    Does this answer your question? What are the best practices of button alignment? May 24, 2020 at 1:47

2 Answers 2

10

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. enter image description here

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.

enter image description here

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
1
  • +1 for explanining button placement on one column vs two column registration. Mar 21, 2012 at 9:24
5

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.

enter image description here

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.

enter image description here

Good Luck!

4
  • Thanks Benny, this is much of my reasoning for doing what I have done, but was looking for some more insight into it. Mar 20, 2012 at 15:00
  • You're welcome. You can always search for cognitive science where these issues are addressed more thoroughly. And when you do, you are most likely to find Donald Norman and Jacob Nielsen useit.com. Mr. Nielsen have an article "Closeness of Actions and Objects in GUI Design" useit.com/alertbox/action-object-closeness.html which is not exactly what you ask for, but is still worth reading. When it comes to buttons, proximity is important too. Mar 20, 2012 at 15:29
  • @BennySkogberg updated your answer to show an example of facebook's sign up page for different languages,the basic idea was to show the layout can be flipped to reflect how the language reads
    – Mervin
    Mar 21, 2012 at 7:42
  • @MFrank2012 Thanx! Appreciate it! Mar 21, 2012 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.