Muzli -Design Inspiration — Medium | Stefano Malachi

It is very challenging to design a CTA Button that is screen-specific and more importantly flow-specific. Over the years, UI Designers have struggled with where and how to position a CTA Button that is always accessible throughout the app.

It is indeed a challenge to design a CTA Button to satisfy every device’s screen, so be sure to maintain consistency from iOS to Android, small to large screen.

In that case, what are elements that need to be considered while designing a CTA Button?

1. Shape

Shape is not just about square, round or triangle; it’s something that make buttons look like buttons. It is good to have even custom shapes, but remember the more unusual it is, the riskier for user to understand the button.

2. Size and Padding

Size and Padding help users easier to interact with the button. Button’s size is related to Finger pads; which user uses to tap the button. Based on MIT Touch Lab Study, averages finger pads are between 10–14mm and fingertips are 10mm x10mm, making it a good minimum touch target size.

Padding between buttons helps separate the different control and enough breathing space, for example the primary and secondary buttons.

3. Label

While not all buttons have labels (for example an add button could be just designed independently with visual of “+”); Label indicates the function of each button, it’s like explicitly showing the user what they do. A proper label for each button should be based on the Principle of Least Surprise and A Rule of Thumb.

“Label buttons with what they do exactly. Don’t let user confuse.”

4. Colour

Colour is very important in buttons, it help users navigate and understand the action more clearly. You should never pair Red and Green on designing buttons, since Colour Blind Users see no difference. Here are some tips for choosing good colour for your button design:

a. Use colour and contrast to help users differentiate between buttons and interact with the right elements.

b. Make the primary CTA Button’s colour stunning from the rest.

In conclusion, all these 4 elements; Shape, Size and Padding, Label and Colour; are very important to design better CTA Buttons. Don’t make user confuse for buttons, design the buttons exactly as what you expect user to lead them next, once they tap it.

If you liked this or found it helpful, please click the ❤ and share this post to help others understanding more about UI Design! Thank You!

#SharingIsCaring

Holla at me on Twitter.

Disclaimer: These are my personal views and opinions and not associated with my employer or any other reference on this post. I am also not endorsing any company or service mentioned on this post.

Better CTA Buttons: Step by Step in UI Design was originally published in Muzli -Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.