Tags Archives Category Books

Processes and Tools UI/UX

UX Practices: 8 Solid Tips on CTA Button Design

The article provides tips on call-to-action button design showing how to choose the color, size, shape, placement, and copy for powerful CTA in user interfaces.

User interfaces usually consist of many different elements. Each of them plays a significant role in the efficiency of user experience as well as conversion rates of websites and applications. Even the small components such as buttons require a lot of attention so that they could meet the goals and objectives they are expected to achieve. Today we continue the topic of call-to-action button design and share some practical tips which will help designers create sufficient CTAs.

 

What is CTA button?

 

A call-to-action (CTA) button is an interactive UI element both web and mobile. Its major aim is to induce people to take certain actions that present a conversion for a particular page or screen, for example, purchase, contact, subscribe etc.

 

Lead generation and purchase rise are the basic business goals which calls-to-action can be created for. When a button design is compelling enough to immediately attract the attention of potential clients, it can entice them to click and go to the next stage such as filling a short contact form or making a preorder of a product.

 

In our article Call for Attention. Powerful CTA Button Design, we described the vital aspects of an effective CTA button design which are size, color, shape, placement, and microcopy. When all the characteristics are worked out appropriately the CTA button has much higher chances to fulfill its tasks.

 

But how to make these aspects powerful? Here are some practical tips on creating sufficient CTA button design.

 

UI design CTA buttons tubik

 

Tip 1. Make buttons look clickable

 

A prior task of any CTA is to make users click it, so their design should coincide with the objective. Using a product people don’t want to figure out which of the design elements are interactive. That’s why it’s important to ensure all the interactive elements appear clickable.

 

What can make a button look clickable? First of all, it is a visual presentation. A button may seem more clickable when designers add some 3D effect to it. For example, a CTA with a slight gradient or a small shadow usually brings the desire to push a button since it looks more salient. If a button with a 3D effect doesn’t suit the chosen style, for example, flat design, clickability can be emphasized via rounded edges of a button.

 

photo app animation

 

Tip 2. Choose the bigger size

 

Size is one of the most common tools helping to arrange UI components according to their importance. The bigger an element is, the more noticeable it becomes. Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out among the other buttons on the screen, especially via noticeable size.

 

Large buttons have high chances to be noticed and clicked still you have to keep some limits. A compelling call-to-action button is usually big enough to be quickly found but not too big so that the visual composition and hierarchy of the layout wouldn’t be spoiled. Market leaders often provide recommendations on the effective sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.

 

Tip 3. Apply contrasting colors

 

Color choice depends on various aspects which make the process more complicated. Designers need to consider such factors as the basic color of the composition as well as potential preferences and psychological peculiarities of the target audience.

 

There is one condition which is vital to keep in mind while choosing colors for CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components. For example, if a designer uses the blue color palette for the layout, it would be a good idea to use red or yellow color for CTA buttons.

 

choice of color in UI design

 

Tip 4. More imperative, fewer words

 

CTA microcopy is actually a call which tells users what action they will take if they click the button. The powerful CTA microcopy has to catch users’ attention quickly and lead them right to the action.

 

To make an effective call-to-action, you need to keep the number of words at minimum. A few appropriately chosen words work much faster than a long descriptive phrase. In addition, applying imperative case in CTA microcopy, you give strong and direct instructions of what users can do next.

 

burger app ui animation tubik

 

Tip 5. Keep user flow in mind

 

Big size and bright colors are effective tools for catching users’ attention but the smart placement can increase the chances of CTAs to be noticed even more. User flow, also known as user journey, is a path which users follow in a digital product to complete a certain task, for example, an online purchase. Users flow helps to create UX that way so that people could go step-by-step to their goal receiving the data gradually.

 

Keeping user journey in mind, you can choose efficient placement for CTA buttons. For example, creating a landing page design you need to make sure users will find the “Sign up” CTA button after they read the information about the offer or services. This way users will have the understanding of what they are signing up and if they need it. In case people see such CTA button before they read the information there are high chances that they will just ignore it.

 

web design ui concept tubik

 

Tip 6. Use white space as a tool

 

White space, also known as negative space, is the area between elements in design composition. People aren’t usually aware of the great role of the space, but designers need to pay a lot of attention to it.

 

White space is not just a background of a visual composition. It is often applied as a powerful tool assisting to emphasize UI elements. If a user interface includes many visual components, a CTA button can get lost on a page or screen. The right amount of white space around a button helps to draw users’ attention as it becomes more noticeable.

 

In addition, white space sets the connection between UI elements. The less white space between the components, the more connected they are. So, if there are some elements which can support the call-to-action, for example, item description or photo, try to reduce the space between them and the button to provide the double effect on the users’ actions.

 

design agency landing page

 

Tip 7. Add some extra information

 

As we said above, it’s important to keep the CTA message short so that it could quickly catch the attention. But when the audience notices the call-to-action, it may be useful to provide some additional data too. It can be a small piece of information explaining something about the next stages. For example, you can clarify that the sign-up process won’t take more than 15 seconds or remind that registration is free. A small remark can increase the users’ interest and encourage them to take action.

 

Tip 8. Run constant testing

 

If you want to make sure something works well, you need to test it. This golden rule is a must in various spheres including UI design. User research and analysis help designers define the specifics of the target audience but it would be hard to know precisely if design decisions are the best. That’s why tests could become a sufficient solution assisting to dispel doubts.

 

One of the most efficient CTA testing methods is A/B testing. It compares two versions of a digital product in order to find out which one performs better. A creative team divides users into two groups and each of them is shown different variants. One half sees A version, the other — B. Such an approach helps to determine a more profitable solution.

 

The differences between A and B options vary from the smallest to the significant one. For example, in case of CTA buttons, designers can change their placement, size, color or microcopy. To receive more accurate results, it’s recommended to test one aspect per time, for instance, only a color of a button. This way you’ll be able to distinguish which factor makes difference.

 

interface testing UI design tubik

 

The effectiveness can be measured by different criteria such as clicks, number of subscriptions, or sale-leads. The choice of metrics depends on the goals a company or a creative team has established. In some cases, it may be good to combine a few metrics during a single testing to achieve deeper insights of each aspect. For example, you can test a color of button measuring the number of clicks and subscriptions.

 

A/B testing is an approach assisting to make design changes carefully so that users wouldn’t feel inconvenient. Designers can collect the needed data and metrics while people continue to use an app or website.

 

tubik studio web UI design

 

To make a powerful call-to-action button, designers need to focus on the objectives standing behind it. A CTA with appropriate size, color, and placement quickly draws users’ interest and the sufficient microcopy encourages them to take the desired action.

 

Recommended reading

 

Call for Attention. Powerful CTA Buttons Design.

UI/UX Design Glossary. Navigation Elements.

UX Design Glossary: Interface Navigation Elements. Set 2.

7 Tips to Enhance Mobile Interactions

3C of Interface Design: Color, Contrast, Content.

9 Effective Tips on Visual Hierarchy

Take It Easy: Tips for Effort-Saving User Interfaces.

Bright Colors in UI Design: Strong and Weak Sides.


Welcome to see designs by Tubik on Dribbble and Behance