2024 Creating truly accessible forms, Ladies that UX Seattle

Caroline Jarrett
LinkedIn
@cjforms
Creating truly accessible forms
Ladies that UX Seattle

Caroline Jarrett Effortmark.co.uk @cjforms (CC) BY SA-4.0
2
Ladies that UX Brighton
ran a great in-person
event
I’d like to thank everyone involved in
preparing and running that event,
the inspiration for this shorter
workshop.
Blog post about the in-person event
Original workshop resources on Notion
(Creative Commons licensed).
Find our more about Ladies that UX Brighton

3
Agenda
Introduction
Challenge 1: Think about types of disability
Challenge 2: Use the Web Content Accessibility Guidelines
Challenge 3: Use the US Web Design System
Challenge 4: Think about why we ask for a phone number
Challenge 5: Make a question protocol
Challenge 6: Make a prototype
Wrap up

4
We’re going to try a Washington State task
• Think of someone who has a Washington State driver license
(this could be you)
• The person realised today that they have lost their license
• We’ll follow along as they apply for a new one
• Keep a note of which page on the website is a form

5
Is this a form?
Home | Washington State
Department of Licensing

6
Is page 2
a form?

7
Is page 3
a form?

8
Is page 4
a form?

9
Is page 5
a form?

10
Is page 6
a form?

11
Is page 7
a form?

12
Is page 8
a form?

13
Is page 9
a form?

14
Which page(s)
were the form?
1
3 4 5 6
8
7 9
2

15
We know a form when we see it
Looks like a form and
works like a form
Asks questions and
expects answers
Allows someone
to achieve a goal

16
A good form needs a lot of accessibility
Interaction design Content design Service design

A good form is easy to:
• read and use
• understand and answer
• get it done and move on
Takeaway

18
Today’s focus is one specific question
We’ll think about
“What’s the best way to ask for a phone number?”
What could possibly go wrong?
Scenario
You have been asked to develop a digital version of a paper-based
form. One of the form fields is ‘phone number’ - today we’ll focus on
this field in our design backlog.

19
Think about phones
• Have a look at your phone
• Is it a landline or mobile?
• Is there only one or do you have several?
• Consider calls received and messages
• What did you get and why?
• How did you react?
• Think about someone, maybe in your family, who has a
different experience to you. Any extra thoughts?

20
Agenda
✔ Introduction
Challenge 1: Think about types of disability
Wrap up

21
Challenge 1:
Think about types of disability
• Who might have some difficulty using the phone?
• You might think about yourself, someone you know, or a story
you’ve heard about phones
• A “phone” might be a landline or a mobile

22
Consider permanent, temporary, and
situational disabilities
Inclusive101Guidebook.pdf (microsoft.design)

23
Keep ONE person in mind
• Please choose one person who has a permanent, temporary, or
situational disability that affects how they use a phone
• I’m choosing Gwen who is bedridden and confused
• As a team, we’ll focus on lots of different people so it’s OK for
you to focus on just one

24
Agenda
✔ Introduction
✔ Challenge 1: Think about types of disability
Wrap up

25
Challenge 2:
Use the Web Content Accessibility Guidelines
Let’s try to get some help from WCAG for
“the best way to ask for a phone number”
Have a look at
Forms Tutorial | Web Accessibility Initiative (WAI) | W3C
Compare notes
5 minutes

26
This tutorial is
mostly about
interaction design,
with a bit of content
design
Forms Tutorial | Web Accessibility
Initiative (WAI) | W3C

27
There is a bit of
service design there

28
Agenda
✔ Introduction
✔ Challenge 2: Use the Web Content Accessibility Guidelines
Wrap up

29
Challenge 3:
Use the US Web Design System
We’re looking for the best way to ask for a phone number
Try
USWDS: The United States Web Design System (digital.gov)
Compare notes
5 minutes
https://designsystem.digital.gov/

30
This pattern is
specifically about
phone numbers
Phone number | U.S. Web Design System (USWDS) (digital.gov)

31
The accessibility
guidance is OK,
but doesn’t help Gwen
What about the person
you’re thinking about?
Phone number | U.S. Web Design System (USWDS) (digital.gov)

32
Agenda
✔ Introduction
✔ Challenge 3: Use the US Web Design System
Wrap up

33
We’ve been told to think about service design

34
Challenge 4:
Think about why we ask for a phone number
• Why might an organization ask for a phone number?
• How will they use the number?
• When might they use it?
• Does that use of the number cause any difficulties for
the person that you are thinking about?

35
Phone numbers are for more than conversation
• Calling someone to talk to them
• Text (SMS) messages about the progress of an order or task
• Two factor authentication
• … maybe some other things too

36
Agenda
✔ Introduction
✔ Challenge 4: Think about why we ask for a phone number
Wrap up

37
A question protocol
is a list of all the
questions
The question protocol:
how to make sure
every form field is
necessary - Effortmark

38
Structuring forms -
Service Manual -
GOV.UK (www.gov.uk)
Question protocols are
in the GOV.UK Service
Manual

39
The Irish government
also has question
protocols
gov - A question protocol for government forms (www.gov.ie)

40
A question protocol keeps track of each question
Only add a question if you know:
• that you need the information to deliver the service
• why you need the information
• what you’ll do with it
• which users need to give you the information
• how you’ll check the information is accurate
• how to keep the information up to date and secure
Structuring forms - Service Manual - GOV.UK (www.gov.uk)

41
An example of an entry in my question protocol
Column in the question protocol Example for a newsletter sign-up form
Answer we need to get (data) Name
Why is it needed? To be able to address the user
To identify the individual user
How will it be used? Hi, Caroline!
Level of importance (must have, nice to have) Nice to have
What happens if you get the wrong answer or
no answer to this question?
May have a strange interaction with the user
(optional: extra questions that you think will be
helpful for your designs and organisation)

42
Challenge 5:
Let’s make an entry for phone number
Column in the question
protocol
Phone number
Answer we need to get (data) Mobile phone number
Why is it needed?
How will it be used?
Level of importance (must have,
nice to have)
What happens if you get the
wrong answer or no answer to
this question?

43
Sometimes questions linger past their usefulness

44
Agenda
✔ Introduction
✔ Challenge 5: Make a question protocol
Wrap up

45
Challenge 6:
Make a prototype and test it
Design a truly accessible question for getting a phone number for
progress on an order
Your question must:
• Obtain a phone number
• Allow for some sort of choice

46
Consider* a filter question to introduce the topic

47
Consider* a filter question to introduce the topic
* Try doing a filter question,
then actually test it with
some real people to make sure that
the question itself is not repellent

48
Agenda
✔ Introduction
✔ Challenge 5: Make a question protocol
✔ Challenge 6: Make a prototype
Wrap up

49
It’s worth putting extra effort into ‘easy’ questions
Question Mean abandon rate
Name 6%
Email 6%
Password 11%
Phone 6%
Postcode 5%
Address 5%
https://www.zuko.io/blog/which-form-fields-cause-the-biggest-ux-problems

50
Users want to know why you want to know
“Users hate giving you their phone number - It’s a sad truth but
users are very suspicious of you asking for their number. They
fear being spammed by sales calls so would rather drop out of
the process than hand it over …
If you really must ask then explain why you need it. A simple line
saying that you need their number in case there are any issues
with delivery will do wonders for the completion rate on your
phone field.”

51
Forgiving interaction design really matters, too
“Format confusion - More than any field, phone numbers have a
cornucopia of ways you can potentially enter the information. Do
you add a ‘+’? The country code? How about spaces or dashes?
<HEAD EXPLODES EMOJI>”

52
Please help us: people with dyscalculia
1. If you already have a phone number for us, don’t ask again
2. Let us copy the phone number into the form
3. Allow for typical characters such as + - ( ) and space
4. Be very specific in the error message
5. Give us extra time
Fill in the information you have (accessiblenumbers.com)
Improve Validation Errors with Adaptive Messages (98% Don’t) – Articles – Baymard Institute

53
A good form needs a lot of accessibility
Interaction design Content design Service design

54
Ask me questions: Caroline Jarrett
Social media @cjforms
caroline.jarrett@effortmark.co.uk
www.effortmark.co.uk

2024 Creating truly accessible forms, Ladies that UX Seattle

More Related Content

Similar to 2024 Creating truly accessible forms, Ladies that UX Seattle (20)

More from Caroline Jarrett (20)

Recently uploaded (20)

2024 Creating truly accessible forms, Ladies that UX Seattle