Differences between revisions 1 and 18 (spanning 17 versions)
Revision 1 as of 2010-10-14 15:15:18
Size: 6853
Editor: shoobe01
Comment:
Revision 18 as of 2015-07-08 14:57:18
Size: 11345
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
{{{#!html

<div class="saleshead">
    <div class="block" id="left">
        <a href="http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template">
        <div class="salesLeft">
           <h3>4ourth Mobile Touch Template</h3>
           <p>Design for people, not pixels with this handy, wallet-sized inspection and design tool, only $10. <span>Order yours now</span></p>
        </div>
        </a>
    </div>
    <div class="block" id="right">
        <a href="http://4ourth.com/wiki/Mobile%20Design%20Patterns%20Poster">
        <div class="salesRight">
           <h3>Mobile Interaction Design Patterns Poster</h3>
           <p>Every pattern from the book and this wiki, plus easy-to-follow relationships, and key information on sizes for readability and touch. <span>Order now</span></p>
        </div>
        </a>
    </div>
    <div class="salespad">&nbsp;
    </div>
</div>

}}}


[[http://www.amazon.com/gp/product/1449394639/ref=as_li_tf_tl?ie=UTF8&tag=4ourthmobile-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449394639|{{attachment:wiki-banner-book.png|Click here to buy from Amazon.|align="right"}}]]
Mobile devices are used in all sorts of environments, and must be clear and easy to read when bright, dark, dirty, rain-covered, and so on. General heuristic principles should be followed to dual- (or triple-) encode information so that it is clear in all conditions.

Therefore, the design of mobile devices should not be significantly affected by considerations for users with color vision deficits. Practically, many, many interfaces are still single-coded, with (for example) red type used for important notices and no use of iconography or type weight to reinforce this.

The information and guidelines in this appendix should serve not just as a reminder of how to address the needs of a significant portion of the population, but also of how color vision can fail every user in certain conditions. If colorblind users are considered in design, the product will work better for all users.


== We Are All (Sometimes) Disabled ==
I have to credit the concept of "temporary disability" to the always correct and clever usability expert Robin Christopherson, but it applies especially to mobile and color. Simple factors like glare can make a screen lower contrast and effectively monochrome. Multi-encode every control and indicator as though designing for colorblind, nearsighted users. Everyone is like this sometimes, especially on mobiles.

I also say that way more people have a color deficit than in the numbers I list below. I have minimal clinical data to back this up, but in numerous usability tests have encountered people who have less inclination to notice colors. For example, we were testing a new web portal, and most users were annoyed by how prominent this yellow banner was at the top of the page, and always noticed the bright yellow triangle warnings near it. Except one of the users who, despite otherwise clearly having color vision, just did not seem to notice, and thought the whole page looked drab instead.
Line 3: Line 42:
Color vision deficiency (commonly referred to as "color blindness") is a condition in which certain colors cannot be distinguished or can only be distinguished with difficulty. It is most commonly due to an inherited condition. There is no treatment. Color vision deficiency (commonly referred to as colorblindness) is a condition in which certain colors cannot be distinguished or can only be distinguished with difficulty. It is most commonly due to an inherited condition. There is no treatment.
Line 5: Line 44:
Red/Green color blindness is by far the most common form. Blue/Yellow and other forms also exist, but are more rare and harder to test for. Complete color blindness (seeing only in shades of gray) is extremely rare. Color deficiencies of one sort or another occur in about 8% - 12% of males and about 1/2 - 1% of females (of European origin).  Red/green colorblindness is by far the most common form. Blue/yellow and other forms also exist, but are rarer and harder to test for. Complete colorblindness (seeing only in shades of gray) is extremely rare. Color deficiencies of one sort or another occur in about '''8% to 12% of males''' and about 0.5% to 1% of females (of European origin).
Line 7: Line 46:
Clinically, disturbances of color vision will occur if the amount of pigment within a cone is reduced or if one or more of the three cone systems are entirely absent. The gene for this is carried in the X chromosome. therefore color blindness occurs much more commonly in males and is typically passed to them by their mothers. Reduction in pigment in one or more channels is more common than the loss of one or more sets of cones; therefore, most have a strict color deficiency, and perceive certain color channels more poorly, vs. not at all. Clinically, disturbances of color vision will occur if the amount of pigment within a cone is reduced or if one or more of the three cone systems are entirely absent. The gene for this is carried in the X chromosome. Therefore, colorblindness occurs much more commonly in males and is typically passed to them by their mothers. Reduction in pigment in one or more channels is more common than the loss of one or more sets of cones; therefore, most have a strict color deficiency, and perceive certain color channels more poorly, versus not at all.
Line 10: Line 49:
'''Protanomaly''' (partial red-green, ''1% of males'') - Also known as "red-weak." Complete or partial inability to see using long-wavelength sensitive retinal cones making hard to distinguish between colors in the green-yellow-red section of the spectrum. Reds perception is reduced both in saturation and brightness. Red, orange, yellow, yellow-green, and green appear somewhat shifted in hue towards the green, and all appear paler than they do to the normal observer. The redness component that a normal observer sees in a violet or lavender color is so weakened for the protanomalous observer that he may fail to detect it, and therefore sees only the blue component. The following are various types of color deficiency:
Line 12: Line 51:
'''Deuteranomaly''' (partial red-green, ''5% of males, the most common form of color blindness'') - Also known as "green weak." Complete or partial inability to see using middle-wavelength sensitive retinal cones making hard to distinguish between colors in the green-yellow-red section of the spectrum. He makes errors in the naming of hues in this region because they appear somewhat shifted towards red for him - difficulty in distinguishing violet from blue. '''Protanomaly (partial red-green, ''1% of males'')'''
 Also known as “red-weak.” Complete or partial inability to see using long-wavelength sensitive retinal cones making it hard to distinguish between colors in the green- yellow-red section of the spectrum. Red perception is reduced both in saturation and in brightness. Red, orange, yellow, yellow-green, and green appear somewhat shifted in hue toward the green, and all appear paler than they do to the normal observer. The redness component that a normal observer sees in a violet or lavender color is so weakened for the protanomalous observer that he may fail to detect it, and therefore sees only the blue component.
Line 14: Line 54:
==== Dicromasy == ==
Individuals with the following two conditions normally know they have a color vision problem and it can effect their lives on a daily basis. They see no perceptible difference between red, orange, yellow, and green. All these colors that seem so different to the normal viewer appear to be the same color for this two percent of the population.
'''Deuteranomaly (partial red-green, ''5% of males, the most common form of color blindness'')'''
 Also known as “green weak.” Complete or partial inability to see using middle-wavelength sensitive retinal cones making it hard to distinguish between colors in the green-yellow-red section of the spectrum. He makes errors in the naming of hues in this region because they appear somewhat shifted toward red for him; difficulty in distinguishing violet from blue.
Line 17: Line 57:
'''Deuteranopia''' (complete red-green, ''1% of males'') - The deuteranope suffers the same hue discrimination problems as the protanope, but without the abnormal dimming. The names red, orange, yellow, and green really mean very little to him aside from being different names that every one else around him seems to be able to agree on. Similarly, violet, lavender, purple, and blue, seem to be too many names to use logically for hues that all look alike to him. '''Dicromasy'''
 Individuals with the following two conditions normally know they have a color vision problem and it can affect their lives on a daily basis. They see no perceptible difference between red, orange, yellow, and green. All these colors that seem so different to the normal viewer appear to be the same color for this 2% of the population.
Line 19: Line 60:
'''Protanopia''' (complete red-green, ''1% of males'') - For the protanope, the brightness of red, orange, and yellow is much reduced compared to normal. This dimming can be so pronounced that reds may be confused with black or dark gray, and red traffic lights may not appear to be illuminated at all. They may learn to distinguish reds from yellows and from greens primarily on the basis of their apparent brightness or lightness, not on any perceptible hue difference. Violet, lavender, and purple are indistinguishable from various shades of blue because their reddish components are so dimmed as to be invisible e.g. Pink flowers, reflecting both red light and blue light, may appear just blue to the protanope.  '''Deuteranopia (complete red-green, ''1% of males'')'''
  The deuteranope suffers the same hue discrimination problems as the protanope, but without the abnormal dimming. The names red, orange, yellow, and green really mean very little to him aside from being different names that every one else around him seems to be able to agree on. Similarly, violet, lavender, purple, and blue seem to be too many names to use logically for hues that all look alike to him.
Line 21: Line 63:
==== Less-Common Color Deficit Conditions ====
Tritanopia (complete blue-yellow)
 '''Protanopia (complete red-green, ''1% of males'')'''
  For the protanope, the brightness of red, orange, and yellow is much reduced compared to normal. This dimming can be so pronounced that reds may be confused with black or dark gray, and red traffic lights may not appear to be illuminated at all. He may learn to distinguish reds from yellows and from greens primarily on the basis of their apparent brightness or lightness, not on any perceptible hue difference. Violet, lavender, and purple are indistinguishable from various shades of blue because their reddish components are so dimmed as to be invisible (e.g., pink flowers, reflecting both red light and blue light, may appear just blue to the protanope).
Line 24: Line 66:
Tritanomaly (partial blue-yellow) - Complete or partial inability to see using short-wavelength sensitive retinal cones making hard to distinguish between colors in the blue-yellow section of the spectrum.

Monochromacy - Complete or partial inability to distinguish colors. Complete color blindness is very rare.
The following are some less-common color deficit conditions:
 * Tritanopia (complete blue/yellow).
 * Tritanomaly (partial blue/yellow). Complete or partial inability to see using short-wavelength sensitive retinal cones making it hard to distinguish between colors in the blue-yellow section of the spectrum.
 * Monochromacy. Complete or partial inability to distinguish colors. Complete color-blindness is very rare.
Line 29: Line 72:
 * Weather forecasts and similar info-graphical maps. Certain colors cannot be distinguished in the map or legend.
 * Lighted indicators (e.g. charging LED). Is the indicator light red, yellow, or green?
 * Position is often the only way to decipher traffic lights -- this is an important reason they are standardized with red on top. Horizontal signals, or single signals that change color, are a problem.
 * Color observation by others: "Look at those lovely pink flowers on that shrub". My reply, looking at a greenish shrub "What flowers?"
 * Kids and crayons: Color vision deficiencies bother affected children from the earliest years. At school, coloring can become a difficulty when one has to take the blue crayon -and not the pink one- to color the ocean.
 * Chemical test strips (e.g. for hard water, pH, swimming pools).
 * When cooking, red deficient individuals cannot tell whether their piece of meat is raw or well done. Many can not tell the difference between green and ripe tomatoes or between ketchup and chocolate syrup. They can however distinguish some citrus fruits. Oranges seem to be of a brighter yellow than that of lemons.
The following are some common usability complaints among those who are colorblind:
 * Weather forecasts and similar infographic maps. Certain colors cannot be distin- guished in the map or legend.
 * Lighted indicators (e.g., charging LED). Is the indicator light red, yellow, or green?
 * Position is often the only way to decipher traffic lights. This is an important reason they are standardized with red on top. Horizontal signals, or single signals that change color, are a problem.
 * Color observation by others. “Look at those lovely pink flowers on that shrub.” A colorblind individual, looking at a greenish shrub, may reply: “What flowers?”
 * Kids and crayons. Color vision deficiencies bother affected children from the earliest years. At school, coloring can become a difficulty when one has to take the blue crayon, and not the pink one, to color the ocean.
 * Chemical test strips (e.g., for hard water, pH, swimming pools).
 * When cooking, red deficient individuals cannot tell whether their piece of meat is raw or well done. Many cannot tell the difference between green and ripe tomatoes or between ketchup and chocolate syrup. They can, however, distinguish some citrus fruits. Oranges seem to be of a brighter yellow than lemons.
Line 38: Line 82:
Design patterns to design around users with a color deficit (e.g. colorblindness) are available at [[http://wearecolorblind.com/category/patterns/ WeAreColorblind.com]]. These are heavily focused on infographics, but the principles are easy to follow. Design patterns to design around users with a color deficit (e.g., colorblindness) are available at WeAreColorblind.com (http://wearecolorblind.com/category/patterns/). These are heavily focused on infographics, but the principles are easy to follow.

Discussion of being a colorblind designer, and tips for design: https://medium.com/@aaron10buuren/designing-for-and-with-color-blindness-48392aab3d87
Line 41: Line 88:
 * [[http://michelf.com/projects/sim-daltonism/ Sim Daltonism - Color blindness simulator for OSX, shows results much like the Apple Digital Color Meter.]]
 * [[http://www.vischeck.com/downloads/ Vischeck - Color simulator plugins for Photoshop.]]
 * [[http://www.etre.com/tools/colourblindsimulator/ Entre - Web-based color blindness simulator. Upload any graphic to test.]]
 * [[http://colorfilter.wickline.org/ Wickline - Web-based color blindness simulator. Specify a URL to see the resulting page modified.]]
Here is a list of color deficit simulators:
* [[http://michelf.com/projects/sim-daltonism/|Sim Daltonism - Color blindness simulator for OSX, shows results much like the Apple Digital Color Meter.]]
 * [[http://www.vischeck.com/downloads/|Vischeck - Color simulator plugins for Photoshop.]]
 * [[http://www.etre.com/tools/colourblindsimulator/|Entre - Web-based color blindness simulator. Upload any graphic to test.]]
 * [[http://colorfilter.wickline.org/|Wickline - Web-based color blindness simulator. Specify a URL to see the resulting page modified.]]
Line 47: Line 95:
 * [[http://colorlab.wickline.org/colorblind/colorlab/ Colorlab - lets you pick from a (websafe) palette, and see the results.]] Seems to have a lot more information, all to help you understand how to pick colors safe for color-deficit users, but I am not totally up on how it works yet.
 * [[http://www.toledo-bend.com/colorblind/Ishihara.asp Ishihara Test for Color Blindness]]
 * [[http://colorlab.wickline.org/colorblind/colorlab/|Colorlab - lets you pick from a (websafe) palette, and see the results.]] Seems to have a lot more information, all to help you understand how to pick colors safe for color-deficit users, but I am not totally up on how it works yet.
 * [[http://www.toledo-bend.com/colorblind/Ishihara.asp|Ishihara Test for Color Blindness]]
 * [[http://www.uxmatters.com/mt/archives/2007/02/ensuring-accessibility-for-people-with-color-deficient-vision.php|Ensuring Accessibility for People With Color-Deficient Vision]]
 * [[http://snook.ca/technical/colour_contrast/colour.html|Snook Colour Contrast Check]]
 * [[http://www.nils.org.au/info.aspx?page=628|Colour Contrast Analyser]] A downloadable Windows application
 * [[http://juicystudio.com/services/csstest.php|Juicy Studio: CSS Colour Contrast Test]] web-based tool to check CSS code for appropriate contrast

-------
Next: [[Other Mobile Pattern Libraries]]
-------
= Discuss & Add =
Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

== Examples ==
If you want to add examples (and we occasionally do also) add them here.

== Other References ==
 * http://www.colour-blindness.com/general/prevalence/ This may be a reference already, but too lazy to look it up.

Click here to buy from Amazon. Mobile devices are used in all sorts of environments, and must be clear and easy to read when bright, dark, dirty, rain-covered, and so on. General heuristic principles should be followed to dual- (or triple-) encode information so that it is clear in all conditions.

Therefore, the design of mobile devices should not be significantly affected by considerations for users with color vision deficits. Practically, many, many interfaces are still single-coded, with (for example) red type used for important notices and no use of iconography or type weight to reinforce this.

The information and guidelines in this appendix should serve not just as a reminder of how to address the needs of a significant portion of the population, but also of how color vision can fail every user in certain conditions. If colorblind users are considered in design, the product will work better for all users.

We Are All (Sometimes) Disabled

I have to credit the concept of "temporary disability" to the always correct and clever usability expert Robin Christopherson, but it applies especially to mobile and color. Simple factors like glare can make a screen lower contrast and effectively monochrome. Multi-encode every control and indicator as though designing for colorblind, nearsighted users. Everyone is like this sometimes, especially on mobiles.

I also say that way more people have a color deficit than in the numbers I list below. I have minimal clinical data to back this up, but in numerous usability tests have encountered people who have less inclination to notice colors. For example, we were testing a new web portal, and most users were annoyed by how prominent this yellow banner was at the top of the page, and always noticed the bright yellow triangle warnings near it. Except one of the users who, despite otherwise clearly having color vision, just did not seem to notice, and thought the whole page looked drab instead.

General Information on Color Deficits

Color vision deficiency (commonly referred to as colorblindness) is a condition in which certain colors cannot be distinguished or can only be distinguished with difficulty. It is most commonly due to an inherited condition. There is no treatment.

Red/green colorblindness is by far the most common form. Blue/yellow and other forms also exist, but are rarer and harder to test for. Complete colorblindness (seeing only in shades of gray) is extremely rare. Color deficiencies of one sort or another occur in about 8% to 12% of males and about 0.5% to 1% of females (of European origin).

Clinically, disturbances of color vision will occur if the amount of pigment within a cone is reduced or if one or more of the three cone systems are entirely absent. The gene for this is carried in the X chromosome. Therefore, colorblindness occurs much more commonly in males and is typically passed to them by their mothers. Reduction in pigment in one or more channels is more common than the loss of one or more sets of cones; therefore, most have a strict color deficiency, and perceive certain color channels more poorly, versus not at all.

Types of color deficiency

The following are various types of color deficiency:

Protanomaly (partial red-green, 1% of males)

  • Also known as “red-weak.” Complete or partial inability to see using long-wavelength sensitive retinal cones making it hard to distinguish between colors in the green- yellow-red section of the spectrum. Red perception is reduced both in saturation and in brightness. Red, orange, yellow, yellow-green, and green appear somewhat shifted in hue toward the green, and all appear paler than they do to the normal observer. The redness component that a normal observer sees in a violet or lavender color is so weakened for the protanomalous observer that he may fail to detect it, and therefore sees only the blue component.

Deuteranomaly (partial red-green, 5% of males, the most common form of color blindness)

  • Also known as “green weak.” Complete or partial inability to see using middle-wavelength sensitive retinal cones making it hard to distinguish between colors in the green-yellow-red section of the spectrum. He makes errors in the naming of hues in this region because they appear somewhat shifted toward red for him; difficulty in distinguishing violet from blue.

Dicromasy

  • Individuals with the following two conditions normally know they have a color vision problem and it can affect their lives on a daily basis. They see no perceptible difference between red, orange, yellow, and green. All these colors that seem so different to the normal viewer appear to be the same color for this 2% of the population.

    Deuteranopia (complete red-green, 1% of males)

    • The deuteranope suffers the same hue discrimination problems as the protanope, but without the abnormal dimming. The names red, orange, yellow, and green really mean very little to him aside from being different names that every one else around him seems to be able to agree on. Similarly, violet, lavender, purple, and blue seem to be too many names to use logically for hues that all look alike to him.

    Protanopia (complete red-green, 1% of males)

    • For the protanope, the brightness of red, orange, and yellow is much reduced compared to normal. This dimming can be so pronounced that reds may be confused with black or dark gray, and red traffic lights may not appear to be illuminated at all. He may learn to distinguish reds from yellows and from greens primarily on the basis of their apparent brightness or lightness, not on any perceptible hue difference. Violet, lavender, and purple are indistinguishable from various shades of blue because their reddish components are so dimmed as to be invisible (e.g., pink flowers, reflecting both red light and blue light, may appear just blue to the protanope).

The following are some less-common color deficit conditions:

  • Tritanopia (complete blue/yellow).
  • Tritanomaly (partial blue/yellow). Complete or partial inability to see using short-wavelength sensitive retinal cones making it hard to distinguish between colors in the blue-yellow section of the spectrum.
  • Monochromacy. Complete or partial inability to distinguish colors. Complete color-blindness is very rare.

Common Usability Complaints for Colorblind Individuals

The following are some common usability complaints among those who are colorblind:

  • Weather forecasts and similar infographic maps. Certain colors cannot be distin- guished in the map or legend.
  • Lighted indicators (e.g., charging LED). Is the indicator light red, yellow, or green?
  • Position is often the only way to decipher traffic lights. This is an important reason they are standardized with red on top. Horizontal signals, or single signals that change color, are a problem.
  • Color observation by others. “Look at those lovely pink flowers on that shrub.” A colorblind individual, looking at a greenish shrub, may reply: “What flowers?”
  • Kids and crayons. Color vision deficiencies bother affected children from the earliest years. At school, coloring can become a difficulty when one has to take the blue crayon, and not the pink one, to color the ocean.
  • Chemical test strips (e.g., for hard water, pH, swimming pools).
  • When cooking, red deficient individuals cannot tell whether their piece of meat is raw or well done. Many cannot tell the difference between green and ripe tomatoes or between ketchup and chocolate syrup. They can, however, distinguish some citrus fruits. Oranges seem to be of a brighter yellow than lemons.

Design Patterns for Users with Color Deficits

Design patterns to design around users with a color deficit (e.g., colorblindness) are available at WeAreColorblind.com (http://wearecolorblind.com/category/patterns/). These are heavily focused on infographics, but the principles are easy to follow.

Discussion of being a colorblind designer, and tips for design: https://medium.com/@aaron10buuren/designing-for-and-with-color-blindness-48392aab3d87

Color Deficit Simulators

Here is a list of color deficit simulators:

Other Color Deficit Design Tools & Resources


Next: Other Mobile Pattern Libraries


Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Other References

Color Deficit Design Tools (last edited 2019-06-26 19:52:42 by shoobe01)