1.  Identifiable

Designing with mobile users in mind should be a priority as more than 48 percent of page views worldwide are via mobile devices. Your buttons should be touch-friendly for mobile users and clickable for desktop users.

Unlike desktop users, mobile users do not have the opportunity to hover over elements to check for interactivity. Therefore make sure your buttons appear interactive to the user.

Size

A study by the MIT Touch Lab shows that 10mm x 10mm is the best minimum size for a button due to the average size of a fingertip.

In the example below we can see how easy it is for the user to interact with the larger button. Therefore, the button must have a touch target of at least 38px by 38px.

Shape

The most popular button shapes are square or square with rounded corners. Rounded corners seem to have an advantage over square corners. Research shows rounded corners make information easier to process by drawing our attention to the content of an element.

2. Findable

Buttons should be easy for users to find. UX designers agree that you shouldn’t make users look for buttons.

It’s also important to be consistent across your site or app with button placement. If one form has the main call-to-action on the right and the other on the left, it will confuse the user.

3. Clear

Button actions and status should be clear so that users know and understand what actions they have taken on your site.

Here are some design tips and tricks to help with this process:

Color

Certain colors have special meanings that users are used to seeing. Red, for example, is usually used to signify wrongdoing or destructive actions. Green on the other hand usually signifies a successful action. Using conventions like this makes it easier for users to understand the actions and state of the buttons.

Microcopy

Ideally, button labels should not wrap around multiple lines. Keep them in one line to improve user readability.

Hierarchy

Buttons need not only to be distinguished from other elements on the page but also from each other because multiple buttons are often grouped together. For example, a primary action button should be more visually dominant than a secondary or tertiary action button.

In the example below, the ‘Add more’ and ‘Call to action’ buttons are similar in style and close together. This is likely to confuse users and result in them selecting the wrong button because they are not visually different enough from each other.

Type

Button types help indicate their importance and functionality. Some examples include text, ghost, toggle, and floating, which we will develop and discuss their respective benefits in the next article.

Order

The order of the buttons is important to achieve a visual hierarchy. When making an ordering decision, it is important to note that most users expect first-listed content to be of high priority, and last-listed content to be of low priority.

State

Buttons are multi-state elements. It is important to make this state clear to the user. We can do this by sticking to conventions that conform to user expectations such as disabled buttons appearing grayed out and focus elements containing a blue ring.

Feedback

After clicking or tapping a button, the user expects a response in the form of visual or audio feedback, depending on the action.

Feedback includes everything from the state change shown above to behavior such as progress or error animation.

We hope that after reading this article, you will find inspiration in creating button designs in your UI projects. Remember the most important thing is the ease and convenience of your app users.

Source: kalamuna.com