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.
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.
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
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
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
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.
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?
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 …>
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
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
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?
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