SlideShare ist ein Scribd-Unternehmen logo
1 von 67
Accessible Design Thinking | SXSW
March 12, 2016
© 2015 IBM Corporation
Alarm Clock
EMPATHY ICEBREAKER
© 2015 IBM Corporation
© IBM Corporation
Take 1 minute and design an alarm
clock.
EMPATHY ICEBREAKER
© IBM Corporation
Over 100 Years of
Accessibility
Innovation
IBM CORPORATION
© 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
© 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
Confidential :: © IBM Corporation
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.
Confidential :: © IBM Corporation
Confidential :: © IBM Corporation
Frances West
CHIEF ACCESSIBILITY OFFICER
It’s not about them; it’s about all of us.
Confidential :: © IBM Corporation
Confidential :: © IBM Corporation
Phil Gilbert
GM IBM DESIGN
The new IBM Design Language has
accessibility integrated into all aspects of
design.
Design is the
intent behind an
outcome.
Human-centered outcomes require empathy
for the people you serve.
Delivering outcomes at speed and scale
requires us to work together.
IBM Design Thinking
Understand people’s needs.
Form intent.
Deliver outcomes
at speed and scale.
The Loop
Observe Reflect Make
Observing is
about immersing
yourself in your
users’ world.
Meaningful outcomes come from an
understanding of the real problems your
users have.
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.
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.
© 2015 IBM Corporation
Low Vision Goggles
EMPATHY EXERCISE
• 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
© 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
Why is
Accessibility
Important?
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.
© IBM Corporation
What Makes a
Product Usable
and Accessible?
© 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
© IBM Corporation
© IBM Corporation
Disabilities we
design for…
© IBM Corporation
Physical
Epilepsy
Mobility
Fine Motor Movements
Speech Impairment
© IBM Corporation
Hearing
Deaf
Hard of Hearing
© IBM Corporation
Vision
Color Blindness
Visual Impairment
Blind
© IBM Corporation
Cognitive
ADD/ADHD
Autism
Dyslexia/Dyscalculia
Learning
Language
© 2015 IBM Corporation
Empathy Map
ACTIVITY
© 2015 IBM Corporation
What is an
Empathy Map?
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
© 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
© 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
© 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
© 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
© IBM Corporation
Designer roles and
responsibilities
Confidential :: © IBM Corporation
Confidential :: © IBM Corporation
Design Research
Researchers must understand the nuances
of including people with disabilities in the
design thinking exercises.
Confidential :: © IBM Corporation
Design Research
- Finding resources
- Sponsor users
- Interviews
- Testing
Information Architecture
The information architect is responsible for a
structure and taxonomy that gives the best
experience to everyone.
Confidential :: © IBM Corporation
Confidential :: © IBM Corporation
Information Architecture
- Architecture
- Taxonomy
- Regions
- Tab Flow
Confidential :: © IBM Corporation
Visual Design
Visual designers have a huge responsibility
to make interfaces understandable and
enjoyable by people with disabilities.
Confidential :: © IBM Corporation
Visual Design
- Color Contrast Ratio
- Interaction states
- Typography
- Screen Magnifiers
- Images
Confidential :: © IBM Corporation
Confidential :: © IBM Corporation
User Experience
User experience designers likely have the
broadest range of responsibilities when it
comes to inclusive design.
Confidential :: © IBM Corporation
User Experience
- Communicate structure
- Choose appropriate interactions
- Establish the tab order
- Define and validate ARIA regions
- Create a comparable experience
Confidential :: © IBM Corporation
Front End Development
Front end developers must build the
intended interface, usable by everyone.
Front End Development
-Assistive Technologies
-Keyboard Access
-WAI-ARIA
-Meaningful Sequence
Csun 2016 inclusive design workshop

Weitere ähnliche Inhalte

Was ist angesagt?

Presentation Genius Steve Jobs
Presentation Genius Steve JobsPresentation Genius Steve Jobs
Presentation Genius Steve Jobs
xerte
 

Was ist angesagt? (20)

Adapting To Change (Owner Summit 2015)
Adapting To Change (Owner Summit 2015)Adapting To Change (Owner Summit 2015)
Adapting To Change (Owner Summit 2015)
 
How Can Artificial Intelligence Make Business More Human?
How Can Artificial Intelligence Make Business More Human?How Can Artificial Intelligence Make Business More Human?
How Can Artificial Intelligence Make Business More Human?
 
Stop the Mobile Journey Ending on the Desktop
Stop the Mobile Journey Ending on the DesktopStop the Mobile Journey Ending on the Desktop
Stop the Mobile Journey Ending on the Desktop
 
Harvard iLab: Video for Entrepreneurs
Harvard iLab: Video for EntrepreneursHarvard iLab: Video for Entrepreneurs
Harvard iLab: Video for Entrepreneurs
 
Oli Gardner - Data-Driven Design
Oli Gardner - Data-Driven DesignOli Gardner - Data-Driven Design
Oli Gardner - Data-Driven Design
 
IBM Design Thinking - Delievery Value at Scale
IBM Design Thinking - Delievery Value at ScaleIBM Design Thinking - Delievery Value at Scale
IBM Design Thinking - Delievery Value at Scale
 
Digital Dealer 11 Presentation
Digital Dealer 11 PresentationDigital Dealer 11 Presentation
Digital Dealer 11 Presentation
 
Anytime anywhere any device
Anytime anywhere any deviceAnytime anywhere any device
Anytime anywhere any device
 
What airlines and tech companies do differently
What airlines and tech companies do differentlyWhat airlines and tech companies do differently
What airlines and tech companies do differently
 
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over Time
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over TimeUXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over Time
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over Time
 
Presentation Genius Steve Jobs
Presentation Genius Steve JobsPresentation Genius Steve Jobs
Presentation Genius Steve Jobs
 
Designing an Android App from Idea to Market
Designing an Android App from Idea to MarketDesigning an Android App from Idea to Market
Designing an Android App from Idea to Market
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
 
Designing an App: From Idea to Market
Designing an App: From Idea to MarketDesigning an App: From Idea to Market
Designing an App: From Idea to Market
 
Becoming Social by Default
Becoming Social by DefaultBecoming Social by Default
Becoming Social by Default
 
Computers Are Opening Their Eyes - And They're Already Better at Seeing Than ...
Computers Are Opening Their Eyes - And They're Already Better at Seeing Than ...Computers Are Opening Their Eyes - And They're Already Better at Seeing Than ...
Computers Are Opening Their Eyes - And They're Already Better at Seeing Than ...
 
#Digitalmarketing trends of video and mobile marketing: #CreativeEnt 2015
#Digitalmarketing trends of video and mobile marketing: #CreativeEnt 2015#Digitalmarketing trends of video and mobile marketing: #CreativeEnt 2015
#Digitalmarketing trends of video and mobile marketing: #CreativeEnt 2015
 
How to Give Your Woo Store Superpowers
How to Give Your Woo Store SuperpowersHow to Give Your Woo Store Superpowers
How to Give Your Woo Store Superpowers
 
Lyubomir Lyubomirov - Copywriting for e-commerce
Lyubomir Lyubomirov - Copywriting for e-commerceLyubomir Lyubomirov - Copywriting for e-commerce
Lyubomir Lyubomirov - Copywriting for e-commerce
 
Blackberry: Looking for the iPod effect
Blackberry: Looking for the iPod effectBlackberry: Looking for the iPod effect
Blackberry: Looking for the iPod effect
 

Andere mochten auch

Strefa PMI nr 14, wrzesień 2016
Strefa PMI nr 14, wrzesień 2016Strefa PMI nr 14, wrzesień 2016
Strefa PMI nr 14, wrzesień 2016
Strefa PMI
 

Andere mochten auch (20)

Ti quidam
Ti quidamTi quidam
Ti quidam
 
Strefa PMI nr 14, wrzesień 2016
Strefa PMI nr 14, wrzesień 2016Strefa PMI nr 14, wrzesień 2016
Strefa PMI nr 14, wrzesień 2016
 
Ciencias sociales 7° imperio bizantino 5
Ciencias sociales 7° imperio bizantino 5Ciencias sociales 7° imperio bizantino 5
Ciencias sociales 7° imperio bizantino 5
 
Goya
GoyaGoya
Goya
 
Delito Informático
Delito InformáticoDelito Informático
Delito Informático
 
cálculos químicos e soluções
cálculos químicos e soluçõescálculos químicos e soluções
cálculos químicos e soluções
 
Estados agregados de la materia
Estados agregados de la materiaEstados agregados de la materia
Estados agregados de la materia
 
презентация2
презентация2презентация2
презентация2
 
Recorridos Semana Santa
Recorridos Semana SantaRecorridos Semana Santa
Recorridos Semana Santa
 
Homeostasis
HomeostasisHomeostasis
Homeostasis
 
'How Behavioural Psychology Can Explain Brexit' - SXSW 2017 Presentation - Mi...
'How Behavioural Psychology Can Explain Brexit' - SXSW 2017 Presentation - Mi...'How Behavioural Psychology Can Explain Brexit' - SXSW 2017 Presentation - Mi...
'How Behavioural Psychology Can Explain Brexit' - SXSW 2017 Presentation - Mi...
 
Designing Intelligent Coversations: A Chatbot Workshop
Designing Intelligent Coversations: A Chatbot WorkshopDesigning Intelligent Coversations: A Chatbot Workshop
Designing Intelligent Coversations: A Chatbot Workshop
 
PRPL @ SXSW: The Symbiosis of Brains, Marketing, and Design
PRPL @ SXSW: The Symbiosis of Brains, Marketing, and DesignPRPL @ SXSW: The Symbiosis of Brains, Marketing, and Design
PRPL @ SXSW: The Symbiosis of Brains, Marketing, and Design
 
Our Skip Button Love Affair | SXSW 2017
Our Skip Button Love Affair | SXSW 2017Our Skip Button Love Affair | SXSW 2017
Our Skip Button Love Affair | SXSW 2017
 
Nudge Theory
Nudge TheoryNudge Theory
Nudge Theory
 
SXSW 2017: Festival Highlights
SXSW 2017: Festival HighlightsSXSW 2017: Festival Highlights
SXSW 2017: Festival Highlights
 
Best of SXSW 2017 - Speakers, Themes and Links
Best of SXSW 2017 - Speakers, Themes and LinksBest of SXSW 2017 - Speakers, Themes and Links
Best of SXSW 2017 - Speakers, Themes and Links
 
SXSW Bites 2017
SXSW Bites 2017SXSW Bites 2017
SXSW Bites 2017
 
Y&R's SXSW Takeaways 2017
Y&R's SXSW Takeaways 2017 Y&R's SXSW Takeaways 2017
Y&R's SXSW Takeaways 2017
 
Csun2017 design-with-color-031417a-170314194600
Csun2017 design-with-color-031417a-170314194600Csun2017 design-with-color-031417a-170314194600
Csun2017 design-with-color-031417a-170314194600
 

Ähnlich wie Csun 2016 inclusive design workshop

Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan
 
Forrester - X Factor - Scott Rigby v2
Forrester - X Factor - Scott Rigby v2Forrester - X Factor - Scott Rigby v2
Forrester - X Factor - Scott Rigby v2
Scott Rigby
 

Ähnlich wie Csun 2016 inclusive design workshop (20)

Design-At-Scale-AIGA-Orange-County-pdf
Design-At-Scale-AIGA-Orange-County-pdfDesign-At-Scale-AIGA-Orange-County-pdf
Design-At-Scale-AIGA-Orange-County-pdf
 
2016 inclusive design workshop 100116a
2016 inclusive design workshop 100116a2016 inclusive design workshop 100116a
2016 inclusive design workshop 100116a
 
Designing an MVP that works for your users - LeanUX NYC 2014
Designing an MVP that works for your users  - LeanUX NYC 2014Designing an MVP that works for your users  - LeanUX NYC 2014
Designing an MVP that works for your users - LeanUX NYC 2014
 
Social Business @ IBM Denmark October 2011
Social Business @ IBM Denmark October 2011Social Business @ IBM Denmark October 2011
Social Business @ IBM Denmark October 2011
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
Design Thinking & Lean UX for Enterprise_UXNight
Design Thinking & Lean UX for Enterprise_UXNightDesign Thinking & Lean UX for Enterprise_UXNight
Design Thinking & Lean UX for Enterprise_UXNight
 
What is a Hand Sketch Prototype?
What is a Hand Sketch Prototype?What is a Hand Sketch Prototype?
What is a Hand Sketch Prototype?
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
 
Implementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryImplementing Modernization by Trevor Perry
Implementing Modernization by Trevor Perry
 
IBM Design Thinking field guide
IBM Design Thinking field guideIBM Design Thinking field guide
IBM Design Thinking field guide
 
Ibm design thinking field guide v3.4
Ibm design thinking field guide v3.4Ibm design thinking field guide v3.4
Ibm design thinking field guide v3.4
 
Apple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | ArmediaApple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | Armedia
 
UX Masterclass at muru-D
UX Masterclass at muru-DUX Masterclass at muru-D
UX Masterclass at muru-D
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
 
Service Design and Change in Corporate Contexts - Service Experience Camp 2016
Service Design and Change in Corporate Contexts - Service Experience Camp 2016Service Design and Change in Corporate Contexts - Service Experience Camp 2016
Service Design and Change in Corporate Contexts - Service Experience Camp 2016
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategies
 
Forrester - X Factor - Scott Rigby v2
Forrester - X Factor - Scott Rigby v2Forrester - X Factor - Scott Rigby v2
Forrester - X Factor - Scott Rigby v2
 
User Experience. A definition and 6 Lessons
User Experience. A definition and 6 LessonsUser Experience. A definition and 6 Lessons
User Experience. A definition and 6 Lessons
 
IBM Design: Design at Scale
IBM Design: Design at ScaleIBM Design: Design at Scale
IBM Design: Design at Scale
 
Prototyping - 2015 PhillyCHI UX Workshop Series
Prototyping - 2015 PhillyCHI UX Workshop SeriesPrototyping - 2015 PhillyCHI UX Workshop Series
Prototyping - 2015 PhillyCHI UX Workshop Series
 

Kürzlich hochgeladen

Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
210303105569
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 

Kürzlich hochgeladen (20)

Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 

Csun 2016 inclusive design workshop

  • 1. Accessible Design Thinking | SXSW March 12, 2016
  • 2. © 2015 IBM Corporation Alarm Clock EMPATHY ICEBREAKER
  • 3. © 2015 IBM Corporation
  • 4. © IBM Corporation Take 1 minute and design an alarm clock. EMPATHY ICEBREAKER
  • 5. © IBM Corporation Over 100 Years of Accessibility Innovation IBM CORPORATION
  • 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
  • 8. Confidential :: © 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.
  • 10. Confidential :: © IBM Corporation
  • 11. Confidential :: © IBM Corporation Frances West CHIEF ACCESSIBILITY OFFICER It’s not about them; it’s about all of us.
  • 12. Confidential :: © IBM Corporation
  • 13. Confidential :: © IBM Corporation Phil Gilbert GM IBM DESIGN The new IBM Design Language has accessibility integrated into all aspects of design.
  • 14.
  • 15. Design is the intent behind an outcome.
  • 16. Human-centered outcomes require empathy for the people you serve.
  • 17. Delivering outcomes at speed and scale requires us to work together.
  • 24. Observing is about immersing yourself in your users’ world. Meaningful outcomes come from an understanding of the real problems your users have.
  • 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
  • 30.
  • 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.
  • 33. © IBM Corporation What Makes a Product Usable and Accessible?
  • 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
  • 37. © IBM Corporation Physical Epilepsy Mobility Fine Motor Movements Speech Impairment
  • 39. © IBM Corporation Vision Color Blindness Visual Impairment Blind
  • 41. © 2015 IBM Corporation Empathy Map ACTIVITY
  • 42. © 2015 IBM Corporation What is an Empathy Map?
  • 43.
  • 44.
  • 45.
  • 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
  • 51. © IBM Corporation Designer roles and responsibilities
  • 52. Confidential :: © IBM Corporation
  • 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
  • 55.
  • 56. Information Architecture The information architect is responsible for a structure and taxonomy that gives the best experience to everyone. Confidential :: © IBM Corporation
  • 57. Confidential :: © IBM Corporation Information Architecture - Architecture - Taxonomy - Regions - Tab Flow
  • 58.
  • 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
  • 61. Confidential :: © IBM Corporation
  • 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
  • 64. Confidential :: © IBM Corporation
  • 65. Front End Development Front end developers must build the intended interface, usable by everyone.
  • 66. Front End Development -Assistive Technologies -Keyboard Access -WAI-ARIA -Meaningful Sequence