Design patterns for government services: A community, not a library
•Als PPTX, PDF herunterladen•
3 gefällt mir•685 views
How can you build great services when you have designers dispersed between many different teams? At the UK Government Digital Service, that’s the challenge we face. We want government services to be ‘consistent, not uniform’. But when we looked at some of them, we discovered that we weren’t consistent. Even for something as simple as asking for a date of birth, we had different ways to do it - and we learned that some are much more successful than others. So we decided to create some design patterns. We’ve seen previous efforts at creating pattern libraries: full of great advice, but that can so easily turn into ""shelfware"" - unloved, unused, out of date. This presentation will introduce you to our design patterns, give you a chance to try using one of them, and show how you can use them and contribute to them.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Design patterns for government services: A community, not a library
Ähnlich wie Design patterns for government services: A community, not a library (20)
Mehr von UXPA International
Mehr von UXPA International (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Design patterns for government services: A community, not a library
- 1. Design patterns for government services a community not a library Caroline Jarrett @cjforms #gdsteam
- 2. @cjforms #gdsteam Caroline Jarrett Forms specialist Government Digital Service @cjforms Tim Paul Head of Design Patterns and Tools Government Digital Service @timpaul
- 3. @cjforms #gdsteam Government is changing
- 4. @cjforms #gdsteam GCHQ was deeply secret
- 5. @cjforms #gdsteam GCHQ joined Twitter
- 6. @cjforms #gdsteam GCHQ champions diversity https://www.gchq.gov.uk/features/what-kind-people-work-gchq
- 7. @cjforms #gdsteam CESG fights for user-centred security https://www.gov.uk/government/publications/password-policy-simplifying-your-approach
- 8. @cjforms #gdsteam A quick recap of ~10 years
- 9. @cjforms #gdsteam HM Revenue & Customs, 2005
- 11. @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
- 12. @cjforms #gdsteam GOV.UK, February 2012
- 17. @cjforms #gdsteam How to: - design at scale - make design patterns for everyone - get designers to use design patterns
- 18. @cjforms #gdsteam How to design at scale
- 19. @cjforms #gdsteam We have tools, Front-end kit Prototype kit GOV.UK elements
- 20. @cjforms #gdsteam We have tools, ways to meet Front-end kit Prototype kit GOV.UK elements Design training Meet-ups Mailing list
- 21. @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
- 22. @cjforms #gdsteam It’s quite complicated
- 24. @cjforms #gdsteam How to make design patterns for everyone
- 25. @cjforms #gdsteam Low High Digital skills and confidence Users GOV.UK Average We must design for people with low digital skills
- 26. @cjforms #gdsteam Activity Think of groups of people who might have low digital skills or confidence
- 28. @cjforms #gdsteamIdea: Naintara Land image: http://www.memorylossonline.com/glossary/images/amygdala.jpg We must design for people who are stressed
- 29. @cjforms #gdsteam Example 1 Dropdown lists
- 31. @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.
- 33. @cjforms #gdsteam Avoid dropdowns. Burn your ‘select’ tags. Try these instead: • Radio buttons • Free text • Type ahead* *possibly; there are accessibility worries
- 34. @cjforms #gdsteam Example 2 Form structure
- 35. @cjforms #gdsteam Search for ‘service manual form structure’
- 36. @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
- 37. @cjforms #gdsteam ‘Things’ could be: - information - evidence - decisions - money - physical objects - times and places - actions
- 38. @cjforms #gdsteam Let’s apply the form structure pattern to a page on GOV.UK
- 40. @cjforms #gdsteam https://www.gov.uk/ apply-first-provisional-driving-licence http://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
- 41. @cjforms #gdsteam How to get designers to use design patterns
- 42. @cjforms #gdsteam We’ve tried 4 methods: 1. Research 2. Co-creation 3. Enforcement 4. Design tools
- 44. @cjforms #gdsteam Test your guidance as well as your patterns http://uxpamagazine.org/design-at-scale/
- 49. @cjforms #gdsteam Example 1 Gender and sex
- 51. @cjforms #gdsteam Example 2 Fixing pale boxes (the “Apple Effect”)
- 52. @cjforms #gdsteam Before… These box borders are too pale
- 53. @cjforms #gdsteam Simon Hurst (DWP) and James Francis (Companies House) reported results from user research
- 55. @cjforms #gdsteam Before… These box borders are too pale
- 56. @cjforms #gdsteam After… These box borders are dark enough
- 58. @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”
- 60. @cjforms #gdsteam We worked with the Verify team to make account management patterns
- 61. @cjforms #gdsteam Method 4 Design tools
- 64. @cjforms #gdsteam 1. Research 2. Co-creation 3. Enforcement 4. Design tools
- 65. @cjforms #gdsteam Make it easier to do it right than to do it wrong
- 67. @cjforms #gdsteam Caroline Jarrett Twitter @cjforms http://www.slideshare.net/cjforms caroline.jarrett@digital.cabinet-office.gov.uk
Hinweis der Redaktion
- Intros
- https://www.gchq.gov.uk/features/what-kind-people-work-gchq
- https://www.gov.uk/government/publications/password-policy-simplifying-your-approach
- 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
- There are (far) more designers working on GOV.UK outside GDS than there are within GDS
- How to design at scale How to make design patterns for everyone How to get designers to use patterns
- Here are some of the things we’ve done to try and keep the benefits of a small team. Tools Prototype kit Contains our styles, templates and patterns.
- Training We’ve started doing 3 day training courses. Started by Clara Greo - we all contribute. A chance to meet other designers and learn something. Understand context - origins of GOV.UK War stories and case studies We teach people to code using our prototype kit Events X-Gov meet ups Ad hoc workshops
- Style guides, templates and patterns The raw materials. Ingredients and recipes. Embodied in code wherever possible. We work collectively on them via a wiki called Hackpad. This is how we maintain consistency.
- This is how it all hangs together. We learn from and engage with the design community in various ways: - Face to face - Through mailing lists and other informal resources - By publishing advice in the service manual - By checking whether services are following the advice in service assessments
- Caroline The main thing that informs our design patterns are our users. Because we provide government services, our users are ANYONE who is entitled to and needs that service. We can’t leave anyone behind. 1st time internet users. 1st time computer users. This means we have to try extra hard to reach people who might be unfamiliar with digital technologies.
- Imagine the bell curve of your users and how skilled or confident they are at using computers. The GOV.UK curve extends much further to the left than the average - these are the users we need to reach.
- 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.
- Tim We’ll give two examples of what happens when you make patterns that work for everyone.
- 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’.
- Caroline
- This pattern explains how to structure forms for GOV.UK services.
- The pattern actually has three steps, but for some reason people only remember the last one…
- Things
- It’s not enough to just churn out a bunch of patterns. Anyone who’s worked on a large website will know what can happen. They can quickly go stale, unused by most people. The tumbleweed effect.
- We’re going to discuss 4 methods we’ve tried in the last year. We’ll give a few examples of each method and talk about how successful we think they’ve been.
- Obviously, all patterns should be grounded in research. But as well as that, the guidance itself should be researched.
- 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/
- Then we overlay higher level patterns. This is one that we launched recently: it’s about how to show error messages. We’ve learned that we have to put hints to designers rather than example content to make sure it gets designed.
- We discovered that some patterns are more like ingredients, whereas some are more like recipes.
- Excerpt from Progress indicators Help people understand where they are in a transaction and give them the confidence to continue. On this page: Start without a progress indicator If you do use one, keep it simple Avoid complex progress indicators 1. Start without a progress indicator Test your service first without any progress indicators at all. It may be simple enough that you don’t need them. If it isn’t, then at least you’ll discover the point at which people start to struggle. It’s often the order, type or number of questions that causes issues, so try improving these first.
- Tim Smart people don’t like being told what to do. Also - the value of patterns is as much in their creation as in their use. So you want to include as many people in their creation as you can. By working on patterns with the people who will be using them, you get the benefit of their experience and their buy-in. I’m going to give 2 examples of where this method has benefitted us.
- So, governments have a habit of asking people personal questions when they don’t need to. Historically, we’ve had a very black and white attitude to things like gender and sex.
- So, this long and interesting discussion on Hackpad enabled us to write a pattern for gender and sex. We were able to take a potentially controversial topic and invite people to collaborate on it before it made it’s way into formal guidance. This is basically open policy making. We had input from international forms experts (Jessica Enders) and from people from the transgender community. This made the pattern better.
- Our form fields used to look like this
- On 5 October 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 they 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. We were only able to identify the issue and co-ordinate the change because of the community tools we had in place.
- Another approach is to try to compel people to follow our advice. We’ve got two ways we’ve tried to do this - one for the public sector, one for the private sector.
- The Service Standard is the thing that GDS and departments use to assess the quality of the services we make. Services are assessed at least twice during development, and can’t go properly live unless they pass. Item 13 explicitly tells people to use our design patterns. This gives us the leverage we need if a service is being developed that is wilfully ignoring our design patterns. However, we try to make it very clear that service teams can iterate a pattern if they can demonstrate that this better meets the needs of their users.
- Tim Embed your patterns into the tools that designers use. Make it easier to use those patterns than do something else.
- Prototype kit We’ve made this specifically for designers. It lets you make interactive prototypes of GOV.UK services. It’s a great intro to coding - we offer training too. It contains a growing number of our patterns.
- We added page templates for Start pages Question pages Check your answers pages Confirmation pages Put them together and you’ve got a basic transaction. In our training we teach people how to make a simple transaction using these pages. They learn how to re-use data across pages and to route users to different questions. We’re trying to make it easier to use our patterns than to not use them. Did it work? The kit is very popular (sometimes too popular) Feedback from training is very positive It’s given us a place to put coded patterns
- Caroline