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:

 

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

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

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

  1. Andy Fryer says

    Paul, some interesting points here, thanks.

    I’ve been wondering about Call to Action placement; should the primary CtA be outermost? That is, on a screen layout with horizontally-arranged buttons, should the primary CtA be on the right? On a top-down layout, should the primary CtA be at the bottom (like The Resumator example in your previous article)?

    My instinctive feeling is that CtAs should indeed be towards the edges of the screen, that they are easier to find in this position.

    I’m just gathering some examples on this question at the moment and would welcome your thoughts.


  2. @Andy: Interesting thoughts Andy. It’s difficult to say if your gut feeling is correct or not. In some cases it will, in others it won’t. The reason is that you need to consider all the factors which makes the button a call-to-action button. Placement, shape (and size), message and color are the most important factors and can’t work independently. As you can imagine, putting two CTA-buttons next to eachother makes it a real challenge.

    I believe that the primary CTA button should be relatively close to the related element (form, introduction, …) and that the visual path from start ’till finish (read the introduction of a form – read the labels of the input fields – fill out the form, click the button) is as smooth as possible. Altough this might work in most cases, it is also imortant to know that this is not the ultimate solution.

    Luke Wroblewski wrote a great piece about it: Primary & Secondary Actions in Web Forms.

    As you can see, you have many possibilities of arringing multiple CTA’s. Putting your design to the test with eye-tracking studies and A/B testing is the only way of being sure.

    Also, try out different situations. For example: if you have a top-down layout, make the buttons less wide and place them next to eachother instead of underneath one another.

    Let us know when you have an outcome on the matter!

I would love to hear your thoughts on this.

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!



(will not be published)