Call To Action Buttons

Call to Action Buttons

I’m one for looking further in to design more than just the surface aesthetics. I like to know the reasons why things have been done in a certain way. I regularly ask myself questions like;

  • Is that there for a reason?
  • Would I read and take note of that text?
  • Does that color affect my decision to do something?

I’m currently working on a set of projects which are all linked. Each project is pretty epic, not because of sheer size but more because of the importance of the data they present. I’ve been asking myself the three questions above every time I sit back and look at the design. I’ve been researching persuasive text and the theories behind what text people read against text that people glance over and take no notice of. These theories are easy for me to understand as I have a huge interest in psychology and neuro-linguistic programming anyway.

Placement and content organization/structure is another area which I understand very well, if you want to read more about the subject you can find a great article on Web Designer Depot.

This leaves me with Call to Action buttons, the one area that I’m not expertly knowledged in. I’ve always wanted to be, I’ve always wanted to test designs by doing A/B testing but have never been in the situation to do so until now. Just the other day I tweeted about the subject to get some clarity from my twitter followers. I’d sat playing with the same call to action button for about an hour, working the right color in to the design I was creating. I sat back and thought, “What happens if this color doesn’t invoke the action I want?” I wanted to know if there was a specific color which converts more than any other. I was greeted with a series of links, specifically from @JohnONolan which said that the color red has a higher conversion rate. I was taken back as I would have took a wild guess that green would have been the better color as it’s usually linked with ‘go’.

Evidently there is something behind a green call-to-action button as the likes of 37Signals Basecamp website and Squarespace use green. I couldn’t even think off the top of my head who uses a red call-to-action button so went on the hunt and found Carelogger who were showcased in an article and Performable.

There is definitely something behind this red call-to-action but though, out of the tests that I could find the red button could out do the green button by anyway near to 20%. That’s a huge number of extra conversions for whatever type of service you’re offering.

I will test this myself when we launch the current project and split test against using a green / red call-to-action button, it would be great to hear your own thoughts about test you’ve done or case studies you have read. Below are a few articles which I found on the subject.

If you want to hear more about the subject in the future, be sure to follow me on Twiter.

Published by


Head of Interaction and Service Design at DigitalDWP.

12 thoughts on “Call To Action Buttons”

  1. Very interesting reading, I hadn’t realised it could be such a big difference between colours.

    I’m designing a site at the moment that uses three, traffic light-like, coloured buttons; red is to remove an item from the basket, green is the major call to action colour & yellow is used for any other buttons – maybe now I will change them around..

    1. Whilst the proof seems to be in those articles, especially with the results they show, I can’t help but think that some buttons don’t have to be any particular color and just need to be contrasting to the colors you’ve used in the design itself.

      Let me know how you get on 🙂

      1. Yes I think you’re right, my buttons certainly do contrast so I will have to see if it’s worth it. Nice to be able to experiment though..

    1. Thanks Nick, I’m looking forward to doing some A/B testing on the page I’m designing to see what kind of results I have.

  2. If you have the time I definitely recommend A/B testing. It is worth all efforts to test how users are interacting with your site. Try for simple A/B testing and real-time analytics. You will find you can drive a lot more engagement with different titles, colors, shapes, etc.

  3. I believe it definitely depends on the particular user set and the colors of the site. Contrasting colors tend to do better, but you’ll never know for sure until you test it with the intended users of the site. On ThinkGeek, we had red buy buttons until we ran a test and found that for users, orange was the highest-converting color. Good luck with your tests!

    1. Jen, thanks for stopping by. If it was the case that a different color brings more results I’d go a step further by testing the copy on the button. Some interesting tests lay ahead.

  4. Also remember your demographic.

    Red is a good color among asians. red is associated with luck and prosperity,,,

  5. Just over a year ago we were playing with green action buttons in our buy and activation flows and found that they were just not as effective as red ones. This may have been compounded by our brand colour (red) and that our stakeholders and members were so tuned into red.

    Any A/B testing we did for this (and it was not extensive) showed Red trumped Green. This was to the dismay of our senior UX dude!

Comments are closed.