Calls to Action: Best Practices

 In Design, Tutorials

Call to action in web design and marketing — and also in user experience (UX) especially — is a term used for elements on a web page that require an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.

How can we create effective call to action buttons that grab the user’s attention and entice them to click? To try and answer this here are some effective design techniques and examples.

Best Practices for Effective Call to Action Buttons

Designing call to action buttons into web interfaces requires some forethought and planning; it has to be part of your prototyping and information architecture processes in order for them to work well. In this section, we’ll discuss some design techniques for call to action buttons.

DRAW USER ATTENTION WITH SIZE

In web pages, the size of an element relative to its surrounding elements indicates its importance: the larger the element is, the more important it is. Decide how vital certain site actions are, and size your call to action buttons accordingly.

Size of call to action button versus surrounding elements

Lifetree Creative exhibits this idea of size to indicate importance with their call to action button. Compare the size of their button with the company logo. To grab the user’s attention, the call to action button is roughly 20% larger (in width) than the logo. Even though the logo is placed higher on the web page, your eyes are drawn to the call to action button because of its larger size in relation to surrounding elements.

lifetree_creative_size

 

Size of call to action button versus less important call to actions

A web page may have multiple calls for action. To indicate the relative importance of a call to action with respect to other actions, you can vary their sizes. Here is an example of this concept on the paramore|redd website where the call to action button that asks the user to sign up for their newsletter is significantly larger than the continue reading call to action, indicating that on this web page, they would rather you take the action of subscribing versus reading the blog posts.

paramoreredd_size_vs_ctas

 

DRAW USER ATTENTION WITH PROMINENT POSITIONING

The placement of call to action buttons on a web page is critical to drawing the eyes of visitors. Placement in prominent locations such as the top section of a web page can lead to higher landing page conversions because users will likely notice the call to action button and take action.

Placement in a distinguished area

Putting a call to action button on a distinguished area is one way of making it stand out in a web layout. You can see this idea in action on the dailymile website where the call to action button looks to be on a higher plane (on top of) other site elements such as the bar graph graphic.

dailymile_placement_distinguished

 

Placement at the top of the web page

To illustrate this concept, take a look at the “Post a Job!” call to action button located at the very top right corner of the Your Web Job website. By putting the call to action in a very prominent area, it is more likely that the user will notice it or remember it later, after they have looked at the site’s content. For example, if a job poster wanted to explore the site before taking the action of posting a job, the “Post a Job!” call to action will be ready for them regardless of which page leads them to a conversion, and they’ll be more likely to remember where they can easily take this action because of its prominent placement.

 

yourwebjob_placement_high

 

Placement at the center of a layout

Locating a call to action button in the middle of a web layout with no (or significantly smaller and deemphasized) flanking elements can be an effective way of drawing attention and enticing an action. In the case of PicsEngine, even though the call to action button doesn’t have a high colour contrast with its background and surrounding page elements, it still manages to draw attention simply by its central placement.

picsengine_placement_centered

 

USE WHITESPACE TO DETACH CALL TO ACTIONS FROM OTHER ELEMENTS

The use of whitespace (or dead space) around a call to action button is an effective way of making it stand out in areas where there are many elements.

Whitespace used to distinguish a call to action button

IconDock shows just how effective sufficient whitespace is. Even with a small and plainly-designed call to action button, it still stands out because of the space in between its adjacent elements.

 

icondock_whitespace_around_button

 

Vary the amount of whitespace to indicate a logical connection

The more whitespace there is in between a call to action button versus a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the whitespace in between those elements and the CTA.

For example, Donor Tools has text above their “Sign Up” call to action that tells the user the benefits of signing up. On its right is a browser screenshot that is there for aesthetics and not necessarily for prompting the user to click on the “Sign Up” call to action button. By reducing the whitespace in between the text and call to action button, you group these two elements visually. The whitespace in between the browser screenshot and an image ensures that the eyes are not distracted from the call for action.

donortools_whitespace_grouped

 

 

USE HIGHLY CONTRASTING COLOURS

Deciding what colours to use for call to action buttons is very important. Use colours in your call to action buttons that have a high contrast relative to surrounding elements and the background because it is critical to ensure that the user notices your call to action.

Colour contrast versus surrounding elements

Notepod exemplifies how colour contrast between a call to action and its surrounding elements can be effective in drawing user attention directly to it. The surrounding elements are all black, while the call to action button is a bright blue colour.

notepod_color_contrast_surrounding_elements

 

Background/foreground color contrast

Valley Creek Church sets its bright yellow “Learn More” call to action button above a grayscale image. Even with a simple call to action button design on top of a complex element (a photo in this case), it still stands out because of the colour choice.

 

imagine

 

TELL USERS THAT TAKING ACTION IS EASY

Often, a user’s hesitation to take action stems from thinking that an action will be difficult, costly, or time consuming. By taking care of these concerns, your call to action buttons can lead to more conversions.

For example, on Basecamp, the call to action button explicitly defines the time it would take the user to sign up and tells users that signing up is costless (free). This approach weakens two primary users’ concerns when it comes to taking action online: paying (which also requires them to take additional actions such as getting their credit card) and time constraints.

 

basecamp_easy

 

In the example of Tea Round App, they tell that user that they won’t be getting spam emails by taking the action of signing up for their email service, which is a cause for concern whenever giving your email to a third-party service.

tea_round_app_easy

 

Design Showcase of Call to Action Buttons

Now that we’ve covered some best practices for designing call to action buttons, let’s look at some exemplary implementations of call to action buttons on websites. We’ll tie in these designs with the techniques and best practices from above and explore how they aid in accomplishing good design practice.

 

Campaign Monitor
This set of call to action buttons presents two potential user actions: “Try it for free” and “View features”. For users who know about Campaign Monitor already and want to try it now, they can take the primary desired action, while others who’d like to explore before making the time commitment can take the secondary action of viewing the features of the web application.

campaign_monitor_showcase

 

Fileshare HQ
This call to action button tells users what to expect (“start sharing files in minutes”).

fileshare_hq_showcase

 

Hambo Design
This call to action button tells the user what to expect: by getting a quote, there are no strings attached. It anticipates the question of “how much will a quote cost me if I were to invest my time in going through this process?”

hambo_design_showcase

Recent Posts
Showing 9 comments
  • Thanks for sharing your info. I truly appreciate your
    efforts and I will be waiting for your next post thank you once again.

  • church loan

    Hello this is somewhat of off topic but I was wondering if blogs use WYSIWYG
    editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to
    get guidance from someone with experience. Any help would be enormously appreciated!

  • my site

    I just want to say I am all new to blogging and definitely enjoyed you’re web page. More than likely I’m going to bookmark your website . You amazingly come with incredible writings. Bless you for sharing with us your web-site.

  • Jonelle

    Thanks for your personal marvelous posting! I certainly enjoyed reading it, you may be a great author.I will
    be sure to bookmark your blog and definitely will come back someday.
    I want to encourage you continue your great work,
    have a nice holiday weekend!

  • Google

    Its like you read my mind! You seem to know a lot about this,
    like you wrote the book in it or something.
    I think that you could do with a few pics to drive the message home a little bit, but instead of that, this is great blog.

    A fantastic read. I will certainly be back.

  • I have read so many content regarding the blogger lovers except this piece of writing is in fact a pleasant
    piece of writing, keep it up.

  • 1salope.info

    Everything is very open with a very clear clarification of the issues.
    It was truly informative. Your site is useful. Thank you for sharing!

  • Youtube.Com

    I’m not that much of a internet reader to be honest
    but your blogs really nice, keep it up! I’ll go ahead and bookmark your website to
    come back later. All the best

  • google adwords express

    This site truly has all the information I wanted concerning this
    subject and didn’t know who to ask.