Where to place buttons in a form?

Where to place buttons in a form?

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

The buttons in the application form
Fig.1 – The buttons in the application form
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.

Screen Shot 2015-11-16 at 09.59.49
Fig 2: The Developer proposed solution
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.

Best practices

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

.

Fig.3 -Best place for buttons to be
Fig.3 – Best place for buttons to be
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”

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s