design patterns in government 2016
TRANSCRIPT
#gdsteam@timpaul @cjforms
Design patterns in government
One year onWhat we learnedWhat we changed
#gdsteam
Caroline JarrettForms specialistGovernment Digital Service@cjforms
Tim PaulHead of Design PatternsGovernment Digital Service@timpaul
#gdsteam@timpaul @cjforms #gdsteamImage credit: photo by Caroline Jarrett of historic cartoon. Not yet successful in tracing the source; please tell us if you know it
#gdsteam@timpaul @cjforms
We’re going to talk about how to:
- do design at scale- make design patterns for everyone- get designers to use design patterns
#gdsteam@timpaul @cjforms
How to do design at scale
#gdsteam
#gdsteamwww.flickr.com/photos/benterrett/7309046368
GDS Design Meeting, London, 2012
#gdsteam@timpaul @cjforms
Cross Government Design Meeting, Leeds, 2014
#gdsteam@timpaul @cjforms
2011 2016
Des
igne
rs
GDS
NonGDS
Year
1
300
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
The advantages of small teams
Collective ownership and shared vision
It’s easy to share or steal good ideas
A consistent style emerges naturally
You’re able to respond quickly
#gdsteam@timpaul @cjforms
Some of the things we’ve done
Design principles
Style guides
Page templates
Design patterns
Design training
Design tools
Events
Wikis, blogs etc.
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
How to make design patterns for everyone
#gdsteam
#gdsteam@timpaul @cjforms
We must design for people with low digital skills and confidence
Low High
Digital skills and confidence
Use
rs
GOV.UK Average
#gdsteam@timpaul @cjforms
Activity
Think of groups of people who might have low digital skills or confidence
#gdsteam@timpaul @cjforms @katiearnie https://assisteddigital.blog.gov.uk/2015/02/13/tales-of-the-unexpected-visas-assisted-digital-research
Idea: Naintara Land image: http://www.memorylossonline.com/glossary/images/amygdala.jpg
We must design for people who are stressed
#gdsteam@timpaul @cjforms
Example 1
Dropdown lists
#gdsteam@timpaul @cjforms
Avoid dropdowns if at all possible
- they’re not intuitive
- they hide choices
- they’re hard to use
#gdsteam@timpaul @cjforms
We showed 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.
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
Alternatives to drop-down lists
- radio buttons
- free text
- type ahead
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
Example 2
Form structure
#gdsteam@timpaul @cjforms
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
#gdsteam@timpaul @cjforms @timpaul https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/
#gdsteam@timpaul @cjforms
Let’s apply the form structure pattern to a page on GOV.UK
#gdsteam
29
#gdsteam@timpaul @cjforms
www.gov.uk/burial-at-sea
1. Make a list of all the things
2. Design for the most common scenarios first
3. Start with one thing per page
#gdsteam@timpaul @cjforms
‘Things’ could be:
- information
- evidence
- decisions
- money
- physical objects
- times and places
- actions
#gdsteam@timpaul @cjforms
Search for ‘service manual form structure’
#gdsteam@timpaul @cjforms
How to get designers to use design patterns
#gdsteam
#gdsteam@timpaul @cjforms
We’ve tried 4 methods:
1. Research2. Co-creation3. Enforcement4. Design tools
#gdsteam@timpaul @cjforms
Method 1
Research
#gdsteam@timpaul @cjforms
Test your guidance as well as your patterns
@gemmaleigh govuk-elements.herokuapp.com
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
Ingredients
Recipe
#gdsteam@timpaul @cjforms #gdsteam
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/progress-indicators.html
#gdsteam@timpaul @cjforms
Method 2
Co-creation
#gdsteam@timpaul @cjforms
Example 1
Gender and sex
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
Example 2
Fixing the Apple Effect
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
Before…
#gdsteam@timpaul @cjforms
After…
#gdsteam@timpaul @cjforms
Method 3
Enforcement
#gdsteam@timpaul @cjforms
13“Build a service consistent with the user experience of the rest of GOV.UK including using the design patterns and style guide”
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
We worked with the Verify team to make account management patterns
#gdsteam@timpaul @cjforms
Method 4
Design tools
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
#gdsteam@timpaul @cjforms
1. Research2. Co-creation3. Enforcement4. Design tools
#gdsteam@timpaul @cjforms
Make it easier to do it right than to do it wrong
#gdsteam@timpaul @cjforms
designpatterns.hackpad.com