Optimal button placement and design

Button placement and design is a common subject up for discussion in UX, not to mention links, and at times, could be a heated one. Make sure you know the rules behind button placement.

Buttons are a vital part of any website and application, as are their positioning and design.

Below you will find some guidelines in order to help you on your way to getting the best UX out of your button placement and design.

Button placement for mobile applications

Multiple buttons

Android — From Google Android guidelines.

• The button to dismiss(Cancel) is on the left.

iOS— From Apple iOS guidelines.

• The button to dismiss(Cancel) is on the left.
• The button which initiates(Submit) an action is on the right.

Button placement for websites

Multiple buttons(Primary & secondary buttons)

The positive selection comes first and the negative comes second.

This comes from the western form of questioning:

• Would you like to continue? Yes(Submit) or No(Cancel)?

Single button(Primary button)

Multi-form

A multi-form is a form that has been split up into different parts/pages, and thus there are buttons take the user to either the next or previous part/page of the form.

• Button to continue to the next part/page is placed on the right
• Button to go back to the previous part/page is placed on the left

The reasoning behind the positioning of these buttons, is to give the form a sense of flow. By placing the continue button on the right, it gives the user the perception of continuation and progression.

Single form

A single form is a form which exists on one page, and has an action button at the end which submits the form and its data.

• Button is placed on the left below the form fields

CTA(Call To Action)

CTA’s look like buttons, but are generally links styled to look like buttons in order to stand out.

The CTA is normally placed on the bottom right of area which requires the CTA, but this can vary, due to the fact that the CTA should be placed at the last place the user will look. The last place the user will look is not associated with the page, but rather the location to which the CTA is related. This is called the prime or terminal location.

Button design for primary & secondary actions

Positive primary action

A positive primary action is called a positive action because the action can be repeated or undone. The primary button should be evidently distinguishable from the secondary button and made more visually appealing.

• Submit
• Send
• Next
• Add

Solid button for primary and ghost button for secondary.

In this situation, the accept button acts as a submit as it changes the data permanently, and the reject button acts as a cancel, as no data changes.

Negative primary action

A negative primary action is called a negative action because the action cannot be repeated or undone. When it comes to a negative primary action button, the button which would hinder the user from making any drastic errors should be more visually appealing from the other.

• Delete
• Remove
• Replace

Solid button for Cancel and Ghost button for Delete/Remove/Replace.

The difference between a button and a link

Simply put, buttons do things, links go places.

Buttons should be visually distinct from links. Button styles and actions should be fixed, doing this will teach the user to associate certain actions with the visual style of a button.

Buttons

• Buttons are used when the front or back end of the web page will be affected(Changed)
• Performs an action

Examples

• Trigger an action
• Submit a form
• Open a modal
• Play media
• Toggle

Links

Links are used for navigation.

Link are also used to download a document. This might sound strange, but when you navigate to a page, that page is downloaded, which is why download is a link, and not a button.

Examples

• Navigation
• Downloads