The CTA: Where do you want me to click?

It’s a vastly overrated notion that a homepage should include all sections of your website and serve all kind of visitors. It needs one clear call-to-action. That call-to-action needs to be the main thing you want your visitor to do on that page, like buy your products or subscribe to your newsletter.

Make sure that a call-to-action stands out from the rest of your design, by using a contrasting button color, an actionable link or button text and reducing most (if not all) clutter.

Clutter:
To make disorderly or hard to use by filling or covering with objects

The need to put everything on one homepage

Employment websites do it. “Employers subscribe here”, “Companies list here”, “Latest jobs”, “Build your resume”. Real estate agents do it. “Buy these new homes”, “Sell your home with us”, “Latest sales”, “Upcoming events”. That’s really just the tip of the iceberg.

It seems that most homepages are designed with one thing in mind: “How do I make everything on my website accessible from this one single page.” Well, you can’t. Not in a way that your visitor will understand your company, product or really anything at all.

One clear call-to-action

To guide your visitor into or through your website, you should give him directions. Pretty similar to how a road needs road signs actually. Yes, you can put up multiple signs, but you should make the most important ones the biggest. Make it as big as possible. Make it stand out. Here’s our own product page for the Yoast SEO Premium plugin:

It’s pretty clear what we want you to do there, right? Not all websites add calls to action like that, though. Everybody has visited that one great looking website in 50 shades of grey that had an orange RSS button that drew all attention. That’s really bad design in my opinion. Of course, the thing that stands out should just be your call-to-action: that’s what you want visitors to click on.

A different approach to a call-to-action

There are many ways to use and implement this call-to-action. Obviously, one is using the big bold button, preferably in a color that is not used in the design of the website (the orange RSS button mentioned above). You might also use whitespace to emphasize a specific part of the homepage, making it stand out that way.

We recently had a client for a website review who has this (quite common) idea of starting his website with a choice: three options for three variations of a product. Of course, that would imply three calls to action…

No problem, if you combine the two ways mentioned above. So make a block that stands out (use sufficient whitespace around it) and add three similar calls to action, with (very important) a descriptive title for that block, like “Make your choice”. That way, the entire block becomes your call-to-action. It’s a bit like we do on our current homepage:

Now let’s illustrate the simplicity of call-to-actions by looking at some example websites (none of them are clients):

Jobsite.co.uk

In the first version of this article, one of the examples I used was Jobsite.co.uk. It was terrible, in terms of calls to action.

“Jobsite is a leading UK online recruitment site, dedicated to helping you find your next job.”

I actually got lost on the homepage already. Yes, I understand you want me to search for my next job on your page, or do you really want me to register first? One very distracting issue this homepage has, is that the Vision2learn banner has the largest call-to-action of the page…

jobsite.co_.uk_-590x508

How things have changed over the last years! The 2016 Jobsite website has a very nice call-to-action that focuses on just that: finding a job.

Clear call to action on the 2016 Jobsite.co.uk

All things considered, the homepage is very much improved. My next suggestion would be to test the button color (make it stand out more) and the button text (make it more inviting and descriptive, like ‘Find your dream job’).

Scuolaleonardo.com

The second website I mentioned back in 2012 was Scuola Leonardo da Vinci. Since we did website reviews for websites from all over the world, I decided to look up an Italian School in Italy. At first, in the Italian language. After looking at their website, I decided to stick to Google Translate… as I couldn’t find where to apply for a course. As it turned out, the question “Where do you want me to click???” was impossible to answer for this website. The total lack of a call-to-action, combined with the overall clutter, makes a visitor head back to Google in the blink of an eye.

scuolaleonardo.com screenshot

Just like Jobsite.co.uk, this website has developed over the years, but just not as much. The first view of the 2016 website is this:

scuola-leonardo

We have the modern large image in the first view, with a nice block of text that could have easily been the call-to-action. But it isn’t, as the entire image holds no link. A missed opportunity. A bit more down that page, we do find some call-to-action buttons:

More Scuola Leonardo

Why not start with these? They make perfect top tasks for that website and deserve some more TLC in my book. Change the button color to make them stand out more from the rest of the design altogether.

Walmart.com

After the initial publication of this post, I received quite some comments on my quick review of Walmart’s calls to action. You’d expect that company to monitor and improve their website all the time, right? This is what I wrote in 2012:

“Help me out here, Walmart. Why do you want me to click my empty cart? Don’t get me wrong, for shopping sites, emphasizing the cart is always a good thing. But I think what Walmart wants me to click is something else, like the free shipping offer or perhaps a product I could buy. Now that should be the orange button on that homepage! Also, the banner “Shop Top Brands” is just a list of products and prices. The call-to-action on that banner should also be clear (“Shop NOW” or something like that).”

wallmart.com_1

It seems we all learned quite a lot about UX and conversion optimization, as the 2016 Wallmart.com website really has improved a lot. In fact, it might be the best improvement of the three examples in this article:

Walmart 2016 screenshot

The header is clickable, the cart has been toned down, the search option is nice and prominent and the banner is for their own products. Is it all good? Well, there is always room for improvement. In an ideal world, there would be an actionable button-like element in that header. Just so we won’t mistake the banner below the header for that.
Furthermore, the lady might be looking at that button, instead of the package. On the other hand, we feel the sheer joy she feels when receiving her Walmart package, right? These really are things a website should test.

Get to work!

A lot of things mentioned in this article go for your homepage and landing pages. For product pages, there are a lot more things to consider. Find these in my article Calling to the next action.

With the issues described above, you can easily check your own homepage. Is there a clear main call-to-action? Is there too much clutter?Go and make things clear for your visitor. You’ll have a better website after it!

Read more: Focus on clarity first »


45 Responses to The CTA: Where do you want me to click?

  1. Nelson Kamdon
    Nelson Kamdon  • 9 years ago

    Hi Michiel,

    Great Post!

    I remember when I did my very first homepage couple years back… with tons of ads…. hahaha… I only realized that it’s all just clutter when I saw one dotted with ads. It was even on blogspot. LOL!!!

    Anyway… I will always remember this “Uncluttered Homepage with Call to Action”

    Thanks!

  2. The Business Cookbook
    The Business Cookbook  • 9 years ago

    I often find that what originally is a quite usable design becomes more cluttered as businesses demand the marketing of further ideas and products and try to add these to the existing site layout. The original site design was conceived with particular goals in mind and messages to display. Once additional requirements are added to the mix the original idea becomes cluttered and message diluted. The challenge is to make sure businesses understand the role of the website design and don’t try to put a square peg into a round hole.

  3. Sandi
    Sandi  • 9 years ago

    Thanks for this Joost. I enjoy your posts. I’ve often wondered why someone developed a plugin to remove your posts from the WP Dashboard! Just dumb. Why would you choose to miss out on such good quality SEO information?

    Anyway that was a bit off topic.

    I too would love to see some examples of sites that you think ARE doing this right. I don’t feel like I’ve got the right methodology and I’d love to find some sites to emulate. Thanks again.

  4. Paul Matric
    Paul Matric  • 9 years ago

    Simplicity is the ultimate sophistication….yet so many popular sites still bombard the user with confusion…Nice post

  5. Debajyoti Banerjee
    Debajyoti Banerjee  • 9 years ago

    Joost, the logic is excellent and I fully agree with you. And even I faced similar thing for one of my client’s website. The homepage was beautifully crafted, busy looking but loads of links and buttons that might easily confuse users where to click first. After a thorough analysis, we made the homepage damn simple – a semi squeeze page (with only the required benefits and bit brief about the site & difference from others) with just one big call of action button that leads to another page and from there after it’s done, we tactically branch out users to other important pages. The result was amazing. Visitors stay more on site, bounce rate decreased and page views increased. Thank you for your great post.

  6. Theresa Wagar
    Theresa Wagar  • 9 years ago

    As a long time web designer for local businesses, it frustrates me that my clients have such difficulty grasping the need for ONE key Call to action on ANY page, but especially the homepage. Thanks for the encouragement that I’m not crazy . . .LOL

  7. sahid
    sahid  • 9 years ago

    Great article. Lots of good stuff in there about web design and strategy. Totally agree about being focused on one CTA.

  8. Louise
    Louise  • 9 years ago

    It’s normal for a business to have more than one service or product so it can be difficult to decide on a call to action about what should exactly go on the home page. That is why I try to create the internal pages of the site as the main conversion pages.

  9. Niall
    Niall  • 9 years ago

    Great advice! Thanks!

  10. Andrew Thomson
    Andrew Thomson  • 9 years ago

    This is a similar idea to one that Seth Godin expresses in his book Big Red Fez. Basically he points out as you do that what ever action you want the user to take next should be the most obvious thing on the page. There should really be only one action choice for the user – the one you want them to take. Don’t distract people with unnecessary alternatives.

    • malcolm mcewen
      malcolm mcewen  • 9 years ago

      perhaps a little off topic but as Andrew points out the ideal thing is one button on a home page; however… one of the the things that bugs me is bounce rate. A good site should be like a good library shelf and take you directly to the thing you want. However search engines don’t like that( at least that’s what I am given to believe). Thus if a site is laid out in such a way that a visitor is taken directly to what they are looking for you get 100% bounce rate whereas if you bury the information and force them one or two pages in your bounce rate goes down and so does your ranking goes up…am I correct here? by the way I linked to my ‘other’ and main site here which effectively falls in this category..

  11. malcolm mcewen
    malcolm mcewen  • 9 years ago

    I agree with you totally Michiel: CONTENT IS KING! but the advise I often get is to change text, reduce sentence length and include the key word more oft than is required for the content.. WHY? because it is what SEO advisors and YOAST tell me to do… In truth I subscribe to the belief that my content despite being badly SEO will ultimately get more visitors than a far better optimised site with poorer content… we will or at least I will as my site is only one month old and so only getting 20 visitors a day

    • Michiel Heijmans

      :) Have you read this article? That is one you should read. Another thing you might want to use to optimize pages is the WordPress SEO plugin from Yoast and check the block on the Edit Pages in WordPress. The optimizing for focus keyword bit, plus the Page Analysis. But we’re getting a bit off topic here.

      If you want in-dept info, you should order a site review ;) Or follow me on Twitter for more links about similar subjects.

  12. malcolm mcewen
    malcolm mcewen  • 9 years ago

    yes good post but… whilst some of your examples are quite specific in the aim of the web site I’m curious how you would create a decent home page for a site that isn’t specific (my working for free world site w43w.com is a fair example) and similarly what about the search engines? Whilst I am personally oppose to designing pages to suit robots rather than the readers I want to attract I am to a degree forced to first serve the search engine (not that I am particularly good at that)… regards malcolm

    • Michiel Heijmans

      No. Serving search engines before visitors is just not right in so many ways. That would mean you care more about Google than your visitors. Search engines are not the only way to get traffic and besides, I think Google acts more and more ‘human’.

      Serve quality content in a logical, appealing way to your visitors AND optimize your pages. Not first this, than that. Do both.

  13. Austin Ruhoff
    Austin Ruhoff  • 9 years ago

    This is one of my pet peeves – cluttered home pages where it takes me forever to figure out what to do or where to go! I think you make some great points and provide some great advice! Thank you!

  14. Gayle
    Gayle  • 9 years ago

    What an awesome article! Its like a web page MAP ;) I love it, thanks!

  15. InterHost webhosting
    InterHost webhosting  • 9 years ago

    Sometimes people just want to promote to many content, i’m not under the impression that more as 1 cta buttons is disturbing, it divides the focus thats true. But if a person is looking to post a job on for example the job site, he will notice the different cta buttons first. as our eyes scroll trough the website one of the buttons will attracts his attention

  16. Kevin Thomson
    Kevin Thomson  • 9 years ago

    Interesting – I recently had a debate with a client, whose site I was developing, concerning the amount of content on the Home Page. My argument is less is better but the client wanted it to be as busy as possible because he though this was the sign of an important website! Personally when I visit a site if I can’t figure out what it’s about or what i’m supposed to do within about three seconds, I click off.

  17. James Bryant
    James Bryant  • 9 years ago

    That’s a good point, banners are adopting this strategy more and more realising trends seen in web design. I think the banner and ‘Advertise Now’ on Jobsite would be below ‘the fold’ on 1024 x 768 though. So wouldn’t conflict for a large portion of users. Absolutely agree with you sites shouldn’t use prime screen estate for banners – you are never going to win fans that way! :)

    When analysing your own work do you find it best to look at the page as a whole or consider how it looks when rendered at certain resolutions? I always find it a little dangerous looking at page comps from top to bottom.

    Yes if you double check my post you see I make the same point with Wallmart, I can’t understand why they don’t just have it orange once it has something in the basket.

    No problem, hope I’m not too argumentative I find it good to discuss these things – it’s good to get a different point of view! :)

  18. James Bryant
    James Bryant  • 9 years ago

    Hi Michiel,

    I think you make some good points. However It’s probably worth considering in each of these cases that while UX ‘mistakes’ might have been made it’s worth remembering that the designers and uxers on these sites are probably under a lot of pressure to promote more than one area of the site from their business. Speaking from experience you can scream until you are blue but sometimes you have to accept you can’t win everything :)

    I think you may have been a little harsh with the Jobsite example, as they are doing many things on that homepage quite well as pointed out by Mark Mehl. It does seem to me they have made the search button the most prominent and it appear on that large blue area to draw your eye – surely users looking for a job would instantly see that over the secondary actions? Although I agree there is still a high amount of contrast on the dark blue buttons meaning they will draw the eye. I’m also surprised you’ve chosen to use a screenshot when they have a display advertising spot on there. This would most likely be a temporary addition and on a rotation from an ad network therefore quite a tough one to predict and not present on all occasions.

    I agree with your observations on Scuolaleonardo there doesn’t seem to be any focus at all and it’s very difficult to nail down any real direction.

    I think Walmart use the accent colour of orange well to highlight the important areas. As you say it is very strange that Walmart have chosen to have the My Cart in bold orange it would probably be best to have it this colour once the user has something in the basket. Given ecommerce sites tend to catalogue a lot of their products on the homepage it seems strange that this is the element that lets the page down.

    I’de welcome your thoughts,

    James.

    • Michiel Heijmans

      I totally get your point on UX designers and pressure, James. I just think not all of these items have to be on the front pages of the websites this way…

      On Jobsite: The banner is not alone in the way it is set up. It is unfortunately getting quite common for banners to have the largest call-to-action on a website and in my opinion making money on banners should not be the main goal of a website (in most cases), especially not on the Jobsite website. It may be a ‘lucky’ screenshot for Jobsite, but it is not unique at all. Website owners should very much be aware of that.

      Wallmart: How easy is it to make that cart orange ONCE there is something in it? The article is on homepage call-to-action and in my opinion there’s nothing in the cart at first visit ;)

      Thanks for your response by the way, it’s much appreciated!

      • James Bryant
        James Bryant  • 9 years ago

        That’s a good point, banners are adopting this strategy more and more realising trends seen in web design. I think the banner and ‘Advertise Now’ on Jobsite would be below ‘the fold’ on 1024 x 768 though. So wouldn’t conflict for a large portion of users. Absolutely agree with you sites shouldn’t use prime screen estate for banners – you are never going to win fans that way! :)
        When analysing your own work do you find it best to look at the page as a whole or consider how it looks when rendered at certain resolutions? I always find it a little dangerous looking at page comps from top to bottom.
        Yes if you double check my post you see I make the same point with Wallmart, I can’t understand why they don’t just have it orange once it has something in the basket.
        No problem, hope I’m not too argumentative I find it good to discuss these things – it’s good to get a different point of view! :)

  19. 4399
    4399  • 9 years ago

    ???????????

    • Michiel Heijmans

      ??????

      • Garry Dufresne
        Garry Dufresne  • 9 years ago

        ????????????????

  20. Michael Borger
    Michael Borger  • 9 years ago

    I struggle with this on my own company website. I’m a real estate investor, not agent, but deal with similar matters. I SEO very well, but am not capturing enough and need to rethink my visitor funnel strategies.

    The Chrome page is genius in its simplicity. However, they have an advantage in that anyone visiting that page likely has one of only two objectives: 1) learn about Chrome, 2) download Chrome. They are not being pushed other Google products that make the visitor think about other options. There is one tunnel for them to walk through. Many business don’t have that luxury because they offer multiple services or product lines (ex. real estate — selling, buying, investing, etc.).

    • Michiel Heijmans

      Hi Michael,

      The link to your website is already next to your avatar (your name) anyway ;)

      In general, I think you should focus on one main action per page. That should be the most visible, most appealing call-to-action. Of course you can add others, just make sure they don’t stand out as much as the main one does.

      Jobsite is not doing a terrible job in my opinion, but when you create buttons in different shapes and colors, there is no focus. The will all stand out that way.

      Do you get what I mean?

      • Michael Borger
        Michael Borger  • 9 years ago

        Thanks, Michiel. I understand. Simplicity and clear focus. Don’t confuse the visitor. That’s what I love about the Chrome page.

        I suppose on my site, I have 4 choices: 1) make the ‘sell’ CTA the most important, 2) make the ‘buy’ CTA the most important, 3) make the ‘invest’ CTA the most important, or 4) give equal weight to all three CTAs but make them separate from the other possible clicks on the page. Ultimately, this is a business decision and not a web decision.

        • Lukas
          Lukas  • 9 years ago

          … or

          you could have one main banner (including logos, phone numbers, slogans, videos) 25-40% height of view port (like 200-250px).

          Next create 3 equal width columns for each section. Each of them having different background color with soft texture + the same looking CTA’s.

          p.s. the layout could be bit a wider/liquid :) …

  21. Mtn Jim Fisher
    Mtn Jim Fisher  • 9 years ago

    where are your examples of “really good” homepages and call to actions?

    Mtn Jim

    • Michiel Heijmans

      Luckily there have been many articles on that, like this one :)

      My point is that it is really easy to create a homepage that is not helping the visitor. I think ‘bad’ examples are telling that tale better than ‘really good’ examples. It is impossible for most websites to come up with a call-to-action as on pages like f.i. the one for Google Chrome, don’t you agree?

  22. Dragan Nikolic
    Dragan Nikolic  • 9 years ago

    You’re right. Smaller businesses almost always have no clue as to what they want out of their websites, so I guess it’s up to us to tell them based on what their company’s goals are.

    And yes, it takes more time to explain than to implement. Sometimes (often times) I think we’re not paid enough.

    —-
    I guess Yoast never thought there’ll be another author on his website (disabling author archives), so clicking on your “by Michiel Heijmans” get’s me to yoast.com.

    How big is that man’s ego? :)

    • Michiel Heijmans

      Nothing like that ;) Check the link below the title of the article for my author page.

  23. Mark Mehl
    Mark Mehl  • 9 years ago

    I agree, the homepage should be uncluttered and offer some direction (clear clicking options). But for SEO purposes, your homepage (which has highest pagerank) also needs to summarize the four most salient reasons why a visitor should visit your website in the first place. I think the jobsite homepage (above) has done that with isolated contrasting boxes, terse headlines, and clear clicking options. The only thing missing is a simple, descriptive (iconic) graphic for each clicking option.

  24. Dragan Nikolic
    Dragan Nikolic  • 9 years ago

    I see your point in everything you wrote Michiel.

    I just wanted to put an emphasis on the core of this “not-so-clear call to action” issue –

    1. Client who does not know what she/he wants to achieve with a website.

    Solution: Before you take on new endeavors always be sure to submit an SEO form with key questions about the company so you can learn about their key features and goals.

    2. Lack of editing. CMSs give feeling of being in control and the ease of bloating websites with ever more content.

    Solution: Not everyone can afford an editorial person. Have companies double check with you if they want to put some new stuff on homepage.

    3. Bad communication between a client and an SEO team. This is a major problem for me, although I try to do my best, clients often respond with a phrase ~ We’ve given you access to every account. What else do you want from us?

    Solution: Always ask for one dedicated person within the company you work for to be your liaison.

    4. Unclosed circle of calls to action. This means that there’s a page where visitors just don’t know what to do next and they usually leave at that point.

    Solution: Have call to action on every page, whether in sidebars or within the main content.

    Have I thanked you for the article?

    Thanks :)

    • Michiel Heijmans

      Thanks in return for your comment ;)

      I think the bottom line of your point is that customers assume you are this internet guy that will arrange or solve all for them.

      Seems to be a pretty common issue, especially with smaller businesses (IMO). You become this kind of ‘internet lecturer’ for them and they actually rely on you to finish the job for them. And you should, in my opinion. Service is an important extension of the website / SEO. Just make sure you get paid ;)

      Involve the client as much as possible. How many times have you asked a client what his goal for the website is? Hm. So did I. That client probably does not even realize there should be a goal for every page.

  25. Steve Scott
    Steve Scott  • 9 years ago

    Nice post Michiel,

    I’m a big believer in a solid call to action. I love that you showed some examples of sites with too many calls to actions and how it’s easy to get lost or be overwhelmed with the “what do I do”.

    However, I would love to see some samples of sites you DO like with GREAT designs and calls to actions.

    Got any you care to share?

    Steve

  26. Jono Alderson
    Jono Alderson  • 9 years ago

    Fantastic! Same thing applies for ‘mega menus’ – how many different choices do you really want to offer the user? 50? 100? Over 200? I don’t think so…

    Obviously this makes sense from an SEO perspective, too – talking about / linking to a few things (well) is better than flooding high volume / now quality…

  27. Bill Parlaman
    Bill Parlaman  • 9 years ago

    Great post. So many people focus on more traffic and do not concern themselves with conversion. It’s a mistake to treat your home page like a landing page.

    On a side note, another conversion killer is light grey text on white background. Why webmasters do this I will never know.

    P.S. 15px is the new 12px. Out to save your eyes one blog at a time!

    • Michiel Heijmans

      I totally agree, Bill.

      On your side note: and then list a banner ad on that website. You get my point…

  28. Web Design by SiteDesignZ
    Web Design by SiteDesignZ  • 9 years ago

    I like the logic, actually thought the Jobsite was pretty good till you pointed out the error of the bottom two buttons.

    Ok, so do you have any sites that you admire the way they approached the interface using your view. Any ones in particular that really nailed it?

    Im designing a real estate interface right now and would love to see what you think is a good example or how a realtor could use this.

    Best, Tom

    • Michiel Heijmans

      Ow, and just remove the clutter ;)

    • Michiel Heijmans

      Hi Tom,

      Real estate websites are indeed not that easy, as pointed out in the post. The thing is that you should focus on what is most important on that homepage. You will most probably have two types of visitors: selling ones and buying ones. That could also imply two great, optimized landingpages, addressed from the homepage.

      I already refered to creating a call-to-action block. I think that would be best for a real estate agent. Compare your own project Levermore. The one thing those call-to-actions need is a way better text on the buttons. For the real estate website these buttons could read “Sell your house” or something like that.

      Agree?

      • Web Design by SiteDesignZ
        Web Design by SiteDesignZ  • 9 years ago

        LOL..With a realtors that’s tough one. They like to push the clutter…kind of like a used car ad in the paper. But like the idea of trying to split the call to action to buy or sell.

        When I studied interface design in school (years ago) the idea was not so much clutter…but more emphasis. Using different size buttons and text to draw attention to the more important areas and layout to direct the eye on the page so it would flow naturally across it. I dont always get to follow that, as the client (which Dragan explained below) does gets what they want. I really is not worth the time to explain proper interface layout strategies. But we try.