Call to Action Buttons Part 2: Placement

2 mins read
Tagged with , ,

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.

Prominent positioning

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 textlink would be sufficiant. 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?

The fold

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.

IconDock
website of MailChimp

 

Read the other parts:

 

People who have read this article, also liked ...

About the author:

I'm the creator and editor of paulolyslager.com, a blog about on Web Design, User Experience and Usability. Currently I'm working as UX Manager for a leading supplier of nutrients and supplements to the European market based in Berlin, Germany. Follow me @paulolyslager or google+.
My Book Collection on UX
My Book Collection on UX

12 responses to “Call to Action Buttons Part 2: Placement”

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!