Research and Design in Government 4

Designing simpler services
Prototypes

Transcript

1. Chris Taylor Interaction Design Lead Home Office
2. 06 Designing simpler services
3. Good design is often about removing complexity Complexity costs users and government time and money
4. Removing complexity is hard
5. Examples of complexity in government
6. Example 1: In 2012 the Department for Environment, Food and Rural Affairs (Defra) mapped over 100,000 pages of environmental guidance and 250 separate information reporting obligations
7. The information relevant to any single business was often contained in several dozen overlapping documents issued by different organisations
8. Example 2: The old form for applying for help with court fees had a 75% rejection rate
9. Example 3: In 2014 an independent report found that the way DWP communicated with claimants was legalistic, unclear and confusing
10. The most vulnerable claimants were often left at a loss as to why their benefits were stopped
12. The simplest service is one that just works without you doing anything
13. Tips for removing complexity from services
14. Language Typography Layout Hierarchy Colour Icons Imagery Flow
15. Language The words are the service Focus on removing content, not adding to it No placeholder text (no Lorem Ipsum)
16. Typography Avoid long lines of copy. People struggle to scan lines of more than about 75 characters Use the smallest number of typographic styles needed to convey the information
19. Layout Start with a single column Group related content together Use space to make content easier to read Use borders and panels as a last resort
20. Exercise Improve this form by getting the spacing right
21. Before After
22. Hierarchy What do users need to read first? How do we highlight important information? What is the main call to action? How do we help them find out more?
25. Colour Use colour sparingly Less is more
28. Exercise Simplify this screen
29. Before After
30. Icons and imagery Only use them when there is a need Badly used images and icons can confuse and distract people
33. Flow Start with one thing per page Small bite sized chunks are easier to digest Perceived pace is more important than clock speed
34. Breaking a service into multiple screens makes it easier to: - understand - use on mobile - recover from errors - hide complexity - save progress - measure
35. Before and after
38. Before After GDS
39. Summary Do the hard work to make it simple Use simple layouts, typography and styles Start with one thing per page Only add things to a service if research shows that users need it
40. Any questions?
41. 07 Prototyping
42. Prototypes are fake versions of the things that you’re thinking about making
43. Why make prototypes?
44. To explore different ideas To communicate those ideas To test ideas with users
45. Prototypes let you do all of these things quickly, without wasting developer time
46. design research develop User-centred design involves regularly iterating a product or service
47. What kinds of prototype are there?
48. Paper sketches Lo-fi wireframes Hi-fi wireframes HTML prototype
49. Choose the level of fidelity that gets the job done
50. Paper prototyping
52. For most people, sketching is much quicker than making an HTML prototype Sketches feel disposable, so you don’t feel so bad about throwing them away
53. Activity We’re going to prototype the payment screens for a service
54. Start by mapping out the sequence of steps the user will need to take Then start sketching out individual screens
55. Include the screens immediately before and after the payment screens
56. Delivery address Payment confirmation Payment screens
57. Requirements Users can pay by Credit and Debit card, Paypal or Paypoint Only Mastercard and Visa cards are accepted You need to capture the user's billing address There’s a 2% fee for using a credit card
58. Let’s critique (crit) your prototypes Talk us through what you did and why. 3 minutes per team. Rules for a design crit: 1. Critique the product, not the people 2. Constructive criticism only 3. There’s no need to defend your position
59. Prototyping in code
60. There are lots of ways to prototype in code We’re going to talk about 2
61. Prototyping in the browser
62. 1. Right click on the page 2. Select ‘inspect’ 3. Edit the content 4. Take a screenshot
65. It’s quick and relatively easy You don’t need any special software No good for building interactive prototypes
66. Using the GOV.UK Prototype Kit
69. It’s the same code as the real thing It works on mobile as well as desktop It can be as clever as you can make it
70. www.gov.uk/service-toolkit
71. Summary Prototypes help you quickly explore, communicate and learn from ideas Prototypes can be on paper, in a drawing package or in code Choose the type that best gets the job done
72. Any questions?
73. If you want to know more: Service Manual Design Principles Digital Service Standard GDS Academy courses Communities
74. Thanks!