5 tips to improve your button design. Basics of UI design
Applying the theories from the previous parts to practice
After we learned all the basics of UI design from the free chapters of the Designing User Interfaces book and started designing a mobile app, it s time to dive into one of the most important but forgotten interface elements.
Everything you need to know about UI button design
Hello button
I ve covered buttons before in a larger article, but this time I want to focus on quick, actionable tips that you can immediately use to improve your designs. You can read the previous article here: Designing Better Buttons
What is a button?
A button is an interactive element with a clearly defined action. You might argue that if the button says “Pay”, clicking on it will most likely ask you for your credit card information.
Buttons are important to the user interface because most interfaces require us to do something to proceed. Whether it s saving, invoicing or loading – buttons are everywhere.
Let s talk about how to improve their performance in five easy steps. Obviously more can be done, but these five steps are very important.
Let s start with the anatomy of a button
Buttons have several defining characteristics.
As a typical shape, they can have a fill, a border, and a shadow. As for spacing, they have a padding (also known as padding) and an outer padding that serves as a safe space around the button.
The shape itself can have sharp or fully rounded corners, specified by the border-radius (or corner-radius in some tools).
The label on the button is usually text, sometimes with an icon.
Adding a chevron pointing to the right has been known to increase conversions slightly. The text of the label is determined by the font, its color and style.
Now that you know the basics
Below are my five golden rules for creating better button designs:
1. The button should look like a button
It s pretty straightforward. We are used to the fact that real buttons are rectangles (and sometimes circles). Using a shape that is neither a rectangle nor a circle is a surefire way to confuse your users.
This is why skeuomorphism is still present in digital interfaces, even when they are almost completely flat. The buttons in the user interface should still look and feel like the buttons on a TV remote.
You won t be able to use the “organic” spot shape as a button. Triangles and hexagons will also confuse the user. Some users may never know what these buttons are doing.
If you don t want to use a rectangle or circle as the main button shape, the only alternative is an underlined text link. If you re not sure about the color, navy blue is best.
We are used to the underlined text being a link, and the Google search page helps reinforce that habit every day.
size 2
Have you ever had to reboot your device when you first have to find a needle to hit the ultra-small Reset button? This design concept is designed to prevent you from accidentally resetting your device.
Now imagine if all the buttons were so small. This would make them very annoying and incredibly difficult to use.
The buttons should be large enough to be comfortable to use. But how big?
In the era of touch screens, we usually measure them by their typical fingertip size in relation to screen density. At a scale of 1x, a square of 44 to 48 points is comfortable to press. Some apps, such as Tinder, have experimented with increasing call-to-action buttons to 50 points (height) and have reported pretty good results. Of course, you can t enlarge the button too much, but it s worth trying 50-60 dots.
When designing for the desktop, we can make them a little smaller as the mouse cursor is more precise, but don t make them too small. It should still be easy to hover over, so a good minimum size is 32 points.
3. Alignment is everything!
The biggest visual problem with all interfaces is poor alignment of button labels. While most designers and developers manage to center them horizontally, it is rare for them to be centered vertically. In most cases, the mark is either slightly overstated or too low.
Capitalized labels are obviously easier to center, but it s best to stick to baseline alignment (or just align to the first capital letter and ignore the descending y, j, and g)
Button size and font size are also important. If you have a 32-point button and 17-point text, you can t place it perfectly in the center. Adjust their size to match each other.
4. Work on the shadows
Drop shadows help the subject stand out from the background and help identify it as a clickable object.
This is because if something stands out above the background, we naturally understand that it can be shifted down to the background level.
To make the buttons look friendlier, add a tint of the background color to the shadow color. In the example above, the shadow is a blend of blue. Avoid harsh, dark and contrasting shadows. While they do draw attention to the button, they look annoying and obnoxious and distract from everything else.
5. Readable labels
We ve already established that the labels on the buttons need to be centered, but there should also be enough space to read them. Avoid buttons that have almost no space around the text. A good rule of thumb is to place an uppercase W from the label font above and below the label, and two Ws to the sides.
Of course, the button can be wider, this is just the minimum size, which looks good and helps improve the readability of the label.
Articles from the series:
Part 1: Fills and Borders. Basics of UI design
Part 2: Everything you need to know about shapes and objects. Basics of UI design
Part 3: Shadows and Blurs. Basics of UI design
Part 4: Screens and Pixel Density. Basics of UI design
Part 5: How to start designing a mobile application. Basics of UI design
Part 6: 5 Tips to Improve Button Design Basics of UI design
Go ahead, press the buttons!
Knowing these rules will help you with other UI elements as well, but since buttons are the most important part of the interface, it s best to start with them.