Every website should aim to make it easy for all users to find, consume or purchase what they are looking for, be that information, entertainment or products. The aim of every web developer therefore should be to remove friction and make the users’ experience as pleasant as possible. This is a user-centered presentation about usability, accessibility, and information architecture. It covers some solutions to common problems but its main objective is to provide food for thought and be a conversation starter.

1. Make it easy for all
users
Carme Mias, Nov.23

2. Hello 👋
Carme Mias
Software developer
FreeAgent’s Marketing Platform team

3. Share the journey
Some things I know
Some things I’m learning
Some things I’ve been reading
about
Image: Man landscape tree nature

4. Make it easy for all users…
… to achieve their goal.
Be that:
● perform a task,
● find information,
● buy a product
Image: Flower meadow wild flowers

5. Make it easy for all users
User-Centered Design
User Experience
Information Architecture
Accessibility
Image: Flower meadow wild flowers
With audience participation!

6. Where are we

7. Usability

8. The State of Usability in 2023, by Vitaly Friedman
User interface

9. Where are we - User interface
The State of Usability in 2023, by Vitaly Friedman

10. Bounce rate
Percentage of people who land
on a page and leave that page
without taking any further
action.
Image from : Fullstory blog

11. Accessibility

12. 96.3%
Homepages with WCAG 2 failures*
(*) 2023 WebAIM Million report

13. 2023 WebAIM Million report

14. Why? 😢

15. Let’s discuss it for 5 minutes
Image: watch hand clock time

16. Why?
Time constraints
Lack of awareness/empathy
Lack of education
Not enough diversity in
workplace
Not enough of a priority
Image: person people woman hair

17. Image: sky night atmosphere environment

18. User centered design

19. User centered design
Iterative approach that focuses on the understanding of users and their
context during all phases of design.

20. Multi-disciplinary design teams
● Researchers
● Domain experts
● Designers
● Engineers
● Marketeers
● Stakeholders
● End users

21. Personas

22. Personas
● Rich descriptions
● Based on real users’ demographics.
● Not just the average user.
● “What would X do in this context?”

23. What is User Centered Design, by Interaction Design Foundation
Persona

24. User journey map

25. User journey map
User journey map:
● Encompasses the whole
interaction with the service.
● Includes multiple user flows.
● Identifies:
○ Data the user will need
○ Their feelings
○ System weaknesses
Given a persona wanting to perform a task, the journey map:
● represents of all interactions with the service,
● is broken into smaller single tasks (user flows)
● includes:
○ Empathy mapping (user feelings)
○ System weaknesses

26. User journey map
From User Journey Mapping, by Andy Chipster

27. User Experience (UX)

28. User Experience (UX)
Aims to improve the quality of
users interactions with and
perceptions of a product or
service.
User Experience Design, by Peter Morville

29. User research
Representative users performing
a representative task.
5 different people are enough.
Image: GDS User Research lab

30. Let’s try it for 5 minutes
Image: watch hand clock time

31. Citylink website
Website: https://www.citylink.co.uk/
As a commuter, I want to know how long until the next bus reaches my
departure bus stop.
Further info:
● Bus number = 900
● Current bus stop = Edinburgh Haymarket
● Destination = Glasgow Buchanan Bus Station
EASIER

32. Citylink website
Website: https://www.citylink.co.uk/
As a remote worker, I only visit the office once a week. My multi-journey
card is running out in 14 days and I need to renew it.
Further info:
● 900 bus
● Journey: Glasgow Buchanan Bus Station to Edinburgh Haymarket
HARDER

33. Information Architecture (IA)

34. Information Architecture (IA)
Focuses on organising, structuring, and labelling content in an effective
and sustainable way.

35. User Experience Design, by Peter Morville
Information Architecture (IA)
The purpose of IA is to help users
understand:
● Where they are
● What they have found
● What’s around
● What to expect

36. Information Architecture (IA)
Three related models:
● Taxonomy and metadata
● Underlying structure
● Visible navigation
IA vs navigation, by Jen Cardello

37. Taxonomy and
metadata

38. Taxonomy and metadata
Taxonomy:
● Closed list of acceptable
terms, arranged
hierarchically
● Used to describe and classify
content.
Metadata (tags):
● Attached to all content items
● Content creators cannot
expand the vocabulary.

39. Taxonomy example, from Taxonomy 101

40. Structure

41. Structure
Sitemap = Full plan of the site.
Helps decide where new content
should go.
IA vs navigation, by Jen Cardello

42. Navigation

43. Navigation
Shows users where they are and where they can go.
Encourage desirable actions.
Includes:
● Menus
● Breadcrumbs
● Links
● Accordions

44. Accessibility

45. Accessibility
Accessibility works towards removing barriers to access.
It involves:
● Designers.
● Developers.
● Content creators.

46. Accessibility principles
According to the Web Content Accessibility Guidelines (WCAG), all
digital products must be:
● Perceivable
● Operable
● Understandable
● Robust
Screen readers

47. Most common errors

48. 2023 WebAIM Million report

49. Low contrast text
Colour contrast between
foreground and background.
https://contrastrebellion.com/

50. Missing alternative text
Provide an image description.
<img
src=”an_image.jpg”
alt=”a description of the image”
/>

51. Missing alternative text
SVG text title and description.
<svg role=”img” aria-labelledby=”title-id desc-id”>
<title id=”title-id”>a short title</title>
<desc id=”desc-id”>an optional longer description</desc>
…
</svg>

52. Empty links
Links with no text description.
<a href=”a-target-url”>
<img
src=”an_image.jpg”
alt=”a description of the image”
/>
</a>

53. Missing form labels
Form fields must have an associated label.
<label for=”first-name”>First name</label>
<input type=”text” id=”first-name”/>

54. Empty buttons
Buttons with no text description.
<button type=”reset”>
<img
src=”an_image.jpg”
alt=”a description of the image”
/>
</button>

55. Missing document language
Used by screen readers.
<html lang=”en”>
…
</html>

56. How to test

57. Accessibility tests
● Automated
○ Lighthouse
● Manual
○ Browser extensions
○ Keyboard navigation
○ Screen reader

58. Wrap up

59. Conclusions
Improving experience for all users is not a quick job for one person.
It requires:
● Awareness
● Education
● Collaboration
● Constant testing and monitoring

60. Thank you