Adobe Creative Cloud

November 17, 2014 /Mobile /

Ten Ways to Use Color to Capture Attention (Part 1)

The first of a two-part series outlining ways to use color in design to capture attention.

In the end, if you can combine some of these ideas with your own design prowess, your work will attract eyeballs like geeks to a comic con. Check them out and let me know what you think by posting a comment.

1. Rely on red

For designers looking for an excitement-generating hue, the go-to color is red. Common sense, you say? Maybe. But researchers have proven that people exposed to ads with red in the design actually get more excited (read more). And an excited audience is an attentive audience—they’re more likely to gobble up whatever you’re trying to communicate.


2. Consider chroma

Unfortunately, drenching designs in red is not always an option. Fortunately, the same group of researchers from tip #1 also found that designers can use chroma to achieve similar excitement levels. Chroma, as you may recall, is a measure of the purity or intensity of color. Turns out, colors with a high degree of chroma/purity induce excitement. So, no matter what color you choose to work with, if you crank up the color purity, people will get all hot and bothered—and you’ll have their attention.

TenWays-chroma

Researchers proved that colors with high chroma induce more excitement among viewers.

3. Amp up the color contrast

Color contrast may be more important than both hue and chroma when it comes to attracting eyeballs. And by color contrast, I mean the difference between the color you are using to capture attention and the rest of the colors in your design.

Opposing points on the color wheel have high color contrast. In the example above, yellow (A) and blue (B) have high contrast.

Opposing points on the color wheel have high color contrast. In the example above, yellow (A) and blue (B) have high contrast.

To demonstrate the eye-popping abilities of high color contrast, I ran an experiment using an attention-prediction tool from Eyequant  that uses eye-tracking data and artificial intelligence to predict, with high accuracy, how different elements of a design capture attention. For this experiment, I measured the attention around a portion of a sample webpage design where I placed a red call-to-action button.

I chose red in this example for two reasons: First, as discussed in tip #1, red is supposed to be the champ when it comes to attention-grabbing abilities; and second, I wanted to use a color that was already represented in the design (a red sleeping bag) to decrease overall color contrast. To challenge red, I chose blue, which was not represented anywhere on the page.

Despite being a supposedly “calming” hue, blue absolutely trounced red. Blue increased the attention metric by 121 percent over a grayscale version of the button, whereas red managed only a 96 percent increase.
TenWays-red-vs-blue

4. Look for luminance contrast

Luminance contrast—the difference between the luminance of an object and its immediate background—is a color concept most of us don’t think about often enough. But, as you’ll see in my next experiment, luminance is an extremely important attention-stealer.

I compared the same blue button used in tip #3 with another blue button that had a higher luminance contrast with the white background. This time, the attention metric skyrocketed from 121 percent to 156 percent.

That’s a huge jump that tells us to not be afraid to crank that luminance dial.

TenWays-light-vs-dark-blue

5. Go for continual color change

As user-interface designers and psychology researchers can attest, you can divert attention to content by having it continually change color. Most of us experience this attention-shifting technique firsthand on a daily basis: Think of all those little icons on your smartphone or desktop that change color when they have something important for you to know. This is the same principle.

TenWays-color-use-in-ui

Researchers have demonstrated that objects which change color draw users’ attention.

Now that you have the first five insights down, give them a try (I’d love to hear how it goes, so send me a note or post a comment). Read Part 2 with five more tips to grab attention with color.

Mobile

Join the discussion

  • By Khalid - 2:53 PM on November 17, 2014  

    i really loved this blog post, this amazing article. can’t wait for part 2. i’m gonna try something out with my brand. i hope i can make it.

    • By Sue Garibaldi - 6:03 PM on November 17, 2014  

      Thanks Khalid. Part 2 will be up on Friday morning so definitely check back.

  • By Marko - 8:48 PM on November 17, 2014  

    Love the article, and yes there are issues that I do not think of as often. Great to read something to test my designs on.

    Thank you!

  • By Veeranathan Jagadesan - 11:48 AM on November 18, 2014  

    Good Article. But publishing 2nd part after 6 days is toooooo long. Try to publish next day.

    • By Sue Garibaldi - 4:13 PM on November 18, 2014  

      Veeranathan, Glad you’re excited about Part 2; it’s going up this Friday.

  • By ProDesignTools - 6:24 PM on November 18, 2014  

    This is great stuff, thank you… Hope to see more from you soon Dave!