Don't Turn Traffic Signals Upside Down - Color Accessibility in UI Design
•
0 likes•465 views
Slides to accompany my talk at Big Sky Dev Con 2015 in Bozeman, Montana. Discussed is the importance of using more than just color to indicate the function of a UI object such as a button to avoid confusion by those who have color deficient vision (aka colorblind.) Examples of bad design as well as how they could be improved simply are provided as well as descriptions of the various types of color deficient vision.
More Related Content
Viewers also liked
Similar to Don't Turn Traffic Signals Upside Down - Color Accessibility in UI Design
Similar to Don't Turn Traffic Signals Upside Down - Color Accessibility in UI Design (20)
Recently uploaded
Recently uploaded (20)
Don't Turn Traffic Signals Upside Down - Color Accessibility in UI Design
- 1. Don’t Turn Traffic Signals Upside Down Color Accessibility in UI Design Don’t Turn Traffic Signals Upside Down Color Accessibility in UI Design
- 2. Don’t Turn Traffic Signals Upside Down Color Accessibility in UI Design Don’t Turn Traffic Signals Upside Down Color Accessibility in UI Design
- 3. Don’t Turn Traffic Signals Upside Down Color Accessibility in UI Design Don’t Turn Traffic Signals Upside Down Color Accessibility in UI Design
- 7. Dave Simon Product Development: UI/UX
- 8. Dave Simon Product Development: UI/UX @ds
- 9. Dave Simon Product Development: UI/UX @ds @ds
- 11. Terminology
- 15. Terminology Color Vision Deficiency Types of Color Vision Deficiency
- 16. Terminology Color Vision Deficiency Types of Color Vision Deficiency ‣ Trichromacy - normal vision where all three cones process light correctly.
- 17. Terminology Color Vision Deficiency Types of Color Vision Deficiency ‣ Trichromacy - normal vision where all three cones process light correctly. ‣ Anamalous Trichromacy - inherited, usually from maternal grandfather.
- 18. Terminology Color Vision Deficiency Types of Color Vision Deficiency ‣ Trichromacy - normal vision where all three cones process light correctly. ‣ Anamalous Trichromacy - inherited, usually from maternal grandfather. ‣ Protanomoly (reduced sensitivity to red)
- 19. Terminology Color Vision Deficiency Types of Color Vision Deficiency ‣ Trichromacy - normal vision where all three cones process light correctly. ‣ Anamalous Trichromacy - inherited, usually from maternal grandfather. ‣ Protanomoly (reduced sensitivity to red) ‣ Deuteranomoly (reduced sensitivity to green) - most common
- 20. Terminology Color Vision Deficiency Types of Color Vision Deficiency ‣ Trichromacy - normal vision where all three cones process light correctly. ‣ Anamalous Trichromacy - inherited, usually from maternal grandfather. ‣ Protanomoly (reduced sensitivity to red) ‣ Deuteranomoly (reduced sensitivity to green) - most common ‣ Red-green color blind have both protanomoly and deuteranomoly - difficulty with reds, greens, browns and oranges and confuse blue and purple hues.
- 21. Terminology Color Vision Deficiency Types of Color Vision Deficiency ‣ Trichromacy - normal vision where all three cones process light correctly. ‣ Anamalous Trichromacy - inherited, usually from maternal grandfather. ‣ Protanomoly (reduced sensitivity to red) ‣ Deuteranomoly (reduced sensitivity to green) - most common ‣ Red-green color blind have both protanomoly and deuteranomoly - difficulty with reds, greens, browns and oranges and confuse blue and purple hues. ‣ Tritanomaly (reduced sensitivity to blue) - rare. World looks red, pink, black, white, grey and turquoise.
- 22. Terminology Color Vision Deficiency More Rare Types of Color Vision Deficiency
- 23. Terminology Color Vision Deficiency More Rare Types of Color Vision Deficiency ‣ Dichromacy - only have two types of cones
- 24. Terminology Color Vision Deficiency More Rare Types of Color Vision Deficiency ‣ Dichromacy - only have two types of cones ‣ Protanopia - unable to see red light
- 25. Terminology Color Vision Deficiency More Rare Types of Color Vision Deficiency ‣ Dichromacy - only have two types of cones ‣ Protanopia - unable to see red light ‣ Deuteranopes - unable to see green light
- 26. Terminology Color Vision Deficiency More Rare Types of Color Vision Deficiency ‣ Dichromacy - only have two types of cones ‣ Protanopia - unable to see red light ‣ Deuteranopes - unable to see green light ‣ Tritanopes - unable to see blue light
- 27. Terminology Color Vision Deficiency More Rare Types of Color Vision Deficiency ‣ Dichromacy - only have two types of cones ‣ Protanopia - unable to see red light ‣ Deuteranopes - unable to see green light ‣ Tritanopes - unable to see blue light ‣ Monochromacy (achromatopsia)- no color, only shades of grey
- 28. Terminology Color Vision Deficiency More Rare Types of Color Vision Deficiency ‣ Dichromacy - only have two types of cones ‣ Protanopia - unable to see red light ‣ Deuteranopes - unable to see green light ‣ Tritanopes - unable to see blue light ‣ Monochromacy (achromatopsia)- no color, only shades of grey ‣ Dogs are not monochromats, they just see more muted colors - like a washed out Instagram effect
- 30. STATISTICS Color Vision Deficiency Color Vision Deficiency - Statistics
- 31. STATISTICS Color Vision Deficiency Color Vision Deficiency - Statistics ‣ 8% of men (1% deuteranopes, 1% protanopes, 1% protoanomolous, 5% deuteranomolous)
- 32. STATISTICS Color Vision Deficiency Color Vision Deficiency - Statistics ‣ 8% of men (1% deuteranopes, 1% protanopes, 1% protoanomolous, 5% deuteranomolous) ‣ 0.5% of women
- 33. STATISTICS Color Vision Deficiency Color Vision Deficiency - Statistics ‣ 8% of men (1% deuteranopes, 1% protanopes, 1% protoanomolous, 5% deuteranomolous) ‣ 0.5% of women ‣ Tritanopes/tritanomalous and achromats (mono) are around 1 in 50,000
- 34. Factoid Color Vision Deficiency About My Color Vision Deficiency
- 35. Factoid Color Vision Deficiency About My Color Vision Deficiency ‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.”
- 36. Factoid Color Vision Deficiency About My Color Vision Deficiency ‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.” ‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid.
- 37. Factoid Color Vision Deficiency About My Color Vision Deficiency ‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.” ‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid. ‣ How do I know what color something is?
- 38. Factoid Color Vision Deficiency About My Color Vision Deficiency ‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.” ‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid. ‣ How do I know what color something is? ‣ Crayola Crayons. Learn just like learning shapes, drew a patch of “red” and associate what I saw with the name red printed on the side.
- 39. Factoid Color Vision Deficiency About My Color Vision Deficiency ‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.” ‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid. ‣ How do I know what color something is? ‣ Crayola Crayons. Learn just like learning shapes, drew a patch of “red” and associate what I saw with the name red printed on the side. ‣ I still see red, I just see something different than what others interpret as red.
- 40. Factoid Color Vision Deficiency About My Color Vision Deficiency ‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.” ‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid. ‣ How do I know what color something is? ‣ Crayola Crayons. Learn just like learning shapes, drew a patch of “red” and associate what I saw with the name red printed on the side. ‣ I still see red, I just see something different than what others interpret as red. ‣ Color vision varies and depends not just on cones, but how the brain interprets the signals from your eyes.
- 41. INTERPRETATION
- 42. DEUTERANOPIA
- 43. TRITANOPIA
- 44. REALITY
- 46. So What?
- 47. So What? How can we make our work more accessible by considering color?
- 48. CONTEXT Design Features that Give Users Context
- 49. CONTEXT Design Features that Give Users Context Color
- 50. CONTEXT Design Features that Give Users Context Color Shape (Icons!)
- 51. CONTEXT Design Features that Give Users Context Color Shape (Icons!) Size
- 52. CONTEXT Design Features that Give Users Context Color Shape (Icons!) Size Position
- 53. CONTEXT Combine Design Features to Create Context
- 54. CONTEXT Combine Design Features to Create Context Button
- 55. CONTEXT Combine Design Features to Create Context Button
- 56. CONTEXT Combine Design Features to Create Context Button A “flat” button with no contextual clues is useless.
- 57. CONTEXT Combine Design Features to Create Context Launch SkyNet Bring Back Firefly
- 58. CONTEXT Combine Design Features to Create Context Launch SkyNet Two buttons, one bad, one good, no context. Bring Back Firefly
- 59. Launch SkyNetLaunch SkyNet CONTEXT Combine Design Features to Create Context Bring Back Firefly
- 60. Launch SkyNetLaunch SkyNet CONTEXT Combine Design Features to Create Context Color adds context, but what does it look like to color vision deficient individuals? Bring Back Firefly
- 61. Launch SkyNetLaunch SkyNet CONTEXT Combine Design Features to Create Context Bring Back Firefly
- 62. Launch SkyNetLaunch SkyNet CONTEXT Combine Design Features to Create Context Triatanopic individuals lose the hint of “green means go” because the button is blue. Bring Back Firefly
- 63. Launch SkyNetLaunch SkyNet CONTEXT Combine Design Features to Create Context Bring Back Firefly
- 64. Launch SkyNetLaunch SkyNet CONTEXT Combine Design Features to Create Context Without color, we’re back to meaningless. Bring Back Firefly
- 65. Launch SkyNet☠ Launch SkyNet CONTEXT Combine Design Features to Create Context ☺ Bring Back Firefly
- 66. Launch SkyNet☠ Launch SkyNet CONTEXT Combine Design Features to Create Context Adding a second design feature gives the button more contextual clues. ☺ Bring Back Firefly
- 67. ☠ Launch SkyNet CONTEXT Combine Design Features to Create Context ☺ Bring Back Firefly
- 68. ☠ Launch SkyNet CONTEXT Combine Design Features to Create Context Adjusting size and position makes the choice even clearer. ☺ Bring Back Firefly
- 70. ThePoint ELIMINATE CONFUSION A user’s choice should NOT:
- 71. ThePoint ELIMINATE CONFUSION A user’s choice should NOT: ‣ Be hard to find
- 72. ThePoint ELIMINATE CONFUSION A user’s choice should NOT: ‣ Be hard to find ‣ Be unclear
- 73. ThePoint ELIMINATE CONFUSION A user’s choice should NOT: ‣ Be hard to find ‣ Be unclear ‣ Cause hesitance
- 74. ThePoint ELIMINATE CONFUSION A user’s choice should NOT: ‣ Be hard to find ‣ Be unclear ‣ Cause hesitance ‣ Be “Mystery Meat”
- 76. ThePoint ELIMINATE CONFUSION A user’s choice should be:
- 77. ThePoint ELIMINATE CONFUSION A user’s choice should be: ‣ Quick
- 78. ThePoint ELIMINATE CONFUSION A user’s choice should be: ‣ Quick ‣ Clear
- 79. ThePoint ELIMINATE CONFUSION A user’s choice should be: ‣ Quick ‣ Clear ‣ Correct
- 80. ThePoint ELIMINATE CONFUSION A user’s choice should be: ‣ Quick ‣ Clear ‣ Correct ‣ Easy
- 82. ThePoint ELIMINATE CONFUSION Don’t rely on a single design element.
- 83. ThePoint ELIMINATE CONFUSION Don’t rely on a single design element. Combine color, shape, size, position, even time (animation) to create clarity.
- 84. ThePoint ELIMINATE CONFUSION Don’t rely on a single design element. Combine color, shape, size, position, even time (animation) to create clarity. Consider context and consistency.
- 85. ThePoint ELIMINATE CONFUSION Don’t rely on a single design element. Combine color, shape, size, position, even time (animation) to create clarity. Consider context and consistency. If the “continue” button is in the bottom right corner, have it there every time.
- 86. ThePoint ELIMINATE CONFUSION Don’t rely on a single design element. Combine color, shape, size, position, even time (animation) to create clarity. Consider context and consistency. If the “continue” button is in the bottom right corner, have it there every time. Replacing it with a “sudo rm -rf” is just cruel.
- 88. Real World
- 89. Real World A few examples of doing it wrong.
- 90. Normal
- 91. DEUTERANOPIA
- 92. GREYSCALE
- 93. DEUTERANOPIA
- 94. IMPROVED
- 95. REALITY
- 97. Questions?
- 98. Questions? Or share an example of color in UI used well or poorly.
- 100. FIN
- 101. FIN Thank you!
Editor's Notes
- Is anyone here colorblind? … Story about Momo being pulled over and the signal upside down.
- This is the boring part, there will not be a test.
- Any excuse to show a photo of my dog, Kenai.
- So almost ten percent of your users could be color vision deficient to one degree or another. Good reason to build a color accessible site.
- The eyes gather the information, but the brain processes it. This is an optical illusion that some by which “normal color vision” people were fooled.
- My wife tells me that this is “exactly” the same as the first one. My color picker on my Mac says differently.
- If you were a tritanope, you might see it like this. Still not gold and white!
- The reality is that a headless, armless, legless woman wears the dress.
- One could also consider “time” a factor, for example, animation.
- So we take a button.
- But it’s 2015 so we take all the meaning out of it. I mean, we make it “flat.”