User Experience: How to Design a Call to Action
The responsibility of the UX designer is to create an intuitive and engaging user experience of the product, which is undoubtful. But the UX designer is not the single player in this process. We serve both the users and the stakeholders, and also account for the business values. Therefore, applying proper principles in improving the conversion rate is also an important task that we need to consider.
What is CTA
A call-to-action (CTA) design is an interactive way of any user interface both web and mobile: its major goal is to induce people to take certain actions that present a conversion for a particular page or screen, for example, purchase, contact, subscribe etc. The users have a clear need when they view a page or navigate certain features, and they may know what to do next, and the design "call to action" just match their needs. Other than that, there are also situations that the users may don't have a specific "action" right away but by correctly designing the "CTA", we will make their following action possible.
The Fogg Behavior Model shows that three elements must converge at the same moment for a behavior to occur: Motivation, Ability, and a Prompt. The design of the "CTA" is the prompt that triggers the action.
How to Design Call to Action
Digital products are competing for users’ limited attention. Users nowadays don’t have the patience to view a page from the beginning to the bottom and they much prefer to find what they’re looking for immediately, as soon as their eyes land on a new site. A sufficient call-to-action button design not only applies only a big size and bright color to accomplish all its objectives and there are also other aspects ensuring the effectiveness of CTAs. Here are some basic principles:
Placement
The placement of CTA buttons is crucial for their capability. In my previous post, I introduced that people tend to follow a predictable path while cathing information, and according to different studies, including the publications by Nielsen Norman Group and the UXPin team, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.
With that in mind, designers need to learn the most prominent scannable areas and place call-to-actions within the user’s path.
Call to Action example from Airbnb
Compelling Message
The way to convey the message is much powerful than people believe. The Social psychologist Ellen Langer asked to cut in line at a copy machine. She tried three different ways of asking:
- Excuse me, I have five pages. May I use the Xerox machine? — 60% said OK
- Excuse me, I have five pages. May I use the Xerox machine because I’m in a rush? — 94% said OK
- Excuse me, I have five pages. May I use the Xerox machine because I have to make some copies? — 93% said OK
Be specific in your assertions, and always give a reason why, especially when you want people to take some form of action. The highlighted outcome is that certain words persuade people more effectively than others. Here are some good examples:
Trello: the persuasive copy clearly states the benefits of the product, while the green CTA button makes it clear that sign up – it's free!:
Image Source: Trello
Netflix: the persuasive text in this CTA makes it clear that the free trial is 30 days and the text just above the CTA also lets you know that the product is incredibly flexible and can be canceled whenever you wish, which gives the users the confidence to take action.
Image Source: Netflix
Contrast and shape
When deciding the CTA, we have some constraints as we need to align with the brand's style guide, so here we will mainly introduce besides color and size, how to use contrast to make the CTA stands out? The application of contrast doesn’t only relate to the button element itself. A powerful CTA should be prominent compared to the whole interface.
Lyft’s landing page is a perfect example that illustrates the importance of Call to Action contrast compared to the page’s content. Not only it respects the branding of their product (by using a bright pink color that matches its brand logo), but it also managed to create a bold Call to Action button that attracts the majority of the visitor’s attention. And if they still want to know more, they can read the entire email without losing sight of the CTA.
Shape
Differents convey different meanings, here use the conclusion from Tubik Studio in deciding the button shape:
- Squares and rectangles meanings: discipline, strength, courage, security, reliability.
- Triangles meanings: excitement, risk, danger, balance, stability.
- Circles, ovals, and ellipses meanings: eternity, female, universe, magic, mystery.
- Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.
Wrap up
Today’s article covers the basic principles of the design in CTA. There is no doubt that the CTA is one of the most powerful sales tools in e-commerce and an influential factor of good conversion of a page or screen. As there are already many successful cases in the industry, I will say it's a good study way to take a closer know at that and learn about the basic patterns and principles. Besides that, we should always put ourselves in users' shoes and fully understand their context in making the decision and the motivation behind it. Only in this way, your design of CTA will really induce action. Thank you for reading!