This week, I’m finalizing the design of a responsive application form for tablets and desktops. It’s a long form composed of different pages, with input fields organized in 1 to 3 columns. On the wireframe, I placed the buttons “Next” and “Back” in the centre of the page. The”Next” button, which is labelled in Italian “Continua”, is also the submit button. The “Back” button is displayed on the left-hand side and the “Next” button is placed on the right-hand side, as shown in the following image (Fig.1).
Our Front-end Developer challenged the solution and proposed to display the “Next” button first (as shown in Fig.2). He also aligned the ‘Next button’ to the left-hand side with the fields on the application form and the “Back” button to the right-hand side. His suggestion concurred with Luke Wroblewski‘s study on forms.
In an ideal world, the decision on where to place the buttons should have been driven by user research but as it often happens we don’t have sufficient time to conduct the user research properly. So, we end up searching for best practices that apply to the matter in hand.
Numerous people, including Luke Wroblewski, and Caroline Jarrett, wrote about this subject matter. Having read few articles about this topic, I discovered that the action of the button is as important as the position. Information on best practices differ for the following action buttons:
- “Next” and “Back” buttons
- “Submit” and “Cancel” buttons
- “Cancel” and “OK” buttons in a dialogue modal window
For instance, one of the rules accommodates left to right reading direction and states that a “Previous” button should always be aligned to the left of a “Next” button“. Another rule recommends that the “best place for a primary button is to align it to the left-hand side of text boxes“. The two rules differ. So, what do you do in this case? My suggestion would be to place the buttons either in the centre of the page, on the right or left-hand side as long as you do not separate the primary and secondary buttons, as shown below, in Caroline Jarrett’s slide (Fig.3).
What are buttons for?
Buttons are there for a reason; you want people to click on them to confirm actions. Therefore, it is essential to place the buttons where people can see them. The action of the buttons should also be clear and easy to understand.
It always depends
The lesson we learn here is that it always depends. We cannot just look at a bunch of links and apply rules blindly. It always depends on the context and the situation. Luke Wroblewski’s studies are great examples of this subject matter. He found his niche in the UX world and recommends best practices for the masses like Normal Nielsen. However, the best UX practitioners are the ones that can distinguish when to use the best practices and when to discard them.
If you use best practices, please keep in mind on the points below:
- Consider if the best practice apply to your context and situation
- Test your design solution with users
- Follow your instincts
- If it looks good, you are on the right track
Let’s conclude with a pearl of wisdom from Gyan Nagpal:
“best practices are useful reference points, but they must come with a warning label: The more you rely on external intelligence, the less you will value an internal idea. And this is the age of the idea”