Text originally posted on http://blog.omnicom.rs
No pictures were retrieved after the blog was taken down.
My guess is that you all know the Oatmeal’s “How a web design goes straight to hell” comic. Even if you haven’t read it, you know about the battle of “designer against client” which often happens, usually at later stages of the design process. The truth is: we all want our design to “pop”, we just have different visions of the way it should be done. The trick of being a successful web designer often is not in a special talent or hard work, but in the ability to understand the client’s needs better than he/she is able to explain them. (Also, being able to present the solution in a way that it will be taken as not just acceptable, but the best.)
What every site needs is a planned funnel that will lead customers towards an action, or several, they should take. This is usually achieved by placing cleverly designed call-to-action buttons in key places of the site. One of the main problems in web design is making call-to-action buttons satisfy the designers need for beauty, the client’s need for prominence, and the site visitors’ (consumers’) hunger. Part of this is the client’s job (like the decision on the priorities and types of action visitors should take), but part lies with the designer, who should improve the effectiveness of CTAs by tweaking their looks and position.
There are several features of the CTA buttons that make them convert better or worse, but no universal solution to what you should do to get the best results. My suggestion is to start with your preferred design, and then experiment with other options in simple A/B testing. What works best for a coffee shop, might not be the ideal solution for a bank. However, having all the points presented in a simple and well-explained list, will make it easier to assess, and get ideas for adjusting and testing your buttons, thus improving your conversion results. Here it is.
1. Position of call-to-action buttons on page
The general rule: put the CTAs in the most prominent location. This can be either in the center of the page, or in a nice big clean space anywhere. Sites, most often, have more than one CTA, therefore prioritising is of great importance, as is combining buttons with primary and secondary actions (e.g. BUY NOW and TRY IT FOR FREE buttons next to each other).
a) Expected locations
Being different is interesting, but sometimes makes it hard to be understood. Being predictable is not such a bad thing, when it comes to websites: if people are used to certain buttons being in certain places, they will search for them there. Take social buttons as an example. Where do you search for them? I usually look in the top right corner. (They are not there on this site, I know, they are in the bottom right corner. And have you clicked on them? NO.)
Think about the place you would look for a certain feature of the site. Then place the feature there.
b) First scroll rule vs. relevancy
I was always taught that everything that is important should be located above the fold. However, times have changed and users’ habits too. There are huge differences in screen sizes and proportions, which makes it impossible to know where the fold is. Also, new site layouts often use scrolling as the main way of navigating through the site. In these cases, each scroll is formatted as a separate page, so your CTA could be located anywhere. My suggestion is: put it where it’s most relevant. If you have a long description of the product, put a BUY NOW button at the end of that text.
I read somewhere that there are two types of consumers: impulsive buyers and thinkers. Try to address them both by making two CTAs: one on your landing page in a prominent place, and the other one after you allowed the user to explore the options and benefits of the action.
d) Parts of the page that get most attention
Different eye-tracking studies have been performed with similar conclusions: we tend to read the websites in an F-shaped pattern. We start from the top left corner, move to the right (examine the options, menus), then down the left side (probably menus, again, plus a quick check of the titles/subtitles in the text), and then around 1/3 of the height of the page, we move our focus onto the right again. This might (or might not) be useful for positioning your CTAs, but I’ll tell you what certainly is. People seem to focus on faces, if there are any on the page. Furthermore, they focus on whatever the person in the picture is looking at. There’s a trick for you to use to your benefit!
e) Layers of content (z-index) and floating
Calls-to-action are sometimes positioned in such a way that they seem to be above the rest of the site, closer to the site visitor. In some cases, they are the floating elements that keep the position even if you scroll. Both of these features make the CTA-s more prominent.
2. Design of the CTA button
This is the part where breaking norms is encouraged. You usually want to make links on your page visible. What you want even more, is to make your calls-to-action… “pop”. Remember: more and more people have “natural ad-block” – they simply don’t notice the ads on web pages. Therefore, don’t make your button look like an ad!
a) Size matters
Sometimes the buttons are just too small to be noticed by the site user: try making them bigger. However, it’s not always just the simple size – the value of CTA text should follow closely. Read a few points about the copy underneath.
People like pressing buttons that look like buttons. Also, your CTA can easily stand out from the rest of the design by having an unusual shape, or simply curves on a site design dominated by squares.
c) Movement and dynamics
There is no need for the button to blink or jump, but a simple hover action is always a good sign that something is happening.
Studies have been conducted to make a link between colours and psychological reaction of consumers. I’ve stumbled across an article related to USA studies, but different colours have different meanings depending on the culture, hence there is no general rule. However, it’s important to pick a colour that’s in high contrast to the background, and not often repeated on the web page. Specialists also suggest that warm colours (red, orange) have better effect than cold ones (blue, gray), but that’s upto you to find out with trial and error. Keep in mind that colourblindness affects a significant percentage of the world population, especially when placing your red button on a green surface.
3. How to put emphasis on CTA
There are many ways of getting people to look at a certain element on the site. One of the tricks was mentioned above, with the faces in the pictures actually looking at your button. Or you could put big red flashing arrows pointing at it from all sides. But, don’t do that.
a) White space (dead space)
Make enough room for the button to “breathe”. The further away it is from the rest of the content, the better the chances of getting noticed. Also, make sure that it is close enough to the explanation of the action, for the logical connection between the two.
Don’t stuff your site with CTA buttons. Prioritising is the first step to a clear and frictionless path for site visitors to follow. If at every step of their way through the site they get offered several more actions to make, they might start many but finish none.
4. Call-to-action’s copy is crucial
The copy should state in a few words exactly what action is expected from the user. Make sure that there are no typing or grammar mistakes. Would you give your pesronal data to a site that can’t spell personal right? Trustworthiness is built with two tools: user friendly design, and good, reassuring copy.
Check out this article listing 31 case studies – you might get a few A/B testing ideas of your own. One of the conclusions was a significant increase in conversion with a change of just one word: from OPEN YOUR ACCOUNT to OPEN MY ACCOUNT.
Here are a few general rules related to call-to-action’s copy.
a) Use verbs.
If your CTA doesn’t contain verbs, it’s not a call-to-action: it’s just a button. Start with verbs, expand and make it clear what the visitor should do.
b) Wording closer to the consumer/client
Often companies and clients use different expressions for the same things. In a bank, you will never hear “open an account”, but “apply for an account”. It is important that the copy of the CTA addresses the target group in their own language.
c) Urgent or casual
You will often see buttons that are ordering visitors to do something straight away, or they’ll miss the chance of their life. Creating the sense of urgency can work well in many cases, but be careful not to overdo it: you might scare visitors off. On the other hand, sometimes the action offered to the visitor is a low commitment action: leaving a comment, reading more about the product, getting a quote. In these cases, copy on the button can be softer and not imperative.
…or “what’s in it for me?”
This is maybe the most important part of creating successful converting CTAs. Visitors/clients/potential customers will NOT click on your CTA, unless you offer them a good deal. Make sure that what you offer is stated big and clear. It might be just a single word added to the usual copy (writing DOWNLOAD FREE PDF instead of DOWNLOAD PDF might make a difference), or maybe you’ll need a whole sentence. In some cases, this part will be written somewhere on the side, under or above the button. Wherever it’s located, it has to have an obvious connection to the button and be a straight and direct statement of what the visitor gains by clicking.
That’s roughly it. The important thing is to do your own research and testing. Not all sites give the same results. If you’re looking for a free testing ground, you can find support for conversion experiments in Google Analytics. Also, make sure that call-to-action buttons always lead to a well-designed and formatted page, that your forms don’t contain mistakes and that you don’t bother the client/customer by asking too many irrelevant questions. Conversion is not just about clicking on the CTA, it’s about going all the way through the predefined funnel.
I will write about conversion forms on some later occasion.
All the best in your CTA designing and testing!