6

Advanced Design Tip #1: Intro to Call to Action Buttons

Due to popular demand, today we kick off a new series of posts: Advanced Design Tips with Joe Deobald, Brand Manager and Creative Director at CityMax.com.

Call to action buttons: Let your visitors know what’s important

Congratulations! So you’ve finally got your site up and running. You’ve added products and great SEO content, and you’re ready to launch your site. You even have a great offer that you want your site visitors to buy. With Call to Action Buttons (CTAs), you can literally guide your visitors that awesome deal on a hand bag, or to join your special newsletter.

First off: let’s talk about what a CTA actually is. Simply put, it’s a button that tells the user to perform an action like “Buy this now!” or “Learn More…”
Before just throwing any old button up on your site, you need to plan it out. You want it to grab their attention – not just with a bright orange or green, but the text needs to be short, descriptive, and entice them to click. You want to tell them what to expect once they click the button: you need to build trust. Think about the questions and expectations your visitors will ask before making the decision to click. If it’s a free trial, then put that in the CTA.

onehub_tell_users_expect1

The old wives’ tale that size matters isn’t a stretch in this context. For website design, the larger the element is, the more important it is. This is a main focus on your website. You need to figure out exactly how important the action is, and design your buttons accordingly.

Don’t be afraid of making a large button. With the sample below, you will see that the CTA is about 20% larger than the logo itself.

People are already going to know the name of your company since having the logo at the top is standard throughout the web. But you don’t want them to focus on that. You want them to click on your GIANT CTA so you can create the connection with them.
lifetree_creative_size1

Now if you use multiple CTAs on your website, you need to decide which one is more important. Having multiple CTAs isn’t a bad thing – what’s bad is having them all the same size.

paramoreredd_size_vs_ctas

Now we move to color – one of the single most important things when designing a CTA button. Colors in general portray emotion, and have a great impact on how the user responds to the elements. When choosing a color, make sure that the color allows the user to understand its context, and that it also compliments the rest of the website, while still standing out. It’s critical to ensure that the user will actually take notice of your CTA. The examples below show great contrast between the CTA button and the rest of the site, while still complimenting the site itself.

notepod_color_contrast_surrounding_elements

So now you have a great looking CTA button that reads well, stands out and gains trust from all who see it. But where are you going to put it? The best solution is to utilize the whitespace around your button to help maintain focus on the importance of the element. Whitespace isn’t just a bunch of white area on a page, it refers to space given around any element on your website. This is a great and effective way of making it stand out in areas where there are other elements present.

The example below shows how an effective amount of whitespace greatly increases the focus on the CTA, even though the button itself isn’t too loud.

icondock_whitespace_around_button1

These are just a few of basic strategies around implementing CTAs on your website. Check back next week, when we’ll explore button placement, secondary options and using copy to enhance your sell.

Comments

  1. Advanced Design Tip #2: Technical Tips for Call to Action Buttons - CityMax Small Business Website Builder Blog | CityMax Small Business Website Builder Blog Says:

    […] week, we introduced Call to Action buttons (CTAs) as a great tool to help increase conversions on your small business website. This week we will give […]

  2. T Says:

    I liked the Smashing Magazine version of this article better. You should credit them for the graphics at least.

  3. Joe Says:

    No kidding – this is a direct copy of the Smashing Magazine article. Losing street cred here guys!

  4. Cursos Online FGV Says:

    I would definitely signup some of them

  5. Al Haleamau Says:

    Did you guys pay a lot of money to have this web site designed? This thing looks bad to the bone. I need to get somebody to make me a cool web site like this. This thing is awesome.

  6. Emily Says:

    We are using WordPress, but the design was done by one of our in-house designers.

Leave a Reply

CityMax.com has been featured in...