Where to Align Buttons on Different Form Layouts

by 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.

Multi-Page Forms

Where to Align Buttons on Different Form Layouts

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.

Multi-Section Forms

Where to Align Buttons on Different Form Layouts

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

Where to Align Buttons on Different Form Layouts

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.

Final Thoughts

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.


Where to Align Buttons on Different Form Layouts Where to Align Buttons on Different Form Layouts

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

29 Responses to “Where to Align Buttons on Different Form Layouts”

  1. Mateus

    Oct 5th, 2010

    I wanted to read this article in portuguese, clicked the translate to portuguese and received a blank page with the following text:
    “Please return to this page in some minutes.”
    In an usability site…
    Do what I say, don’t do what I do…

    • anthony

      Oct 5th, 2010

      Google Translate isn’t working right now because there are too many queries coming from this site.

  2. Russell Bishop

    Oct 5th, 2010

    Very interesting read, this is definitely something to take on board.

    I wonder if the right-aligned button for multiple-page forms is to do with it being akin to ‘turning a page’? With a book (or even a real life on-paper multi-page form) you’d be reaching for the bottom right corner to move onto the next step.

  3. jonathanulco

    Oct 5th, 2010

    The button “back” with another color or the button continue with the link color should be a better efficient.

  4. cmack

    Oct 5th, 2010

    I disagree with your assessment of the left-aligned button for single page forms. I think the Submit button’s functionality / reason for being is sufficiently different from the various text boxes, lablels, etc that it really needs to be separated from those other elements.

    Having the submit right-aligned gives the impression that it is different from the other elements and the extra distance means extra time for any mistakes to register in the user’s mind.

    • anthony

      Oct 5th, 2010

      It’s good that you are trying to be logical, but I think you are failing to see the unique context of single page forms. The context is different than multi-section forms, which means the way you think about it needs to be different.

      Users don’t have issues when the button is aligned left on single page forms because these forms are often short making the button’s association with the form fields strong and clear. In other words, it’s easy for users to see and understand that the buttons and the fields work together as one piece.

      With multi-section forms there are often more elements, more levels and the forms are longer, and because of that, you do need to separate the button to make it clear that it’s function does not correspond to any particular section or form element, but rather the entire form itself.

  5. Isaac Weinhausen

    Oct 5th, 2010

    @Russell Yes! Turning a page is a strong mental model everyone is familiar with.

    Interesting thoughts. I’ve had these discussions at my last two gigs, but wasn’t able to put it as succinct. The point about the submit button acting on multiple sections is especially strong. I would go further and say that a right-aligned button actually cues the user that an action will be performed upon the whole page itself, including all the sections, due to the user’s page-turning mental model.

    Now I’d like to see some testing that backs up these theories. Anyone know of any?

    -isaacw

  6. dillon

    Oct 5th, 2010

    While I see your point about multiple buttons (2 in this case) on multi-page forms. The other option is as a design decision you can make “Continue” the more important and highlight it someway that sets it apart. That should reduce accidentally clicking the unintended button. The other case of being related to form sections can be handled by having spacing that is greater than that between sections thereby disassociating it from any particular section.

  7. Caroline Jarrett

    Oct 6th, 2010

    I’m deeply sceptical about your advice here, and I would like to see your evidence from testing real forms with users.

    Based on my years of observation of users interacting with forms, my advice is to align the main action button (Submit, Next, etc) with the left-hand edge of the input fields, as shown in your “Single page – short” example.

    Any other action buttons then get placed so that they make sense relative to the main action button – but are appropriately diminished in visiblity (or even turned into links) so that the user doesn’t click them by mistake.

    Your “multiple selection form – long” example, where you put a single main action button on the right, isn’t a disaster: if your users can’t find the button where it ought to be, then the next place they’ll look is the bottom right-hand corner of the form.

    The problem arises when you have other buttons to place, as in your first example “mutliple page form – paginated”. In that example, you’ve put the ‘Back’ button really close to the ‘Submit’ button and with exactly the same visual impact. A proportion of users will click the button without reading it, and your arrangement will mess them up. Don’t do this.

    Read my article: http://www.usabilitynews.com/news/article4984.asp which also has a link to Luke W’s useful article on the same topic.

    best
    Caroline

    • anthony

      Oct 6th, 2010

      Caroline, thanks for sharing your thoughts. The problem you’re talking about isn’t that the Back button is next to the Continue button. The problem is that the Continue button doesn’t distinguish itself as the primary action. I agree with you and a lot of others who have mentioned this. To be clear to everyone who brought this up, the Continue button needs to distinguish itself more prominently over the Back button, so that users won’t make the mistake of accidentally clicking the back button. However, the Back and Continue button still should always be together.

      I didn’t talk about this matter in the article because the article focused specifically on button placement, not button priority.

  8. Tobias

    Oct 8th, 2010

    Hi Anthony, thanks for the article. On what base (research, usability-test, study) is it based?
    LukeW has articles about this as well and his suggestions are based on user research in usability-tests…
    If its “just” your own opinion its stil a good read :)
    Regards
    Tobias

    • anthony

      Oct 8th, 2010

      He has some interesting data, but I don’t agree with all his conclusions. Many people have the misconception that just because research is done on something, everything that’s said must be true and valid. That couldn’t be farther from the truth. Many people misinterpret research data all the time. However, nobody ever points it out because they’re afraid to challenge ideas held by research. Research is good for getting data and information. However, it will still always come down to the individual to interpret the data correctly. That means you will still have to think independently, and use your logic and intuition to see the bigger picture and finer details. You have to stay objective mentally because truth doesn’t come on a silver platter. Research and testing gives you data and information, not truth. Truth has and will always be left in the hands of the individual.

    • Markus

      Jan 10th, 2011

      Regarding those who are concerned with research validity – see Fitz Law. So far, it would seem that the things that Anthony suggests are in compliance with Fitz.

      Also, I would like to point out that there is just as much art in software development as there is science. Both art and science give you the flexibility to assume. While science requires reconciliation at some point of your assumptions against reality, both science and research appear to start with the assumptions.

      Zeros of the zeta function – assumption until proven.
      Relativity – assumption until proven.
      ((n*n)+n)/2 – assumption until proven.

      So, what I’m saying in essence is – leave the kid alone. If you like the ideas, use them. If you don’t like the ideas, don’t.

      In fact, I’m getting quite put out by the number of people out there that feel like they have some sort of claim or ownership to the world of software development. Some of us have been writing code longer than many of you have been alive!

      You don’t own anything, so give the kid a break and let him express his ideas. (I made some assumptions in this reply that we may only be able to prove a posteriori – such as the age of anthony and maybe some of the others involved in the thread.)

  9. Bruce

    Oct 28th, 2010

    Anthony the reason we perform research is to avoid assumptions. The foundation of UCD is centered around the (um..) user. As a practitioner, we design as much as we can towards validated behavior – if budgets are restrictive then we absolutely need to seek out relative data that can help inform a design recommendation – there’s a lot of books on the topic. I’m kind of shocked about your take on research and, again, how you generalize. While it’s clear that you understand common perceptions of interface design – you need to realize that you have power to influence new designers by what you write. Dissing the findings from a properly conducted test (thats important) is irresponsible – especially when you can’t back it up with anything else but Jedi mind tricks like “truth doesn’t cone on a silver platter” or “truth is… Left in the hands of the individual” or “use your logic and intuition to see the bigger picture”.

    Cmon – everything we do is based on context. Luke’s research may not fit my current project but something down the road may. Please stop already.

    • anthony

      Oct 28th, 2010

      As much I’d like to believe, using your brain to think objectively is not a Jedi mind trick. :) It’s clear that you believe that it’s humanly impossible for one to reach objective ideas without research. This is 100% false and the history of science proves it.

      Einstein reached his scientific conclusions through thought experiments involving his logic, intuition, experience and knowledge. He was a great thinker. He only did research to verify his conclusions after the fact, never before. Newton was the same way. Although, he was wrong about some things, thinking objectively doesn’t mean you are always right. But research is the same way. Research isn’t always right either. In fact, most published research is almost always false: http://www.ncbi.nlm.nih.gov/pmc/articles/PMC1182327/

      So, your claim that one cannot reach objective ideas without research is absolutely absurd and I will not tolerate it at UX Movement. If you think I made a mistake with any of my ideas and want to prove me wrong with your own research that you have done, I’d be happy to look at it. Otherwise, this discussion is over.

    • gazza

      Feb 3rd, 2011

      Bruce, research is not the absolute you present it as. It’s interpretation – any researcher will tell you that. Further, you should be using *trends* and the heuristics that evolve from research, not individual research findings – the former increases the likelihood of getting it right, the latter increases the likelihood of getting it wrong.

  10. pepe

    Feb 3rd, 2011

    What do you do if you have the 3 forms in the same application? Because we want to be consistent across the forms.
    Thanks.

    • Patty

      Jan 4th, 2012

      Just came across this article and comment thread. I had the same question regarding consistency across different types of forms of the same site.

    • Anna

      Jul 5th, 2012

      Hi I had a similar problem. I have to design multiple pages with different forms. Sometimes it’s a page with a simple form (then a button under the form seems the correct way to go), then I have a multiple section form with buttons that lie next to certain fields (functional buttons that influence only that field) and I need general buttons for the completion of the whole form (makes sense to put the general buttons under and to the right), and then I have forms that are part of a flow (buttons on left and right that navigate through the flow). The problem this creates is inconsistency. Where does a user or even a person who is building the page know where to put the buttons? I need to create guidelines and am having a lot of trouble deciding on what to go with for the sake of consistency. Should I just create different looking buttons depending on what they do? Help! :)

  11. Gonzalo

    Feb 25th, 2011

    Congratulations for the article!

    I have a situation I hope you will help me to solve:

    It’s a customization process of a avatar that consist of filling a multiple page form. In each page the user can go forward (Next button) or back (Back button). At this point, I think the best option is to put the buttons in the lower right corner. The Next button on the right and the Back button on the left. http://screencast.com/t/wxaMaOskO

    The challenge is where should I place the Save button. If the Save button was only in the final step, it seems clear that it should be instead of the Next button. The problem is that the user can save (to complete the process) in each of the 5 steps! In this case, where should I place the save button?

    We tried to place the button under the image, but we realized that many users do not see the button, so that they do not know the final step further.

    What do you think? Can someone help me make a decision?

    • anthony

      Feb 25th, 2011

      Interesting problem. To solve it, you’ll want to first look at what kind of form we’re dealing with. Then you’ll want to distinguish which buttons are primary and secondary.

      We’re dealing with a multi-page form here. There are three buttons – Previous, Next and Save. The primary buttons for successful task completion are Next and Save. Thus, the secondary button is Previous.

      Now we want to design and arrange these buttons according to how users can best use them to successfully complete their task. The buttons users will need the most to complete their task are Next and Save. We want to group these buttons together so that they’re both easy to reach and easy to see. Thus, the primary buttons go on the right. The Save button is the one that should be closest to the right corner because it’s the final action that affects the form globally. We want put the secondary button away from the primary buttons because it’s not as important and won’t be used as frequently. Thus, the Previous button goes on the left.

      Finally, we want to design these buttons so that users can read and recognize them better. To do this, you’ll want to put arrows on the Next and Previous buttons to show pagination. And you’ll want to put a color on the Save button to show that it’s the final and most important action.

      • Gonzalo

        Feb 28th, 2011

        Thanks for the reply!

        I agree with you. I think it will be something like this: http://screencast.com/t/qlFAWydc9i

        I will keep you informed.

        Thanks again.

        • anthony

          Feb 28th, 2011

          I think there should be more space between the previous and next button. This shows the primary buttons’ relationship better. When you space them all equally it looks like they all have equal weight, which is not the case. Previous is secondary.

          • anthony

            Mar 1st, 2011

            I’d go with the left one. Combining links and buttons can throw users off. Plus, it’s pagination so they shouldn’t vary in appearance that much.

        • Gonzalo

          Mar 3rd, 2011

          I totally agree. I think combining links and buttons could be good idea if it is a simple form where the user normaly clicks “Save” and almost never “Cancel”.

          Thank you very much for your advisory.

  12. Lee Theobald

    Mar 20th, 2012

    I personally would prefer never to see a button anywhere but inline with the forms controls.

    I’m partially sighted and have a low peripheral vision (I believe I’ve lost about 90% of my field of vision). When I’m in front of a screen, I basically see what I am looking at clearly but as for the items all around it, all bets are off. Due to this I can often miss buttons. I will be filling out a form, scrolling down with my eyes as I go. When I get to the bottom of the form, I’ll automatically look under the form fields. If the buttons aren’t there, I have to go searching for them and for someone with poor eyesight, this can be tricky.

    The forms you posted did have one huge help though – the line at the bottom of the form. When the buttons weren’t where I expected them, I did the most logical thing and followed the line with my eyes & voila – buttons.

    For me that’s the clincher. Where you place you buttons is up to you but don’t assume people will expect them in the same place as you. A simple visual indicator (like a line in this case) from the form fields to the buttons can be a huge help for someone with low vision like me.

    • Ian Hamilton

      Dec 12th, 2013

      Yes, what Lee said. We recently did some usability testing that included a number of disabled participants, on a large corporate customer facing site. Right aligned buttons caused huge problems for people with mild-moderate vision impairment, in one instance preventing the customer from being able to complete the form at all.

      1. Differing designer opinions on which way is theoretically marginally better

      2. Some research suggesting that together is marginally better, and suggesting that together and left aligned might be very marginally better again

      3. Anecdotal evidence of serious problems for people with vision impairments (including screen magnifier users), sometimes resulting in complete exclusion/abandonment

      Point 3 makes it completely cut and dry, case closed. The law varies from country to country, but in the UK at least, under the Equalities Act (which applies to all websites) it is illegal to put people with disabilities at a disadvantage when there’s a reasonable alternative… and difference of opinions over marginal usability differences do not prevent it from being a reasonable alternative.

Leave a Comment