Weitere ähnliche Inhalte Ähnlich wie Csun 2016 inclusive design workshop (20) Kürzlich hochgeladen (20) Csun 2016 inclusive design workshop2. © 2015 IBM Corporation
Alarm Clock
EMPATHY ICEBREAKER
6. © IBM Corporation
1914
Hired first
employee with
a disability
1900s 1950-60s
1950s
Remote
Control
Keyboard
1960s
Shoebox
1970s
1970s
First Braille
Printer
1980s
1980
Talking
Typewriter
1981
Talking
Display
Terminal
1987
Phone
Communicator
1988
Screen
Reader / DOS
1990
Voice Type
Dictation
1991
THINKable
SpeechViewer
1992
Screen Reader/2
1994
SpeechViewer II
1996
SpeechViewer III
1997
Home Page Reader
1998
ViaVoice
1999
Corporate
mandate
WCAG 1.0
1990s
IBM CORPORATION
7. © IBM Corporation
2000s
2003
Easy Web
Browsing
Web Accessibility
Technology
2004
CaptionMeNow
aDesigner
2008
Spoken Web
WCAG 2.0
AbilityLab Sametime
Language Translator &
Conference Transcriber
Virtual Worlds Accessible
User Interface
2009
Accessible Workplace
Connection
iAccessible2 and
WAI-ARIA
AbilityLab Captioner &
Editor
AbilityLab
Accessibility Mentor
2010
Connections 3.0
AbilityLab Voice Chat
Transcriber
AbilityLab Compliance
Checker
2014
WAI-ARIA
IBM CORPORATION
9. Confidential :: © IBM Corporation
Ginny Rometty
CEO
Today, when I think about diversity, I actually
think about the word ‘inclusion.’ And I think this
is a great time of inclusion.
11. Confidential :: © IBM Corporation
Frances West
CHIEF ACCESSIBILITY OFFICER
It’s not about them; it’s about all of us.
13. Confidential :: © IBM Corporation
Phil Gilbert
GM IBM DESIGN
The new IBM Design Language has
accessibility integrated into all aspects of
design.
25. Reflecting is about
converging on a
point of view.
Good decisions begin with an understanding of
your situation, your purpose, and how you can
make a difference for your users.
26. Making is about
giving form to ideas.
You can’t know everything but you do know
some things, so jump right in. The earlier you
make, the faster you’ll learn.
27. © 2015 IBM Corporation
Low Vision Goggles
EMPATHY EXERCISE
28. • Break into groups of 4 or 5
• Take a pair of the low-vision goggles
• Take out your phone
• Assistance by anyone in your group is
fine & encouraged.
EMPATHY EXERCISE
29. © 2015 IBM Corporation
Steps
While wearing a pair of the goggles, please take out your phone and do the following:
1. Take a photograph of something in the room.
2. Share that photograph on social media. Feel free to tag us on Twitter!
#a11ydesign | @bo.campbell | @charupandhi | @Moekraft | @ibmaccess
3. Email the photograph with a brief description to: bcampbell@us.ibm.com
4. Please pass the goggles to the next person.
EMPATHY MAP
32. 1. Diversity
a diverse workforce works harder and is more creative.
2. Economic
with a growing market of seniors, hundreds of billions of dollars are
untapped.
3. Humanitarian
we all want to work, be productive and earn our way.
34. © IBM Corporation
A product is usable if the
people for whom it is
intended can use it
effectively, efficiently,
and with satisfaction.
Usability
ISO 9241-11
The usability of a
product, service,
environment or facility
by people with the
widest range of
capabilities.
Accessibility
ISO 9241-11
Accessible
Design
Thinking
42. © 2015 IBM Corporation
What is an
Empathy Map?
46. What do they say or need to
say to others? How do they
likely express themselves?
What do they do to
get their job done?
How does this person
feel about their job?
What do they think about
the situation?
What is their worldview?
Quotes Expectations
& Reactions
Actions Values
47. © 2015 IBM Corporation
Please break into groups of 4 or 5
people. We will give you an
“empathy map” template for you to
place your sticky notes on.
EMPATHY MAP
48. © 2015 IBM Corporation
Ground Rules
1. Write before you talk.
Write or sketch lots of your ideas on sticky notes before talking about them.
During discussions, capture the main points on sticky notes and post to the wall.
2. There are no bad ideas.
Start big—diverge to get everyone’s ideas out there. Remix to discuss, cluster, and seek patterns. Then
converge to determine the strongest ideas.
3. Stay focused on your users.
Tell stories about users to keep them at the center of your attention.
4. Everyone participates.
Everyone has a Sharpie, everyone has a pad of sticky notes.
5. Stay engaged.
Avoid side conversations. Use a parking lot to capture issues that are off-topic.
EMPATHY MAP
49. © 2015 IBM Corporation
Think back to the goggle exercise
and remember what you thought,
said, felt, and did. Put these down
on your empathy maps.
EMPATHY MAP
50. © 2015 IBM Corporation
Ok, now let’s go!
1. One of the members of your group should draw a picture of the user that you will build an
empathy map around.
2. Pick a disability from the following: blind, low vision, deaf, physical disability (unable to use a
mouse).
3. In the context of our scenario for this user, please start considering things this person says,
does, thinks, and feels. Write each of your thoughts on a sticky and place it in the appropriate
quadrant.
* Duplicates on the map are fine. Don’t let what the others write affect your thoughts, just spill
them out as they come to you.
EMPATHY MAP
53. Confidential :: © IBM Corporation
Design Research
Researchers must understand the nuances
of including people with disabilities in the
design thinking exercises.
54. Confidential :: © IBM Corporation
Design Research
- Finding resources
- Sponsor users
- Interviews
- Testing
57. Confidential :: © IBM Corporation
Information Architecture
- Architecture
- Taxonomy
- Regions
- Tab Flow
59. Confidential :: © IBM Corporation
Visual Design
Visual designers have a huge responsibility
to make interfaces understandable and
enjoyable by people with disabilities.
60. Confidential :: © IBM Corporation
Visual Design
- Color Contrast Ratio
- Interaction states
- Typography
- Screen Magnifiers
- Images
62. Confidential :: © IBM Corporation
User Experience
User experience designers likely have the
broadest range of responsibilities when it
comes to inclusive design.
63. Confidential :: © IBM Corporation
User Experience
- Communicate structure
- Choose appropriate interactions
- Establish the tab order
- Define and validate ARIA regions
- Create a comparable experience