Having a clear call to action, or ‘CTA’, is essential in marketing. And these days perhaps no where is it more prominently viewed than on your website’s landing page. They’re on every web page you view: “Subscribe today”, “See Our Newest Collection”, “Watch the Video”. They literally call people to action, and it’s typically where you’re most hoping to take your audience: it’s how lead capture happens, and how sales get made. Therefore, it’s extremely important that your call to action on your website does exactly what you need it to do: sell something, acquire leads, encourage registration rates, or increase subscription rates. How can you be sure that your call to action does it’s job correctly? You can bet it comes down to design. That’s right. It’s all in the visual hierarchy.
A very clear call to action in a striking green button from Leesa.
Now, wait up. Let me backtrack a little. It’s not ALL in the visual hierarchy, but it has a lot more to do with that than it does with whether a green or red button encourages more engagement. Let’s talk about visual hierarchy for a moment. Visual hierarchy refers to the arrangement or design of elements that encourages viewers to behave in a predictable way. For instance, we’ll begin with a very simple example of LARGE TEXT centered at the top of a page, with a lot of very small text beneath it. This arrangement will likely be read the same way by a majority of viewers: first the large text will be read, and then the viewers eye will scan the smaller text. It’s a very simple example, but I think it helps get my point across. By arranging elements a certain way in regards to size, color, and position, designers can create a predictable, although subconscious viewing experience for their target. This is what designers are trained to do, and it can be a very valuable skill, especially when we’re talking about huge leaps in conversion rates (read: sales) by only changing color of your call to action button. And in case you want the Spark Notes version of that link, it all boils down to this: there is no magic color for your CTA button. You need someone who can intelligently select visual elements that highlight your button.
It’s not about color, it’s about the entire design. The red button saw a higher conversion rate, but that could be because it is a contrasting color to the main, green, logo. Image credit.
So, is it all in the proper selection of button color then? No, unfortunately not. Simply selecting a contrasting button color to the website’s overall color theme isn’t enough to do the job. Every element on the page has to harmonize, and work towards making the CTA do it’s job. The adjoining copy, the call itself, and any other background elements all play a part in delivering the story, and the result, you intend to achieve. In fact, you can get quite creative with exactly how you want to entice your viewer to do what you need them to, so long as the message is clear, and directed at the target audience.
Notebook maker, Baron Fig uses fun copy, “Unlock the mystery” to accompany an otherwise straightforward “Shop Lock & Key” design.
The success of a call to action is truly more than the design of a page, and as I mentioned, the accompanying elements affect the conversion rate. Copy, for one, can be extremely important, especially when setting the tone to attract your ideal client. How to decide what your copy should be can really be simplified by asking two questions, identified in this article by Michael Aagaard on Unbounce:
- What is my prospect’s motivation for clicking this button?
- What is my prospect going to get, when he/she clicks this button?
Simple Green has identified that they have two markets that they serve, and each has different needs. Their landing page quickly helps the user to describe what kind of information they’re looking for, which later down the line will help Simple Green refine the CTAs for that market segment.
Some would have you believe that a ‘boring’ CTA, like “Shop Now” is a bad idea, and that your messaging should instead be super clever; something like “Unleash The Magic”. However, if “Shop Now” is the desired action, and is what your prospect is likely there on your website to do, then “Shop Now” does the job of successfully drawing in those prospects. “Shop Now” fulfills the two guidelines above: it anticipates your prospects motivation for clicking the button, and creates a firm idea of what will be delivered after clicking the button. In fact, you could hurt yourself with something too vague or clever. If the result of clicking on the button is too mysterious, people are less likely to proceed. On the flip side, casual language, funny quips, or purposefully mysterious buttons can be exactly what encourages viewers to move on to the next stage. Does this sound a little wishy-washy? Don’t worry: the tone that is appropriate will be determined by your target audience; they’ll let you know with their actions what they prefer engaging with. Email marketing, for example, is a great way to test a wording strategy. They call this A/B testing: one layout option is tested against another by submitting the options to two different segments of your market, with each option attempting to deliver on the same goal. Then, based on conversion rate results, you’re left with the wording, colors, or layout that worked better for your messaging.
For instance, on my website I use phrases like, “Yessss! Let me at that guide!” because I’m trying to attract people who enjoy collaborating on a casual, friendly level. Thems my peeps. That’s who I’m talking to, and want to encourage to proceed through the site. By using something generic like “Download Free Guide” I make my messaging clear, and I’m not necessarily alienating anyone, but I’m not going the extra mile to really SPEAK TO my ideal audience. My casual tone is meant to encourage familiarity and ease, because I want ya’ll to feel that way when you’re working with me. 🙂
Let’s look in depth at a couple other examples.
This landing page for Michigan’s tourism website hits a lot of great points.
- It uses a call to action button that is in the website’s theme. The logo and the CTA button are the only places that utilize this color.
- The accompanying text makes clicking the button’s messaging friendly and clear. “Plan Your Trip” is a nice way to encourage visitors to begin planning their vacation. “Get Away To Winter” helps enhance the idea of getting away for a trip, and in this way helps cement the probable outcome of clicking the CTA button, which would be receiving a list of things to do in winter.
- Lastly, the background image is actually a video comprised of mutliple clips of people enjoying the Michigan outdoors during the winter. In a quick way they’ve piqued my interest in numerous activities that are available to me as I plan my trip.
I love this example from Ruffwear. Let’s look at all of the things going right:
- Two CTAs, “Free Shipping” and “Start Adventure” are highlighted in a contrasting yellow color: we can tell immediately that Ruffwear wants to draw our attention here. The third CTA, “Shop the Collection”, is obvious for those viewers looking to purchase items, but it takes a back seat due to it’s more subdued color. What is clearly more important to Ruffwear is for us to “Start Adventure” since it is highlighted in a bright yellow, and is larger than “Free Shipping”.
- As a company whose ideal clients are outdoor, adventuring people and their dogs, “Start Adventure” is a well researched, and fun call to action that encourages viewers to read messaging about a cause they support called Conservation Canines. Educating potential buyers on this issue is a great way to encourage sales and shoppers’ views of the brand.
- Since we’ve been introduced to the yellow color clearly, and early on, our brains are already subconsciously primed to recognize that color in the future as an actionable color. As you scroll, small yellow dots appear, and literally lead your eye throughout the page to additional CTAs, like the yellow dot on the dog. That yellow dot then pulses to REALLY tell the viewer they can click there. It’s like Ruffwear has us on a leash, and there’s no way we’re straying from the route they would like to take us on. The yellow dots are also adventure map-like in their aesthetic, again appealing to the target audience. The whole design is extremely effective.
Call to action is a necessary part of every day marketing, be it on the web or not. The best way to succeed with your CTAs is to fully understand your target audience, and to deliver them copy and design that will resonate with them. Finally, the design has to be carefully thought out to accompany your brand and highlight your messaging such that your target audience clearly understands what to click, and that they are compelled to do so. It’s a lot of balls in the air, but the right combination of all of these things is critical to your CTA’s success. So tell me, what’s your biggest struggle with your website? Is your call to action just not standing out? Could your copy be more compelling? Is it a combination? How about what’s going right? Have you made any changes that had a significant affect on your subscription rates? Let me know in the comments below!