How to use “Call to Action” to Make Your Website More Successful

Call To Action 101 | Best Practices & Uses

Call to action is perhaps one of the most important terms a web designer can come to know and understand. It’s the objective of presenting the visitor with a clear path in which they can take some sort of action, which is usually clicking a button or filling out a form. Whether you’re designing a website for yourself or a client, one of the first tasks is to identify the objective of the website and prioritize the action(s) you want the visitor to take. The difference between good and bad call to action can literally be millions of dollars, email subscribers, social followers, or even page views.

Effective call to action is achieved through effective design. Colors, fonts, wording, and layout all play an important role in guiding the visitor which paths you want them to take. Generally speaking, the first thing you want your website to communicate to the visitor is what it is, and then secondly providing them with a call to action. Without clearly understanding the purpose of the website, a call to action (an order form, a subscribe form, a continue button, etc..) becomes pointless. Once you clearly define the purpose, you need to clearly define the action you want them to take.

Example 1: BaseCamp

Basecamp is a very popular service and their design is frequently referenced due to it's simplicity and effectiveness. The call to action here is the green button labeled "See Plans and Pricing". They use several strokes and a green gradient. They also use an arrow pointing directly to the button to maximize the chances of visitors clicking it.

Example 2: Tapmates

The goal of this design is to get the users to enter their email address and click "SIGN UP!", which is the call to action. The signup button sticks out well as they've used a turquoise gradient with a subtle drop shadow.

Example 3: FatCow

The call to action here is the bright orange/yellow "Get Started!" button. It sticks out well because of 2 factors. (1) It's the only significant object colored yellow, and (2) there is a green arrow-like structure above pointing directly to it. They've used a glossy effect on the button and placed a drop shadow. on the "Get Started!" text to make it stand out..

Example 4: Red is White

In this example, we can see two different call to action's taking place. The most prominent call to action is the "PRE-ORDER" button, which sticks out the most because it's position to the left of the screen, and contrasts the most with the black background and the bright pink button color.

Example 5: Slack

The call to action here is the big "Continue" button, and it's emphasized with a 1 pixel green border around the container that surrounds it. The button uses a green gradient, a drop shadow. on the text as well as a light white-to-green gradient on the text.

Elements of Successful Call To Action

Contrast
Anything you want people to see and take action on needs to be easily seen. The more your buttons or your forms contrast with the background they're placed on, the more people are likely to see it.
Stroke
Adding a stroke (or outline) can also create an extra element of contrast. It's not always 100% necessary, but if you can add a stroke in a way that does not clash with the design, go for it!
Gradients
Gradients can be a great way to make elements stand out more. In almost every example above, a gradient was used in some form. Be careful not to misuse your gradients, they can very easily become an eyesore than a beneficial factor of your design.
Drop Shadows
As with gradients, shadows can make elements stick out. But even more so than gradients, drop shadows are almost always misused by amateur designers. A drop shadow can either be a great asset to your design, or the death of your design by making it look cheesy. If you look in the examples above, you will see when drop shadows are used, they're used very conservative.

Split-Testing Call to Action

If your goal is to maximize orders, leads, followers, subscribers, or any type of data from the result of visitor action, split testing is a must. Simple A/B split testing can reveal design flaws and lead to significant increases in conversions. A fatal flaw of designers can be ego, thinking that their first attempt is their best attempt which is hardly ever the truth. Often times one simple change is all it takes to create a XX% increase of conversions.

There are many split-testing tools available, but a great one to start out with is Google's Website Optimizer. It's 100% free and offers an easy way to get your feet with split testing.

Authors Comment

Hope you enjoyed this guide on Call to Action! It can literally make or break the success of your website. If you have anything else to add, feel free to comment below.
- Gary Simon of Web Design Courses, a video based design course for learning web design and logo design.