[Design] Gradient CTA vs. Flat CTA

  • 22 January 2016
  • 9 replies
  • 161 views

Userlevel 7
Badge +4

Hello!

This one is for all you CROs out there - or anyone who <3s testing.

One of our customers has a fantastic brand guide that includes pretty awesome gradients and was thinking it might be nifty to include this in the CTA button.

Has anyone ever tested gradient buttons versus flat buttons? Any thoughts?

I’m thinking it may not even be a nuance worth thinking about.

Happy Friday!


9 replies

I think everyone (including me) started out in CRO by testing something with a button. Whether it was color, placement, text etc… 

In my testing schemes, I have never tested gradient vs flat. I have always used flat buttons as our designers are not fans of gradients for any of our clients, and I always (almost always) try to follow brand guidelines even in testing.

It is certainly worth testing. But I can see the results being skewed by other factors. Just my $0.02!

Joe

That is a interesting question.

When experiencing a brand across multiple touchpoints it is important to ensure consistency. Variables tend to break the experience.

You want to evaluate the creative of the user journey. From Advertising or Email to Landing Page to Final Destination. Are they all using gradient treatments? If so the buttons should always look the same and be instantly recognizable.

Running a test on gradient vs flat is very much like testing green button vs orange button.

The most important things to remember with buttons are contrast and affordance. You shouldn’t encounter button related conversion challenges if you adhere to the above mentioned.

Here are two articles that can help by Oli Gardner.

A breakdown of affordance as a design principle.
http://unbounce.com/design/affordance-design-principle-landing-pages/

Read the Call To Action section of the article.
http://unbounce.com/landing-page-examples/10-landing-page-samples-that-pissed-me-off/

And here is a simple tip by Michael Aagaard
http://unbounce.com/conversion-glossary/definition/test-hypothesis/

I would suggest investing in a test that would give you a higher return.

Hey Stefano!

I personally do not have an opinion on this for CRO.  Aesthetically, it depends on the rest of the “look and feel” of your website and brand.

Here’s an example where the gradient button played out nicely, but maybe it was just nicer to look at than click 🙂

Cheers,
Joe

Userlevel 7
Badge +4

Hey Joe,

Thanks for your insight. My instinct tells me the same, but my instinct isn’t backed by data so the data-geek in me says it should be up to testing.

We also always (almost always) follow brand guidelines - unless we think their guidelines should be changed hehe.

Userlevel 7
Badge +4

Hey Joe!

As always, thanks for chiming in! Aesthetically both are cohesive to the landing page design and fit in very nicely.

I think I’m going to give Growth Geeks a call and see if they are willing to share some useful data 🙂

If not, testing it is!

Agreed, if the change isn’t going to completely clash with brand guidelines I will take some liberties. I agree, instincts can be wrong so testing is more than warranted. Looking forward to the results.

Userlevel 7
Badge +4

Hey Denis,

Thanks for shooting these over! Our design team is very conscious of conversion driven design.

In this case, our customer has been using ghost buttons _across their brand touchpoints so I think they are looking at us for guidance 🙂

Testing it is!

Oye… ghost buttons. My nemesis. Now you have to test this!

Just one more resource I’ll throw into this discussion is our most recent episode of The Landing Page Sessions with Oli Gardner: “Call To Distraction”, which is all about CTA buttons. 

Reply