Design patterns for government services: A community, not a library

  • View
    1.564

  • Download
    0

  • Category

    Design

Preview:

Citation preview

#gdsteam@timpaul @cjforms

Design patterns for government services:a community not a libraryUX Cambridge 2015

Caroline JarrettForms specialistGovernment Digital Service@cjforms

Tim PaulHead of Interaction DesignGovernment Digital Service@timpaul

#gdsteam@timpaul @cjforms

Not present at time of photo:content designer, user researcher, product manager, other?

4

A quick show of hands…

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Government Digital Service

6

The next 90 minutes:

1. Designing GOV.UK2. Using design patterns3. Example patterns4. Lessons learned

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Designing GOV.UK

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

12 million unique visitors every week

Home to over 330 departments and organisations

Saving more than £62 million a year

#gdsteam@timpaul @cjforms

GOV.UK is information and services

#gdsteam@timpaul @cjforms

www.gov.uk/guidance/keeping-a-pet-pig-or-micropig

#gdsteam@timpaul @cjforms

www.gov.uk/get-birthday-anniversary-message-from-queen

#gdsteam@timpaul @cjforms

www.gov.uk/treasure

#gdsteam@timpaul @cjforms

www.gov.uk/burial-at-sea

#gdsteam@timpaul @cjforms

www.gov.uk/claim-asylum

#gdsteam@timpaul @cjforms

www.gov.uk/carers-allowance/how-to-claim

#gdsteam@timpaul @cjforms

https://www.youtube.com/watch?v=IYBLX3V8ek4

#gdsteam@timpaul @cjforms

GOV.UK is for everyone

#gdsteam@timpaul @cjforms

Low High

Digital skills and confidence

Users GOV.UK Average

#gdsteam@timpaul @cjforms

A brief historyof designing GOV.UK

#gdsteam@timpaul @cjforms

2011

2012

2013

Alpha

Beta

Live

1 designer

10 designers

100+ designers

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

#gdsteam

Small teams Easy to share and copy ideas

House style emerges naturally

@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Cross Government Design Meeting, Leeds

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

2011 2015

Num

ber

ofD

esig

ners

GDS

NonGDS

Alpha

BetaLive

Time

#gdsteam@timpaul @cjforms

How do you do design at scale?

#gdsteam@timpaul @cjforms

CommunityToolsResources

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

CommunityMailing lists, meet-ups, reviews, studios, wiki, workshops, training

#gdsteam@timpaul @cjforms

ToolsPrototyping kit, Screenshot sharer

#gdsteam@timpaul @cjforms

ResourcesPrinciples, templates, elements and patterns

https://www.gov.uk/design-principles #gdsteam

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteamgovuk-elements.herokuapp.com

#gdsteamgovuk-elements.herokuapp.com

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteamgovuk-elements.herokuapp.com

20 patterns

100 patterns

#gdsteam@timpaul @cjforms

#gdsteam

550+ members100+ patterns

@timpaul @cjforms

#gdsteam@timpaul @cjforms

designpatterns.hackpad.com

#gdsteam@timpaul @cjforms

Using design patterns

#gdsteam

ActivityLet’s apply a pattern to a page on GOV.UK

@timpaul @cjforms

#gdsteam

Apply theForm structure pattern

to the Apply for a UK visa page

@timpaul @cjforms

#gdsteam@timpaul @cjforms

Google ‘service manual form structure’

#gdsteam@timpaul @cjforms

www.gov.uk/apply-uk-visa

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Example patterns

#gdsteam

Progress indicators

@timpaul @cjforms

55#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam

Drop down lists

@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

We showed some videos here of participants struggling with dropdowns.

Sorry, we can’t share on the web.

#gdsteam@timpaul @cjforms

#gdsteam

Don’t use dropdowns / select boxes.

They’re not intuitiveThey hide choicesThey’re hard to use

Avoid if at all possibleUse radios or free text fields instead

@timpaul @cjforms

#gdsteam

Radio buttons and checkboxes

@timpaul @cjforms

#gdsteam

For radio buttons / checkboxes

Make the controls biggerUse language to differentiate themTest with ‘other’ as an optionWrite yes/no statements out in full (?)

@timpaul @cjforms

#gdsteam

Gender and sex

@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Lessons learned

#gdsteam@timpaul @cjforms

Design patterns can’t replace designers

#gdsteam@timpaul @cjforms

Design patterns can’t be imposed on people

#gdsteam@timpaul @cjforms

Design patterns can’t negotiate for you

#gdsteam@timpaul @cjforms

Design patterns can save you lots of time

#gdsteam@timpaul @cjforms

Design patterns can make your site design more consistent

#gdsteam@timpaul @cjforms

Design patterns can be a focus for your design community

#gdsteam@timpaul @cjforms

The discussion and creation of patterns is where their value lies

#gdsteam@timpaul @cjforms

Thanks

Caroline JarrettForms specialistGovernment Digital Service@cjforms

Tim PaulHead of Interaction DesignGovernment Digital Service@timpaul

Recommended