Chris Taylor Interaction Design Lead Home Office

Transcription

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

11

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

17

18

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?

23

24

25 Colour Use colour sparingly Less is more

26

27

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

31

32

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

36

37

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 User-centred design involves regularly iterating a product or research develop 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

51

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 Payment screens Delivery address Payment confirmation

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 Right click on the page Select inspect Edit the content Take a screenshot

63

64

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

67

68

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

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!