Nov 9, 2020 . UX Tools . 3 min read

How to Design Better Buttons in UX

In UX, whether in a website or an application, buttons are interactive elements, indicating the resulting action inscribed on it.

In UX, whether in a website or an application, buttons are interactive elements, indicating the resulting action inscribed on it. For example, clicking on a “save” button results in saving something.

Buttons are very important to the interactive nature of UX, and because of its versatility, it may lead to purchasing, saving, downloading, transferring, converting, sending and many more important actions.

Following norms should be taken into account while designing buttons.

  • A Button Should Look Like One:
Buttons should not be confused with anything else. Therefore they should be in contrasting colours and should stand out from the background.

  • Familiarity Gets Results:

Since users are used to seeing buttons in certain fixed shapes and forms normally associated with action, a rectangle/rounded rectangle would always be a safe choice. Unfamiliar shapes end up confusing users more.

  • Button dissection:

The button should ideally be symmetrical. The designers ought to use the brand book as a baseline while thinking about button designs matching the brand. It should also match the interface well.

  • Alignment and Spacing:

One of the commonest problems of all interfaces are buttons that are unevenly spaced. Designers need to double-check whether button labels are centered both vertically and horizontally.

  • Size It Right:

Buttons should have ideal minimum size, whether for web or for mobile. In case of the buttons being too small, users find it difficult to tapping or clicking on them, resulting in frustration and subsequent uninstalling or discontinued usage of application or website. An ideal measurement to go by would be 44 by 44 points for all the interactive elements on any mobile device.

  • Some Good Practices:
  1. Using Icons:
  2. Important buttons should be paired with icons. For example, checkouts are quickly identified by basket or cart icons, along with the right words.

  3. Using Arrows:
  4. A call-to-action is reinforced if used alongside a right arrow or a chevron placed right after the button label. It results in making the message more compelling to the user, who is more likely to click “proceed”.

  5. Using Drop-down Shadows:

Buttons with three-dimensional looking shadows appear more “clickable”. That makes the users notice them even faster than the flat ones.

  1. The label should be centered both horizontally and vertically.
  2. There should be enough space/padding inside any button.
  3. The icon, if any, should be of the right alignment and size.
  4. The border-radius should be set depending upon the button usage.
  5. The radius should also match other on-screen elements.
  6. The button should be of the right size, since the bigger the button size, the easier it becomes to use it, including desktops.
  • Rounded Corners:

Rounded buttons appear more positive and friendly than sharp-edged buttons. Also, sharp edges make it more difficult to arrange content around such buttons. Too much of the reverse is also true. If the corner is too rounded, the left-aligned text will not be a proper visual fit.

  • Icon Alignment:

It is one of the hardest things to achieve proper icon alignment on the buttons. is on of the hardest things to do. In most cases, the relation of font-weight, as well as icon weight, are in specific and direct relation to each other.

  • Balancing the Edge:

Using rounded buttons necessitates having the proper ratio of rounded corners compared to other screen elements. Using the same edge for every button tends to create margin imbalances.

Conclusion:

While building the primary, secondary and tertiary buttons, the developers need to check against the smallest inconsistencies, and against a few other factors every time. Any small error can confuse the user and lower conversions. So it is better to be mindful each time while designing buttons for UX.


Categories

Consumer Experience

UI UXs

UX Design Process

UX Tools