{"id":11784,"date":"2020-10-14T17:31:23","date_gmt":"2020-10-14T15:31:23","guid":{"rendered":"https:\/\/www.agconsult.com\/en\/?p=11784"},"modified":"2024-10-17T14:03:35","modified_gmt":"2024-10-17T12:03:35","slug":"design-tips-for-irresistible-call-to-action-buttons","status":"publish","type":"post","link":"https:\/\/www.agconsult.com\/en\/usability-blog\/design-tips-for-irresistible-call-to-action-buttons\/","title":{"rendered":"Design tips for irresistible call-to-action buttons"},"content":{"rendered":"

A lot has already been said on the subject of designing call to action buttons or CTA’s.
So what is truly important? There are 3 things you\u2019ll want to pay attention to:<\/p>\n

    \n
  1. The call-to-action should be in a striking, contrasting colour.<\/strong><\/li>\n
  2. Ensure your CTA looks like a real button<\/strong><\/strong><\/li>\n
  3. Use visual cues to draw attention to your call-to-action

    <\/strong><\/strong><\/strong><\/strong><\/li>\n<\/ol>\n\n\n

    1. Choose a contrasting color for your primary call-to-action<\/strong><\/h2>\n\n\n\n

    Let’s start by debunking a myth: the best color for any and all call to action buttons does not exist<\/strong>. It’s not true that red, for example, always outperforms green. Or that blue always does better than orange.<\/p>\n\n\n\n

    People who tell you otherwise are full of sh*t.<\/p>\n\n\n\n

    The most important thing is to choose a color in the color wheel that is diametrically opposite to the main color of your page.<\/strong><\/p>\n\n\n\n

    \"Kies
    For your call-to-action, choose the color which is the opposite to the primary color of your page.<\/figcaption><\/figure>\n\n\n\n

    What you shouldn\u2019t do is to create a CTA in the same color as your page\u2019s main color.<\/p>\n\n\n\n

    A call-to-action that blends in with the overall colour scheme of your page is guaranteed to result in fewer clicks.<\/strong><\/p>\n\n\n\n

    The proof: Ardennes-Etape<\/h3>\n\n\n\n
    \"Door
    By giving the action button a contrasting color, the number of bookings for Ardennes-Etape increased.<\/figcaption><\/figure>\n\n\n\n

    In the original version (on the left) the call-to-action has the same color as the rest of the page.<\/p>\n\n\n\n

    But a green page with a green button doesn’t work.<\/p>\n\n\n\n

    In the variation we changed the color of the button. The call-to-action now draws all the attention. (Okay, we changed a lot more as well. But the button colour change contributed. :-))<\/p>\n\n\n\n

    The result: a lot more bookings.<\/p>\n\n\n\n

    Conclusion<\/h3>\n\n\n\n

    The color of your call-to-action should contrast with the primary color of your web page<\/strong>. And is preferably a unique color in your color scheme. So don’t use the same color for other elements.<\/p>\n\n\n\n

    2. A call-to-action button should stand out in terms of design <\/strong><\/h2>\n\n\n\n

    Let a button be a button.<\/p>\n\n\n\n

    The worst thing you can do, is to not make your button look like a button.<\/p>\n\n\n\n

    That doesn’t mean you have to use shadows and three-dimensional edges like in the ’90s.<\/p>\n\n\n\n

    But a word with a line drawn around it is not a button<\/strong>. That’s a word with a line drawn around it.<\/p>\n\n\n\n

    So be sure not to use ghost buttons.<\/strong><\/p>\n\n\n\n

    Proof #1: ghost buttons cause people to click all over the place<\/h3>\n\n\n\n

    Unbounce tested this on their website and compared 2 versions:<\/p>\n\n\n\n