design patterns in government 2016

#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


We’re going to talk about how to:

- do design at scale- make design patterns for everyone- get designers to use design patterns


How to do design at scale

#gdsteam

#gdsteamwww.flickr.com/photos/benterrett/7309046368

GDS Design Meeting, London, 2012


Cross Government Design Meeting, Leeds, 2014


2011 2016

Des

igne

rs

GDS

NonGDS

Year

1

300


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


Some of the things we’ve done

Design principles

Style guides

Page templates

Design patterns

Design training

Design tools

Events

Wikis, blogs etc.


How to make design patterns for everyone

#gdsteam


We must design for people with low digital skills and confidence

Low High

Digital skills and confidence

Use

rs

GOV.UK Average


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


Example 1

Dropdown lists


Avoid dropdowns if at all possible

- they’re not intuitive

- they hide choices

- they’re hard to use

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.



Alternatives to drop-down lists

- radio buttons

- free text

- type ahead


Example 2

Form structure


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/


Let’s apply the form structure pattern to a page on GOV.UK

#gdsteam


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

http://www.gov.uk/burial-at-sea


‘Things’ could be:

- information

- evidence

- decisions

- money

- physical objects

- times and places

- actions


Search for ‘service manual form structure’


How to get designers to use design patterns

#gdsteam


We’ve tried 4 methods:

1. Research2. Co-creation3. Enforcement4. Design tools


Method 1

Research


Test your guidance as well as your patterns

@gemmaleigh govuk-elements.herokuapp.com


Ingredients

Recipe

#gdsteam@timpaul @cjforms #gdsteam

https://www.gov.uk/service-manual/user-centred-design/resources/patterns/progress-indicators.html


Method 2

Co-creation


Example 1

Gender and sex


Example 2

Fixing the Apple Effect


Before…


After…


Method 3

Enforcement


13“Build a service consistent with the user experience of the rest of GOV.UK including using the design patterns and style guide”


We worked with the Verify team to make account management patterns


Method 4

Design tools


1. Research2. Co-creation3. Enforcement4. Design tools


Make it easier to do it right than to do it wrong


designpatterns.hackpad.com