Lessons: 4Length: 25 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Designing Better Calls to Action

When users typically spend only a few seconds on a webpage, it's easy for them to miss your calls to action. This means users can overlook even the most compelling offering if the design isn’t right.

In this final video, I’ll introduce you to the essential techniques used for making your calls to action stand out.

2.3 Designing Better Calls to Action

Hello my name is Paul Boag and welcome to this final video of our course on Converting Visitors Through Persuasive Design. So far we've looked in the role of psychology in persuasive design and the importance of writing compelling copy. Now we turn our attention to the design decisions that we make. Design decisions that can make or break your call to action. We begin with probably the most basic piece of advise I could give on this course and yet, one that I see many web designers constantly ignoring. And that's to make sure that every page on your website has some form of call to action. After all, calls to action are the reason for our sites existing. It's therefore important that you are always encouraging users to do something. And that's not to say that every page needs the same call to action, but we should always be moving users down the cell's funnel and towards making a final decision. And that means we always have to have a next action for them to take. However, as I said in the last video, we need to pick our moment. This is especially true when we're talking about secondary calls to action, like the newsletter signup I mentioned. These exist so that we can maintain a long term relationship with our users, that will eventually lead to converting them. However, often we're so desperate to get the user to sign up, that we actually distract people from the ultimate thing we want them to do. That brings me on to the fact that often, we end up with too many calls to action and that it's hard to distinguish between them. For example, if I wanted to sign up for a wiki on this website, should I click on the Create a Wiki, or Buy Now? As you can see, the options are too similar and will leave users feeling confused. Of course, having a clearly presented call to action is of no use if people don't spot it. That means we need to place our call to action on the page, in a prominent position. Getting that position correct is a tricky business. And there are many different factors that come into play. But as a rule of thumb, a central position high on the page is a good starting point. However, there are a couple of other things that I would encourage you to consider when it comes to position. First of all, we need to think about how people typically read a page. In western culture, at least, we read from top left down and then periodically we scan across the page, as something catches our eye. This means that some screen real estate is more valuable than others. For example, generally speaking, the top left corner is the most powerful position, while the right hand side is the weakest, as we rarely scan all the way across. A common mistake I see, is that people place their calls to action in that right-hand column. However, this is a poor choice because the column typically contains secondary information and users often ignore it. It's also important that our calls to action appear in the main body of the content. Typically, this is on the left-hand side. Even if it appears lower on the page, it's better for it to appear in the main body. You may think at this point that as long as your call to action is high on the page and either central or on the left, then users are gonna spot it. However, sometimes imagery can cause users to miss a call to action. Take for example, these two heat maps. See how people's eyes are drawn instinctively to the baby's face? This means that they are largely ignoring the copy to the right of the baby. However, look what happens when the baby turns its face to look at the copy. The user's eye follows that and is drawn to the copy itself. What this shows us is that imagery can either draw attention to or away from a call to action. And so we need to be very careful how we use it. Negative space is another powerful tool that can help draw users' attention to a call to action. For example, if you compare the Google and Yahoo homepages, the use of negative space clearly helps draw the user's eye to the search box on Google. On Yahoo, by contrast, the lack of whites pace, combined with the faces immediately below the search box, distract the user from what is the primary function of the page. Combining negative space with contrasting colors can also help. It helps draw your attention to the call to action. But limit your use of contrasting colors to only your calls to action, because that makes it really jump out from the page. But remember, don't rely entirely on color, because everybody perceives color in slightly different ways. Another attention grabbing design technique that you might wanna consider using is animation. Without a doubt, subtle animation could draw attention to a call to action. But be careful, looping is particularly distracting, so you need to use animation very carefully, otherwise you're gonna just drive users away. Of course, at the end of the day, one of the best techniques for making calls to action stand out is to just make it big. Large calls to action also provides space for more compelling copy, as users often will not read the copy that surrounds a call to action. However, if you can do only one thing to improve the chances of a user spotting your call to action, it's to remove distractions. Our user interfaces are often cluttered with unnecessary elements that draw the users' attention away from the call to action. Being ruthless in calling those other elements, if you can't remove them, try hiding them lower in the site, or the information architecture, or under a tab, or constantine, or anything to hide them away. Failing that, visually shrink less important elements, so that users can instantly see what is important and what's not. By combining these design principles with compelling copy and a basic knowledge of psychology, you can dramatically improve your conversion rate. But you will not design the perfect call to action on the first try. The secret to creating a truly compelling call to action is to continually iterate it over time through techniques such as usability testing, split testing and the analysis of analytics. You'll begin to learn more about what encourages users to act on your particular site. Learning from these observations and iterating your calls to action and if you do that, I promise that over time, you will see a much increased level of conversion. So that's it for this course on converting visitors through persuasive design. I hope you found it useful and that you're now inspired to start improving your calls to action today.

Back to the top