Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question

3 Answers 3

up vote 4 down vote accepted

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.

share|improve this answer
    
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 '12 at 2:04

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.

share|improve this answer

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

share|improve this answer
    
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 '12 at 21:59
    
Agreed. That's why I started playing with values in the third image. –  Scott Dec 18 '12 at 22:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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