Best practice for Lightbox button color


#1

Hello!

I’m building a new landing page and using a Lightbox for the first time. I’m curious if there’s best practice around what color to use for the Lightbox button so it doesn’t take away from the primary call to action button (in my case, Request an Appointment)?

The landing page isn’t very long, so almost all contents of the page can be seen without scrolling far (if at all, depending on your device).

If my Request an Appointment button is orange, should I use a different color for the Lightbox button that doesn’t compete with it? (The Lightbox offers visitors a chance to see photos of our dental clinic.)

Thanks in advance for any and all opinions.

Erik


#2

Hey @ErikB! You could consider creating a “ghost button” which is basically a transparent button w/ a solid border. Not sure how well it will work with your design :slight_smile:


#3

Hmmm… very tempting. Thanks for that idea!


#4

It is my pleasure :wink:


#5

Hey Erik! Welcome!

I love this question, because it’s easily overlooked but can have a huge impact on conversions. Whatever you decide on, I’d definitely run A/B tests to see what’s more effective for your campaign.

I’m not sure if there’s a “right” answer to this, since it’s a slightly controversial topic. What I do know is that Unbounce is a big fan of the orange CTA button, or as it’s lovingly referred to as the BOB (big orange button).

Unbounce legend @oligardner wrote a blog about CTA buttons, and though it’s from 2009 it’s stood the test of time. He wrote “According to Wikipedia, Orange represents energy, enthusiasm, and a ‘get-it-done’ attitude. Sounds like a call to action to me. Get it done. Click.”

However, some argue green is associated with positive emotions (green means go), and red is associated with more negative emotions (red means stop), but then some say that red is more attention grabbing.

I like @Stefano’s suggestion as it negates that entire argument, it’s also a really clean design that works with many different brand guidelines.

Your CTA button may also depend on how the rest of your landing page is looking - do you need to heed any brand guideline restrictions, or is this free for some creative exploration?

Regardless, I’d love to see what you end up going with and how your conversions turn out, be sure to keep us in the loop!

Cheers,

-Jess


#6

Already a lot of good suggestions here.

@jess mentioned already that there’s no right or wrong. I’d love to see the page in question to get a better idea of the placement of the two potential buttons in question. However, why does your gallery have to be in a Lightbox?

You could simply create a panel with pics if you’re concerned about the button, then add a lower CTA below that panel.

Or, create a gallery in the Lightbox, and on the last arrow click add another CTA.

Or, take the border off the button and the background so that it just looks like a text link. Then you do not have two competing buttons. We do this with disclaimers and privacy policies often.

And, like placement, colour makes a difference too. The contrast between the two can determine which gets clicked more.

And, as already mentioned, test, test, and test some more! :slight_smile:


#7

Thanks for your feedback, everyone!


#8

Hey @ErikB, just wanted to throw in a little extra tip that is somewhat related. I forgot where I heard this, but someone once recommended to use the colors in the Microsoft logo as your call-to-action button colors.

Microsoft put a lot of money into researching those exact shades, and because you have 4 colors to pick from, you can usually find at least one of them that will contrast nicely with the rest of your page.

Just something to think about, if you’re looking for a specific shade of yellow, green, blue, orange, etc!


#9

@Nicholas very interesting… I think by default we mostly tend to stick to variations of these colours anyway, but perhaps using those exact shades would be a better idea.

Thanks for sharing!


#10

On the Microsoft note http://www.geek.com/chips/microsoft-new-logo-1511091/

But, the debate is really about CTA colour vs. branding integrity. How do you accommodate both?