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.
- 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.
- 20. Form intent.
- 21. Deliver outcomes at speed and scale.
- 22. The Loop
- 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
- 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
- 36. © IBM Corporation Disabilities we design for…
- 37. © IBM Corporation Physical Epilepsy Mobility Fine Motor Movements Speech Impairment
- 38. © IBM Corporation Hearing Deaf Hard of Hearing
- 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?
- 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
- 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
- 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