How to make a button enticing — Part 1

A Comprehensive guideline to help you design a “pressable” button.

Published in

onteractive

12 min readMar 2, 2021

When it comes to boosting the conversion rate, buttons are playing an important role. Most of the time, the success of a product depends on a button, especially the call-to-action button.

Therefore, it is of utmost importance that we design a button attractive enough so that people subconsciously click or tap on it (just kidding 😅). Knowing how to design an enticing button should now become the main focus of not only designers but also every member of the product team 🤟

In this article, I will guide you through the core rules and the first principle of creating this type of button. Are you ready? Let’s go! 🚀

A. The essential rule of designing an enticing button

First, when we think about how to design buttons that are actually appealing, we have to learn what are the traits of it that are making people want to click. To answer this question, there is no better knowledge resource than cognitive psychology.

In simple words, cognitive psychology revolves around the way humans (or users in our case) process information, that is, our mental abilities – perceiving, learning, remembering, thinking, reasoning, and understanding.

When we create graphical user interfaces (GUIs) that mimic the physical world, our users can easily understand and use them – simply by predicting how the GUI will behave based upon their (and our) common experiences in the physical world.

By understanding human cognition, we know that if the button is designed to look like a real-life button, users can easily identify it as an element to click on to start an action.

Buttons are easier to click when we know they’re clickable.

B. Principles of designing an enticing button

To help all of us design better buttons, we’ve put together 3 principles as follows:

Identifiable: How to make a button looks pressable.
Detectable: Design a button that is easy to find.
Clear: Users should know what action they are taking.

As mentioned above, we are going to focus on the first principle –Identifiable, represented in 6 aspects: size, shape, color, spacing & alignment, shadow & icon of the button.

Note: All the “pixel” units mentioned in the article are theoretically “DIP” units: Density-independent Pixel - an abstract unit that is based on the physical density of the screen.

1. Identifiable

1.1. Size

If we keep design thinking in mind, we will simply understand that an effective button size is the one that fits a human’s finger. If the button is too small, users may think it is not a button or even an error.

1.1.1. Recommended button size

Apple famously recommends a minimum button size of 44x44 pixels, but research by the MIT Touch Lab shows that the average index finger is 45x57 pixels. That’s because your fingertips aren’t round. They’re oval-shaped.

Thumbs are a bit bigger. If you expect your button to be tapped with a thumb (if it’s in the bottom corner of a tablet-based app, for example) make it wider: 45x72 pixels. That’s the “rule of thumb”

Design a touch-friendly button that is at around 45x57 pixels.

In the case of cursor-based devices, 32x32 pixels will work. Remember that even on desktops, the larger the button, the easier it is to use.

1.1.2. Minimum button size

Both web and mobile buttons should also have the right minimum size. If your buttons are too small, it will be difficult to tap or click on them. That results in frustration and can lead to users uninstalling your app.

Microsoft’s UX Guide for Windows 7 and Vista recommends:

Make click targets at least 16x16 pixels so that they can be easily clicked by any input device. For touch, the recommended minimum control size is 23x23 pixels.

In order to choose an optimal size for a button in the grid system, 2 conditions need to be satisfied. First, the size should not be smaller than the recommended minimum control size for touch (23x23 pixels). Second, they should be the multiples of the grid’s base number.

1.2. Shape

1.2.1. Common shapes of the buttons

The most popular shape for buttons is a square with or without rounded corners. Rounded corners seem to have an advantage over square corners though. It has been found that rounded corners draw more attention to the inside of the button, whereas square edges draw attention away from the center.

Here are a few examples of buttons that are familiar to most users:

Filled button with square borders
Filled button with rounded corners
Filled button with shadows
Ghost button

Among those examples, the “filled button with shadows” design is the clearest for users. When users see a dimensionality of an object, they instantly know that it’s something they can press.

1.2.2. Edge balancing

If you’re using rounded buttons, keep in mind to have the same rounded corner ratios as other onscreen elements, otherwise, there will be an imbalance on the margins.

The diagonal spacing is larger (left) and smaller (right) than the side spacing. That makes the edge stand out too much and takes the attention away from the button itself.

1.3. Material and Color

1.3.1. Material

In this section, I will explore the subject of the button material because the button’s color is actually represented by the material that it’s made of. However, nowadays, people interact mainly with flat screens with a glass texture, so we gradually lose our sense of pressing a physical button.

Currently, very few products use other materials such as wood, metal, etc. for button design. These buttons require giving it more attention, in user experience design, because when we interact with them, our brain will expect the received feedback to be the same as in real life.

For example, when a button designed with wood texture is pressed, there will be a rattling sound of the wood material. If the brain doesn’t get what it wants, users will be confused and spend more time thinking and processing the information, hence — reducing task completion.

Therefore, if you want to design buttons in particular (or UI in general) with such materials, you need to understand why you want to give that feeling and how to provide a realistic experience for the users.

1.3.2. Color Contrast

Our eyes are constantly scanning for pattern interrupters. Anything that contrasts with its surrounding automatically catches our attention. It’s fundamental to the human eye and brain and it’s called the Von Restorff Effect.

Button designers can take advantage of this by using contrasting (or complementary) colors to draw attention to the desired action. e.g. in the web design with mostly pink colors, a warm-colored element, like a green button, will be visually prominent.

Another key factor is value. A light button won’t stand out against a light background as well as the dark button will. On top of that, the copy needs to stand out against the button too.

Notes: The call to action should be the FIRST THING TO STAND OUT on any piece of marketing. No one likes wasting time scanning a page to find their logical next step. Leverage the Clockwork Conversion Color Model four physiology points to ensure your primary CTA not only stands out, but that your users’ eyes will magnetically be drawn to it. (Angie Schottmuller, Three Deep Marketing)

Design buttons with colors that contrast with their surroundings, and don’t use that color for anything but the desired action.

1.3.3. Color meaning

It’s a well-known fact that colors can provoke emotions. Every color evokes a different feeling or mood in the people and, therefore, results in a different reaction when people see the color (of course, it is subjective as different cultures perceive colors differently). You should choose the color of the call-to-action button depending on the emotion you want to inspire people to have.

Here are some colors that represent four important feelings:

Positive (CTA: Save, Send, Download): Blue, Green
Negative (CTA: Delete, Block, Reset): Red
Neutral (CTA: See more, Alternatives, Discover): Black
Disable: Grey

In a group of button with different hierarchy, without clear contrast in color (and button styles), we cannot direct our users’ attention to the button we want to the click or tap. As you can see, color plays an important role in the User Experience (UX) of your product, driving your users to taking an action.

1.4. Alignment & Spacing

1.4.1. Alignment

Unevenly spaced buttons are one of the most common problems of interfaces. Double-check if your button labels are centered — both horizontally and vertically. Create guides if you need to be sure.

But we should not always adhere to this blindly. Some fonts lack a little top/bottom padding for lowercase which causes the text to appear skewed downwards/upwards though centered. In this case, we should customize the top/bottom padding so that the button appears centered.

1.4.2. Spacing

Aside from grid-based methods, a safe way of choosing button spacing is uppercase “W.” If at least one “W” fits on each side of the button label, you’re safe. Moreover, it’s even better to use double the “W” rule for increased readability.

Another option to create a precise and safe padding for the button is combining the grid with the “W” method. Specifically, after having the spacing created by the “W” method, we can choose a padding size that is the multiples of the grid’s base number.

*Note: Applying the grid’s base number method is optional. However, in order to decide an optimal size, the combination of two methods is recommended.

1.4.3. Outer spacing (Margin)

Button Spacing Standard

When the buttons are too far apart, users have a tendency to move to the touch target much slower. And when the buttons are too close together, users will have the lowest touch accuracy.

It is concluded that a range between 12 and 48 pixels is the optimal button spacing. This wide range is useful because you can apply it to different button sizes. When you divide the wide range into smaller, you get a button spacing standard that corresponds to the typical button sizes.

12–24 pixels for a large button
24–36 pixels for a medium button
36–48 pixels for a small button

A larger button allows users to hit their target accurately — even when their finger is slightly off position. But if they’re off-target with a smaller button, they’ll miss and hit an adjacent button. This is why smaller buttons need more spacing than larger buttons.

The optimal button spacing is between 12 and 48 pixels. The smaller buttons are, the more spacing they need.

1.5. Shadow

Shadow provides cues about depth, the direction of movement, and the surface edges. In button design, shadows play a very important role because they help the button feel real. They are creating the separation effect that makes the button appear to hover on the surface of the screen. That creates a clearer visual cue of its pressability.

Shadow is created by:

A source of light
An opaque or translucent object
A surface that shadow can be casted on

In UI design, we need to pay attention to the above 3 factors in order to design the shadow to look as realistic and logical as possible. For this article example, we would like to consider only the case in which the light and the bottom surfaces are all white.

The texture of the materials will create different shadow effects. Therefore, designers should be mindful of the material they choose to simulate. Opaque objects do not allow light to pass through them and form solid black shadows. Translucent objects allow light to pass through them partially, so the shadows are colored with the color of their material.

The texture of the materials will create different shadow effects. Therefore, designers should be mindful of the material they choose to simulate.

1.6. Using icon for button

If space allows, icons combined with text are the best. Selective use of icons with text makes certain items stand out more and add visual interest. It may also improve the scannability of the items, though good text labels can do that just as well. Users have been known to subjectively think an app is easier to use if it has icons — even when they don’t actually improve the performance.

A right arrow or a chevron placed after the button label makes the message stronger. Users will be more compelled to click and “proceed.” This works well if you’d like to strengthen your CTA.

In other cases, we can add icons that create a sense of trust and safety. For example, a button checkout combined with a lock icon will create a sense of trust for users.

Conclusion

In this article, we have covered 6 essential aspects of creating a button that looks pressable. Here are some key takeaways:

1.Size

The recommended size for a touch-friendly button is 45x57 pixels. Meanwhile, your button size should not be smaller than 32x32 pixels.

2. Shape

Though we have different shapes for the buttons, the most popular will be squares with rounded corners and a “filled button with shadows” design. Moreover, the same rounded corner ratios as other onscreen elements should be taken into consideration.

3. Color

When discussing color, we should pay close attention to the material used for a button, the color contrast as well as the meaning we wish to deliver to our users. Whatever your choice is, you should have a clear idea of why you want to give that feeling and how to provide a realistic experience for the users.

4. Spacing & Alignment

In terms of alignment, the interface design should avoid the common mistake of unevenly spaced buttons. For external spacing, the smaller the button size, the further the spacing between two buttons should be (and vice versa). With internal spacing, uppercase “W” rule can be applied to enhance users’ readability.

5. Shadow

We should be mindful of the material we choose to simulate as the texture and the choice of it will result in different shadow casting effects.

6. Using an icon for button

If space allows, icons combined with text are recommended as they allow better scanning ability for the users.

I hope that after reading this article, you can get a clearer idea of what makes a button identifiable 😃 How about the second principle — Detectable and the third principle — Clarity?

Are you curious about what contributes to an easy-to-find and actionable button?

Stay tuned for our second part! 😉

Reference

And special thanks to Hang Vu and Alex Hoang