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.
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!
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
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
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
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
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
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.
46. Accessibility principles
According to the Web Content Accessibility Guidelines (WCAG), all
digital products must be:
● Perceivable
● Operable
● Understandable
● Robust
Screen readers
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>
59. Conclusions
Improving experience for all users is not a quick job for one person.
It requires:
● Awareness
● Education
● Collaboration
● Constant testing and monitoring