5 Rules for better button design

Buttons play vital role in today’s uiux design field, they represent a call to action. We usually come across such types of interaction buttons on most of the websites or apps etc. Smooth conversational flow can be created by following simple rules of button design. Here we are listing down 5 rules for better design that helps build greater user experience

According to human psychology, and the nature of the objective, the button colours,sizes and appearance can differ.

Bonus tips are provided at the end

Anatomy
The skeleton of the button design starts with
selection of text font, background colour, icons and it’s size (if any), overall size, border shape etc. Everytime we design a button it’s Important to keep in mind “how the users will analyse the button? and the objective it’s assigned with”. Use proper shapes and colours to make the element appear like a button, touch target size and padding should be carefully designed. A study shows 10mm*10mm button is an effective minimum touch target size.

Too narrow or too wide
The spacing of the text from its borders actually matters, it can affect customer experience greatly. Keeping the text too much inside the box won’t highlight the call to action, narrowing the box too much can make the entire button look messy. So it has to be balanced out. The same applies to the different kinds of shapes as well, the circular button draws attention to the content in it and makes a high possibility of click

.

Build an existing user expectations
If the buttons are not placed appropriately, it can frustrate the user. For example if the user immediately wants to delete a file from his mobile device and finds options such as cancel or ok buttons at the end of the screen. It’ll make the user more panicked. For greater user experience the buttons should include correct content in it and should be positioned where the user most of the expects it to be ( in the above example it should be placed at the center with delete highlighted )

Use the right copy
An example button design for the removal action is shown in the picture. In the first case the buttons are lacking intention and would not give user satisfaction of the deletion action. The second case is perfectly built, painted in blue telling that this action could be harmful and never return. The user in this case will be awakened to his conscience to cross check if to perform action or not. Likewise in other scenarios different buttons can be built.

Style Hierarchy
The priorities matter, if you expect an user to perform a desirable action, the top priority button has to be designed accordingly. It should be built with utmost care, so that it can draw most of the attention towards it. The secondary action can be a little fuller than primary and so on

Bonus tips:
The green coloured, active button indicates action to be taken. So this button will be displayed against new items that users want to add to his collection.

The grey coloured, inactive button indicates that it cannot be used, either because the item is already available with the user or user not eligible to purchase/ add it to his collection.