Call to Action Buttons Part 2: Placement
In the first part about Call to Action buttons, I talked about the usage of color and how it affects the user’s behaviour. As mentioned in this article, a CTA-button has 4 important tools: placement, shape (and size), message and color. In this second part I would like to give you some pointers about the placement of buttons.
Just a few things to keep in mind when placing CTA-buttons into your design.
I recommend to give your CTA-button a prominent placement, but remember to take your entire page lay-out into account when making this decision. If you prefer to put it into the footer of the page, you should reconsider the fact if you need a CTA-button at all. Maybe a regular text link would be sufficient. It is very easy, important aspects of your design get an highly visible place on the canvas or it is not important enough.
How to give a Button the Space it Deserves
An effective way of making your button stand out from the rest of the design is to make good use of white space (read this great article about white space on Boagword). Seperating the button from areas with many design elements will give the button more visibility and makes it feel less cluttered. Be careful not to exagurate, otherwise you’ll loose the logical connection.
Logical Link Between Intro Message and CTA Button
It’s a good idea to use some kind of intro text, such as customer testimonials, to support your call to action button. You give your visitors a reason to click the button and it will make it easier for them to figure out what will happen when the button is clicked. If you decide to use a supportive message, make sure to place it near the button.
Imagine you want to convince people of using your software package by writing down all the benefits point by point in the top of your page. A CTA button saying “Try out our software package for free” is nowhere near the header. How will people take action?
A much talked about issue is called the fold. The page fold refers to the first frame your visitors see when they visit your site. Or as Jacob Nielsen explains: “Viewable without further action”. Although people learned how to use the scrollbar and scrollwheel, users spend about 80% of their time above the fold. Keep your most important parts of your webpage, such as your CTA, in that space.
The Better Examples
IconDock and MailChimp did a very nice job with their CTA buttons. The buttons are placed in the top center of the page and have enough white space around it to let them stand out from the other elements. The gap between the button and the text is just right and confirms the logical connection.
Other articles in this series
The perfect call to action button is not just about its placement, which is why I have written a complete series on CTA’s. The series are completed with the following topics: color, shape, size and the message used in the CTA.
Subscribe to the UX newsletter
Get the best UX newsletter, full of handpicked articles, resources and ideas delivered right to your inbox every second week.