3

My app has a button to record or play videos. When there are problems with this feature, we notify the user by overlaying an exclamation point. This "red !" UI works OK elsewhere in the app but on this button the colors look really odd and clashing.

enter image description here

Any suggestions for a visual treatment I can apply to the button and/or icon (each split out below) to make the result less contrasty and clashing?

enter image description here enter image description here

Improve this question

3 Answers 3

Reset to default
5

When colors (hue) are different, but their lightness/darkness (value) the same, you get this 'visual dissonance' that you see in your example. Right now the red is a slightly darker value than the gray. You need to increase the difference in value between the two hues.

You could:

  • lighten the gray
  • darken the red
  • do both

Or, probably more practical, create some way to 'pad' the transition. I'd suggest giving the exclamation mark a light glow or dark shadow, or perhaps a white outline.

Or perhaps easiest, just do away with the color. White exclamation point on that dark gray would stand out just fine.

Improve this answer
1
  • Great suggestions, and I like the technical explanation of visual dissonance. I dimly remember that from my (limited) design training in Architecture school long ago... guess I should have paid closer attention! ;-)
    – Justin Grant
    Dec 19, 2012 at 2:04
3

I'd look at different treatments with a triangle. The triangle/exclamation is a common "ALERT" icon and allows for easier recognition from the user. Don't reinvent the wheel.. just make the wheel look nice :)

alert 1

alert 2

alert 3

Improve this answer
2
  • The catch is that these still have the same problem of different hues but similar values on top of each other. But the idea if valid. I think if the triangle were much lighter (or white) that would work quite well.
    – DA01
    Dec 18, 2012 at 21:59
  • Agreed. That's why I started playing with values in the third image.
    – Scott
    Dec 18, 2012 at 22:28
0

The problem is the value contrast of your red and grey: they are way too close even though the hue is different. Look at the "B" value in the HSB sliders.

If you shift the grey lighter or darker, it will help. If you make the camera icon an outline, problem solved. The red could also go a touch lighter or darker (opposite of the grey) to boost the contrast.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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