visual impairments
Post on 06-May-2015
2.755 Views
Preview:
DESCRIPTION
TRANSCRIPT
Visual impairments
8.11.2012Nina Kaijasilta
Petri MyllysMaiju Tompuri
Visual Impairments
• Visual impairments – a matter of definition– Visually impaired, vision impairment,
partially sighted, low vision, legally blind, totally blind, functional loss of vision, eye disorder, retinal degeneration, albinism, cataracts, glaucoma, muscular problems, corneal disorders, diabetic retinopathy, congenital disorders, infection, cortical visual impairment
Visual Impairments
• Visually impaired – categorization between1:– Low vision / partially sighted2
– Blind
• Based on WHO definition– Visual acuity & visual field defect
1 http://www.nkl.fi/fi/etusivu/tietoa/maarittely
2 http://www.nkl.fi/fi/etusivu/tietoa/sanastoengl
Visual Impairments
• 285.389M visually impaired people (2010 estimate)1
– Enough reason to visualization for visually impaired
1 http://www.who.int/blindness/en/
Why to consider?
“A well-designed visualization facilitates the understanding of the key messages, speeds the process and reduces strain.
Great visualizations take into consideration, how people receive and utilize information.”
Näsänen,
2007Accessible design
Why to consider?
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, creator of WWW
BLINDNESS
Blindness
•The WHO definition from 19721
– Case for revision:• Interesting issue – definition of blindness:• No distinction when it comes to perception of
light
1http://www.who.int/blindness/Change%20the%20Definition%20of%20Blindness.pdf
Blindness
• Another angle: – International Council of Ophthalmology
recommends1
• Blindness: only total vision loss• Low vision: lesser degrees of vision loss• Visual impairment: loss of visual functions at
the organ level
1 Colenbrander 2002, 17
Blindness
• Complete blindness is rare1,2
• So what exactly is visualization and to whom can we visualize?
1 http://www.nkl.fi/fi/etusivu/tietoa/maarittely
2 Nelson 2003, 29
LOW VISION
What’s low vision?
Low vision in the World Health Organization classifications1:
•Moderate visual impairment•Severe visual impairment•visual field loss (loss of peripheral vision).
1http://www.who.int/mediacentre/factsheets/fs282/en/index.html
Severe visual impairment
Moderate visual impairment
Mild vision loss
Snellen chart: http://en.wikipedia.org/w/index.php?title=File:Snellen_chart.svg&page=1
Why does it occur?• Uncorrected refractive errors
(myopia, hyperopia or astigmatism), 43 %• Cataract, 33%• Glaucoma, 2%
World Health Organization1
1http://www.who.int/mediacentre/factsheets/fs282/en/index.html
Low vision
COLOR BLINDNESS
Color blindness
• The colorblind have a narrowed color perception
• There is no treatment or cure for color blindness
Pic: http://understandinggraphics.com/wp-content/uploads/2009/10/color-blind-chart.png
Color vision• Red cones – L cones• Green cones – M cones• Blue cones – S cones
Normal Vision Color Blindness (Protanopia)
Pic: http://www.cis.rit.edu/fairchild/WhyIsColor/Questions/3-4.html
Red-Blind/ ProtanopiaGreen-Blind/ Deuteranopia
Blue-Blind/Tritanopia
Red-Weak/ Protanomaly
Green-Weak/ Deuteranomaly
Blue-Weak/ Tritanomaly
Monochromacy/ Achromatopsia
Normal vision
Simulator: http://www.colblindor.com/coblis-color-blindness-simulator/
Prevalence (Caucasian)
Type Men WomenCone absent 2.4% 0.03%L-cone absent (Protanopia) 1-1.3% 0.02%
M-cone absent (Deuteranopia) 1-1.3% 0.01%
S-cone absent (Tritanopia) 0.001% 0.03%Cone defect 6.3% 0.37%L-cone defect (Protanomaly) 1-1.3% 0.02%M-cone defect (Deuteranomaly) 4.5-5.0% 0.35%
S-cone defect (Tritanomaly) 0.01-0.02% 0.01%
Total 8 - 10% 0.3 – 0.5%
Source: http://www.colour-blindness.com/general/prevalence/
Color blindness
Color blindness prevalence
Genetics• Color blindness carried by the X chromosone (recessive)
Color blindness
Ishihara - Color defiency test 1917
Original plates: http://colorvisiontesting.com/ishihara.htm
Color blindness
Hue Color Vision 1949
Color arrangement test 1947
1 Screenshot: http://www.colblindor.com/farnsworth-munsell-100-hue-color-vision-test/#prettyPhoto2 Screenshot: http://www.colblindor.com/color-arrangement-test/
1
2
Color blindness
RGB Anomaloscope 1907
1 Screenshots: http://www.colblindor.com/rgb-anomaloscope-color-blindness-test/2 Pic: https://www.good-lite.com/Details.cfm?ProdID=570
1
2
Color blindness
HOW TO DESIGN?
• What exactly is seeing?– Seeing could be thought as a mental
interpretation of some input
Visualizing for blind?
Visualization methods for persons blind or partially sighted
• Louis Braille (1809 – 1852): braille system
1 http://en.wikipedia.org/wiki/File:Braille_alfabet.jpg
1
How to design for the blind
• Contrast– “-- visual acuity depends on the
contrast” 1
– ”-- contrast sensitivity thus depends on the size of the object” 1
1 Näsänen 2007, 12
How to design for the blind
Modified from Joel
Schneider’s 3-page
Snellen Chart
• Tactile textures– Boundaries are easy to find1
• Tactile maps
– Abstract concepts can be demonstrated2
1 Anderson 1992, 290
2 Skytt 2012, 10–12.
How to design for the blind
Pic: http://wiki.openstreetmap.org/w/images/4/44/Tactile_Map_Aachen.jpg
• Tactile combined with sound– IVEO Viewer1
1 Gardner, Bulatov & Kenny 2009
1
How to design for the blind
“Fig. 1. IVEO SVG image as seen on screen or on the color printed image. (b) Dots embossed with a ViewPlus embosser. Black dots have the maximum height of 0.5 mm and gray dots are smaller. 7 dot heights are possible” (Gardner, Bulatov & Kenny 2009)
• What about Scalable Vector Graphics in mainstream context?
How to design for the blind
• “To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size.”
(http://www.w3.org/TR/SVG11/concepts.html)
How to design for the blind
Bushell 2012
• Screen readers & special displays– Design & development might target
only a specific (seeing) group• Microsoft Windows first not accessible by
screen readers1
1 Vehmas 2005, 130
Distinguishable letters
When a picture is formed into the retina, small details have lower contrast than larger items. 1
1Näsänen 20072Dolan, RGD Ontario 2010
Use bigger letters and graphical elements.Letterforms need to be easily distinguishable 1,2
How to design for low vision
Screenshot: http://www.couchsurfing.org/
Screenshot: http://ripetungi.com/wp-content/uploads/2010/02/twitter-users.png
A good rule of thumb is to ensure at least a 70% difference in color value between e.g. type and a background tone. 2
Brains compensate for a certain range of blur that eye optics create. This applies only to the difference in brightness, not in color. 1
Enough difference in color value
1Näsänen 20072Dolan, RGD Ontario 2010
How to design for low vision
http://blog.mainstreethost.com/
We see sharply only in the center of the visual field because the amount of ganglian cells reduces when not in the focus point. 1
information needs to be clearly placed, and the layout can be understood with one glance.1
Focus on layout
1Näsänen 2007
How to design for low vision
Screenshot: http://laitilan.com/
Every day we do approximately 100 000 eye fixations. Each fixation takes at least 0,15 seconds.1
Avoid animations and flashy content if they don’t bring extra value to the visualization. However, use of graphic visualizations is recommended.1
Is extra bling bling needed?
1Näsänen 2007
How to design for low vision
There is a wide variance in users’ ability to operate a mouse, keyboard or other input device. Some people may use voice-recognition programs with spoken commands. 1 Make all functionality fully accessible from a keyboard and create content that can be presented in different ways.1
Make it accessible
1Dolan, RGD Ontario 2010
How to design for low vision
Pic: http://notabilia.net/
• Colors should never be the only method of conveying important information!
This is important
How to design for color blinds
How to design for colorblinds
• Avoid placing red and green together– Also minor color &contrast differences
• Desaturate images to see if they still have impact
1http://blog.templatemonster.com/2012/03/21/designing-colorblind-friendly-website/2 http://www.tfl.gov.uk/assets/downloads/standard-tube-map.pdf
1
2
Bad examples: BBC Online
Sceenshot: http://wearecolorblind.com/example/bbc-online-football-tables/
How to design for colorblinds
How to design for colorblinds
• In graphs– Place the legend directly
in the chart – Display the type of data
for each element in a tooltip
• Name the color in text as well
Blue Green Purple Red
Bad example: Google Analytics
Sceenshot: http://wearecolorblind.com/example/google-analytics/
How to design for colorblinds
How to design for colorblinds
• Increase contrast, change hue, add shapes
Bernhard J. & Vaughn Kelso N. 2007
How to design for colorblinds
• Use varied icons and shapes
Bernhard J. & Vaughn Kelso N. 2007
Problematic colorsHigh Medium Low
Green and Red Light Green and Yellow Blue and Yellow
Green and Brown Blue and Grey Yellow and Violet
Blue and Purple Green and Grey Dark blue and Black
Green and Blue Green and Black
Pic: http://jfly.iam.u-tokyo.ac.jp/color/
How to design for colorblinds
Unambiguous Colors
• For both to colorblinds and non-colorblinds
Black
Orange
Sky Blue
Bluish Green
Yellow
Blue
Vermillon
Reddish Purple
Original Protan Deuter TritanSimulation
Colors: http://jfly.iam.u-tokyo.ac.jp/color/image/pallete.jpg
How to design for colorblinds
Curious about color blindness?
• Watch video: ”No such thing as color – what it is like to be colorblind”– http://www.nosuchthingascolor.com/
• We are colorblind - Blog by Tom van Beveren, colorblind (deuteranomally)• http://wearecolorblind.com/
Test your designs
• Color blindness simulation– http://vischeck.com/– http://www.colblindor.com/coblis-color-
blindness-simulator/
• Contrast test– http://www.checkmycolours.com/– http://www.snook.ca/technical/
colour_contrast/colour.html
• Grayscale images and visualizations
Conclusions
• Many people with visual impairments– Create accessible design
• Use guidelines in design– Contrast– Size– Color– Layout– Format
• Anderson, Frances 1992. Art for all the children: approaches to art therapy for children with disabilities. Springfield, Charles C Thomas.
• Bernhard, J.& Vaughn Kelso, N. 2007. Color Design for the Color Vision Impaired.Cartographic Perspectives, 58, p. 61-67.
• Bushell, David 2012. Resolution Independence With SVG. Read 30.10.2012. http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
• Colenbrander, August 2002. Visual Standards: Aspects and Ranges of Vision Loss with Emphasis on Population Surveys. International Council of Ophthalmology. Read 23.10.2012. http://www.icoph.org/downloads/visualstandardsreport.pdf
• Color Blindness. Prevalence. Accessed 01.11.2012. http://www.colour-blindness.com/general/prevalence/
• Dolan, D., A Practical Handbook on Accessible Graphic Design 2010, RGD Ontario• Flück, D. 2012. Colblindor - Color Blindness viewed through Colorblind Eyes. Accessed
30.10.2012. http://www.colblindor.com/• Gabriel-Petit, P. 2007. Ensuring Accessibility for People With Color-Deficient Vision.
Accessed 01.11.2012 http://www.uxmatters.com/mt/archives/2007/02/ensuring-accessibility-for-people-with-color-deficient-vision.php
• Gardner, John; Bulatov, Vladimir & Kelly, Robert 2009. Making Journals Accessible to the Visually-Impaired – The Future is Near. Learned Publishing 22(4) 2009 pp. 314-319. Read 30.10.2012. http://www.viewplus.com/about/abstracts/09learnpubgardner.html
• ICD Update and Revision Platform: Change the Definition of Blindness. World Health Organization. Read 23.10.2012. http://www.who.int/blindness/Change%20the%20Definition%20of%20Blindness.pdf
• Malamed, C. 2012. Designing for Color Blindness. http://understandinggraphics.com/design/designing-for-color-blindness/
• Mariotti, S. P., Global Data on Visual Impairments 2010, World Health Organization
References
References• Nelson, Scott 2003. A Professional Artist and Curator Who Is Blind. Art Beyond Sight – A
Resource Guide to Art, Creativity and Visual Impairments, 28–29. Ed. Axel, Elisabeth & Levent, Nina. New York, AEB & AFB.
• New estimates of visual impairment and blindness: 2010. World Health Organization. Read 23.10.2012. http://www.who.int/blindness/en/
• Näkövammaisuuden määrittely. Näkövammaisten Keskusliitto ry. Read 23.10.2012. http://www.nkl.fi/fi/etusivu/tietoa/maarittely
• Sanastoa englanniksi. Näkövammaisten Keskusliitto ry. Read 23.10.2012. http://www.nkl.fi/fi/etusivu/tietoa/sanastoengl
• Näsänen, Risto 2007. Visuaalisen käytettävyyden opas 2007. Read 18.10.2012. http://www.ttl.fi/fi/ergonomia/kognitiivinen_ergonomia/visuaalinen_kaytettavyys/Documents/Visuaalisen_kaytettavyyden_opas_2007.pdf
• Okabe, M. & Ito, K. 2002. Color Universal Design (CUD) - How to make figures and presentations that are friendly to Colorblind people – Accessed 29.10.2012. http://jfly.iam.u-tokyo.ac.jp/color/
• Saarelma, O. 2012. Värisokeus ja poikkeava värinäkö. Lääkärikirja Duodecim. Accessed 28.10.2012. http://www.terveyskirjasto.fi/terveyskirjasto/tk.koti?p_osio=100&p_artikkeli=dlk00347&p_teos=dlk&p_selaus=7728
• Scalable Vector Graphics (SVG) 1.1 (Second Edition), W3C Recommendation 2011. Read 30.10.2012. http://www.w3.org/TR/SVG11/concepts.html
• Schneider, Joel. 3-page Snellen Chart. Read 25.10.2012. http://www.i-see.org/eyecharts.html/#download
• Skytt, Riitta 2012. Koskettavaa luettavaa. Tukilinja 3–4 2012. Read 16.10.2012. http://www.virtualmagnet.eu/magnet/asiakkaat/Tukilinja/tukilinja_030412.html/
• Van Beveren, T. 2012. A quick introduction to colorblindness. Accessed 30.10.2012. http://wearecolorblind.com/article/a-quick-introduction-to-color-blindness/
• Vehmas, Simo 2005. Vammaisuus. Johdatus historiaan, teoriaan ja etiikkaan [Silvers, Anita 1998, 13-145]. Helsinki, Gaudeamus.
top related