Calls to action – or CTAs – help websites make a connection with site visitors. If you don’t make a connection and your reader leaves and goes to another site, you may never see him again. With more and more websites coming online every day, it is vital that you not only put CTAs in place, but also that you write effective ones that will entice your site visitors to take action.
In an analysis of more than 93,000 CTAs, it was found that the ones that targeted users based on personas were viewed 42 percent more than generic CTAs. This means you want to create a funnel of CTAs that target your reader, offering different things and different wording, depending on what the site visitor is looking for at any given time.
The place where many web designers fail is in not adding CTAs at all or adding CTAs that aren’t targeted to turn website visitors into conversions. If you’re going to take the time to add a CTA, take the time to add one that will work.
Make CTAs Work for You
The best calls to action are not only targeted to what the site visitor wants, but they also contain other elements that will entice the reader to click on the CTA.
There are 20 websites below that use amazing CTAs that:
- Are highly targeted to a specific persona
- Are colorful
- Demand an action
- Entice the reader with the promise of something free or discounted
- Get them to call or sign up for more information
At the same time, the overall design of the page needs to draw the reader’s eye to the CTA and thus encourage the person to convert to a subscriber or customer rather than bouncing away from the page.
Don’t just assume that a CTA should be placed above the fold, or first thing, on the page. Instead, take into account the entire site when making a decision on where to place the CTA.
There are many factors that can impact how successful a CTA is. You should do A/B testing and try different colors, words and even positions on the page to find out what works best with your audience.
Even the size of the CTA can make a difference in how high the CTA converts. For example, making the CTA button just 20 percent larger can result in a higher success rate for conversions, because the reader’s eye is drawn to the call to action.
28 Examples of Excellent CTAs
Here Is Today offers a simple graphic representation of time. The CTA is a simple invitation of the word “Okay” and a plus sign. Click on it and the image expands to show the month, year, century, millennium, epoch and so on. Once you click the first call-to-action text, a second option of going back in time appears next to the primary CTA.
2. Cienne NY
Cienne New York has a very minimalist design. The full-page-width image fills the background. Then, they invite you to “Shop.” Even more subtle is the arrow near the middle of the page that invites the user to scroll down and look at the current product offerings. While the arrow serves as a CTA, there are no words to accompany the graphic.
What makes the page unique is the simplicity of vivid images and short phrases inviting the user to “shop dresses,” “shop tops” or “follow on Instagram.” Limiting the number of choices funnels site visitors directly where Cienne New York wants them to go.
The Penxo pencil offers an elegant and functional design in refillable lead pencils. The majority of the page shows an image of the Penxo pencils, but then there is a pop of color that serves as the CTA button and reads “Preorder: Shipping Now.” The words invite the user, but also create a sense of urgency because shipping is on the horizon.
Adding a pop of color for the CTA button makes it stand out from the rest of the page in stark contrast. Contrast draws the eye of the user and makes them want to take action.
4. Crazy Egg
Everything on the landing page steers site visitors to the CTA on Crazy Egg. There is an illustration of two people in the basket of a hot air balloon. The woman holds binoculars pointed toward the CTA, and the man is pointing at it. Elements directing attention to the button pull the reader’s eye over to the action the site wants them to take.
The call to action only requires the user to start with their website URL, and then invites with the first-person narrative “Show me my Heatmap” and an arrow. Again, the arrow points the way toward the desired action.
KFC offers a simple option of finding their restaurants by location. The CTA appears near the bottom right of the landing page but draws the eye because it’s a pop of brilliant red, which also matches their brand color palette.
Once you click the CTA, the site invites you to enter your ZIP code or city and can further refine your choices to restaurants offering catering or free Wi-Fi.
6. Levy Online
Levy steps out from the crowd and lists their phone number in an easy-to-find spot. Adding additional contact information builds a sense of trust with consumers because they know they can reach the company quickly.
In a recent study, researchers discovered 69 percent of respondents distrusted advertising from a brand. Another 37 percent stated they trust brands less today than they used to.
Levy invites site visitors to call and find out how they can help and places their CTA above the fold as well as at the top of every page of their website. They repeat contact information in the footer.
Mailchimp uses a contrasting color to draw user attention to the CTA. They offer a free account for up to 2,000 subscribers and 12,000 emails per month to let people try out their service. Once you go over that amount, they offer a variety of plans, depending upon your needs. Providing a smaller, free plan attracts people interested in this service. Users can test out what Mailchimp offers before committing to a monthly fee.
Their CTA repeats in the header, where users can either log in or sign up for the free account. The main CTA button is larger than the other buttons on the page, which also draws the eye.
Netstager offers dual CTA buttons, capturing user attention but also allowing for site visitors who already know their work and don’t need to see examples. For first-time visitors, clicking on the “View Our Work” button takes them to a page portfolio filled with examples of web design, mobile apps and a variety of logo work.
On the site, users find multiple ways to contact the company. Clicking on “Get a Quote” takes the user to a contact form with just a few fields, but also provides the company’s address, phone number and email.
A recent survey found 90 percent of millennials state authenticity from a brand matters, but generation X comes in right behind them at 85 percent and baby boomers at 80 percent. Beyond seems to understand the desire for transparency and information with their CTA, which invites the user to “Read More.” Clicking on the CTA button takes the site’s visitor to a page that details what drives them as a brand.
10. Wilsen Davil
Davil’s portfolio has a casual feel to it, and the CTA button matches the overall tone of the page. Davil starts by telling a little about himself and then follows with the CTA that reads “See my Works.”
Matching the call to action to the mood of the page engages the user and avoids confusion over what your personality is.
Square offers options that funnel new users toward the type of account they need. Their focus is on business owners and they provide solutions for “every business,” including two filters above the fold. Two boxes outlined in white with a transparent background appear, and as the user makes choices, the background image changes slightly.
The options include selecting business size and type, and the CTA reads “Sign up With Square.” Adding filters creates a more personalized experience for users.
Uber’s website has a very minimalist look as well, with limited text and photos. There is plenty of white space on the page, which draws the eye to the CTA button “Sign up to drive.” The use of arrows entices visitors to click on the button. There is also a CTA for getting a ride with Uber, but it isn’t as pronounced as the drive button, showing this particular landing page focuses mainly on acquiring drivers for the company.
GoToMeeting snags the interest of potential customers by offering a discount when people sign up. The CTA “Buy Now” button is in bright orange in front of a dark solid background. However, they also offer a free 14-day trial and a separate CTA just under the first.
Wufoo offers both a free account and a pro account for their online forms, so they state that upfront and show consumers the options available. The two CTA buttons sit side-by-side above the fold. One is a bright blue and the other a bright green, but both pop against the coral background. Wufoo’s free option allows users to try the service, but the pro account enables them to skip right to the rich features that package includes.
The free account lets visitors create five forms, but the site also offers pro packages that allow business owners to create 10 forms and 1,000 entries, unlimited forms and 5,000 entries, or unlimited forms and 25,000 entries. Any needs beyond that require users to sign up for their ultimate package.
Nutrisystem uses a CTA that directly targets their target audience. In addition to two bright orange CTAs inviting users to “Order Now” or “Shop Plans,” there is a green invitation for a free diet analysis.
One thing Sriracha2Go does that works particularly well for an e-commerce site is explaining the advantages of their product above the CTA button, before inviting users to “Buy Now.”
The image serves as a sort of CTA of its own by showing the portable condiment bottle is a mere 1.6 inches by 4.4 inches, fitting neatly into a backpack or purse.
The entire focus of this page is getting those who land on the page to sign up for Backlinko’s mailing list. Note the arrow pointing to the form field. A bright CTA pops against the white area and situated within the field itself.
Zuli offers smart plugs that allow users to control appliances and lights from a single app. Their landing page features a transparent CTA button that allows the background to show through, but is outlined in a vivid green that stands out against the wood tones of the background. They also add a button titled “Watch Video” in an attempt to teach the user more about their product.
Panic features an animated background on their homepage with a simple call to “View Showreel” and an arrow. The overall look meshes perfectly with the tone of the page. Click on the play arrow to view a video featuring designs from the previous year. The entire process engages the user from start to finish with fun animated images, such as apples sitting on a bench laughing or Santa’s tongue stuck to a TV antenna pole.
20. Call for Cake
Call for Cake features several calls to action on their landing page, each geared toward a different buyer persona. For example, there is an option to gift a cake, order delivery or order online. They also offer a telephone number, if you prefer to order over the phone.
Rouser taps into people’s need to be a part of something bigger as they push their environmental causes. They use the fear of missing out (FOMO) to tell you they make things causing you to think, and they don’t want to “burst your bubble,” but kind of do. As you scroll down, they invite users to pop bubbles with them. Their call is to embrace their cause. When you click on the words, the animated bubble bursts. It’s an exciting way to tap into people’s need to take action.
22. Pantheone Audio
Pantheone Audio does a fantastic job of summarizing the benefits of their product before inviting users to download the app. Even if the person hasn’t yet bought their product, you can see what it’s capable of through the description. Note how the CTA contrasts sharply with the colors on the page while maintaining the overall elegant style.
Dang offers what they describe as “dang good bars.” Their page is fairly uncluttered, drawing attention to their CTA with the invitation to “Buy Now.” They also utilize an arrow to pull even more attention to the action they’d like site visitors to take. An arrow icon works particularly well for pages with a single goal.
The beautiful, streamlined design of the call to action on Haerfest’s home page blends with the rest of the site. However, because the choices for navigation are so limited, it still works to grab attention. They use an arrow to indicate you need to move toward another page. The word “discover” tells you what happens when you click there. There is no button used. It is simple text and an arrow symbol.
Some businesses have more than one buyer persona they target on a landing page. In those cases, you might need to offer more than a single CTA button. Lick does a stellar job of placing two choices side-by-side to reach different customer types. One reads, “Shop Paint,” and the other, “Shop Wallpaper.” This method works well for a home page when you have both commercial and consumer clients, too.
Local businesses may have a different type of call to action than global ones. Take a look at how SERVPRO handles their CTAs. They know someone landing on their page likely wants to talk to a specialist about the damage to their home. They include their telephone number right at the top of the page.
Then, they offer three CTAs in the right sidebar where they are easy to find. One is a “Call Now” invite. If you click on the number listed on a mobile device, the call goes through automatically. They also offer an online form to request help or information on locating someone in your area.
There are times when your CTA is more about the images used on your page than the words themselves. While CTA’s wording should still be clear, such as on this site with “Shop Now,” you can encourage movement through the photos you choose. KLMB sells shoes for active people who love to do things like mountain climbing. By including a background of a woman climbing, they tap into the passion their target audience has.
Look at the location of the CTA button on this landing page. The call is where you’d typically look for the navigation structure. There are no other choices above the fold, encouraging the user to request a quote on their commercial vacuum packs. The design uses muted colors with only a pop of blue for the logo, the product and the CTA. Since only the CTA and logo are clickable, the choices narrow even further. People intuitively understand the logo links back to the same page, so the option is now down to only the button.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her re-reading the Harry Potter series, burning calories at a local Zumba class, or hanging out with her dogs, Bear and Lucy.