Call-to-Action Best Practices, Examples & Inspiration

This article has been contributed by Helga Moreno.

In this article we look at many different aspects of call-to-actions on websites, like their shapes, colors, designs, positions and many other factors that ensure that a user does not have to think twice on what action to complete.

There are many aspects to a call-to-actions (not just buttons) so let’s look at some of the best practices, pitfalls and guidelines as well as some great examples of how to style call-to-actions.

Call-To-Action Best Practices & Examples

White space around buttons.

Bigger type & button sizes result in bigger hit areas, which is more convenient and touch friendly. The same thing is with buttons surrounded by enough white space – they automatically focus visitors’ attention in the right place and prompt their next step.

Large legible type.

Large legible type captures visitors’ attention and allows them to read without straining their eyes.

Subtle textures.

Use subtle textures that create light contrast gently guiding user’s eyes through the page.

Flat, monochromatic, small icons.

Use flat, monochromatic, small icons for common actions. The users got used to see them that way, so give them what they expect.

“Kiosk style” buttons.

“Kiosk style” buttons instead of radio buttons opt for the more visual display of text in rounded corner boxes which actually aids in spatial recall and creates a bigger hit target.

Fun Playful Elements.

Funny, playful, cheerful or delightful elements raise customers’ spirit as well as their interest.

Bright colors.

Bright colors definitely draw attention over minimalist, desaturated layouts. They invite you in and make you want to click.

Skeuomorphic design elements.

We know that skeuomorphic design elements are not in vogue now, however they can assist in some situations.

Friendly, conversational language.

If you want users do something, just ask them in friendly, conversational manner. A phrase like “join us today” is friendly while making them feel like they are becoming part of a club.

Immediate immersion.

Even if you managed to make customers click the button, this doesn’t mean that they won’t abandon your website without finishing some laborious registration process. So, get rid of complicated and time-consuming forms. Allow users to connect via Facebook or Twitter.

Metro style.

Microsoft brought this style into vogue and it has become very common place. Large imagery and proximity help users know what they have to do next.

Minimalism.

We don’t think that this item needs any explanation, as minimalist designs automatically focus visitors’ attention on the important elements. There is only one button to click in the example below so the user knows where to click.

Flat / line elements.

Trendy flat elements combine bright colors, minimalist approach and clearly readable typography, so it’s natural that flat call-to-actions capture users’ eyes.

Long shadows.

An icon style that is very popular right now, as it pops icons off the page.

Single ‘Share’ button.

One share button allows the page to be decluttered rather than showing a bunch of social networks that they have to choose from at first glance.

Huge buttons.

Nowadays a lot more tapping and swiping happens through mobile devices, so the buttons should be made as finger-friendly, as possible.

Hover effects to entice the user.

Having an effect after the user has interacted with the CTA is vital as it shows that the CTA is active and goes somewhere.

Full screen search box.

The minimal approach. If there is nothing else on the screen except the search box and a button, the visitor has nothing else to do, but enter the keywords and click the button. Simple stupid.

Animated buttons

Animated buttons draw the user’s eyes in especially if nothing else is moving on the page.

On-page loading.

The days when you clicked something and it opened up another page to load the content sank into oblivion. Now the information you want to read loads instantly on the same page and it’s a great practice.

‘Undo’ instead of ‘Confirm’.

We got used to see applications asking for confirmation on destructive acts like delete or moving data. There are now more apps that allow you to act on content and then undo that action if you made an error. This is much better for power users.

Have a clear hierarchy.

With less administrative debris and clearly visible design fundamentals (hierarchy), the visitors can easily distinguish functional areas.

Create urgency.

Creating the feel of a buying craze with the help of different cunning text messages like: “only 1 item left” or “today only 50% discount”, is a powerful stimulus.

“Blooming UI”.

The user interface initially appears minimal, but as you interact with its elements, controls/fields/dialogs/etc., it emerges or “blooms”. For example, when you mouse over an image, handles and icons appear around it or right over it showing the actions you can take. When you mouse over an icon, a dialog slides out with the options for that action. When you click to apply an action, the result fades in, and then the controls are hidden. This UI interaction paradigm is gradually moving from games into commercial and business-oriented apps as people get used to playing with UI elements to find out what you can do with them, rather than having ever-present menus/palettes of controls. It is good for smaller displays, where you don’t want to use screen space showing controls that you aren’t using at the moment, and touch interfaces, which encourage literally poking around the UI to explore it.

Validation as you go.

From our viewpoint, if you make an error it’s better to know about it as soon as possible and not after finishing with all the forms (just agree that it’s really annoying). So, we offer the following: as soon as the users tab out of an e-mail field, JavaScript can let them know if their e-mail’s invalid.

Autocomplete/autocorrect/incremental search.

Small but very helpful things like text boxes that figure out what you mean as you’re typing in it, is very helpful for the user. Google would be a good example of this.

No ‘Save’ or ‘Edit’ clicks.

You just click/tap a bit of content to edit and it is being saved automatically. The practice is rather convenient and user-friendly. The less actions a user takes to accomplish the task, the better experience they get.

Navigation links wherever possible.

The user should be able to get from any point of your website to another location within maximum 2-3 clicks.

Hovercards.

Hovercards are completely unobtrusive and allow you to add so many contexts to anything you want on the page in a beautiful way. It follows the “blooming” concept of showing less up front then more as the user makes more actions. You can even integrate API’s from other apps into your hovercards. The only issue with this technology is that hovercards are not mobile friendly, they have to tap to see the other options.

Voting/Liking = Ranking

Some sort of upvote, downvote liking functionality that allows for ranking allows for a curated experience that is user generated. The trick is beneficial for both the developer and the user – users are incentivized to provide the best content, so the developer doesn’t have to worry about any sort of content management. The method is truly addictive and powerful. Also, this allows for more useful content to enter the social feed of your app. “[Friend’s name] liked/recommended this [object]” = higher engagement and click through rates.

Single sign-on, one click register/login.

Users quickly get used to connecting to apps with the Facebook connect button, so very soon they’ll be too lazy to connect to apps that require them to fill out even just their email address. Facebook login also helps you keep your app cleaner and more authentic since it increases the likelihood of your users using their real identity, which is huge in minimizing spam.

Tooltips.

If you want to make your icons even more understandable, show tooltips on mouse over. This will dispel last users’ doubts.

Badges & alerts.

They work well as a user call-to-interaction. We all like to see numbers go to zero (especially those that represent a pseudo ‘to do’ list) and alerts to disappear (proof we’ve survived the potential harm/news they might’ve represented).

---

 

What is the best color for a checkout button on an e-commerce site?

Definitely avoid red for the primary color in all types of call-to-action buttons (not just in e-commerce). Color psychologists claim that in western culture red provokes negative emotional reactions when users are asked to perform an action. By the way, women become more emotionally reactive to red than men do, and will initiate responses to red more often than men will; and men become more emotionally reactive to colors on the opposite end of the spectrum – greens and blues.

E-commerce platform Shopify blog published the following:

According to a study conducted by the Seoul International Color Expo, over 92% of people said that color plays an integral part when purchasing merchandise. Believe it or not, only 6% said that their sense of touch played a major role, whereas smell and hearing amounted to a tiny 1% of people’s votes – unless of course they were buying air freshener or music. In the same post, they mention red can be a strategic color choice in auxiliary areas of a page to incite emotion, but advise against heavy use of the color.

Over-arching visual flow has more of an impact on whether or not a button will get clicked, content will be read, or whether a user will take your site’s message in a positive way.

Placing call-to-action buttons in spatial contrast to branding and/or photographic product shots has been shown to increase conversion rates.

The over-use of call-to-action buttons has been shown to lower conversion rates (e.g. carts that put check-out buttons at the top and bottom of the order summary; or carts that litter their supporting content pages with check-out and/or “buy now” buttons). Remember the rule: “Less is more” and you’ll be all right.

Please note that it’s very important to be conscious of your page’s primary optical areas as well as its fallow optical areas. Remember, buttons placed to the right of relative content get clicked more than buttons placed to the left of relative content.

According to UX Movement, call-to-action buttons placed in the “terminal area” are trusted most (this is the bottom-right corner of a right-side page in a magazine, or bottom-left corner of a left-side page). The philosophy are connected to web design, and that is why CTAs placed in the corner opposite of a brand logo, or to the right of a product shot or data table, get clicked much more often than in any other placement in a confined content area. The users are much more subconsciously insecure and much less confident than they think. The grand idea behind the Gutenberg Diagram is that you want to try and encourage eye movement with momentum in mind. You don’t want to place actionable items in areas that require users to visually “backtrack”. We mean this in both a kinetic sense and in a chromatic sense:

Kinetic: We read top-down, and left-to-right in western culture, so we have been trained to look at all content like this. Why not to encourage this eye movement, and use it to your advantage.

Chromatic: In many contexts, the color red indicates “stopping”. It’s a halting, attention-grabbing color in western culture.

Of course, choosing the color of your call-to-actions, you could get deeper into color theory. For instance, colors like green convey tranquility and trust; blue conveys confidence, etc. We need to take into account factors like gender, age, geographic location, culture and so on – all of them are important.

To sum this section up we can say the following: encourage your users to do what they want to do, and adapt to that. Plant the seed of inception. The best way to convince the users to click a button is to make them believe that they thought of the idea and want to advance themselves through the flow.

But we’ve diverted our attention away from the question that initiated this stream of data, so let’s come back to the point of best call-to-action color: Use green for e-commerce & orange for everything else.

… But Test Your Own Market

It’s best to check the color options on each website itself. It’s easy: using the Content Experiments feature of Google Analytics set up 4 or 5 different button versions (typically through different style sheet selectors). Google will collect the data and let you know which button shows the highest conversion. In past tests, green and orange have performed best.

Blue and green colors are mostly used for checkout buttons for e-commerce websites.

---

The Best Resources on Web Form Design + CTAs

At the end of our blog post we would like to give you some useful links to various resources on web form design and CTAs.

• http://www.formsthatwork.com/
• http://rosenfeldmedia.com/books/web-form-design/
• http://alistapart.com/article/testing-accordion-forms
• http://www.uxmatters.com/mt/archives/2010/10/label-placement-in-austrian-forms-with-some-lessons-for-english-forms.php
• http://www.svennerberg.com/2008/09/the-use-of-buttons-in-web-forms/
• http://www.uie.com/articles/forms-fairmont-hotel/
• http://www.uie.com/articles/form_design_wild/
• http://www.lukew.com/ff/entry.asp?1502
• http://www.lukew.com/ff/entry.asp?155
• http://www.lukew.com/ff/entry.asp?571
• http://www.lukew.com/ff/entry.asp?730
• http://www.lukew.com/ff/entry.asp?504
• http://www.nngroup.com/articles/reset-and-cancel-buttons/
• http://www.nngroup.com/articles/ok-cancel-or-cancel-ok/
• http://measuringuserexperience.com/SubmitCancel/index.htm

* * *

That’s all for now. We sincerely hope that the information above has broadened your horizons in the area of web design. You are welcome to discuss all the points in the comment section below. We are really interested in your opinion on the matter. Do you agree with all of the listed items?

—

Helga Moreno is a learning junkie, requiring a new dose of fresh information every day. She diligently puts down all her thoughts in order to share the most interesting of them with web community in general and TemplateMonster’s readers in particular. Visit her Google+ profile.