Buttons are made to be clicked. A click can bring the user one step closer toward their goal, but a click can also mean a conversion. Therefore, it is important that a button looks attractive and invites to be pressed. But how do you really make a good button? In a few simple steps, this blog explains how to create buttons that are irresistible to click. 

This blog grew out of a situation that shows well how it is right not must. Recently, I moved house. During the move, I left one of my plants outside too long so the plant did not survive. So there had to be a new one. A lot of things can be ordered online, including plants. Having finally found the right plant, I was just one click away from a successful purchase. But suddenly a moment of doubt and confusion surfaced. Let's take a closer look at the element that helped determine the success of my goal.

Look at the image of this Lemon Tree. The button is clearly bland. The contrast of the text with the background is too low and the background color by itself is too light to decorate a conversion. Because the color of the button is very bland, it gives the impression that the button is not active. Situations where this can occur is, for example, if the correct number is not selected or if the product is no longer available. Both cases did not apply in this situation. But now, of course, the question is how to optimize the button in this case. 

Color

More and more takes mobile an important place when we look at the conversion rate on websites. For this very reason, it is important to create a button that works fine on mobile and is extremely effective. 
When we look at the color of the button, the first thing is that it should stand out well but of course also blend well with the rest of the website's corporate identity. But what is the right color? There is no direct answer to that. Factors such as culture, gender and context can play an important role. 

Each color evokes a certain emotion in people and plays a role in provoking certain actions or warding off certain feelings. Colors therefore directly influence user decisions, this allows you as a UX'er to guide the user through the website. The colors we see a lot with CTAs in many cases are green, blue, yellow and orange. But as a UX'er who moves into the world of CRO, I recommend testing it specifically for your group of users yourself. 

The size of your CTA

Obviously, a CTA should be easy to see and big enough to click on. But how do we know if the button is good? From the mobile first thoughts, a button should be at least a fingertip in size. A fingertip is about 10mm. The key on your keyboard is 15mm and a penny is 18mm. The recommendation is to stay between 15mm and 18mm. If we stick with 17mm then the button will be about 48 pixels which is a great size for a clear CTA. Since we are dealing with different devices with different screen sizes in the media landscape, the exact size of the button may vary from one device to another. For different sizes, allow for white space between other component on the site. A button that is buried under multiple elements is not easily noticed and the likelihood of clicking on other elements is higher.

Interaction and animation

This often takes place after a click and by then the goal/conversion may have already been achieved. Especially with mobile because you don't have a hover there and still want to give the user confirmation that interaction has taken place. Making more attractive buttons that respond to user input does ensure that interaction is rewarded and makes the UX better with a greater chance of clicks/conversion in general. There are different states. An elaboration should be designed for each situation.

The default button is the ‘default’ view. In that situation, the button has the default style that the designer intended for the button. The hover effect occurs when the cursor is hovered over the button. This makes it immediately obvious to the user that it is clickable. A button that is transparent indicates that it is not clickable in a specific setting. The button is there but not active. A button in an active state provides confirmation that it has been interacted with. The loading state is not always obvious but is highly desirable for situations where the loading time is longer than usual. This is because it gives the user confirmation that it is busy and/or the process is in progress.

Icons

Icons are increasingly important in user interfaces. Icons visually represent objects and actions. Icons can be used to save screen space and guide users where to go. But which icon exactly do you use for a good CTA? That depends purely on the action behind the button. If we're talking about an add-to-shopping cart button, a plus or a shopping cart icon is appropriate. You might even consider omitting the text ‘shopping cart’ since a shopping cart icon explains enough about the action of the CTA. But above all, test it on the group of users you are dealing with on the website in question!

The menu uses icons to save screen space.

The arrows at the choice tool clearly indicates an action.

Conclusion

Back to my Lemon Tree with the above tips in mind. To stay in the house style, we can take a burgundy red color that stands out well against the background. Then take the color green that is also used to accentuate the successful action. Icons can be used in this case to support the message.

Default state

Active state

Now that you know how to create a good CTA, it's important that you also know where to place it. Want even more tips? Read more about exactly where to place CTAs here. ‘Best place for a CTA’