Don’t know how to design buttons? Just master these 5 golden rules

Hello everyone, this is TCC Translation Intelligence Bureau, I am Li Zehui. Button is one of the most important but still neglected UI elements in UI design. It is very necessary to understand button design. The author of this article dissects and analyzes buttons, and focuses on the techniques to improve button design through five golden rules that are fast and highly operational. Let's follow the author to learn and put the theory into practice. After reading, you will immediately make your buttons look brand new!

What is a button?

A button is an interactive element with a clear action. For example, if a button says “Pay Now”, clicking it might ask you to provide your credit card details.

In UI design, buttons are essential because most interfaces require us to take some kind of action before we can proceed. Whether it is saving, reviewing, or downloading content, buttons are everywhere. You can do more with buttons. Next, I will explain five simple steps to better design buttons. Note that although it is simple, it is very important.

Let’s start dissecting a button

Buttons have several defining characteristics:

A typical button has padding, border and shadow. For distance, they have a padding and a margin, which is the safe space for our button. By setting the radius value, the shape of the button can become sharp or fully rounded corners. The label on the button is usually text and may sometimes have an icon. Adding a right-pointing chevron icon to the button will increase page conversion rate (>). The label text is defined by weight, color and font style.

Now that you know the basics

Next, I’ll present five golden rules for improving button design:

1. A button must look like a button

We are used to buttons in the real world being rectangular (and sometimes circular). If the shape of the button in our design is neither rectangular nor circular (nor rounded rectangle), it is likely to confuse users. That’s why even though UI buttons are almost completely flat nowadays, skeuomorphic design actually still exists in digital interfaces. Buttons on user interfaces still need to look like buttons on a TV remote control.

With “organic shapes”, dots will not work as buttons. Triangles and hexagons will also take users longer to recognize them as buttons, and some users may never discover the interface’s buttons. If you don’t want to use rectangles or circles as your primary button shape, you can choose to use underlined text links. If you’re unsure about the color, dark blue is usually the best option.

We are conditioned to think that underlined text is a link, and the Google search page reinforces this mental model every day.

2. Size

In real life, have you ever had to find a pin to make sure you pushed a tiny reset button to reset an electronic device? This is intentional, because it prevents you from resetting the device inadvertently. But if all buttons were this small in an interface, it would make them difficult to use. Buttons should be large enough for users to use them comfortably, but how big do they need to be?

In the touch age, we usually measure by the size of a typical fingertip relative to the density of the screen. We feel comfortable with buttons that are 44-48px square. Some apps, like Tinder, have tried making their call to action buttons 50px (height) larger with good results. Obviously, the size of the button can’t go too far outside of this range, but it’s worth trying to get within the 50-60px range.

When designing for PC, we can make the button smaller because the mouse cursor is more precise, but it must not be too small. We still need to ensure that users can easily point the mouse to the button, so the smallest button should be set to about 32px.

3. Alignment is everything!

The biggest visual problem in any UI is misaligned button label text. While most designers and developers manage to center it horizontally, few manage to center every button vertically. Uppercase labels are obviously easier to center, but when using both uppercase and lowercase letters, it’s best to stick to baseline alignment (or just align it to the first uppercase letter and ignore the descending y, j, and g letters).

Button size and font size adaptation are also important. If you have a 32px button and 17px text, you can't put them perfectly in the middle and need to adjust one or the other to fit.

4. Work on the shadows

Shadows can help an object stand out against the background and help users identify it as a clickable or tappable object. Because the shadow makes the button appear further away than the background, users naturally understand that they can press it.

To make the button look friendlier, you can add the background color to the shadow color. In the example above, the shadow is a mixture of blue. Dark and contrasting shadows should be avoided because even if they attract the user's attention, they can easily lose the user's attention if they look too sharp and unpleasant.

5. Easy-to-read label text

Button labels need to be centered, but they also need enough breathing room to be legible. Avoid having no space around the text on a button. The rule is "the space between a capital W" in the label font above and below the label. "The space between two capital Ws" on the sides.

Of course, buttons can be wider than the above spacing, as that standard is just the minimum size that makes it both aesthetically pleasing and readable.