‘Call to Action’ as the term suggests, is one of the most popular elements of a webpage that entice, persuade, or engage a user to take an action. More often than not, these are incorporated into web pages as clickable buttons that either lead to another page with additional information (‘Learn More’) or take the user directly to a payment gateway (‘Buy Now’). There are a number of amazing design techniques that help draw user attention to these ‘Call to Action’ phrases and links.
Size
The size of this element in comparison with the other elements on the page clearly indicates its importance. The larger and the more prominent the button, the more important it is to the webpage. So, the size must be decided upon according to the importance of the button. For example, in the Lifetree Creative page below, the call to action button is 20% larger (in width) when compared with the logo, which grabs user attention.
Placement
Placing these buttons in prominent sections, for example, right at the top of a webpage is known to result in higher landing page conversions.
At times, when there are multiple call to action buttons on the same page, the size of the target button versus the less important ones needs to be adjusted accordingly. For example, in the website below, asking users to sign up for the newsletter is more important that the ‘continue reading’ call to action button.
Positioning
Prominent positing of the call to action button in a distinguished area is one of the best ways to make it stand out on a webpage. On the daily mile webpage below, the call to action is at a different level than the other page elements.
Center Placement
A call to action button right in the center of the webpage draws user attention by making all the other elements seem significantly smaller. In the PicsEngine webpage below, even though the call to action button has the same color as the page and the other page elements, it still stands out because of its placement right in the middle of the page.
Use of whitespace
The beauty of whitespace lies in its ability to make the call to action button stand out, especially on a cluttered webpage. This is clearly visible in IconDock’s webpage seen below.
Contrasting Colors
Using contrasting colors for the call to action button is important to distinguish it from the background and the other elements of the webpage that surround it.
In the example of Valley Creek Church above, the call to action button is in bright yellow and stands out against the grayscale image that even has an image on it.
The call to action buttons need to be designed, so they fit in seamlessly into the information architecture and web interfaces. Different prototypes using various designing techniques must be created to check which of buttons work the best.