The UK Government Digital Service is the department that looks after GOV.UK, the UK government website. It's a single website that is home to over 300 government departments and agencies. This talk gives some examples of how the GDS Design Principles help our colleagues to create better public services, and how they help us to create better guidance for them too.
7. @cjforms #gdsteam
Martha Lane Fox did a review
of digital government
https://www.gov.uk/government/publications/directgov-2010-and-beyond-revolution-not-evolution-a-report-by-martha-lane-fox
19. @cjforms #gdsteam
1. Start with user needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again.
6. This is for everyone
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better
20. @cjforms #gdsteam
1. Start with user needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again.
6. This is for everyone
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better
22. @cjforms #gdsteam
1. Start with user needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again.
6. This is for everyone
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better
25. @cjforms #gdsteam
1. Start with user needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again.
6. This is for everyone
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better
27. @cjforms #gdsteam
Many businesses ignore
people with low digital skills
Low High
Digital skills and confidence
Users
Many
businesses
design for
these
Many
businesses
ignore
these
28. @cjforms #gdsteam
Some skilled people have
low digital skills
https://assisteddigital.blog.gov.uk/2015/02/13/tales-of-the-unexpected-visas-assisted-digital-research@katiearnie
29. @cjforms #gdsteam
We must design for
people who are stressed
Idea: Naintara Land image: http://www.memorylossonline.com/glossary/images/amygdala.jpg
30. @cjforms #gdsteam
People who need government
services have lower digital skills
Low High
Digital skills and confidence
Users
31. @cjforms #gdsteam
When we design for people with
low digital skills, everyone wins
Low High
Digital skills and confidence
Users
Design for
these
Extra easy
for these
34. @cjforms #gdsteam
There was a video
A woman in her 30s struggles to complete
a date-of-birth dropdown. She gets help from her boyfriend,
who is the person who usually helps her.
A dropdown needs several interactions:
• See the box where the answer will appear
• Click on the down arrow next to the box
• Scroll to the answer you want (may be out of sight)
• Click on the answer you want (away from the box)
• The answer appears in the box
The boyfriend keeps telling her to ‘click’, and she keeps
trying to click on box.
35. @cjforms #gdsteam
Many people struggle with
dropdowns/select boxes
People with disabilities, such as low vision
People who are in a hurry
People who find it tiring or boring to look through a
long list
People who have not yet become expert on
computers – or who have no desire to do so.
36. @cjforms #gdsteam
Avoid dropdowns.
Bin your select tags.
Try these instead:
• Radio buttons
• Free text
(and we are experimenting with
autocomplete and other formats)
Alice Bartlett: Bin your select tags https://www.youtube.com/watch?v=-dH6a6eMdXE
37. @cjforms #gdsteam
We use three boxes
for date of birth
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/dates.html
38. @cjforms #gdsteam
People can ignore hints
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/dates.html
• 7 3 1976
• 3 7 1976 (US format)
• 7 Mar 1976
• 7 March 76
40. @cjforms #gdsteam
We use ‘check your answers’
pages
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/check-your-answers-pages.html
41. @cjforms #gdsteam
1. Start with user needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again.
6. This is for everyone
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better
54. @cjforms #gdsteam
1. Start with user needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again.
6. This is for everyone
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better
58. @cjforms #gdsteam
Farmers use GOV.UK
https://userresearch.blog.gov.uk/2015/03/11/the-right-place-to-do-rural-research/
59. @cjforms #gdsteam
1. Start with user needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again.
6. This is for everyone
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better
61. @cjforms #gdsteam
The GDS Service manual
https://www.gov.uk/service-manual
Follow GDS design notes:
https://designnotes.blog.gov.uk/
Follow GDS user research:
https://userresearch.blog.gov.uk/
Join in our discussion of patterns:
http://bit.ly/designpatts
Screenshot of the UK government portal, Directgov, from October 2006.
https://web.archive.org/web/20061010180830/http://www.directgov.gov.uk/Homepage/fs/en
Selection of content from the middle of the page:
Education and learning
Early learning, Schools, 14 to 19, University and higher education, EMA, Student loans, Adult learning...
Motoring
Driver licensing, Learners and driving tests, Buy or sell a vehicle, Taxing and MOT, Online services...
Home and community
Home buying and selling, Planning, Environment, Recycling, Water conservation...
Employment
Looking for work, Employees, Working hours and time off, Redundancy, Jobseekers...
Screenshot of the DVLA website in 2006. It has two columns: one starts with Welcome above text in English, the other starts with Croeso and continues with Welsh. The website was WCAG-A level 1 compliant
14th October 2010 Dear Francis Maude, DIRECTGOV 2010 AND BEYOND: REVOLUTION NOT EVOLUTION You asked me to oversee a strategic review of Directgov and to report to you by the end of September. I have undertaken this review in the context of my wider remit as UK Digital Champion which includes offering advice on "how efficiencies can best be realised through the online delivery of public services." This means that I have not reviewed Directgov in isolation but as part of how the government can use the Internet both to communicate and interact better with citizens and to deliver significant efficiency savings from channel shift. This letter sets out my findings and key recommendations.
Screenshot of GOV.UK, the single website for UK government.
http://www.gov.uk
Example text from the middle of the page:
Benefits
Includes tax credits, eligibility and appeals
Births, deaths, marriages and care
Parenting, civil partnerships, divorce and Lasting Power of Attorney
Disabled people
Includes carers, your rights, benefits and the Equality Act
Driving and transport
Includes vehicle tax, MOT and driving licences
There are (far) more designers working on GOV.UK outside GDS than there are within GDS
Great for establishing a common design culture.
Actually useful - it’s a decision-making tool.
They look good on posters, too.
1 Start with user needs
2 Do less
3 Design with data
4 Do the hard work to make it simple
5 Iterate. Then iterate again.
6 This is for everyone
7 Understand context
8 Build digital services, not websites
9 Be consistent, not uniform
10 Make things open: it makes things better
Screenshot of the National Archives copy of Transportdirect.info, a UK government transport information website that was closed in 2014.
Research continually
To work in an agile way, service teams must be able to quickly:
update their understanding of users and their needs, including users who lack the ability or access to use digital services on their own
test new design ideas, content and features to see if they work well for all users
understand problems users are having and how they might be resolved
This means doing user research in every iteration of every phase - starting in discovery and continuing throughout live. You can’t only do it at the beginning or end of development.
Imagine the bell curve of your users and how skilled or confident they are at using computers.
Imagine the bell curve of your users and how skilled or confident they are at using computers.
Many businesses ignore people with low digital skills. They design for people with OK-to-excellent digital skills.
Excerpt from blog post by Katy Arnold, https://assisteddigital.blog.gov.uk/2015/02/13/tales-of-the-unexpected-visas-assisted-digital-research/
A reality check
It’s easy to assume that skilled people will all be IT literate, but what we found was that some skilled visa applicants (for example chefs, oil rig workers, small business retailers and church workers) lacked the skills, confidence or ability to get online.
When people are stressed – which is nearly always true when they are using government services – their amygdala steals resources from the rest of their brain. So even people with high digital skills and confidence can lose some of those skills.
The GOV.UK curve extends much further to the left than the average - these are the users we need to reach.
‘This is for everyone’ reminds us to focus on people with low digital skills and confidence
This long dropdown of countries is hard to use for many people
This is an example of what we now recommend.
Yes, you need validation on the fields. But remember - ‘Do the hard work to make it simple’.
A hint will help people who look at it, but you cannot be sure that everyone will pay attention to a hint. Here are some of the more common problems with entering dates.
Screenshot of a 'check your answers' page. The first answer is 'Date of birth', with 7th March 1976.
‘Do the hard work to make it simple’ applies to the small details, like using a simple control on a form. And it applies to everything. For example, it applies to big things like two departments, responsible for different aspects of a service, working together to deliver a single service. It’s not easy for two large organisations to work together effectively.
Screenshot of 'Check your State Pension', a service delivered by two departments: HMRC and DWP
Service teams are users of patterns too.
They won’t use them if they can’t find them or they’re not useful.
Here are some things we’ve learned testing patterns with service teams.
http://uxpamagazine.org/design-at-scale/
The ‘Errors and validation’ from 2015 tells designers and developers how to display an error message. It includes this good advice: “Ensure error messages make sense when read by screen readers”.
We discovered that designers and developers prefer examples to instructions. Gemma Leigh worked with several colleagues to develop our current guidance, which includes an example and includes the code that developers can use to implement the error messages correctly so that they work for all users, including people who use screen readers.
People from over 330 government departments and agencies contribute to GOV.UK.
Our colleagues from government departments and agencies also contribute to our guidance.
Our form fields used to look like this
Simon Hurst is a researcher from DWP, on Personal Independence Payment.
He used our mailing list to raise an issue he’d seen with some participants not being able to see the borders on our text fields.
One participant referred to this as ‘The Apple Effect’
He got responses from Companies House saying they’d found similar issues.
Other parts of government chimed in with their experience.
We established that it was the thickness, not just the colour that was an issue.
We used the list to ask the design and research communities to try out some thicker, darker borders next time they were testing with users with low vision.
Within a couple of weeks we were able to:
Verify that the issue exists in more than one service
Agree collectively on a design change
Test the design change in research on more than one service
Implement the change to our global styles
Our form fields used to look like this
Now they look like this
Seems like a relatively minor change, but it will have had a huge effect for lots of our users.
You may not like it as much, but this is government. It looks OK and now everyone can use it.
We were only able to identify the issue and co-ordinate the change because of the community tools we had in place.
GOV.UK Visitors last month (August 2016)
45,430,026
Graph showing the relative use of GOV.UK by device type. In the last week of August 2016, when I collected this data, 52.8% of users were on desktop, 36.6% were on mobile, and 10.6% were on tablet. The use of desktop dips sharply over the Christmas/New Year work break, so we believe that people using desktops are more likely to be at work. There are similar, slightly smaller dips in use of desktop over the summer holiday period.
Screenshot of 'Tax your vehicle' on a smartphone. We have one website that is responsive. It works on small-width screens such as a smartphone. It also works on a normal-width screen for users who prefer, or need, to enlarge the text because they have low vision.
Visiting a family farm to do user research for a service used by farmers. We go to visit people using GOV.UK in their homes, their workplaces, and in public places like libraries. We need to understand their context.
Thank you for inviting me to LibDesign 2016. I’m here because GDS is committed to making things open. We believe that sharing what we do – what works, what doesn’t work, and what we’re still trying to make work – helps us to work better and helps other organisations too.
We must make government work for citizens. It’s very nice if they like what we do, but what we really care about is whether they can use it for whatever they need to do.