FIT5152 User Interface
Design and Usability
Applied Class 5
Learning Outcomes
User interactions with systems depend on different senses, abilities and situations.
We can't ignore diversity when we are designing our user interfaces.
● Analyse and identify accessibility and exclusion in interfaces.
● Classify types of exclusion and opportunities to improve user experience.
● Practice finding empathy with users.
● Present ideas about the importance of user diversity in your designs.
Every group is expected to share 1 idea during the final discussion.
Web Content Accessibility Guidelines
1. Perceivable: Can users use their available senses to detect the content?
2. Operable: Can users execute the required interactions easily?
3. Understandable: Can users mentally process and interpret what they have
perceived?
4. Robust: Can different platforms, browsers and assistive technologies process the
site correctly?
Perceivable, Operable and Understandable apply well to non-website contexts.
Reference Links:
● WCAG at a Glance: https://www.w3.org/WAI/standards-guidelines/wcag/glance/
● How to Meet WCAG Requirements: https://www.w3.org/WAI/WCAG21/quickref/
Web Content Accessibility Guidelines in App Design
(25 mins)
Individual Activity
Choose an app on your mobile device. Evaluate its accessibility, applying the first 3 WCAG
Principles (Perceivable, Operable and Understandable) and the inclusive design principle
of Recognise Exclusion.
● Identify and describe beneficial features in the app that helps a diverse range of
users to access content or interact with the app.
● Identify and describe detrimental features of the app that users would have difficulty
using or would be unable to use if they have a disability or impairment.
Identify at least 3 different features for each of the 3 WCAG principles.
WCAG App Evaluation [duplicate for each group member]
Name of app:
Perceivability Operability Understandability
● ● ●
Empathy Maps (30 minutes)
Group Activity
Consider accessibility and inclusive design in the gardening app example from
applied class 4.
● Select one of the provided sample personas and accompanying user stories.
● Identify an ability your persona might struggle with.
○ Seeing, hearing, speaking or touch?
● Consider if your persona’s accessibility requirement is a…
○ Permanent disability, temporary disability or situational impairment?
Create an empathy map for this user using the template on the following slide.
Empathy Map
Persona name:
User story:
Says Thinks
Something the Something the
persona says persona thinks
Feels Does
Something the Something the
persona feels persona does
Accessibility in Storyboards (5 minutes)
In Assignment Submission 2, you must create storyboards and one storyboard must
consider accessibility. The scenario you depict should explore a permanent or
temporary disability, or a situational impairment.
● How might the persona’s disability or impairment affect your chosen persona’s
ability to use the app?
● Is the persona still able to achieve their goal?
● Depict aspects of empathy (says/thinks/feels/does) within the storyboard's visuals
and descriptions.
Discussion (10 minutes)
Group Activity
Consider accessibility and inclusive design in the gardening app example from
applied class 4.
Discuss how you would cater for diversity of user abilities in your gardening app.
For each feature you propose:
● Briefly describe what the feature is
● Identify who benefits from it
● Identify a specific WCAG principle or guideline that informs how to implement it.
WCAG Guidelines: https://www.w3.org/TR/WCAG21/
Gardening App Accessibility
Feature Who it’s for Relevant WCAG
That's all for today!
In the next applied class we will practice defining acceptance criteria and sketching
low-fidelity prototypes, using a Kanban board to keep track of group progress.
Important reminders for this week:
● A brief for Submission 2 is now available on Moodle.
○ Individual assessment.
○ Due at the end of week 8 (Friday 11:55pm).
See you in the next session!
12
