Click-To-Action: The science behind a button
CTA type
- Button
- Popup
- Anchor link
Factors that affect a CTA effectiveness: shape, size, color, copy, location, surrounding context, testimonials, social proof, brand trust, etc.
Sales Cycle
(homesy is at Purchase cycle which is the bottom of the sales funnel)
- Awareness: whitepaper, ebook, kit, tip sheet, checklist, how-to video, education webinar, etc.
- Evaluation: product webinar, case study, sample, FAQ, datasheet, demo video, etc.
- Purchase: free trial, live, demo, consultation, estimate, coupon, etc.
Example:
- Download the eBook (No Registration Required!)
- Register for a free eBook
Some Tips
1. Personalized CTA (based on visitor’s location, persona, industry, sales cycle stage, device, referral source, preferred language, etc.)
2. Make sure that your CTA buttons look clickable
Most of the buttons that I click when I visit landing pages have one or more of these features:
- Clean and contrasting background to text color
- A distinct button text (e.g., “Get free access”)
- Have white space surrounding them
- Rectangular (sometimes rounded) shape
- Complementary border
3. Positioning matters: Place your buttons where people click
- When people visit your site, the first thing they do is to read in a horizontal movement, above the fold. This means that positioning your call-to-action button right there will boost its click rate before you ever worry about the font color or a text link.
Can be above/ under the fold depends on the content simplicity/ complexity.
Here are a few steps you can take to ensure that your CTA button. location yields the best result:
- Understand your audience: When you know what your ideal customers are seeking, especially when they visit your landing page, it’ll give you a roadmap to deliver the right solution by positioning the CTA where they’ll find it easily instilling a sense of urgency with them.
- Be flexible: Have an open mind towards your audience. Be ready to split test, even if your current CTA positioning is yielding a high click rate. There’s always room for improvement and refinement with your web pages
4. Have a compelling and short button copy
- CTA copy shouldn’t exceed 60 characters, avoid words that have more than 5 syllables
5. Use power words in your button copy (see list of words in References Section)
6. Use timing words to create urgency
In the LIFT model above, you’ll notice that “urgency” is what propels the other factors on web pages to function more efficiently.
It states that if you want to increase the conversions of any action, such as click-through rates, email conversions, etc., you have six choices to make:
- Make your offer as clear as possible
- Increase the relevancy of your offer to your ideal customers
- Enhance your value proposition
- Increase trust
- Eliminate distractions
- Add urgency to your offer
The second variation which shows timing and “Bundles Bought” outperformed the first by 3x.
7. Invoke positive emotions around your button
Positive emotions (e.g. laughter, humor, awe) will increase the possibility of your content going viral on social media.
CTA copy that contains “get started” will make people feel optimistic and ready for action. The phrase eliminates objections.
8. Place your CTA button in the strongest position based on visitors’s behaviors
Knowing how visitors navigating your site, you can identify opportunities to improve conversions, such as click rate, engagement, and email sign-ups.
Generally, if you place your CTA button where visitors either start navigating your site or where they stop, you’ll increase your click rate. For even better results, find out which activities engaged them the most and place your action button in that zone.
Use the “Try It Free for [TIME]” formula. Example: Start my Free 30-day Trial
10. Create anticipation in your copy
According to a research study reported in The Atlantic, 47% of the time, the human mind is wandering. It seems that the key to getting people to do what you want – e.g., click a button – is to promise to ease worry.
Ramit Sethi makes you anticipate the best from his bestselling book. Ideal customers just can’t wait to opt-in to get what’s on the other end – that’s anticipation. Additionally, it becomes a social media experience.
11. Test and use the right font color
12. Add the product image above your button
13. Add special effects to your CTA to draw attention to it but don’t overuse
Using emoticons, animated gifs, and gradients give you an advantage over static buttons.
14. Place exit calls-to-action strategically, specifically, when visitors going to exit page (see Reference section for the tool)
15. Leave plenty of whitespace around your CTAs
7 principles of Conversion Centered Design
- Encapsulation: Your CTA is precious. Wrap it up. Lock your visitor’s eyes on the most important element.
- Contrast & color: I’m different. Button color is irrelevant. Contrast wins.
- Directional cues: Use wayfinding to guide people to the point of interaction. Pointing isn’t rude, it’s necessary.
- Whitespace: Best practice shows that there is usually a space around a CTA button. Remove clutter. Use areas of nothing to expose areas of something. Less is more.
- Urgency and scarcity: Eg: last chance, only a few remaining, etc.
- Try before you buy: giving away free trial period, free subscription with limited features, etc.
- Social proof: Is everyone else doing this? The reviews look good. I’ll have what he’s having.
These principles are applied widely across multiple high conversion websites, but there are still more to come.
Tips & Checklist
| Don’t | Do | Checklist |
| DON’T use “submit” on your form buttons. | DO use valuable and actionable copy, such as “Download Now,” “Get Your Free Trial,” “Speak to an Expert,” or “Buy Now.” | |
| DON’T hide your CTAs where no one can see them. | DO place your CTAs above and below the fold and within the visitor’s “eye path.” (F-path) | |
| DON’T use the same or similar colors in your CTAs as the page’s background color. | DO use bold, contrasting colors in your CTAs so they don’t blend in with the page. | |
| DON’T use teeny, tiny CTAs that no one will notice. | DO make them big and bold. | |
| DON’T make the design of your CTAs look too blurry. | DO make them look “clickable” and button-like by adding bevels, shadows, and hover effects. | |
| DON’T use CTAs in the wrong place at the wrong time. | DO use CTAs that relate to the content on the existing page, or align with the buyer’s interests and needs. | |
| DON’T be too wordy. | DO make sure CTAs are clear, simple, and uncluttered. | |
| DON’T use vague, cliché, or passive language. | DO use compelling and actionable copy that conveys the value being offered. | |
| DON’T oversell and under-deliver. | DO set the right expectations about what visitors will receive. | |
| DON’T use too many CTAs on one page. | DO use only one primary and one secondary CTA only. | |
| DON’T forget to build trust through design and copy. | DO use data or testimonials to validate your proposition. Visitors have little trust in everything the internet tells them. The best ways to build trust are through professional design, social proof, or customer case studies and testimonials. | |
| DON’T miss opportunities to promote your CTAs. | DO place a CTA in everything you do. Every channel or platform you use in your marketing is an outlet to promote a call-to-action, whether in email, a blog post, social media, or on thank-you pages. | |
| DON’T use the same CTAs for too long. | DO experiment with and A/B test your CTAs to know what design, copy, and placement works best. | |
| DON’T forgot to search engine optimize your CTAs. | DO add keyword-rich ALT tags so your CTA adds search value to the page. | |
| DON’T use Flash or complicated animations. | DO use CTAs that are mobile-optimized so any device can see them. | |
| DON’T use the same CTA for everyone. | DO use personalization and dynamic content. Everyone is different! Personalization is one of the best ways to improve the effectiveness of your CTAs. | |
| DON’T cram your CTAs into little spaces. | DO give them room to breathe by utilizing white space. Making sure there is plenty of white space around a CTA is another great way to make sure it stands out and doesn’t get lost in the clutter. |
References
189 Powerful Words That Convert: Write Copy That Gets Your Customer’s Attention Every Time
https://buffer.com/library/words-and-phrases-that-convert-ultimate-list
The Best CTAs From Famous Companies in Various Industries (Netflix, Hotjar, LegalZoom, Zoom, Lemonade, Booking.com, Spotify, etc.)
Realtime Popup
https://trustpulse.com/how-trustpulse-works/
https://www.nudgify.com/review-nudge/
https://www.nudgify.com/social-proof-app/
https://apps.shopify.com/shoppop (another similar service)
Show Popup ask visitors to subscribe before they leave page (exit-intent popup)
https://optinmonster.com/features/
Other Popup styles
Others
http://crazyegg.com/ (also has persistent header CTA)
More
https://neilpatel.com/blog/how-to-create-the-perfect-call-to-action
https://neilpatel.com/blog/click-here-16-hacks-thatll-get-your-call-to-action-buttons-clicked/
https://neilpatel.com/blog/high-converting-cta
