Design patternsfor government servicesa community not a library
Caroline Jarrett@cjforms #gdsteam
@cjforms #gdsteam
Caroline JarrettForms specialistGovernment Digital Service@cjforms
Tim PaulHead of Design Patterns and ToolsGovernment Digital Service@timpaul
@cjforms #gdsteam
Government is changing
@cjforms #gdsteam
GCHQ was deeply secret
@cjforms #gdsteam
GCHQ joined Twitter
@cjforms #gdsteam
GCHQ champions diversity
https://www.gchq.gov.uk/features/what-kind-people-work-gchq
@cjforms #gdsteam
CESG fights for user-centred security
https://www.gov.uk/government/publications/password-policy-simplifying-your-approach
@cjforms #gdsteam
A quick recap of ~10 years
@cjforms #gdsteam
HM Revenue & Customs, 2005
@cjforms #gdsteam
DVLA, 2006
@cjforms #gdsteam
Martha Lane Fox, 2010
https://www.gov.uk/government/publications/directgov-2010-and-beyond-revolution-not-evolution-a-report-by-martha-lane-fox
@cjforms #gdsteam
GOV.UK, February 2012
@cjforms #gdsteam
DVLA, 2013
@cjforms #gdsteam
GOV.UK, 2016
@cjforms #gdsteam
@cjforms #gdsteam
2011 2016
Des
igne
rs
GDS
NonGDS
Year
1
300
@cjforms #gdsteam
How to:- design at scale- make design patterns for everyone- get designers to usedesign patterns
@cjforms #gdsteam
How to design at scale
@cjforms #gdsteam
We have tools,
Front-end kit
Prototype kit
GOV.UK elements
@cjforms #gdsteam
We have tools, ways to meet
Front-end kit
Prototype kit
GOV.UK elements
Design training
Meet-ups
Mailing list
@cjforms #gdsteam
We have tools, ways to meet, and patterns
Front-end kit
Prototype kit
GOV.UK elements
Design patterns
Design training
Meet-ups
Mailing list
Hackpad
@cjforms #gdsteam
It’s quite complicated
@cjforms #gdsteam
@cjforms #gdsteam
How to make design patterns for everyone
@cjforms #gdsteam
Low High
Digital skills and confidence
Use
rs
GOV.UK Average
We must design for people with low digital skills
@cjforms #gdsteam
Activity
Think of groups of people who might have low digital skills or confidence
@cjforms #gdsteam https://assisteddigital.blog.gov.uk/2015/02/13/tales-of-the-unexpected-visas-assisted-digital-research
@katiearnie
@cjforms #gdsteam Idea: Naintara Land image: http://www.memorylossonline.com/glossary/images/amygdala.jpg
We must design for people who are stressed
@cjforms #gdsteam
Example 1
Dropdown lists
@cjforms #gdsteam
@cjforms #gdsteam
There were two videos• a woman in her 30s struggling to complete a
date-of-birth dropdown
• a man with low vision unable to use a select box because the browser failed to enlarge it.
@cjforms #gdsteam
@cjforms #gdsteam
Avoid dropdowns. Burn your ‘select’ tags.Try these instead:
• Radio buttons
• Free text
• Type ahead*
*possibly; there are accessibility worries
@cjforms #gdsteam
Example 2
Form structure
@cjforms #gdsteam
Search for ‘service manual form structure’
@cjforms #gdsteam
Form structure
1. Know why you’re asking every question
2. Design for the most common scenarios first
3. Start with one thing per page
@cjforms #gdsteam
‘Things’ could be:
- information
- evidence
- decisions
- money
- physical objects
- times and places
- actions
@cjforms #gdsteam
Let’s apply the form structure pattern to a page on GOV.UK
@cjforms #gdsteam
@cjforms #gdsteam
https://www.gov.uk/apply-first-provisional-driving-licencehttp://bit.ly/firstprov
1. Make a list of all the things
2. Design for the most common scenarios first
3. Start with one thing per page
@cjforms #gdsteam
How to get designers to use design patterns
@cjforms #gdsteam
We’ve tried 4 methods:
1. Research2. Co-creation3. Enforcement4. Design tools
@cjforms #gdsteam
Method 1
Research
@cjforms #gdsteam
Test your guidance as well as your patterns
http://uxpamagazine.org/design-at-scale/
@cjforms #gdsteam@gemmaleigh govuk-elements.herokuapp.com
@cjforms #gdsteam
Ingredients
Recipe
@cjforms #gdsteam#gdsteam
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/progress-indicators.html
@cjforms #gdsteam
Method 2
Co-creation
@cjforms #gdsteam
Example 1
Gender and sex
@cjforms #gdsteam
@cjforms #gdsteam
Example 2
Fixing pale boxes(the “Apple Effect”)
@cjforms #gdsteam
Before…These box borders are too pale
@cjforms #gdsteam
Simon Hurst (DWP) andJames Francis (Companies House) reported results from user research
@cjforms #gdsteam
@cjforms #gdsteam
Before…These box borders are too pale
@cjforms #gdsteam
After…These box borders are dark enough
@cjforms #gdsteam
Method 3
Enforcement
@cjforms #gdsteam
13“Build a service consistent with the user experience of the rest of GOV.UK including using the design patterns and style guide”
@cjforms #gdsteam
@cjforms #gdsteam
We worked with the Verify team to make account management patterns
@cjforms #gdsteam
Method 4
Design tools
@cjforms #gdsteam
@cjforms #gdsteam
@cjforms #gdsteam
1. Research2. Co-creation3. Enforcement4. Design tools
@cjforms #gdsteam
Make it easier to do it right than to do it wrong
@cjforms #gdsteamhttp://www.slideshare.net/cjforms
@cjforms #gdsteam
Read about building a design community:http://uxpamagazine.org/design-at-scale/
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