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

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

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..

3

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.

4

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.

5

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

profileHope 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.


Pages: 1 2

Luminar: AI Photo Editing
Sponsored

Luminar AI lets you turn your ideas into reality with powerful, intelligent AI. Download the photo editor and see how you can completely transform your photos in a few clicks.

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

Leave a Reply

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

cross