Boagworld

A blog, podcast and community for all those who design, develop and run websites.

Skip to content
Boagworld
Menu Subscribe
  • Boagworld
  • Podcast
  • Archive
  • Forum
  • Books & Talks
  • About me
  • Hire me
  • Boagworld
  • Podcast
  • Archive
  • Forum
  • Books & Talks
  • About me
  • Hire me
Subscribe Now
First time visitor to boagworld? Find out how the site can help you with our Guide to getting the most out of boagworld

Design: 10 techniques for an effective ‘call to action’

Every website should have a call to action, a response you want users to complete. But how do you encourage users to act? How do you create an effective call to action.

The estimated time to read this article is 7 minutes
Posted on: Thursday, January 22, 2009

Jeff from Brighton recently wrote to me asking:

Occasionally I hear you talk about the importance of having a call to action on the show but you never go into much depth. I recognise the importance of having a call to action but how do I encourage users to complete them?

Having an effective call to action is an essential part of any website. A call to action is not just limited to ecommerce sites. Every website should have an objective it wants users to complete whether it is filling in a contact form, signup for a newsletter or volunteering their time.

A call to action provides…

  • Focus to your site
  • A way to measure your sites success
  • Direction to your users

How then do you create an effective call to action? Here are 10 techniques which help achieve just that.

1. Lay the groundwork

Before a user is willing to complete a call to action they have to recognise the need. Infomercials do this very well. Before they ask people to respond, they first identify a problem and present a product that solves that problem.

You also need to communicate the benefits of responding. What will the user get out of completing the call to action?

Take for example the VoIP service Skype. Immediately above their call to action (a download button) they have the following text:

Make calls from your computer — free to other people on Skype and cheap to phones and mobiles around the world.

They clearly explain what the user will get by downloading Skype.

Skype homepage

2. Offer a little extra

Sometimes you may have to sweeten the deal to encourage users to complete a call to action.

Incentives could include discounts, entry into a competition or a free gift. This is the approach Barack Obama used on his fund raising website. If you made a donation of $30 or more you got a free t-shirt.

Obama fundraising website

Of course the beauty of this offer was that not only did he pursued you to donate, he also turned you into an advertising billboard!

3. Have a small number of distinct actions

It is also important to be focused in your calls to action. Too many and the user becomes overwhelmed. Studies in supermarkets have shown that if the shopper is presented with too many varieties they are less likely to make a purchase.

By limiting the number of choices a user has to make we reduce the amount of mental effort. Effectively you guide the user around the site step by step.

The number of appropriate actions will vary from site to site. However, it is not so much the number of actions as the distinctiveness of each.

Take for example pbwiki.com. They have three calls to action:

  • Create a wiki
  • View Demo
  • Buy now

Although three is not an unacceptable number, there is not a clear distinction between ‘create a wiki’ and ‘buy now’. What should I do first – buy a wiki or create one? I am confused. A better approach would be to push the buy option later in the process once the user has committed to building a wiki.

pbwiki homepage

4. Use active urgent language

A call to action should clearly tell users what you want them to do. They should include active words such as:

  • Call
  • Buy
  • Register
  • Subscribe
  • Donate

All of these encourage users to take an action.

To create a sense of urgency and a need to act now, these words can be used alongside phrases such as:

  • Offer expires March 31st
  • For a short time only
  • Order now and receive a free gift

Carsonified use this approach when selling their workshops. To create a sense of urgency they offer discounts to those who signup early.

Carsonified Workshop page

5. Get the position right

Another important factor is the position of your call to action on the page. Ideally it should be placed high on the page and in the central column.

picsengine.com does this well placing their ‘see in action’ centrally on the page above the fold.

Picsengine homepage

6. Use white space

It is not just the position of your call to action that matters. It is also the space around it. The more space around a call to action the more attention is drawn to it. Clutter up your call to action with surrounding content and it will be lost in the overall noise of the page.

PlanHQ does an excellent job of focusing users of their calls to action by surrounding them with a lot of empty space.

PlanHQ homepage

7. Use an alternative colour

Colour is an effective way of drawing attention to elements, especially if the rest of the site has a fairly limited palette.

Things (the GTD application for the mac) does this expertly on their website. While the rest of their site is predominately muted blues and grey, their calls to action are highlighted orange. This extreme contrast leaves you in no doubt as to the next thing you should do.

Things homepage

Of course never rely solely on colour because many users are colour blind and will not see the contrast.

8. Make it big

As web designers we often get annoyed with clients who ask us to make things bigger. It is certainly true that size isn’t everything. We have already established that position, colour and white space are equally important.

However it cannot be denied that size does play a large part. The bigger your call to action, the more chance it will be noticed.

Mozilla have certainly taken this approach to heart on the firefox homepage where their download link dominates the page.

Firefox Homepage

9. Have a call to action on every page

A call to action should not just be limited to the homepage. Every page of your site should have some form of call to action that leads the user on. If the user reaches a dead-end they will leave without responding to your call.

Your call to action does not need to be the same for each page. Instead you can use smaller actions that lead the user towards your ultimate goal.

37 Signals understand the importance of having a call to action on each page. At the foot of every page of their Basecamp website they clearly display links to their tour and signup pages.

Basecamp

10. Carry the call through

Finally, consider what happens when a user does respond to your call to action. The rest of the process needs to be as carefully thought through as the call to action itself.

One particular word of warning – if you require users to provide personal data about themselves, resist the temptation to collect unnecessary information.

Marketing people in particular like to build up demographic information. Although I can appreciate the value of this, it brings a danger users will drop out of the process.

WordPress.com is an excellent example of how to minimise the amount of data collected. They only ask for the minimal information required to setup a blog.

WordPress signup process

Conclusions

An effective call to action is the linchpin of a successful site and involves drawing together best practice in usability, creative visual design and powerful copy writing.

However, if it is done right it can generate real measurable return on investment and in the current economic climate that is what we all want.

Many thanks to Lee Munroe who found most of the examples I have used in this post.

In the trade these are known as calls to action. Feel free to take your pick!

  • Share this post
  • Read related posts
  • Add or view comments

Not a twitter fan? Not a problem.

Share on Facebook...

Alternatively you could...

  • Email this post to a friend.
  • Print it out and give it away at parties.
  • Shout the web address at the top of your voice.

Related Posts:

  • The Benefits associated with calls to action
  • Calls to action in your RSS feed
  • Jared Spool talks about calls to action
  • Why whitespace matters
  • Sync webpage elements with your video
  • http://twitter.com/sulcalibur Sulcalibur

    Superb well written article, thank you.

  • http://www.highersites.co.uk Tom Wittlin

    Useful stuff Paul! Oddly enough I was just facing this very topic with one of our clients’ homepages yesterday. Further to your point 10, I included a tiny message (in a handwritten typeface) next to the action button, that informed the user that hitting the button and completing the subsequent form, was a mere 30 second process – encourging clicks and putting lazy peoples minds at rest… ;)

  • http://www.stewartcurry.ie Stewart Curry

    You know Ted, making an effictive call-through is a lot like making love to a beautiful woman. First you lay the groundwork, maybe offer a little extra. Make sure you have a small number of distinct actions. Use active, urgent, language. Get the position right. Then make it big, and carry the call through!

  • Phil

    yeah, I’m totally with Stewart Curry :)

  • http://www.morledge.co.uk/ Chris Morledge

    Great post Paul, the idea of “Call to action” on a website is a concept I am trying to push to my smaller clients at the moment. This is a good resource which hopefully will help get the idea across to them.
    Cheers

  • http://meltdowntech.com Ben Everard

    Lmao @stewart
    That’s one way of putting it :D

  • http://jfverville.com JF Verville

    Wow that is a great post! I just discovered your blog with Smashingmagazine Twitt. Keep up the good work!

  • http://pbwiki.com Chris Yeh

    Good post. As a matter of fact, the folks here at PBwiki are considering removing the Buy Now button in the next restructuring of the Web site. Would love to hear any additional thoughts on how to optimize our site.

  • http://www.blog.sentersoftech.com saravanakumar

    This is a good resource which hopefully will help get the idea across to them. thanks

  • penkapp

    Good stuff, Paul. From my experience:
    1) a small number of distinct actions
    2) whitespace
    3) carry the call through
    are the top three if I had to rank them. Without carrying the call through, visitors are left disappointed and will either not come back or notify others not to bother. Doing a poor job of satisfying the latter can instantly kill your site traffic and any possible related revenue.

    • http://drivingonlinesales.com Wynne

      I would highly recommend having only one call to action visible at any one time. More than one adds confusion and leads to less actions being taken overall – as a general rule of thumb.

      Great article. Thanks for sharing. I’ve taken inspiration from this and created my own post on effective call to actions – and linked back to you (effective call to action).

  • Matthijs

    Excellent advice. One point I’d like to add: if you have a call to action somewhere, make sure it is 100% obvious to a visitor what will happen if they react to that call to action.
    So often I come across potentially interesting offers, I’m at the point of clicking the call to action button or filling in a form (or something like that), but what stops me is that it isn’t clear what’s going to happen next.
    Do I have to go through a long and tedious sign up process? Am I buying something immediately when I click this? What will they do with the personal info I’m filling in? Etc etc
    A big “Sign up now!” button is nice, but only half the story I think.
    (this is just personal experience by the way. Maybe the marketing guys have found out that my concerns don’t apply to the general public)

  • http://www.megastarmedia.com Social Networking Web Design

    beautiful examples btw.
    nice refresher course..the challenge is to design sites that use these design principles AND keep all of your web designs from looking the same. Our challenge is designing thousands of websites and making each one unique while sticking to these great tips.

  • http://intersindo.com/seo-contest/ Busby SEO Test

    Made information be felt close to voip

  • Inerxia

    Excellent!
    Thats why the little “Share this” icons doesnt work for blogs, they are so many options and services…
    Thanks

  • http://gourmeted.com Joy

    Fantastic article. Thanks! You just gave me ideas for my next blog update. :)

  • http://www.girlonthewrite.com Wendy Sullivan

    Hmmm… just last night my friend and I decided to launch the “Brass Balls Radio Anti-Ethanol Movement”, to save the (tequila producing) agave farms of Mexico. I do believe we shall implement some of these ideas as we launch our “Save Agave, Fight Scurvy!” campaign.
    Thanks.
    Wendy

  • http://www.myspace.com/willfrancis Will

    Very useful article, thanks a lot :)

  • http://www.e11world.com Eddie Potros

    Thank you for this nice detailed article. I will try and use this for every project from now on.

  • http://www.dostyakasi.com dOSTLUK

    very nice thank you

  • Jeremy

    I enjoyed the article. Thank you for taking the time to share.

  • http://businessfusionpro.com Bryan Coester

    Fantastic and well documented article. It really is true in the world of business or communication, that if we focus on our audience then we will get greater returns. What firefox, wordpress, and others have done by focusing on the call to action is brilliant. I would love to see more websites do the same.

  • http://WebSavvyPR.com CathyLarkin

    Great post. I’ve been thinking about incorporating a call to action on my site for some time. I am not a large company, with a software type product, but a PR pro and social media guide selling my services to non-profits, small businesses and speakers/coaches. I think those selling services have to make extra sure we are giving enough value and being authentic, that folks can believe in your expertise enough to sign up, contact you or whatever your call to action ends up being. I think customer testimonials are very useful for helping build the authenticity of a brand as well.
    Thanks for the good info

  • http://WebSavvyPR.com CathyLarkin

    Sorry to comment twice, but after re-reading comments, I agree with Matthijs above. Try and use language that gives the potential customer a clue about what will happen when they take the suggested action.
    I was just reading a Copy Blogger post (http://www.copyblogger.com/increase-blog-subscribers/) that by changing a word or two increased his entry level jobs blog RSS subscriptions by 254%. He changed the word subscribe to RSS feed to Get Jobs by RSS. Because a large percentage of people equate the word subscribe with paying money, the way subscribing to a magazine costs money, that perception created a barrier to sign-ups. Changing the words clarified the results of the all to action and increased responses dramatically.
    I have suggested to my small business clients that we us the words sign-up or free subscription as some of their clients/customers are unfamiliar with RSS feeds, what they do and how they work. The RSS feed button is something that many tech-savvy folks take for gratnetd, but that many potential customers may not.
    I personally hate clicking a link, filling out a sign-up form, and THEN finding out that there is a cost or charge. If I know it up front, I’m more likely to buy in (pun intended).
    We need to be sure to step outside of our own preconceptions and think like our potential customers. Use their language, not our jargon.

  • http://www.computersinpersonnelhr.com Dan

    Thanks for posting this, extremely useful for designers.

  • http://www.whatwasithinking.co.uk/ Alex

    Very useful post, very well written!
    I agree with Cathy, I think you will need to consider your audience and make the call to actions work for them rather than for you. After all, they will be using your site.

  • http://www.leemunroe.com Lee Munroe

    Thanks for the mention Paul. Useful guide.

  • http://www.artillery.ch benjamin

    Well written and extremely useful article with good selection of examples. Thanks a lot for this guideline.

  • http://www.bestwebimage.com/usability-testing/basic-usability-design-analysis/ Robert

    Great tips. I like #3. It’s what I call the “Entropy Factor” Don’t let it get out of control.

  • http://parisvega.com Paris Vega

    Really good stuff. This article will the standard by which I judge my future websites.

  • http://www.pewpewlaser.com/ KatieK

    I like the idea that EVERY website has a call to action – even if it isn’t obvious.
    But one major point about CTAs that I would suggest is the need to TEST. If you are using instinct or “gut feeling” to guide your choices about what makes a better Call to Action, then you aren’t listening to what the visitors are saying. You need some kind of testing platform to find out the actual affect that your changes have on the success rate of your call to action.
    Thanks for the articles and podcasts!

  • http://level343.com Gabriella

    Very well written. I was just talking to a client and I stated they needed to ask themselves one question : What do you want your website to do? A website is designed to do one thing and one thing only: exactly what you want your site visitors to do. You are also aware that a website is a marketing strategy. Any solid marketing strategy is supported by other strategies.
    More sign ups for your email list
    More RSS subscribers
    Higher conversion rates from visitors to customers
    Email inquiries about services
    Maybe not in that order but the bottom line remains websites are no longer just a face on the Internet, it has to be designed to do something. Thanks for putting this together.

  • http://www.divorciolegal.com.br divórcio

    Brilliant post. Focus is everything, really
    Our multitasking brain often makes us forget of it
    but it is always good to remember !

  • http://www.susieclark.co.uk Susie Clark

    Extremely useful, easily digested list with fab illustrations. I will be applying the details to my evolving garden design website. Many, many thanks for sharing!

  • http://seoorganictraffic.blogspot.com/ Nievo Jan

    How about those sites that already been doing well without having these ideas what little changes shall be made?

  • http://www.chatlan.net chat script

    Very useful post, very well written!
    I agree with Cathy, I think you will need to consider your audience and make the call to actions work for them rather than for you. After all, they will be using your site.

  • http://www.storm10media.com/ SEO Wales

    Thank you – I have tried a couple of these techniques and I noticed an immediate improvement so I’m back for more.

  • http://www.waterpigs.co.uk Barnaby Walters

    Some good stuff there – I didn’t really know what a “call to action” was supposed to do before reading this! As I’m not selling things directly, I can’t use some of these, but I like the idea of having one on every page – perhaps a different coloured banner at the bottom with “Contact me Here”…

  • http://reklama.3d.lc Marco

    I have to admit I was making a lot of mistakes with call to action… Well thanks to you i know what to do now. Thanks for a great tut on this.

  • http://www.darrenhuskie.com Darren Huskie

    This is article is really useful and covers just about all I needed to know before creating effective ‘Call To Actions’.

    Looking forward to implementing them more efficiently as a result.

  • http://www.ratedrenovations.com Peter

    hey, this article of yours is EXCELLENT, i bought a book on call to action, and there was soooooooo much WAFFLE. Your article was straight to the point and is clearly written, and your examples were really good. I’m now addressing my website with your ideas. By the way love your website theme too.

    Great stuff

  • http://dianeguercio.com Diane Guercio

    Thanks for all of the great advice! I am trying to build calls-to-action into our company blogs and want to be as effective as possible. Lots of good advice here!

  • http://p0ker.ro poker guy

    Call to action buttons can be intimidating if you’re not sure where it is going to lead you. A proper description is needed, but the appearance of the button surely helps too. It feels more secure to click something green or blue since the colors seem ‘safe’. A big red button creates the impression that I’m about to execute something big and there’s no turning back once I click it.

    Thanks, that’s a nice article.

  • Tim

    With regards to #4 “Use active Urgent Language”, I have been reflecting on this over the last few days – so your article is very timely Paul! – and I think “Today” is another very good word that can be used …

    As in, “Order today to receive your free gift”, “Call us, and start enjoying the benefits of … today”, and so on.

  • http://hitdj.se DJ Stockholm

    I totally agree with Poker guy. You have to take the human mind into consideration while designing this kind of functions.

  • http://www.linkedin.com/in/austinclements Austin Clements

    Very good article. I just came across this with a quick google search on ‘call to action in websites’. This was exactly the insight what I was looking for. kudos.

    3 was perfect for the project I’m working on and my client was please with the idea.

    • http://leighhowells.com/ Leigh Howells

      You need to start thinking about your site design with personas in mind. Even if these are just short descriptions or notes for yourself, we always need to design with the end user firmly in mind from the outset.

  • http://seosemgoogle.info Terry Davies

    excellent, well constructed article. the understanding of the concept of negative space can not be underestimated.

  • http://www.attention-getter.at Thomas SEO

    Thanks for your informative article.

    I will try to develop a call to action strategy for my next web project.

  • http://thebauergallery.com Chris

    It’s funny, I’ve been reading a ton about calls to action and have even paid people a lot of money to learn from them.. and i see screenshots of some of the same websites they use in their example on this page! :)

  • http://thepracticalmom.com Mom Blogs

    Exactly what I was looking for to convince my boss to use the word “call” in front of our phone number.

  • http://thepracticalmom.com Mom Blogs

    Exactly what I was looking for to convince my boss to use the word “call” in front of our phone number.

  • http://inkjam.blogspot.com/ Sandipan

    Thanks a lot. This article has greatly benefited me. 

    Regards

  • http://www.womaninleadership.com Stacie Walker

    Paul,

    I enjoyed this article. Very informative and visually appealing. The key to effective call to action is to follow the techniques mentioned above.

    Best,

    Stacie Walker

  • Anonymous

    very helpful….thank you so much for sharing!!!

  • http://umbrella-host.com/ Business Web Hosting

    We have been doing some call to actions on our homepage having read your great post. However some inpuit would be great as to making them better… You can view them here: http://umbrella-host.com i hope thats ok!

  • http://twitter.com/robkingston Rob Kingston

    Paul, years down the track, I find that I can still recommend this article to my colleagues. A timeless article. If I could add just one point 
    (a bonus, perhaps)  it would be split testing the call to action on the page.

    I was absolutely convinced at one stage that “Switch to ClientName” was the perfect call to action for our client, but it turned out after we tested it, that it decreased conversion rates by like 80%. Sometimes it pays to try a few different ones out (based on varying the techniques you’ve outlined here) to see what works.

  • http://profile.yahoo.com/FRCUMDQEAG4G54ARILLNKTMXV4 Bettie

    Came across this site: http://www.samplesaleavenue.com that has a (in my opinion) eye-catching call to actions on the home page for each post listed… The CTA is revealed on hover. Very cool :)

About this site

Photo of Paul Boag

Hi, I am Paul Boag. I am a co-founder of web design agency Headscape and host of the boagworld podcast.

If you are looking for advice on designing, developing or running your website then you are in the right place.

I recommend starting with:

  • A guide for those new to the site.
  • Searching for a specific topic.
  • Following me on twitter.
  • Subscribing to updates from me.
  • Reading more about me!
  • Subscribe to Boagworld
  • Learn about Headscape
  • Hire me

I am not the only person at Headscape sharing great advice. Make sure you check out these guys too!

Others worth following

  • Chris Sanderson (Designer) Chris Sanderson (Designer)
  • Craig Rowe (Developer) Craig Rowe (Developer)
  • Dan Sheerman (Front End Dev) Dan Sheerman (Front End Dev)
  • Ed Merritt (Designer) Ed Merritt (Designer)
  • Leigh Howells (UX Consultant) Leigh Howells (UX Consultant)
  • Marcus Lillington (UX Consultant) Marcus Lillington (UX Consultant)
  • Rob Borley (Future Tech Guy) Rob Borley (Future Tech Guy)
or contact me