Where to place buttons in forms, research
The issue of button placement in forms is often overlooked, with priority given to the aesthetic aspect.
But the placement of buttons can affect the form, and the form can affect the user experience. That s why it s important to get it right.
This is more complicated than it sounds, because it depends both on the buttons themselves and on the form in question.
A holistic analysis of the various forms is needed. Otherwise, we might place the same button in different places, which would be inconsistent and confusing.
In this article, I will explain where to best position buttons in different shapes based on research and best practice.
Align the main button to the left of the input fields
In an article on eye tracking research, Luke Wroblewski argues that the main button should be aligned to the left of the input field:
Show a clear path to completion. Aligning input fields and actions on the vertical axis clearly shows how to fill out forms. “
This layout also helps Magnifier users see the button without having to move.
Place the back button above the form
Some forms or questionnaires span multiple pages, and people may want to come back to check that they were filled out correctly or change their answers.
Unfortunately, some users do not trust the browser s “Back” button. This is because they have previously encountered poorly designed forms where data is lost when the Back button is pressed. Therefore, you need to provide a return button for a specific form.
Research by Mick Cooper, Reg Baker, and Joan Mehling shows that placing the Back button to the right of the primary button is confusing, so it should be either left or bottom.
Positioning it at the bottom is preferable because it preserves the sequence so that users using the keyboard will be able to click on it directly from the last field.
But their research did not consider placing the back button at the top of the page.
Joe Lanman, a designer at the Government Digital Service, has placed a back button at the top of the Register To Vote digital service. This is now the standard approach for all UK government service sites.
Joe appreciates this placement of the back button because:
- in the same place in most browsers there is a back button
- it will be needed if the user wants to check what he just entered
- it is probably not required when the user fills out the form – if he filled out the form and clicked back, he will lose the entered data
This approach clearly distinguishes the Back button from the primary button, which should reduce the time it takes for users to move to the next step. And if necessary, space is freed up for additional buttons, which I will discuss below.
Place indirectly linked actions above the form
Some forms have actions that do not transmit data and are only indirectly related to the form itself.
For example, the Forgot Password link on the login form allows users to reset their password, but this is not part of the login process itself.
You will often see a “Forgot your password” link next to the password entry field, but this is wrong because users:
- expect the Tab key to focus the next field / button
- looking for a link, they can scroll down the page
- may waste time typing an email address before clicking on a link
Placing a link above the form solves all of these problems.
Place additional buttons depending on what they do
Forms with multiple buttons are problematic.
The time it takes to make a decision increases with the number and complexity of choices, so extra buttons add extra choices and extra time.
In addition, keyboard users cannot be sure what action will be taken when they press the Enter key to submit the form.
However, sometimes multiple buttons are required.
After thinking about what the buttons do, it’s easier to decide where to put them.
Let s look at 3 examples that require a different approach.
1. Place the cancel button below the main button
Research by Luke Wroblewski shows that the undo button should be positioned to the right of the main button and should be less visible like a link.
But placing the cancel button below the main button has some advantages:
- First, it follows Caroline Jarrett s rule, i.e. makes it hard to find destructive buttons.
- Second, as explained in the section on the Back button and secondary links, the Cancel button is not directly related to the form itself, so it makes sense to place it below the main button.
- Finally, this frees up space on the row for other, directly related buttons. If you put many buttons in a row, it will be more difficult for users to figure out which one is most important.
2. Place the Add More button above the main button
Sometimes users need to add additional information. For example, the names of their family members when booking a hotel room.
Placing the Add More button above the main button has the following advantages:
3. Place the “Save and Exit” button next to the main button
Sometimes users may want to save their progress in long form.
If you place the Save and Exit button above the primary button, it means that it is more important, although it is not.
Placing it below it can result in a cumbersome button stack and use of the area reserved for the Cancel button.
All we have to do is position it next to the main button, which makes sense since the action is directly related to the form.
In some single field forms, place the button next to the input field
In rare cases, you can place a button next to an input field. For example, in the search form in the title of the site.
While there is nothing wrong with placing the button below the input field, placing it next to it saves space and looks a little cleaner.
But don t do this on standard forms that only have one field. This is controversial and unconventional.
In a multiple choice form, place buttons above the form
Multiple selection forms allow users to select multiple items at the same time. For example, in Gmail, you can select multiple emails and archive them in one go.
In this case, place the buttons above the form.
This is another example that works thanks to Eric Kennedy s rule: “If a control affects a change in an entire area, place it above that area.”
Placing buttons above the form also leaves room below the list for things like pagination, which is often needed in this type of interface.
Output
In this article, we looked at where to place buttons in various forms.
Whether it s a single button in a standard form or multiple buttons in a multi-choice form, their position is critical and requires due attention.
Check list:
- Align the main button to the left of the input field
- Place the back button above the form
- Place indirectly related actions above the form
- Place additional buttons depending on what they do
- In some single field forms, place the button next to the input field
- In multiple choice forms, place buttons above the form
Many thanks Caroline Jarrett for helping me write this article.