4

I've recently design a website for a client, and at some point he was talking about the Call to action color and he said "I really want to move away from colors. Can we use black please?".

I've made the change and it somewhat doesn't feel right to me, but he insisted on staying using dark black for CTA.

That's why I'm looking for Advices, Studies, Documentations or any other information related to the use of black for call to action or other type of action, to get a better idea of the pro/con & effect on User Experience.

Improve this question
6
  • Does the rest of the site use lots of color? If your site is mainly black-and-white, sticking with that theme for the CTA might be perfectly defensible.
    – DawnPaladin
    Dec 2, 2014 at 14:12
  • it's not only black and white, here's a test i've setup to demonstrate difference: usabilityhub.com/do/6f2c87fa125/421
    – kirkas
    Dec 2, 2014 at 14:34
  • I took the test and chose black because I liked the visual aspects of it ALTHOUGH the color stood out strongly. If I'm you're target user then the black is fine. I know people who are still confused by infinite scrolling (and I'm not talking about grandmas who are not in the business world).
    – Mayo
    Dec 2, 2014 at 14:53
  • 1
    In the test you've set up, I choose black as well. I was more influenced by the lack of color on the icon on the left as oppose to the color of your CTA. I found the green on the magnifying glass to be distracting because it was much brighter than the light blue CTA.
    – nightning
    Dec 4, 2014 at 18:00
  • Ditto nightning's comment. The black "join" button looked a bit like an unfinished wireframe, but blue was too light. I also didn't like the green + blue combo - felt like they should be consistent, which the black version offers. The issue I see isn't so much the use of "black" as consistency & contrast.
    – mc01
    Dec 4, 2014 at 18:32

2 Answers 2

Reset to default
2

If the overall design can support black, then go for black!

But, just keep in mind that you have to provide the appropriate visual contrast to support it; especially by the use of whitespace, size contrast and overall visual flow.
A pretty nice example of using black on Call To Action, can be found on squarespace's landing page, image below (also get a look at squarespace architects).
It is wonderfull how smart they add the CTA at the end of the sentence; so that you can't miss the "get started call.

squarespace's CTA
One more example can be found at zara's product page, that has a nice use of black on CTA: zara

In the end of the day you should inform about the use of an a/b test service.
And if client's budget is a problem, you may suggest an easy to use, "try for free" web service (around 1000 users).

Improve this answer
1

Black is definitely not what you want here. Contrasting the primary CTA element with other UI elements is essential for task completion. The key tools for creating visual distinction are: position, shape & size, color, motion, and message.

This article elaborates on how to use color effectively in CTA buttons.

I'll assume that the primary CTA in this case is Join. Assuming can't alter position, shape/size, position, motion, or message, you're left with color. Don't limit yourself to having a static color. Your interface isn't static. An alternative solution to having the button colored is to keep it black until the user fills in the form fields. Then animate it to some other color to indicate that they're ready to submit.

The goal here is not to have a pretty picture, but to guide users to sign up. You'll probably be able to convince the client that having an accent color will help them achieve that goal. KISSmetrics made a great post called How do colors affect purchase? that will help you make a case. You ought to conduct a proper A/B test of the colored/black buttons if at all possible.

I also found a similar question that may help inform your decision.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.