SXSW Interactive Workshop, 2013Yvonne So & Livia Veneziano
Interfaces, Accessibility & Superheroes
1
#superable
Hello - We’re Designers
2
3
Designing for Accessibility
4
First, a Challenge
What is Accessible Design?
5
Universal Design n.“...the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.”
http://www.ncsu.edu/www/ncsu/design/sod5/cud/about_ud/about_ud.htm
6
Definition: Universal Design
Disability n.“...is a complex phenomenon, reflecting an interaction between feature of a person’s body and features of the society in which he or she lives.”
“Disabilities”. World Health Organization. Retrieved 11 August, 2012.
7
Definition: Disability
Accessibility n.“...the degree to which a product, service, or environment is available to as many people as possible.”
“Accessibility – Brain Injury Resource | BrainLine.org.” Accessibility – Brain Injury Resource. N.p., n.d. Web. 16, Jan, 2013
8
Definition: Accessibility
9
Who Are We Designing For?
Challenging Convention
10
11
Challenging Convention
World Heath Organization Disability Report
12
One out of seven of the world’s population has some form of disability.- World Health Organization
2010 Census: Disability by Age
13
Overall instances of disability in the U.S. by age.
People over 15 years old21.3%
People over 65 years old49.8%
2010 Census: Population Growth of 65+
14
Projected growth of population 65 years and older.
2010 Census: Disability Occurrence by Age
15
Overall instances of disability in the U.S. by age.
2010 Census: Disability by Age & Type
16
Instances of disability in the U.S. by age & type
People over 15 years old
People over 65 years old
Mental
Mobility
Hearing, Sight & Speech
Regulations and Guidelines
17
18
1990: Americans with Disabilties Act (ADA)
1998: Section 5081999: WCAG 1.0
2008: WCAG 2.02010: 21st Century Communications and
Video Accessibility Act (CCVA)
Regulations & Guidelines
U.S. Regulations
Superheroes of Today
19
20
Overcome adversity
Fight for good
Adhere to principles, guidelines, and laws
Use existing infrastructure in new ways
Use innovative technology
Look great in a cape
Rules for being a Superhero
Superhero Checklist
As defined by w3.org
Four principles of Accessible DesignP.O.U.R.
21
22
Perceivable
Operable
Understandable
Robust
Perceivable
23
e.g. Flipboard
Providing alternative text on images
Captions or transcripts for video and audio
Good color contrast
Avoid marquees or movement
Providing access to navigation and controls through alternative means (e.g. Tab)
Don’t make buttons too tiny
24
Operable
e.g. New York Times Mobile
25
UnderstandableContent is clearly and logically presented
Wording should be simple and concise
e.g. Dropbox
26
Semantic markupsValidate code Responsive design
Robust
e.g. Netflix
Basic Elements of Accessible Design
27
What is Legibility?
Legibility equals
Understanding
28
Legibility
Hierarchy
Color & Contrast
Typography
Iconography
Sound
Touch & Haptics
The Elements of Legibility
29
Can my audience understand it?
How can the platform help my users understand? Does the platform suggest particular usability patterns?
How difficult is it to learn? (Learned behavior vs. established patterns)
Questions to Test Legibility
30
Hierarchy
What is Hierarchy?
OrderSizeAction
31
Stop
Caution
Go
Traffic Light Example
32
On
Off
Off
UI of a Traffic Light
33
Low Battery
Battery Level Example
34
Battery Charged
UI of a Battery Level
35
On On
What is Color?
36
ColorHueChromaticitySaturationValueContrast
Colorblindness affects approximately 8% of males and 0.5% of females.www.colorblindor.com
Colorblindness
37
Greyscale
The Greyscale
38
Munsell Color System
Munsell Color System
39
Comparing Colors: Kinds of Colorblindness
Zero Chroma
40
What is Typography?
41
TypographyFontSizeWeightUniformityContrast
Typography: Spacing
42
Typography: Weight
43
Typography: Geometry
44
Examples of Easy-to-Read Typefaces
45
HelveticaArialCalibri
GenevaGotham
Times
Typography: Possibilities
46
Typeface: Dyslexie
What is Iconography?
47
Iconography: Simplicity is Key
48
Iconography: Making it Accessible
Don’t:<img src=“spyglass.png”>
Do:<img src=“search.png” alt=“Search” />
49
Using Sound
50
SoundUse in conjunction with visual cuesDifferentiating between alertsIntegrating sound as responsive feedback
Using Touch & Haptics
51
Touch & HapticsHaptic feedback to indicatestate of error or completion
Touch to invoke action
52
Visual Simulators: Color Oracle
53
Visual Simulators: Photoshop CS6
54
Visual Simulators: VisionSim
55
Checklists, Validators, and Design Tools
Validate HTML/CSS
iOS Human Interface Guidelines
Android Accessibility Guide
Windows Mobile Design Guide
Design Resources: Tools
Color Contrast Checker
Firefox Accessibility Toolbar
Readability Test Tool
Discover more…
FUN STUFF!
56
Southwest & FlightView
Bloomberg & Flipboard
Target & Gucci
Yelp & Groupon
Starbucks & PayPal
Skype & Google Voice
57
Exercise: Example Interfaces
Grab a coffee, take a break(but hurry back, for goodness sake!)
58
Part 2
59
The Cyborg
60
The Cyborg Foundation
Video
Are there new ways to translate
the senses?
Technology and Innovation
61
Mobile Operating Systems
62
63
Common Built-in FeaturesIncrease text sizeText-to-speechPinch and zoom screenText magnificationText highlightAlternate gesturesCustom ring and vibration patternsColor/brightness contrastHaptic feedback
Screen readersScreen magnifiersAlternative keyboardsApple's Guided AccessBraille output devicesJumbo remote control3rd party accesibility apps
64
Assistive Technologies & Services
65
Video Resources
How the Blind Use iPhones
How the Blind Use Instagram
Raising the Floor’s GPII
Web Accessibility by STAFFNet
Google I/O: Making Android Apps Accessible
66
Alternate Technologies
67
What are the benefits of automation?
Google Car
68
What features are good experiences for everyone?
Siri
69
What’s the value of gesture?
70
How can we use context to create more seamless experiences?
Fleksy
71
TouchFire Keyboard
What can we do with bothdigital and physical haptics?
72
Blind Maps
73
How can we adapt old technologies and systems for new ones?
74
Bionic Eye: Argus II
What We Can Learn
Leverage existing alternate technologies we already see being used in interfaces today.
Introduce gestures into top level interaction as a fun feature for all users and creates a new channel to access features.
Offering feedback whether it is sound, haptic, or visual cues can be simple, novel, and useful.
75
76
MORE FUN STUFF!
Select one of your services
and suggest an improvement for the
element you found most restrictive.
77
Exercise: Suggest Improvement
78
EVEN MORE FUN STUFF!
79
Why did I make this decision?Who is this geared towards?Does it work for all audiences?Is it a nice experience?
Discussion: Questions to Ask
Designers and Engineers Today, Superheroes Tomorrow
80
81
Overcome adversity
Fight for good
Adhere to principles, guidelines, and laws
Use existing infrastructure in new ways
Use innovative technology
Look great in a cape
Rules for being a Superhero
Superhero Checklist
Design For Us
82
Thank you!
83
84
Want to chat more?
@yvonniks@gingerstormy