interfaces, accessibility & superheroes
DESCRIPTION
BAM! POW! Beloved superhero Daredevil squelches his enemies with speed and precision, completely uninhibited by his blindness. Overcoming adversity, discovering superpowers, and saving the world are common themes in comics and graphic novels. Our mission is to bring those themes into the world of accessible design. The World Heath Organization and the World Bank report that nearly 1 out of 7 of the world's population has some form of disability. Creating products and services that don't include alternate interaction models is a failure on a global scale. Designers and engineers are the middlemen between disability and super-ability, and it is our duty to help break interface barriers. This session will explore examples and methods for understanding and practicing accessible design.TRANSCRIPT
SXSW Interactive Workshop, 2013
Yvonne 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
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
Regulations and Guidelines
17
‹#›
Superheroes of Today
19
‹#›
As defined by w3.org
Four principles of Accessible Design
P.O.U.R.
21
22
Perceivable
Operable
Understandable
Robust
‹#›
‹#›
‹#›
‹#›
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
‹#›
‹#›
‹#›
‹#›
‹#›
What is Color?
36
ColorHue
Chromaticity
Saturation
Value
Contrast
Colorblindness affects
approximately 8% of males and
0.5% of females.www.colorblindor.com
Colorblindness
37
‹#›
‹#›
‹#›
What is Typography?
41
TypographyFont
Size
Weight
Uniformity
Contrast
‹#›
‹#›
‹#›
Examples of Easy-to-Read Typefaces
45
Helvetica
Arial
Calibri
Geneva
Gotham
Times
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
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
‹#›
Part 2
59
‹#›
Technology and Innovation
61
‹#›
63
Common Built-in Features
Increase text size
Text-to-speech
Pinch and zoom screen
Text magnification
Text highlight
Alternate gestures
Custom ring and vibration patterns
Color/brightness contrast
Haptic feedback
‹#›
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
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
‹#›
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
‹#›
‹#›
Thank you!
83