Inclusive Design: Tools, technologies + strategies
1 like772 views
This document discusses inclusive design and provides strategies and techniques for practicing inclusive design. It defines inclusive design as design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference. It notes that inclusive design is relevant to basically everything we do, from conversations to product making. The document discusses tools, techniques and strategies for inclusive design including recognizing diversity and uniqueness, using an inclusive process, and having a broader beneficial impact. It also discusses how inclusive design differs from and builds upon universal design.
Inclusive Design: Tools, technologies + strategies
- 1. Inclusive Design Tools - Techniques - Strategies Jess Mitchell Sr. Mgr. Research + Design @jesshmitchell jmitchell@ocadu.ca Warning: this might make you see differently. That’s the goal anyway — to help you see things you can’t easily unsee! So you’ve heard the word ‘inclusive’ and you’ve heard about ‘design’ but together what do they do or mean?
- 2. Complex problems need better solutions • that have a longer shelf life • that work better for more people • that reach people who are falling through the gaps now I’m going to suggest that with design thinking and inclusive design thinking in particular, we’re going to be better equipped to solve complex problems with better solutions - that have a longer shelf life - that work better for more people - that address the gaps
- 3. Define Inclusive Design Inclusive Design is design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference. so, this is called ‘design’ — i want to talk for a minute about what we design. Any decisions we make is a design decision — we choose this and not anything else. So, inclusive design is relevant in basically everything we do. - conversations - admissions decisions - policy-making - product-making - assessment - pedagogy Inclusive Design is in many ways a perspective shift.
- 4. Re producible S teps There is a process we have developed for inclusive design — it’s based on milestones, not a step by step linear process, but iterative — building on small successes. So we challenge the notion of completion or knowing what others want. This leaves us in a fundamentally curious space. We remain curious evermore.
- 5. Noth ing is Neu tral
- 6. Pe rspective Shift And I think this is the unique part of inclusive design — there are similarities with universal design, but inclusive design gives us this perspective shift and challenges us to solve hard problems. And it challenges us to solve them not just for persons with disabilities but for everyone. Think of the curb cut.
- 7. 3 differences with Universal Design 1. the context 2. the user 3. the method You might ask, how is this different form universal design? Well, it has a lot in common with UD, but 3 key differences… 1. Context: UD has its background in architectural and industrial design which is much more constrained than the digital 2. Users: UD solutions were supposed to work for everyone but the users that were imagined were from fairly constrained understandings of disabilities — e.g. I’m deaf but I don’t use sign language, or I’m blind but don’t read braille, or I’m partially blind, not profoundly and I need high contrast. 3. Method: different entrances are ok in achieving universal design — and this sometimes gives us strange solutions like switchback ramps that are retrofitted onto a building or elevators that travel up stairs — inclusive design asks, can we rethink the entrance for everyone and thereby make it better for everyone?
- 8. 3 pra ctices of I ncl usi ve Design 1. recognize diversity and uniqueness 2. use an inclusive process and tools 3. have a broader beneficial impact 3 tenants of ID 1. recognize diversity and uniqueness — how many of you consider yourselves average? so why do we design for the average? 2. use an inclusive process and tools — get experts to make the best solutions — talk to moms to find out what strollers work best for them: talk to moms who are pushing strollers through the snow banks in Toronto in January, or strolling around the broken bricks in Old San Juan, Puerto Rico in the heat and humidity of June. Talk to moms who are 6’5” and talk to moms who don’t have the strength to lift 20 lbs, let alone a 20 lb stroller and a 20 pound kid. 3. have a broader beneficial impact — solve for everyone of course if you set out to solve for everyone and you’re designing a stroller it’s going to be quite difficult. You simply can’t make everyone happy.
- 9. What is accessibility? In Universal Design there’s the curb cut — does everyone know what a curb cut it? Curb Cut: http://www.flickr.com/photos/50393252@N02/4822063888/
- 10. Disability How many of you when you think about disability think about someone’s medical condition? They have an affliction, they can’t do something — they lack an ability. Stethoscope: http://cbsnews1.cbsistatic.com/hub/i/r/2014/01/24/d6bd0d38-cb4a-4411-bd1d-7a5dcc4e319d/thumbnail/620x350/ fa75501812b1d1d699dd40da9648001a/stethoscope.jpg
- 11. And maybe you know about the 4 main categories of disabilities: mobility impaired cognitively impaired hearing impaired seeing impaired But at the IDRC we completely redefine disability. It isn’t a medical condition to us…>>> Categories of Disability: https://www.worknetncc.com/Uploads/Disability_symbols_16.png
- 12. Mismatch Disability is a mismatch between the individual and their goals — the tools they have available to them in the environment where they are — their context Disability is not a personal trait and because it’s so context dependent, it is a relative condition. >>>>> Square peg, round hole: http://wp.production.patheos.com/blogs/adrianwarnock/files/2015/08/3546059144_1b33dfdc0e_o.jpg
- 13. Tools, Techn i q ues, a nd S trategies The bad news. If you’re looking for one tool, there isn’t one. And a tool is unlikely to ever solve everything for you — AI, Machine Learning… The good news. There are tools that you can use and we’ll go through some of those. - colour pickers for contrast - webAIM for general a11y help Techniques: they are the sorts of things that might be counter to the ways you’ve been doing things for a long time, so remain open to shifting your practices Strategies: this is an opportunity, and a call, to co-design — be curious evermore
- 14. Tools
- 15. WCAG 2.0 Structure • WCAG 2.0 has four governing principles. • There are twelve guidelines divided across the four principles. • Each guideline contains success criteria. • Each success criteria has specific, testable, technology-specific techniques. Image taken from: Michael Gaigg: Uber UI/UX http://www.michaelgaigg.com/blog/tag/techniques/ The principles are the starting place, lead to unintended consequences of a testable checklist. BUT if you dig into the techniques, WCAG explicitly says ‘this is not the only way’. The techniques are examples. There is room for innovation and thoughtfulness. P: Seeing, hearing, or touch until we invent Smell-o-vision O: Are you able to control and navigate the site U: can you make sense of the site, many concepts relate to usability R: the least understandable of the principles, has to do with making sure code is to spec. This makes sure that the content is future proof. Slide by Lisa Liskovoi, IDRC
- 16. Text alternatives for non-text content Common failures: missing, misused or incorrect alternative text. Example of image link Three ways to screw up alternative text for image links: - Not include any alternative text at all: will read image name (women_VD_mobile._V531155915_.jpg ) - Put in empty alt text. In this case the screen reader will go ah geeeez, obviously a link is not decorative, and read out the name of the image in an attempt to provide the user with some context (in this case that context will be women_VD_mobile._V531155915_.jpg - Have alt text that describes the image instead of the destination (function before form people, always think of the content first). The user will follow the link expecting to get diamond earrings, and instead find underwear Let’s see what they actually did… https://www.amazon.ca/b/ref=br_pdt_mgUpt?_encoding=UTF8&node=11117371011&pf_rd_m=A3DWYIK6Y9EEQB&pf_rd_s=&pf_rd_r=ZC2AEHK48MK2C2J8RV4Q&pf_rd_t=36701&pf_rd_p=5f5d3f79-4c45-4750-80e3-10251d6fb130&pf_rd_i=desktop&nocache=1501159292502 • Alternative text for icons • Empty or incorrect alternative text for image links • Use of title attribute Slide by Lisa Liskovoi, IDRC
- 17. Benefits of text alternatives • When images can’t load due to low bandwidth, user will see alternative text descriptions. • Improved Search Engine Optimization (SEO) • Alternative text descriptions can provide additional content in some cases. The other thing is that having proper alt text has other benefits outside of the AT user use case. Slide by Lisa Liskovoi, IDRC
- 18. Benefits of captions • Listen to programs in silence • Listen to programs in noisy environments like sports bars • Help children develop reading skills • Learn to read/speak a second language • Understand foreign programming • Makes content searchable A study by the Office of Communications, the regulatory body for UK television broadcasting conducted a study that showed that 80% of closed captioning users were not deaf or hard of hearing. Slide by Lisa Liskovoi, IDRC
- 19. Alternatives for audio-visual content Common failures: Inaccurate automatic captions This is a great example of a case where if WCAG is used as a checklist, you still end up excluding users. The WCAG captions requirement doesn’t state anything about quality assurance. If you have captions – any captions – you technically get a checkmark and pass the criterion. But would you consider this a pass? Hilarity aside, you’re not giving users any useful information about what’s happening. You could have a caption track that’s mostly gibberish and still “pass”. You have to think beyond meeting the checkpoint and about what the guideline is ACTUALLY trying to accomplish. Slide by Lisa Liskovoi, IDRC
- 20. https://opentextbc.ca/accessibilitytoolkit/ Amanda Coolidge, Sue Doner, Tara Robertson, and Josie Gray
- 21. https://opentextbc.ca/accessibilitytoolkit/ Amanda Coolidge, Sue Doner, Tara Robertson, and Josie Gray
- 22. Easy to see content Slide by Lisa Liskovoi, IDRC
- 23. Easy to see content Common failure: link text is differentiated from surrounding text using only colour. One way to make content easier to see is to separate foreground from background. Let’s say I’m looking at this on my phone and the screen is broken, so it’s really dim and I can’t see the colour. Slide by Lisa Liskovoi, IDRC
- 24. Easy to see content Slide by Lisa Liskovoi, IDRC
- 25. Techn iques
- 27. 1. all learners are visual 2. all learners use a mouse 3. all learners require the same content type Know Your Assumptions https://globaldigitalcitizen.org/wp-content/uploads/2016/12/ultimate-critical-thinking-worksheet.jpg
- 28. Separate content from background Common failure: Images of text such as banners, advertisements, etc. As a screen reader user, I can’t see this tweet at all. It looks like by default twitter will put in a blank attribute, which will hide this image. AT users won’t even get notified that an image exists. As far as non-screen reader users, there is not way for me to modify this content. I can’t copy and past it somewhere else, I can’t change the colour even if I have control over the CSS, the content won’t resize dynamically either.
- 29. Keyboard accessibility Common failure: Content is not accessible with a keyboard
- 30. • Pace, Path, Content, Delivery Method • text, visual, sonification, video… • individual, group, didactic, participatory • Motivation – external, internal, positive, negative • Social support – peer, instructor, other • Degree of structure What if Kandinsky took longer? What if Miro wanted to do it alone, rather than in a group? What if Picasso wanted to do it somewhere else all together — from another location? Pace, Path, Content, Delivery Method text, visual, sonification, video… individual, group, didactic, participatory Motivation – external, internal, positive, negative Social support – peer, instructor, other Degree of structure These are just some of the diverse needs or preferences for learning. How do these fit into your rubric? Does your syllabus flex to these? Advantage some? Disadvantage others? Is the preferred mode even available?
- 31. S trategies
- 32. Wh at is Eq u ivalent? At the IDRC we spend a lot of time thinking deeply and exploring ‘equivalent experiences.’ Disability legislation often requires an ‘equivalent experience’ for someone with a disability who cannot consume the delivered mode. The interpretation of what is equivalent is where the interesting work begins. There are nice parallels with remote work and the differences between in-person and remote meetings: in particular thinking through the qualities and the experiences of in-person interactions and how you might make ‘equivalents’ for remote. One way we do this in the digital world is to make it multi-modal - text - audio - video - image avoid hard to read fonts or font sizes create an appropriate level of contrast simulations and visualization provide interesting challenges make targets easy to hit can you use it with the keyboard? be wary of time-based operations
- 33. CREATE A PIE CHART Give your chart a name: Value Type in your values: add value Value Value Value Description Description Description Description Name Select a color scheme: No Color Select a texture: No Texture Adjust the outline thickness: 0 51 % info. value value Select a label to present info on the chart: No Label % value Select a sound category: Vocal Sounds No Sounds Sounds from Nature FlutePiano Drums GuitarHarp Instrumental Sounds Silence No Clap SnapBell Select a Chart Unit Reference: Slow No Unit Reference FastAverage Custom Theme In our work in Software and Hardware we employed a process that helped us think about making interfaces accessible — accessible to people with disabilities. And when we stumbled upon the utility of this process in basically everything we do we found it changed the way we thought about the problems changed the way we solved the problems we were able to solve the problems better and for more users You might say to us now Inclusive Design is just good design If you’re doing good product design, then you’re doing Inclusive Design — but what we’ve found is that people aren’t doing it. And yet what we do at the IDRC is something any of us can and should do. Interfaces from IDRC work: http://fluidproject.org
- 36. Pra ctice We’ve found that inclusive design can be applied to everything we do and the way we think about the problems we encounter. We want to think more critically in our work and not just be satisfied with the simple, quick solution. It actually costs more to do the thinking after you’ve built something already. Spending the time up-front incorporating diversity and wondering about more creative solutions is much more affordable. One of the most important parts of practicing inclusive design is tapping into the …>
- 37. Disability is Mismatch Mismatch is Solvable Design can solve Mismatch All experience Mismatch
- 38. Change of Approach •CONTEXT CONTEXT CONTEXT •Solve for mismatch - edge case •Beware one-size-fits all •Go softly into “prototyping” CONTEXT CONTEXT CONTEXT Solve for mismatch - edge case Beware one-size-fits all Go softly into prototyping
- 39. Change of Approach •What is completion? •What do you lose when you simplify? •Solution-ing vs. re-thinking / critical thinking CONTEXT CONTEXT CONTEXT Solve for mismatch - edge case Beware one-size-fits all Go softly into prototyping
- 40. Desig n for the Ed ges
- 41. CONTEXT CONTEXT CONTEXT Solve for mismatch - edge case Beware one-size-fits all Go softly into prototyping
- 42. ONE-SIZE-FITS-ONE • Flexible • Accessible • Meet people where they are FLEXIBLE (levels of complexity) – ecosystem of tools? One adaptable tool? Give user ability to choose from multiple ways to interact. E.g. keyboard vs mouse interaction, iphone provides multiple ways to take a photo ACCESSIBLE – avoiding assumptions about comfort with tech, ability, environment MEET USERS WHERE THEY ARE ((comfort level, environment, context) CONTEXT CONTEXT CONTEXT Solve for mismatch - edge case Beware one-size-fits all Go softly into prototyping
- 43. The magic at the margins benefits the majority resilient supports the spectrum innovation hangs out here instead of 80/20, solve for the hard ones, the 20% and your solution will cover the 80% Change of Outcomes Better solutions Longer shelf life Better usability Innovation
- 44. Be Curious
- 45. Resist the urge to generalize inclusive design If the goal is to design for diversity, then we need a way to understand and e x p l o re d i v e r s i t y a n d inclusion. So, we’ve established that we are all unique and we are motivated by things ‘beneath the surface’ that are evolving and changing and mutating and that mean we are growing and changing everyday. So, from the design perspective, how on earth can we understand what we think and feel and what we’ll do? How can we design for us? built upon common design practices with additional principles, practices, and tools used for the benefit of all end-users. it’s better design resist the urge to generalize
- 46. • Engineers are not the only ones building— we all adapt and grow design. • user-continued design Resist the urge to design for Assumption: We can engineer a fix—technology can solve it all and we are smart people who know what is best instead, design *with* Remember: we’re all designers A good portion of Pinterest is dedicated to the thoughtful design of everyday things in innovative and surprising ways. We learn from how someone else imagined using something and we riff off of it. children’s rain boots nailed to a fence and used as flower pots a basic lamp that someone builds a lego structure around with holes to let the light through and shine colours
- 47. Resist the urge to predict + speculate • the roadmap can be predicted + controlled • We can know the problem + create a solution • can be solved in a standard, linear manner • we can control + predict requirements • there is an end point + we know what success is we can’t actually do either very well • require ongoing transparent communication + recalibration • complex projects cannot be predicted • emergent, complex systems cannot be *known* — they evolve • “Success” continues to evolve and change Assumptions Reality hammer with a wood screw in front of it
- 48. Aim for Resiliency and Flexibility: not ONE SIZE FITS ALL Policy the capacity to recover quickly from difficulties; toughness. the capacity to recover quickly from difficulties; toughness. the ability of a substance or object to spring back into shape; elasticity this comes from clarity, strong leadership, and confidence
- 49. Aim for Curiosity: not Solving Ask Why avoid the token solution to the problem… wonder, ask why, ask more, ask questions — how can you get to know me?
- 50. Inclusive design is about welcoming different perspectives, experiences, ideas, people and questioning assumption that interfere with our decision-making. It’s squarely in the space of social justice, biases, design justice, product design, policy, architecture, conference planning, etc.
- 51. Who isn’t here? Is the table welcoming to all? Have they been at the table before? Do they know the culture of the table? Is the environment the table is in safe, welcoming, open? How is listening and capturing going to happen at the table? Do those at the table have real ways to have an impact? Are they empowered to act on what is discussed?
- 52. Places to Inject Open • Syllabus • Sharing • Pedagogy • Books • Assessment
- 53. Activity • How can you exclude students? • How can you mandate that they learn in one way only? We aren’t having the conversations we need to have to make the changes we know we need to make Let’s start it now… stop talking — don’t discuss the issues - diversity fatigue - who is standing up? who is leading the conversations? buy software that isn’t accessibility treat everyone the same way get rid of work from home policy no flexibility of calendar remove D&I from core values no longer publish diversity blueprint or reports leadership pipelines won’t change fire everyone in this room