User Experience / Website Button Best Practice for UX

Website Button Best Practice for UX

Andy Thorne
Screenshot of Sketch homepage

Buttons are the most widely-used interaction elements in web design, and as such, play a massive role in a user journey.

As such, adhering to Website Button Best Practice can make the difference between a user having a smooth and successful journey through your website, or getting frustrated and leaving it immediately.

Keep reading to find out our 7 top tips for Website Button Best Practice for UX.

Make buttons look like buttons

Example of best practices for main and secondary buttons.

It’s important to differentiate buttons from normal text or titles to make it clearer for your users.

The first step in website button best practice is to make buttons look like buttons.

Users need to know instantly what is a clickable element and what isn’t.

The easier this process is, the better the user experience.

In fact, we listed ‘buttons that don’t look like buttons’ as one of our 10 annoying things on websites that people hate.

Don’t assume something is obviously a button; your ability to interpret clickability signifiers aren’t the same as your users’ because you know what each element in your design is intended to do.

Example of different button shapes and styles for main and secondary buttons.

Using the most familiar or easily recognisable styles of buttons to makes it easier for users to identify a clickable element and avoid confusion or frustration.

Most users are familiar with the following examples of buttons, making them a great reference for when it comes to designing buttons for your website:

  • Filled button with square corners
  • Filled button with round or rounded corners
  • Filled button with shadows
  • Ghost or outline button with square, rounded or round corners

The most obvious is the filled button with shadows as the dimensionality of the button signifies its clickability.

The design of the space around the button should also be considered.

Including sufficient white space around the button can avoid it being mistaken for an information box.

Use clear button hierarchy

Example of a main and secondary button being used on a product page.

In instances where you need multiple buttons, make it clear to users which one is more important.

In some instances, you need to use more than one button.

It’s important to establish what the priority action is for the user and ensure that the button that correlates with that action is appropriately designed.

Screenshot of the Sketch homepage.

Sketch clearly show button hierarchy on their homepage with an bold, solid-fill button and an inline button.

On the Sketch home page, there are 2 calls to action in the hero section.

It’s obvious that they want users to get started for free, rather than watch the explainer video through the styling of the buttons, where the ‘Get Started’ button has a white fill.

Whilst the ‘Watch the Video’ has more of an inline button style which isn’t as eye-catching.

Image showing to display the previous button to the left of the next button.

Always place the previous button to the left of the next button in languages where you read from left to right.

The layout of buttons is also important to consider.

For example, when using a multi-step form, the next button should always be placed the the right of a previous button in languages where you read from left to right.

Label buttons

Example of using microcopy below a button to help explain the action.

Using microcopy is great for guiding users through your site and manages their expectations by telling them what action the button will trigger.

Don’t leave your users confused about what a vague or confusing button will do.

Whilst it’s important to give your buttons logical titles which explain what their action will do when they click the button such as ‘Add to Basket’ or ‘Sign Up to Newsletter’.

Giving buttons a logical label will also help to reduce friction and manage expectations.

Microcopy helps to guide, engage and enlighten users on their journey through a site.

From the label on a button to placeholder text on input form fields, these tiny bits of copy make a big impact on the User Experience.

A small label underneath a button that clearly describes its action can greatly reduce friction for your users.

Example of using clear descriptive language on buttons.

Reinforce actions with descriptive language on buttons to avoid any confusion for users.

In a dialogue box that confirms if you want to remove a product from your basket, rather than use an ‘OK’ button and ‘Cancel’ button which can be confusing to the user, offer a ‘Remove’ button and a ‘Cancel’ button to reinforce the action.

Example of a red button.

Red is typically seen as a warning colour, making it a great option for destructive buttons.

Destructive buttons could also be displayed with a red background as a warning to users.

Make it harder to find or click on destructive buttons

Example of using buttons to confirm an action before it it's completed.

Include an extra step when a user clicks on a destructive button helps avoid unwanted actions, giving users the opportunity to back out if they need to.

Destructive buttons such as ‘Cancel Order’ or ‘Delete Account’ need to be harder to find so that users who are happy to continue on their user journey don’t accidentally click on them by accident.

Including an extra step such as a modal window to check if users are sure they want to cancel their order, or hiding the button to delete an account in a menu can help to avoid unwanted actions as users have an extra step to back out, or they have to actively search for the destructive button.

Website button best practice is to size buttons appropriately

Show button priority

Example of a larger primary button to indicate its importance.

Make it obvious that the primary button is more important by increasing it’s size compared to the button next to it

Following on from point 2 about button hierarchy, make the primary action button larger to increase its importance to users.

Make mobile buttons tappable

Two shop now buttons, one is too small and one is the right size.

The minimum touch target size should be 10mmx10mm to ensure it is ‘tappable’

On mobile devices, buttons are often too small, leading to users mistyping. This causes friction for users and may result in them leaving your site.

According to an MIT Touch Lab study, the average fingertip is 8mm-10mm.

So a minimum touch target size should be 10 x 10 mm to ensure that a user can successfully tap on a button on a mobile device.

Add feedback on the interaction

Buttons in various colours to show different states such as normal, hover and clicked.

Make it obvious that a button has been clicked to stop users repeatedly clicking them.

Reassuring users that they have successfully clicked a button is important for improving their User Experience.

Help to manage expectations and stop users from repeatedly clicking a button by making it obvious that the button has been clicked.

You can achieve this by adding audio, visual or haptic (on mobile) feedback.

Adding some slight motion or change in colour to signify a click or hover reassures users that their action has been successful and signifies for them to wait for the system to respond to their action.

Example of a progress bar.

Show progress bars and indicate success for actions such as downloading.

For actions such as downloading, it’s worth showing the progress of the operation, and then indicating the success of the action to manage the users expectations.

Avoid using too many buttons

Example of a page with too many buttons compared to one with the right amount.

Using too many buttons at once is unnecessary, causes decision fatigue and may result in users not actually clicking on anything.

Avoid using too many buttons at any point on your website, it’s distracting, confusing and overwhelming.

Too many buttons can result in decision fatigue and users leaving your site.

Instead, carefully consider the most important 1-3 actions that you want your users to take at any given point on your website.

For example, on a product page, your user’s main actions should be to either add the product to their cart or wishlist, or read reviews about the product they are viewing.

This is not the moment to sign up for an email newsletter or be distracted by your social media profiles and leave the site altogether.

Website button best practice is to focus on fewer CTAs to encourage users to make a decision.

The $300 Million Button

Example of using a button to reduce friction for users.

Reduce friction for users as much as possible by giving them what they want, rather than causing a massive diversion in their journey through your site.

Giving users the button they want, rather than creating a massive diversion blocking their journey, increased conversions to the tune of $3 million for an ecommerce site.

It’s important to remember that you shouldn’t try to change a user’s behaviour, or the journey they are on. Instead, reduce friction and make their journey more straightforward to increase sales.

A form with 5 elements couldn’t get much simpler, right? In reality, it was costing a major ecommerce site £300,000,000 per year in missed sales.

The structure of the form was simple:

  • 2 fields: Email Address and Password
  • 2 buttons; Login and Register
  • 1 link: Forgot Password

As a login form, there wasn’t much wrong with its design.

The problem lay in its location on the user journey. After filling their shopping baskets and heading to the checkout, users would encounter this form which acted as a massive diversion, stopping them from proceeding through the checkout process.

Encouraging users to log in was seen as a way of encouraging repeat customers to make their purchases faster; the amount of time it takes to set up an account would be offset by the time saved during future purchases.

The problem was uncovered with first-time shoppers. Some couldn’t remember if they had set up an account already and frustrations rose as their login credentials failed.

Others complained about the fact that they had to register an account, with one customer stating “I’m not here to enter into a relationship. I just want to buy something.”

Usability tests showed that first-time users were concerned about the retailer attempting to invade their privacy, or being bombarded with marketing material that they weren’t interested in.

In response, designers found a simple solution, removing the Register button and replacing it with a Continue button and a simple message: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.”

As a result, there was a 45% increase in the number of customers making purchases, and the first year after the change was made saw an additional $3000,000,000 in sales.

Implement Website Button Best Practice To Improve UX and Increase Sales

Buttons might be a common design element on a website, but with some careful consideration about the design and understanding user behaviour, you can greatly improve the UX for your users.