One of the most important steps in improving conversions on landing pages is the design of the call to action. A call to action is an item on a webpage meant to encourage the visitor to take an action. The most common type of call to action is a clickable button that includes phrases like “Download” or “Sign Up”. Properly designing a call to action (CTA) button requires careful planning, understanding users, and testing.
3 quick tips that will help you improve conversions immediately:
Call to action button size
The size of an item on a webpage indicates its importance. Start by determining the importance of the call to action button and create its size accordingly. You may have noticed on certain landing pages that the call to action button is much larger than the company logo. Although the logo is at the top of the page, the call to action button is likely the first thing noticed, due to its size relative to other items on the page.
When we worked with Incredimail, we made sure that the call to action button was larger than the logo and that all other elements pointed toward it. Although there is an abundance of colorful elements on the page, the eyes are drawn to the call to action button because of its size and its proportion relative to the other elements on the page.
At HTMLMONKEY there are several call to action buttons. As you can see, to distinguish between the important and the less important, we designed the “Start” button so that it is much larger than any other action item on the page.
Call to action button placement
The placement of the call to action button on the page is very important. To improve call to action conversions, all primary call to action buttons must be visible above the fold, meaning within the first 400 pixels of the landing page.
See how we positioned the call to action button at the top of the site for Banc De Binary. The area marked in red is in the top 400 pixels of the landing page, and the rest will only be seen when the user scrolls down.
Pay attention to Microsoft’s landing page. The part marked in red is the top 400 pixels of the landing page, and the call to action button will only be visible when the user scrolls down.
Another way to position the button in a way that attracts attention is to make it appear as though it is “floating” above the page. This means that the call to action button will follow the user throughout the entire landing page.
In the design for Wix.com, we placed one large call to action button at the top of the page (the first 400 pixels) and then added another call to action button that followed users as they scrolled down.
Using white space to highlight call to action buttons
Framing a call to action button in “white space” is an excellent way to make it stand out relative to the rest of the page. The space shouldn’t be too large, so as not to disconnect the call to action button from other items on the page. Create the right amount of space between the call to action button and other items, so that they still point toward the call to action while making it prominent.
As you can see, on this Wix.com page we created enough white space between the call to action button and the rest of the items on the page, but other items like the headline and the image still point towards it.
Important tip!
Always run tests! Create another landing page with an identical design to test different call to action buttons. Try varying colors, phrasing, placements, and sizes.
Don’t forget:
- Keep the test simple – test only one item at a time so you can draw concrete conclusions.
- Tracking tracking tracking – be sure to track tests using Google Analytics.
About the author
This guest post was written by Talia Wolf, CEO of Conversioner. The post was originally published on the Conversioner blog. Conversioner is a leading optimization company specializing in increasing profits for clients using psycho-emotional elements through the improvement of the website purchasing process, landing pages, mobile apps and pages, banners, and more. You are invited to read more of her articles on her website.
