FEATURED How-tos

Calling to Action: 3 key principles

With so much money being flung around the web, everyone is fighting for their share. As the internet opens up to more and more people, the money flooding onto the online marketplace continues to grow. Amazon’s $74 billion annual revenue is on par with the value of the entire countries of Cuba or Oman.

This technological gold-rush only opens the door to increased competition. Sites have to entice, convince, and persuade visitors to interact with them. To buy or solicit their offerings. How do they do this? By convincing us to click.

What is a Call to Action?


Usabilla’s very own call to action

A call to action (CTA) is exactly that. They guide users towards whatever the ultimate goal of the website is. The obvious example is the large ‘signup’ button we see when we first enter a site. Usually in your face, bright with colour, and captivating in text. It is the site telling us where to go next. Attempting to passively lead us onto the next step of our journey, our experience.

They needn’t be these large, obnoxious buttons. Literally speaking, we can class call to actions as anything which invokes a user’s reaction. From adverts, to links. ‘Next Page’ to ‘Share this on Twitter’.

CTA’s are aimed at navigating us through content. Providing that clear journey and clean experience. Afterall, a website with no clear call to action would have little use. A site without a clear purpose isn’t going to receive, nor maintain many visitors.

We have to guide our visitors to the objective. We have to convince users to solicit products and make purchases. Make them use what we offer. Therefore it is essential these call to actions are presented appropriately, to ensure we get the reactions we desire.

Placement

Placement is all important. At the bare minimum, placement evokes context. By putting our call to action in the correct place, visitors understand its meaning and use. Beyond this base level, there is a lot we can do to subconsciously draw attention to our call to action.

There are two leading theories at play here: The Gutenberg Diagram and the F-Pattern.

F-Pattern

This theory comes from the father of UX himself, Jakob Nielsen. Formulated by eye-tracking tools, it shows how readers scan content in a typically F-shaped pattern.

The F-pattern suggests that:

  • Important information should be placed across the top of the design where it will generally be read.
  • Lesser information should be placed along the left edge of the design often in bullet points where little horizontal eye movement is required to take everything in.
  • People don’t read online. They scan.

This has been the go-to theory for designers in recent times, often applied to everything. What is oft-forgotten however, is that it was formulated with text heavy content. With more visual cues, it doesn’t hold up quite so well. Therefore pages low on text need their own theory; hence…

The Gutenberg Diagram

The Gutenberg Diagram describes a general pattern our eyes follow when reading content. The pattern suggests our eyes will sweep across and down the page in a series of horizontal movements. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area. This path is referred to as ‘Reading Gravity’.

Obviously this applies to languages reading left to right, being reversed for right to left readers.

The Gutenberg diagram suggests that the strong and weak fallow areas fall outside this reading gravity path and receive minimal attention unless emphasised visually in some way.

Important elements should be placed along the reading gravity’s path. For example: Place logos or headlines in the top/left, an image or some important content in the middle, and a call-to-action – where attention is focused.

More on these two theories can be read here.

For our call to action then, it depends on the the type of page it is contained on. In a text-heavy environment it is best to align to the top. For cleaner pages, following Gutenberg would be an optimal approach.

Colour

It has the power to calm us and alert us. Nothing carries quite so much cultural weight as colour. We grow up learning to associate colours to specific feelings and emotions.

We can use this perception of colour to influence potential customers. Using colour to create urgency or instil trust. Just look at the following infographic from Kissmetrics. Looking at it we realise why when we’re buying luxury products, sites often appear black and white. Why discount stores go crazy with the Red and Orange, and why stores targeted at women aim for Pink (though we already knew that one…).

Through making these subconscious associations, we tell our visitors what that call to action will do, even before they read it. We can relay importance purely through its appearance without accompanying text.

Now, these associations are based largely on emotional responses. What difference does colour make and prominence?

Performable (now HubSpot) wanted to find out whether changing the colour of a button would make a difference to their conversion rates.

They started out with the simple hypothesis of choosing between 2 colours (green and red).

For green, their intuition was this:

  • “Green connotes ideas like “natural” and “environment,” and given its wide use in traffic lights, suggests the idea of “Go” or forward movement.”

For red, their thinking went like this:

  • “The colour red, on the other hand, is often thought to communicate excitement, passion, blood, and warning. It is also used as the colour for stopping at traffic lights. Red is also known to be eye-catching.”

Clearly an A/B test between green and red would result in green, the friendlier colour winning.

So how did their experiment turn out? The red button outperformed the green button by 21%

This is with changes to nothing but colour. Here at play is not so much the emotional reaction to the colour, but the absence of red on the right image – bar the button. Being the only red element gives it that extra prominence. It stands out above the rest, adding importance.

Call to actions need to show clear differentiation from the rest of the web page, to draw that attention and encourage a click. Direct the viewers eyes to that area of the screen – making it blindly obvious where to go next.

Language

Propaganda is the oldest form of call to action. Toying with the emotions of the people to create enemies, rally populations, and encourage men to sign up for war.

The famous image of Lord Kitchener puts the emphasis on the reader. 100 years old this year, it stands as one of the most iconic images of the First World War. Using personalised voice the reader is made to feel special. Your country doesn’t need everyone, it doesn’t want the guy next to you. It want’s you.

This iconic image mixes two distinct techniques of using written voice. Personalisation, and urgency. Personalisation allows us to make the user feel unique, special. Whilst urgency aims to instil fear. Fear that they will miss out on a great offer, or submit to the enemy…

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 action. Encourages them to do something.

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

Unfortunately, urgency is a slippery slope. It is all too easy for urgency to degenerate into guilt-tripping. We all too often see this with charity adverts on TV. Cropping up on the web too at times:

Of course this, “Join us or be below us” mentality works. It’s the playground tactic utilised by teenagers across the land, and works just as well outside of it. That’s not to say it isn’t underhanded. Visitors could do with a little respect, if you want them to return. Know where the limit is.

(Read more on how to avoid resorting to wartime propaganda in this great article)

Takeaways

  • Placement – Changes dependant on the context. When used in conjunction with a text-heavy page follow the F-Pattern. Otherwise, The Gutenberg pattern is preferable.

  • Colour – Use colour to evoke emotional responses, the success of this may be limited however. Ensure focus is on the page’s overall composition and not only on colour theory. Use to colour primarily to differentiate.

  • Language – Ensure the need to make an action is highlighted. Add urgency if required, but tread carefully CTA. Be cautious of overstepping the mark into guilt-tripping territory, even if it works.

One comment

  1. MrTemple

    What do you think about animation in the CTA?

    In designing my wife’s site, we had a “Ready to Make it Happen?” question with a call to action button that cycled through different copy “You Bet!” “I Am *So* Ready!”, “Hell Yeah!”, etc. Example here: http://www.judetemple.com/

    I think it adds a little momentum to the viewer, gets them wanting to answer in the affirmative. The conversion seems pretty high, especially because we repeated the same CTA on each page.

    Obviously animation is a very tricky species, and can get in the way, but I think there’s a time and place for it.

    What say ye?

Leave a Reply

Your email address will not be published. Required fields are marked *