Alice Bartlett
Front-end developer
Government Digital Service
@alicebartlett
Slide 2
Slide 2 text
In this talk…
2
GDS
Slide 3
Slide 3 text
3
In this talk…
!
• Who are GDS
3
GDS
Slide 4
Slide 4 text
4
In this talk…
!
• Who are GDS
• Some user research about selects
4
4
GDS
Slide 5
Slide 5 text
5
In this talk…
!
• Who are GDS
• Some user research about selects
• Alternatives to select boxes
5
5
GDS
Slide 6
Slide 6 text
6
In this talk…
!
• Who are GDS
• Some user research about selects
• Alternatives to select boxes
• GOV.UK option select widget
6
6
GDS
Slide 7
Slide 7 text
I’m from the
Government Digital
Service
GDS
Slide 8
Slide 8 text
GDS is a team at the heart of government
building digital public services
GDS
Slide 9
Slide 9 text
Our job is to transform the government...
GDS
Slide 10
Slide 10 text
Making services so good that
people prefer to use them
GDS
Slide 11
Slide 11 text
We started by
building GOV.UK
GDS
Slide 12
Slide 12 text
The best place to find
government services
and information
GDS
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
14
Slide 15
Slide 15 text
15
Slide 16
Slide 16 text
GDS
Slide 17
Slide 17 text
12 million visitors every week
!
GDS
Slide 18
Slide 18 text
12 million visitors every week
Home to over 330 departments and organisations
GDS
Slide 19
Slide 19 text
12 million visitors every week
Home to over 330 departments and organisations
Saving more £62 million a year
GDS
Slide 20
Slide 20 text
We’re also transforming government services
GDS
Slide 21
Slide 21 text
GDS
Slide 22
Slide 22 text
GDS
25 of government’s
biggest services
redesigned to meet
the needs of users
GDS
Slide 23
Slide 23 text
Services like...
GDS
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Carer’s Allowance
150,000 claims in the last year
90% user satisfaction
GDS
LIVE
Source: gov.uk/performance
Slide 26
Slide 26 text
How are we doing all this?
GDS
Slide 27
Slide 27 text
Open
Agile
Multidisciplinary teams
GDS
Slide 28
Slide 28 text
Relentlessly focused
on user needs
GDS
Slide 29
Slide 29 text
29
GDS
We do a lot of user research at GDS
Slide 30
Slide 30 text
30
13
GDS
Findings from user research highlight
gaps in our understanding about the way
people interact with our services
Slide 31
Slide 31 text
31
14
13
GDS
Findings from user research highlight
gaps in our understanding about the way
people use computers
Slide 32
Slide 32 text
32
GDS
The user needs we have to address on
GOV.UK are those of an entire country
interacting with its government
Slide 33
Slide 33 text
33
33
GDS
That’s all kinds of people with all kinds of
needs…
Slide 34
Slide 34 text
34
34
GDS
People who only use the web at work
Slide 35
Slide 35 text
35
People who only access the web on a
public computer at the library
GDS
Slide 36
Slide 36 text
36
GDS
People who think “the web” = “Facebook”
Slide 37
Slide 37 text
37
People for whom English is a second
language
GDS
Slide 38
Slide 38 text
38
38
People for whom English is a second third
language
GDS
Slide 39
Slide 39 text
39
39
People for whom English is a second third
nth language
GDS
Slide 40
Slide 40 text
40
40
GDS
People whose reading comprehension
age is that of a nine year old
Slide 41
Slide 41 text
41
41
GDS
People who use screen readers
Slide 42
Slide 42 text
42
42
GDS
People sat on their phones half paying
attention to GOV.UK while also watching a
conference talk
!
ಠ_ಠ
Slide 43
Slide 43 text
43
43
GDS
All of these users are on GOV.UK
because they need to be
Slide 44
Slide 44 text
44
44
44
GDS
More often than not, it’s not a task that is
inherently enjoyable
Slide 45
Slide 45 text
45
45
45
45
GDS
We do user research to make sure these
tasks are as easy to accomplish as
possible
Slide 46
Slide 46 text
46
46
46
46
46
GDS
So users can come to our site, do their
thing, and then get back to their lives
Slide 47
Slide 47 text
47
GDS
Sometimes user research shows us we’re
letting our users down...
Slide 48
Slide 48 text
Today I want to talk about how people use
48
16
GDS
Slide 49
Slide 49 text
User research participant 1
49
GDS
Slide 50
Slide 50 text
I don’t have permission to share
these videos on the web, sorry!
Slide 51
Slide 51 text
User research participant 2
51
GDS
Slide 52
Slide 52 text
I don’t have permission to share
these videos on the web, sorry!
Slide 53
Slide 53 text
53
We see users:
!
Unable to close the select
!
!
53
GDS
Slide 54
Slide 54 text
54
We see users:
!
Unable to close the select
Typing into the select
!
54
GDS
Slide 55
Slide 55 text
55
We see users:
!
Unable to close the select
Typing into the select
Confusing focused items with selected items
55
GDS
Slide 56
Slide 56 text
56
We see users:
!
Unable to close the select
Typing into the select
Confusing focused items with selected items
Trying to pinch zoom select options on tablets
56
56
GDS
Slide 57
Slide 57 text
57
GDS
All of these users were able to enter their
date of birth with a text input successfully
Slide 58
Slide 58 text
58
Do the hard work to
make it simple
GDS
Slide 59
Slide 59 text
59
GDS
Do the hard work to
make it simple
Slide 60
Slide 60 text
60
27
GDS
Validation:
Does ruby’s
Date.parse() understand
this to be a valid date of a
person who could feasibly
be alive right now?
Slide 61
Slide 61 text
61
GDS
OK, don’t use select boxes for date of birth
!
!
Slide 62
Slide 62 text
OK, don’t use select boxes for date of birth
!
!
Can I use them for other stuff?
62
GDS
Slide 63
Slide 63 text
63
GDS
We aren’t the only people that think
selects are crap. This isn’t new.
Slide 64
Slide 64 text
“Drop-down menus: Use sparingly”
!
Jakob Nielsen.
12 November 2000
64
GDS
http://www.nngroup.com/articles/drop-down-menus-use-sparingly/
Slide 65
Slide 65 text
65
GDS
Fifteen years ago, folks.
Slide 66
Slide 66 text
66
The Spice Girls
were still having
number 1s when
Nielsen wrote that
Slide 67
Slide 67 text
And yet, here we are
67
GDS
Slide 68
Slide 68 text
“Drop downs should be the UI of last
resort”
!
@lukew
68
GDS
https://storify.com/lukew/drop-downs-are-the-ui-of-last-resort
Slide 69
Slide 69 text
69
GDS
What are the alternatives to drop-downs?
Slide 70
Slide 70 text
70
70
Will a text input suffice?
GDS
Slide 71
Slide 71 text
71
For small numbers of discrete data, use
checkboxes or radio buttons
GDS
Slide 72
Slide 72 text
72
GDS
There are times were neither of these UIs
will work for you
Slide 73
Slide 73 text
73
GDS
Cases where there are too many options
to list consecutively
!
!
!
!
Slide 74
Slide 74 text
74
GDS
Cases where there are too many options
to list consecutively
!
!
Cases where users have no idea what the
correct answer for them is, but they
would know it if they saw it.
Slide 75
Slide 75 text
75
75
GDS
These are the
times when you
might want to
build a custom
widget
75
GDS
Slide 76
Slide 76 text
76
76
76
GDS
76
GDS
(a custom widget like this…)
Slide 77
Slide 77 text
77
77
Slide 78
Slide 78 text
What good looks like in widget land
GDS
Slide 79
Slide 79 text
79
Firstly, you’re going to want to make it
accessible
GDS
Slide 80
Slide 80 text
80
Steve Faulkner’s checklist for custom components
and web components is a good baseline for
accessibility standards
GDS
http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
87
87
1. Keyboard focusable
2. Keyboard operable
3. Expected operation
4. Clear indication of focus
5. Label
6. Role
7. States and properties
GDS
http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
Slide 88
Slide 88 text
88
GDS
Some more requirements for GOV.UK:
!
!
Slide 89
Slide 89 text
89
89
GDS
Some more requirements for GOV.UK:
!
1. Functional without JavaScript
Slide 90
Slide 90 text
90
90
GDS
Some more requirements for GOV.UK:
!
1. Functional without JavaScript
2. Functional in IE7+
Slide 91
Slide 91 text
“Progressive enhancement is about
resilience as much as it is about
inclusiveness”
- @bradwright
91
GDS
Slide 92
Slide 92 text
92
Sometimes people break things!
GDS
Slide 93
Slide 93 text
93
GDS
In January ~0.6% of sessions were IE7
!
(That’s ~353,400 sessions)
Slide 94
Slide 94 text
94
People still using Internet Explorer 7 are
not people who simply haven’t heard of
Firefox yet
GDS
Slide 95
Slide 95 text
95
GDS
Do the hard work to make it simple
Slide 96
Slide 96 text
96
GDS
Building custom widgets is a lot more
work than you think it will be
Slide 97
Slide 97 text
97
97
97
Slide 98
Slide 98 text
98
GDS
GDS
Slide 99
Slide 99 text
99
GDS
In terms of HTML, It’s just
a list of checkboxes.
Slide 100
Slide 100 text
100
GDS
Screen readers announce it as a list of
checkboxes. The open / closing stuff is a
presentational layer
Slide 101
Slide 101 text
101
It has
tabindex="0"
to make it keyboard
focusable
GDS
keyboard gif?
Slide 102
Slide 102 text
102
GDS
It has JavaScript event listeners that make
it keyboard operable so users should be
able to infer how it works
Slide 103
Slide 103 text
It looks like this with
no JavaScript
103
GDS
Slide 104
Slide 104 text
It looks like this in
IE6
104
36
GDS
Slide 105
Slide 105 text
105
GDS
It looks like this on
mobile (i.e. it
doesn’t scroll)
Slide 106
Slide 106 text
Further work…
106
GDS
Slide 107
Slide 107 text
The widget exposes itself to assistive tech as a list
of checkboxes.
!
This is fine but it could be better. Users of assistive
tech would benefit from being able to hide all the
options they don’t care about too.
107
GDS
Slide 108
Slide 108 text
108
Make the label at the top a button. This will give it all the
accessibility hooks for screen readers.
108
GDS
!
Case type!
Slide 109
Slide 109 text
109
GDS
Give the button ARIA-expanded=false when the box is
closed and ARIA-expanded=true when the
checkboxes are displayed.
ARIA-expanded=false!
ARIA-expanded=true!
Slide 110
Slide 110 text
110
110
GDS
Use aria-controls to hook button to container with
checkboxes in.
aria-controls=!
case-type-container!
!
!
id=“case-type-container”!
!
Slide 111
Slide 111 text
111
111
GDS
In summary:
!
Don’t use selects for date of birth
Making a widgets is harder than you think
Do the hard work to make it simple
Slide 112
Slide 112 text
We believe sharing what we do will make
it better, so you can see lots of our
thinking and working online...
GDS
Slide 113
Slide 113 text
Read more:!
!
GDS Blog – http://gds.blog.gov.uk
Design Principles – www.gov.uk/design-principles
Digital Strategy – www.gov.uk/digitalstrategy
Service Manual – www.gov.uk/service-manual
Our code – www.github.com/alphagov
GDS
Slide 114
Slide 114 text
114
Links:!
!
Luke Wroblewski – https://storify.com/lukew/drop-downs-are-the-ui-of-last-resort
Jakob Nielsen – http://www.nngroup.com/articles/drop-down-menus-use-sparingly/
Competitions and Markets Authority – www.gov.uk/cma-cases
Github – www.github.com/alphagov/finder-frontend
GDS