How to Master the Design of Compelling Calls-to-Action

    by Magdalena Georgieva

    Date

    February 13, 2012 at 9:00 AM

    design ctasintermediate

    Calls-to-action (CTAs) are one of the most important elements of lead generation, and they should be used in each and every one of your marketing tactics: emails, social media updates, press releases, trade shows ... the list goes on. In fact, whenever you want to ensure your team is moving in the right direction, pose the question, “What’s the call-to-action we're using to drive people's behavior?”

    Once you have a strategy in mind for which calls-to-action you'll feature on your website, you'll probably start obsessing over their design. In this blog post, we present you with some guidelines to master the design of successful calls-to-action.

    1. Size Matters: Make Your CTA Big 

    The goal of your call-to-action is to attract the attention of website visitors, and one way to convey its importance is by enlarging it. "You want your button to be large enough to stand out without overwhelming the design," writes graphic designer Cameron Chapman.

    klout

    Size shouldn't be determined independently of other factors -- it is tightly related to the context of the page and the other characteristics of your call-to-action. For instance, the CTA will naturally be large if it includes a graphic or an image that strengthens the message. This is what we do for HubSpot's blog: the call-to-action placed at the end of each article is bigger than your standard CTA button because it is contextualized and adds value to the article. Just scroll down to the bottom of this post to see for yourself.

    2. Spatial Effect: Give it Room to Breathe 

    You know how they say that, sometimes, less is more? Well, that can definitely be true for calls-to-action. If you want to attract more attention to your CTA, you should give it some white space (or in the case below, orange space). Don’t crowd the language unless the information around it is key to taking the action. 

    breathing space

    Simple logic dictates the 'amount of white space' decision. Separating the CTA from the rest of the content on a web page will mean it’s a separate item. If there is a tight connection between the call-to-action and some other web page element, then maybe there should be less white space between the two. 

    “The more white space there is in between a call-to-action button versus a surrounding element, the less connected they are,” writes Jacob Gube in SmashingMagazine. “Therefore, if you have other elements that can help convince users to take action, reduce the white space in between those elements and the CTA.” 

    Another tactic here is to fill your call-to-action with warm background colors, such as red and orange, which appear larger than colors suggesting coldness, blue and green. Warm colors appear closer to the viewer. 

    3. Give it Prominent Placement 

    Your call-to-action needs to be above the fold so viewers don’t have to scroll down in order to spot it. According to an Eyetrack III study, the best placement of online ads is in the top and left position. This tactic, too, is dictated by simple logic. In the English language, we start reading from left to right and from top to bottom. 

    hs cta

    Copywriter Dean Rieck suggests that once your readers get used to a particular placement, they might start ignoring the call-to-action or ad. “So even the prime upper left area won’t work so well if you always put ads there,” he writes. The most effective placement could also depend on the context of the rest of the page, so make sure you do some testing (see the section at the end of this post). 

    For instance, test the ideal top and left position versus a placement in which the call-to-action is right beneath the offer description. Run an A/B test to see if you get more clicks, and pick a winner. 

    4. Contrast Is Key 

    Contrast is one of the most powerful graphical techniques you can apply to calls-to-action. The fastest way to grab someone’s attention is by making your CTA stand out from the rest of the page and making it dominant. You can achieve that by picking a color for your button that contrasts the background. 

    contrasting

    There has been a huge debate revolving around usage of the color red for call-to-action design. Some marketers argue that red can increase click-through rates significantly. Others explain that the context of the web page should determine the color. Whether you decide to use the color of fire, passion, and also the international stop signal or not, be mindful of your overall website design. While you want to keep the colors contrasting, make sure all of them fit in with your general website color scheme and avoid using patterns. 

    Another way to achieve contrast with your call-to-action is to make the font visually different: some words might be larger or more emphasized than others. Just ensure that the CTA is easy to read. 

    5. Add Hover Effect 

    Surely, you've seen calls-to-action that change when you hover over them with your mouse. This type of hover effect creates a perception that the CTA is instantly clickable. In that sense, the visitor is one step closer to taking the action. 

    hover effect

    Using hover animation, you can make your buttons change color and brightness. You can also give them a shadow or have them zoom in or out. There are many Adobe Photoshop tutorials out there that can teach you how to create such a hover animation and help you create an even more irresistible call-to-action.   

    6. Embrace Unconventional Shapes 

    Most calls-to-action have the same shape: that of a standard rectangular box. Shay Howe, designer and user interface engineer at Groupon, recommends that you give your CTA shape rounded or circular corners to make it more "button-like." Square corners, he writes, may signal to visitors that the CTA is an ad or banner, and they might therefore avoid it. 

    shape

    Sometimes you will encounter calls-to-action that have more unconventional shapes. For instance, they might be oval, star-like or assuming the contours of another object. This creative approach creates an element of surprise and might prove to be effective for increasing click-through rates. So experiment with call-to-action shapes that are rare, asymmetrical, and out of the ordinary. 

    7. Create a Sense of Direction 

    Some of the most successful calls-to-action out there have arrows pointing at them. It creates a sense of direction and guides the visitor to the important element on the page. This is a way of prioritizing information and creating a flow. 

    direction

    In fact, HubSpot Social Media Scientist Dan Zarrella, found out that if you have a picture of a human looking at a lead-capture form or call-to-action on a page, that’s where the eye of the visitor will also shift to. So don’t add images of people who stare right at your audience; make them stare at what your audience should look at.

    8. Focus on Text, Not Graphics

    The Eyetrack III study also showed that in ads, website visitors read more text content than graphical content. “People looking for information are looking for text, not pictures,” writes Dean. Make sure your wording is clear, specific, and action-oriented. If you need more information on copywriting for calls-to-action, download our free ebook, which includes specific guidelines for CTA copywriting

    text

    While you should focus on your call-to-action text, don’t forget that graphics can help convey meaning and strengthen your message. They are especially useful in explaining a concept that is hard to explain with words alone.

    9. Consider Adding a Secondary CTA

    Often times, you have two or three competing actions that you would like your website visitors to take. For instance, you might want to ask them to request a consultation and try out your product. Or you might want them to sign up for your email newsletter and download a whitepaper. Decide which call-to-action has higher priority, and give it more prominent placement and a bigger size. Also, keep in mind that the context of your page will affect click-through rate, so make sure there is a clear alignment between your call-to-action and the content around it.

    hubspot homepage

    Make sure you use different colors to illustrate which alternative is more desirable. For instance, on HubSpot’s homepage, you will see that in the center we have three calls-to-action that, from left to right, decrease in importance. The key call-to-action, “Request A Demo,” is in orange, followed by the grey “Free Trial” CTA, and then the “Full Feature Set” CTA, which is just hyperlinked text.

    CTA A/B Testing

    A lot of the suggestions in this post have represented CTA best practices, but it's important to understand that sometimes, best practices might not be the best practices for your particular business. One business might find that a red button in the top left corner of a web page performs the best for them, while another business might find that red buttons rarely get clicked, and the top right corner of a web page is the optimal placement for their CTAs.

    Therefore, marketers who are striving to continually increase their CTA's click-through and conversion rates are constantly conducting A/B tests to determine the best design for their CTAs. Every design element we've mentioned in this post can -- and should -- be tested. And if you're a HubSpot customer, the Call-to-Action Module makes it very easy to A/B test different call-to-action buttons to determine which generates the most clicks and conversions.

    cta analytics resized 600

    Now that you're familiar with the key elements in call-to-action design, you should go and see how improving CTAs affects your lead generation efforts. Make sure you share your experiments with us!

    ctas-ebook

    SUBSCRIBE TO HUBSPOT'S MARKETING BLOG

    Join 280,000+ fellow marketers! Get HubSpot's latest marketing articles in your inbox. Enter your email:

    Search Inbound Hub

    Subscribe to Marketing Articles by Email

    Subscribe by RSS

    Follow HubSpot

    Call Us: 1-888-HUBSPOT