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.
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):
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…
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.
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’).
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.
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:
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:
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.
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).”
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:
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 »