How to Design Foolproof Links and CTAs

Posted on 24/02/2016 by Team Hallam

Have you ever looked at your website stats and wondered: “Why aren’t people going where I want them to?”

Why aren’t they visiting your product pages? Why aren’t they making any purchases?

In this post I’ll share some expert tips that could help you to control how visitors progress through your website.

Identify the Problem

First we need to identify what the problem could be. Useful tools such as Google Analytics can give you a lot of statistical information about your site, but I’ve found that more visual tools, such as Crazy Egg, and Inspectlet, can really help you pinpoint precisely where the issues in your site lie.

Having a visual frame of reference like a heatmap can show you instantly what is drawing your audience’s attention. It’s especially useful when combined with a scrollmap, which can tell you how far down your page visitors are looking! Sometimes the problems can be quick and easy to correct, but sometimes it’s not so clear. Hopefully, these tips will help you to improve your site and achieve more of your goals.



As daft as it sounds, sometimes the problem can be as simple as clients not knowing at a glance what constitutes as a link, and what doesn’t. While this may seem obvious to yourself and others, we must remember that everybody operates differently, and they might view your website differently to how you view it.

For example, the promotional images on your site can make it difficult to determine just where your visitors is supposed to click. This is a very common problem on websites like downloads.cnet and

Filehippo Website calls to action, designing links
Did you immediately find the right download link? Hint, it’s the green button beneath the search bar in the top right. Confusing, yes?

download.cnet calls to action, designing links is just as bad as filehippo for this. Did you see the download link, or the big bright orange and blue banner at the top of the page first? In this instance it would just lead you to the company’s website, but another one could lead you anywhere.

How could they fix this? Simply making it more clear would instantly solve this issue. They need to disassociate their links from the ads that are trying to mislead people. One way could be through adding a big blatant border around the title and subsequent download link, or even a full background colour and spacing to emphasise the title and download link further. Even something as simple as an arrow pointing to the download link would work wonders! Just anything to make their link stand out from the rest quickly and thus reduce any “missed clicks.”


Another issue could be how your links and CTAs are styled. Now, there is no right or wrong when it comes to styling. It all depends on what works with your design and website and what you feel looks best, as well as what works best for your audience.

Having said that, you might have noticed over the last few years a big surge in big, bright buttons in vast oceans of “white-space”. There is a very good reason for this trend. Research and stats show that visitors are more likely to engage with these kinds of links, more so perhaps than other variants:

PayPal how to design calls to action
Paypal gives a good example of this. Very little content, and bright and obvious calls to action.

But why is this? Why are we, as users, drawn to sites with very few elements to interact with, rather than a website with lots of avenues and links to explore?

It’s simple: Not only does this get rid of any clutter, but the styling makes it very plain and obvious what is and isn’t clickable. The CTAs and the Sign up / Log in buttons draw our attention and invite us to click them.

But does this mean all our links should be big bright buttons?

Not at all. We only want to highlight our “Calls to Action”, i.e. our links that we want our visitors to engage with – something, we think, that will benefit them and us in some way, such as a promotional sales page, or the latest news story.

Going back to PayPal’s example, it’s OK to use plain text links for more standard, or less important links, so long as they are still very clearly links to something. In days gone by this was always indicated with underlined text, and we can still use this today as long as it fits in with the design – though some people feel that the underlined links have little place in modern design.

For instance, look at the text underneath PayPal’s “Find out more” link, “Not a PayPal customer? Get Started.” Through simply emboldening those last two words, the visitors attention is drawn and they’re subtly encouraged to interact. “This text is different,” they think. “Is something there? Why is that bit in bold and the rest of it isn’t?” This invites the user to hover over it and discover that it’s a link!

It’s a simple difference, but in a world where we have to fight for every second of the user’s attention, it’s a difference that can result in a click through, and it can be so easy to implement. See what works best for your website and your clientele.

Location on Screen

Users have such little time to spend scouring a site for a link, and more wasted time will result in more people leaving your site. So how can we avoid this? Again we simply make it so that users can identify the links as easy as possible.

Scrollmaps can be a huge help here. From my experience, almost all visitors to a page will see the very top of the page, yet less than 20% of people will scroll all the way to the bottom – even lower for longer pages. Yet over 80% will see the first 50% of the page.

Screen sizes play a big part in this, alongside screen resolutions and device size. However, this does mean that anything below the bottom of the display will likely go unseen by your visitors. So ideally we want to make sure our precious CTAs sit high on the page. Problem solved, right?

This is a good thing to consider for rule of thumb, and works especially well for single products and promotions. But what about when you’re comparing a product’s search results for example? You’re going to have many objects fighting for the visitor’s attention.

This is where you’ll need to combine the three things together in your design: Clarity, Style and Location. The key thing to remember is that if there’s too much information on the screen, the user will lose interest quickly. If you have a lot of products to display, you want to give them the minimal info you can afford to give – ideally title, price, and a “More info / buy now” CTA.

It’s down to you to decide what else to include. But for good examples of design, look to big supermarket sites like Tesco:

Tesco Bread, How to design multiple CTAs, eCommerce

A simple search for “bread” yields hundreds of different products, but Tesco have allowed all of the products plenty of room to breathe, and simplified the shopping process to “Quantity?” and “Add”.

You might also notice that the buttons follow all the rules: They’re clear, they’re attractively spaced and styled, and they appear logically on the grid, underneath the product and any description it might have.

Search around for other examples to see what big ecommerce sites do when it comes to presenting multiple CTAs, you might be surprised by what you find!


Hopefully this blog has given you some insight into the sort of simple tricks that can really help boost your website’s success. In summary, what you need to remember when creating your links and CTAs is:

  • Clarity. Make sure your CTAs stand out from anything else on the page, especially if there are going to be other links and buttons that might cause confusion. You should be able to distinguish real from fake instantly.
  • Style. People are attracted to big bright buttons, and we are drawn to large text fields that gain our attention. The less effort the user has to make in identifying a link or button, the more likely he or she is to click on them. This applies to smaller, less important links –  you never want to lose a link in text or in an image so set strict guidelines as to how you design your links and CTAs. Make use of bold fonts, different colours, or something else to highlight and distinguish your clickables from your non-clickables. Just make sure they are used consistently. Similarly, make sure none of your images incorporate these elements unless you have a really good reason to.
  • Location, Location, Location. Where you place your links and CTAs matter. If your highly valuable and important “Buy Now” link doesn’t show up above the fold for someone, there’s less than a 50% chance that a client will click it, as fewer than 50% of users will scroll down this far.

I hope this advice helps! Don’t forget to always search around and see what others are doing to solve this problem, and compare their site to yours to see where and how yours could be further improved.

Enjoy this article?

Subscribe for weekly insights

How to Design Foolproof Links and CTAs

Let’s thrive together

Get in touch to take the first step.

Contact us