Tips to Design Better Buttons - How We Do It!

Buttons are an important component of user interfaces, websites, and applications. Well-designed buttons help consumers to browse the website and accomplish the intended activity with ease.

We made the buttons on the screen look so good you'll want to lick them. ~ Steve Jobs

But how can you ensure that your button design is both functional and unique in the eyes of users? It's all about paying attention to the details while using your favourite prototyping tool. Continue reading to learn how to improve your button design skills.

Let's look at some common blunders people make while creating buttons for their next project.

1. Create one primary button

Every activity on a page is ranked in descending order of significance. This is why we (designers) must carefully consider button placement.

Placing a few major buttons adjacent to each other is typically not a smart idea since it might confuse customers and make it harder for them to comprehend which button to click at first sight.

To overcome this problem, combine different sorts of buttons (filled, with border, plain) when using them together.

2. Use appropriate colours for good and negative actions.

By explaining what will happen when a user interacts with a button, using the proper colours for positive and negative actions may assist enhance the user experience.

A red button, for example, can signify a warning or a destructive activity, whereas a green button might suggest a good action, such as saving or approving something.

You may even add an icon to the context to make it stand out even more.

3. Make it clear

Using "Yes" or "No" labels for buttons is typically not a good idea since they do not give enough context for users to properly understand the action that the button starts.

With action verbs, your button labels should compel users to take action. Users understand what the button will accomplish after reading an action verb.

4. Make the text shorter.

Too many words in a button label compel users to read more and make the interface appear bustling.

The imperative form in an active voice reduces the number of words and makes the button label simpler to scan.

5. Select the appropriate size

If buttons are too tiny, users may struggle to correctly target them with their mouse or finger. This can lead to a poor user experience.

Make the button 30-56 pixels tall so that clicking on it is easy.

However, if the buttons are excessively huge, they may take up too much space on the screen, disrupting the overall structure and style of the interface.

Depending on the button type, the appropriate button height should range from 24 px to 56 px (or even more):

Designers must consider the size of the hit area, which is the region around the button that is responsive to human input, in addition to the actual size of the buttons. Users may find it difficult to click on the button if the hit area is too small.

6. Hide table buttons

When all of the buttons in a table are displayed at the same time, it can generate a cluttered and chaotic feeling, making it harder for users to focus on the most critical information or activities.

Designers can use a variety of ways to prevent this problem. When the user hovers over a row, one approach is to show simple buttons.

Even better, display them as icons rather than words.

7. Make negative activity less noticeable

Negative buttons (such as "Delete account" or "Unsubscribe") should not be placed prominently since they might be unintentionally clicked.

I would suggest hiding these buttons within another area (such as the "Edit profile" page in our instance) and making them coloured or simply plain.

8. Experiment with prioritization

Assume you need to require the user to perform some action (for example, "Secure Wallet"), and if you make the "Skip" button almost as important as the primary (mandatory) action and position it close to it, the user is likely to click it and bypass the essential flow.

Make the "Skip" button practically invisible, so the user believes there is just one action and no ability to skip it.

Can you think of any other mistakes that designers make? Do let us know and we will add them to the list.