Inclusive Design

COMP3280: HUMAN COMPUTER INTERAC TION

COMP5820: HCI AND THE USER EXPERIENCE
This Photo by Unknown Author is licensed under CC BY Sergey Ovchinnik & Kemi Ademoye
Acknowledgements: Many thanks to Sally Fincher, who developed most of the original
content for these lectures, and Palani Ramaswamy.

2022/23 - Week 10, Lecture 2

Attendance and Chat
•Password: ******
•Please keep the chat free of clutter
◦ Leave it free for questions and/or responses to questions asked
◦ The clutter is distracting as I monitor it for genuine questions
◦ I will stop the lecture if it is being used inappropriately

2
Today’s Lecture
• Why Inclusive Design?
• Accessibility, Usability, and Inclusive Design
• Accessibility Issues to Consider
• Inclusive Design Process
• Module Summary

3
The Problem: Who Do We Design For?
• If we don’t practice:
◦ Inclusive design
◦ Empathy (remember the first-stage of human-centred design (HCD))

• We end up designing for users of a specific:

◦ Gender, age, language, culture
◦ Education, including Tech Ability/literacy
◦ Abilities – physical, cognitive
◦ Economic situation, access to time, social context
◦ Etc.

• This “user” often reflects our own personal biases.

4
Who We Design For, Who Gets Excluded
• If we use our own abilities and biases as a starting point …
• We end up designing for:
People of a specific
• Gender
• Age
• Language ability
• Tech literacy
• Physical Ability

Those with access to

• Money
• Time
• A social network

5
 Any Left-Handed
People?
I think it is safe to conclude
that these desks were
designed by a right-handed
person.

This Photo by Unknown Author is licensed under CC BY-ND

6
The Case for Inclusive Design
• “The interactions we design with technology depend heavily on what we can
see, hear, say, and touch.
• Assuming all those senses and abilities are fully enabled all the time creates
the potential to ignore much of the range of humanity [emphasis added]”
- Microsoft Inclusive Design Toolkit

7
Disabilities
Affect All of Us!
Microsoft Inclusive Design: Inclusive 100 Toolkit

8
Accessibility, Usability, and Inclusivity
• Closely related concepts to create
designs that work for all. Inclusive Design (Design for All)

• Human-centred design plays a key

role.

Accessibility Usability

Human-Centred Design

9
Accessibility
• Accessibility addresses discriminatory aspects related to equivalent user
experience for people with disabilities [w3.org].

10
Usability
• Concerned with whether designs are effective, efficient, and satisfying to use.
• Measured against 5 criteria: memorability, efficiency, errors, learnability, and
satisfaction.
• Although, usability does not tend to focus specifically on the user experience of
users with disabilities, there are overlaps.

11
Accessibility and Usability
• Both accessibility and usability are vital parts of user experience (UX) design –
◦ products and designs that provide meaningful experiences to users.

• Accessibility requirements and features improve usability for everyone.

◦ Practical examples: Closed captions, text to speech, dark mode, curb cuts, Oxo Good Grips.

12
Accessible Designs Benefit Everyone
• Users with situational limitations:
◦ Video captions that help users with hearing difficulties
◦ Also helps users in noisy and quiet (have to remain mute) environments
◦ Legible, high contrast text that helps users with vision difficulties
◦ Benefit users outside in bright sunlight or in a dark place
◦ Alternative text descriptions
◦ Benefits users with slow Internet connection or limited/expensive bandwidth

• Users with temporary disabilities:

◦ Speech-to-text
◦ E.g., users with a broken arm or lost glasses

• And more…

13
Design for Diversity (Inclusive Design)
• Designs are only useful if they are accessible to the user: any user, anywhere,
anytime!
• Inclusion is about Diversity!
• Ensuring designs work for “everyone” to the greatest extent possible.
• Aka, Universal Design, Design for All, Design for Diversity, Inclusive Design.

14
Inclusive Designs
• Not just for users with disabilities.
• It addresses a broad range of issues, including:
◦ Quality of hardware, software, and ◦ Culture
Internet connectivity. ◦ Age, both younger and older users
◦ Computer literacy and skills ◦ Language
◦ Education ◦ Economic situation
◦ Geographic location

15
Accessibility Issues
Some Common Barriers
• Visual Impairments (blindness, long-sightedness, colour blindness, etc.)
• Motor/mobility (use of hands and arms, other muscular or skeletal conditions)
• Auditory (hearing loss in varying degrees of severity)
• Seizures (individuals affected by light, motion, flickering, etc.)
• Learning/cognitive
• Ability barriers – incidental or situational

16
Visual Impairments
Design Considerations
• Text-to-speech, Text-to-Braille (screen readers).
• Audio Descriptions
• Dictation: let’s you talk instead of type
• Hierarchical structure – lecture on visual communication
◦ TLDR: Helps users determine what’s important to read/complete task
• Intelligent Assistants (e.g., Siri, Cortana): allows users to give voice commands to the
device
• Zoom, font adjustment, invert colours, colour contrast adjustment: remember that, in
addition to blindness, there are other types of visual impairments.
• Recall the lecture on colour, vision, and perception earlier this term.

17
Visual Impairments: Screen Readers
• Is content automatically compatible with screen readers?
◦ Actually, no!

• Screen readers are powerful, but they can only function as well as the content
they are interpreting allows.
◦ Content designers have a responsibility to enable this.

Read more: https://www.boia.org/blog/5-myths-about-screen-readers-that-can-hurt-accessibility

18
Visual Impairments: Experiment to Try (1)
• Most devices have an accessibility feature.
◦ Try turning on the “Voice Over” or “Talk Back” feature on your smartphone.

• Have you ever tried disabling images on a website and trying to use the
website?
◦ Chrome users go to: chrome://settings/content/images
◦ Edge users, go to: edge://settings/content/images
◦ Aha! You are left with just text, how easy is it to read?
◦ Notice, anything missing?

• Try using the developer tools in your browser to simulate vision deficiencies
◦ Visualise how interface designs are viewed by users with specific vision deficiencies.

19
Visual Impairments: Experiment to Try (2)
• How would you design your content to be inclusive for those users that use
screen readers that reads aloud content for visually impaired users?
• You can test a screen reader on an interface, e.g., NVDA.
• People with no visual impairments rarely, if at all, read every text from top left
to bottom right of the screen.
◦ We read in a non-linear fashion!

• Remember that lecture on visual communication and visual hierarchies?

◦ Screen readers use page structure and hierarchies to help their users navigate the content.

20
Hearing Impairments
Design Considerations
• Use plain English, avoid complicated words
• Subtitles or transcripts for videos
• Signifiers: vibrating and visual alerts and feedback
• Hierarchical structure – linear, logical layout
◦ TLDR: helps users determine what’s important to read/complete task

• Use visuals instead of text etc.

• Communication support, e.g., text messages, video calls in place of voice calls.

21
Physical and Motor Impairments
• Have you ever tried using your computer with just your keyboard (no mouse)?
◦ I encourage you to try this as an experiment.
◦ Make interfaces keyboard accessible - assistive technologies mimic keyboard interactions.

• Time limits to respond to or complete tasks, e.g.:

◦ Time to fill in a security code can be insufficient for users with motor-function disabilities.

• Fitts’ Law: large controls, with enough spacing

• For physical interfaces, or even digital interfaces on display at a show/event,
how accessible is the interface to someone in a wheelchair for example?

22
Physical and Motor Impairments Contd.
• Accelerators – to reduce the effort to click or type
• Alternative to keyboard or mouse
• Eye tracking (eye gaze) technologies
• Voice recognition – voice command/ speech input
• Other hands-free interaction.

23
Age-Related Impairments
Many people develop age-related impairments as they get older.
• Vision – contrast sensitivity, near-focus, colour perception.
• Physical ability – reduced dexterity and fine-motor control (e.g., using a mouse
or clicking small targets becomes more difficult)
• Hearing – loss of some hearing
• Cognitive ability – reduced short-term memory, difficulty concentrating and
becoming easily distracted making it difficult to complete some tasks.
◦ Processing speed declines but recall stays within Miller’s 7 plus/minus 2 chunks.
◦ Takes longer to learn especially complex material – may explain technophobia.

24
More About Older Users
• Older users are often very interested in new technologies
◦ Urban myth – older people are scared of new technologies.

• Furthermore, older users can often benefit from new technologies even more
than mainstream users.
◦ May allow them to undertake tasks simply not possible otherwise.
◦ As mobility deteriorates, access to online services (e.g. shopping) and communication tools
(for talking to loved ones) is vital.

25
How Not to Design for Older Users?
• “Big button” phones are special purpose mobile devices
◦ Emphasise ergonomic shape and grip, big button, big display, and large fonts.
◦ Dedicated emergency features.

• Some older users find it patronising!

◦ Are we saying: “OK you can’t use a normal phone, so we need to build a dumbed-down
version for you”?

• Some inclusive designers reject this line of solution because we are not
including the users at all.
◦ Remember inclusive design is about “empowering people”, not “dumbing down design due
to people’s disabilities”.

26
Mobile Device Users
• Mobile device users also suffer from “situational” impairments, e.g.:
◦ Typing a message while walking – motor impairment
◦ Listening/reading while in a busy place – hearing impairment
◦ Reading outside in the sun – visual impairment
◦ Typing an email with numpad, driving and adjusting a control on the dashboard, etc. –
cognitive impairment
• Accessibility features benefit mobile users.
• E.g., predictive text was originally designed for people who could not use a full
keyboard due to motor-function disabilities.
◦ Now widely used by all users, initially due to the limitations imposed by a numeric keypad,
and recently the smaller keys on mobile devices.

27
Language
What do we need to consider to make designs more
inclusive with respect to language?

28
Inclusive Design Process
• Recognise exclusion
◦ Understand diversity and uniqueness: Identify ability-based exclusions. Identify situational
challenges.
◦ Use to generate new ideas and create inclusive solutions.
• Learn from diversity
◦ Inclusive design puts people in the centre from the start of the process.
◦ Avoid personal biases and involve people from different communities in the design process
from the start – diverse participation in the design process (including testing).
• Solve for one, extend to many
◦ Remember, designing for accessibility benefits everyone
◦ Offer different ways to engage but remember - provide equivalent experiences for all users.

29
Inclusive Design: What
Should We Do?
“The design of mainstream products
and/or services that are accessible to,
and usable by, as many people as
reasonably possible ... without the need
for special adaptation or specialised
design. [emphasis added]”
British Standards Institute:

30
Video: Accessibility Perspectives:
A Summary

Although this video focuses on accessibility for the Web, the same principles apply in other design mediums too.
31
Some Final ON USABILITY

Points

32
Usability:
Defined by 5 Quality Components
Learnability
How easy is it to accomplish a task the first
time using the interface?
Satisfaction
How pleasant is it to use the
design? Efficiency
Usability How quickly users can perform
tasks?

Errors
How many errors do users make? How Memorability
severe are they? How quickly do they How easy is it to re-establish proficiency
recover from the error(s)? after a period of not using the interface?

33
34
Usability Evaluations
• Formative: to determine which aspects of a design work well or not, and why.
◦ Used during the design process & development process (usually iterative)
• Summative: to determine how well a design performs.
◦ Used usually right before or right after (finished/near-complete) a product design/redesign.
• Measure/Capture
◦ Qualitative Data: observational findings and users’ views/opinions
◦ Quantitative Data: measures one or more metrics
• Methods:
◦ May or may not involve users
◦ We have looked at a few, but there are more.

35
36
References
• Accessibility, Usability, and Inclusion -
https://www.w3.org/WAI/fundamentals/accessibility-usability-inclusion/
• IDT Home (inclusivedesigntoolkit.com)
• Accessibility: https://www.interaction-design.org/literature/topics/accessibility
• Accessibility: Usability for all - https://www.interaction-
design.org/literature/article/accessibility-usability-for-all
• Inclusive Design: An Overview of Current Thinking:
https://www.uxmatters.com/mt/archives/2019/08/inclusive-design-an-overview-of-
current-thinking.php
• Inclusive Design Toolkit - http://www.inclusivedesigntoolkit.com/whatis/whatis.html

37
References contd.
• Inclusive Design - https://www.microsoft.com/design/inclusive/
• What is Inclusive Design? Principles and Examples -
https://xd.adobe.com/ideas/principles/design-systems/what-is-inclusive-
design-principles-and-examples/
• 6 Principles for Inclusive Design - https://uxplanet.org/6-principles-for-
inclusive-design-3e9867f7f63e
• UX Knowledge Base Sketch - https://uxknowledgebase.com/table-of-contents-
4d24ed5114ac

38
Acknowledgements
Many thanks to:
• Sally Fincher, who developed the original content for these lectures
• Caroline Li & Palani Ramaswamy for content from CO328 2020/21.
• Jim Ang for content from CO582 2020/21.

39