How to design a form: Discussing a curriculum
Download as PPTX, PDF1 like1,628 views
Caroline Jarrett's talk at the Leeds Meetup in February 2019 focused on designing effective forms, emphasizing the importance of user needs and usability testing. She proposed a curriculum for a training course to guide designers in creating forms, as many teams lack access to design expertise. The talk included discussions on various design principles, incorporating feedback from attendees, and addressing topics like accessibility and the 'question protocol' for form development.
![GDS
( ) radio buttons
[ ] check boxes
[ ] text input
{{ dynamic content }}
Use Ralph’s conventions for speedy design
Layout-in-text conventions from Ralph Hawkins](https://image.slidesharecdn.com/cj-how-to-design-a-form-leeds-2019-190304153401/85/How-to-design-a-form-Discussing-a-curriculum-45-320.jpg)
How to design a form: Discussing a curriculum
- 1. Caroline Jarrett @cjforms How to design a form Leeds 2019 Let’s discuss a possible curriculum for a training course
- 2. @leedsmeetup comments I tried out some ideas at the Leeds meetup These slides come from a session at the meetup on 27th February 2019. I threw various slides and ideas at people, because I knew that those meetups attract a knowledgeable and friendly crowd. When you see a slide with @leedsgovdesign comments at the top, I’ve added it afterwards. Sometimes the comments come from attendees, sometimes they capture something I said but didn’t have a slide for, sometimes they’re my reflections. Many thanks to Simon Wilson for organising and to everyone who came. 2
- 3. @leedsmeetup comments We need advice on ‘how to design a form’ I’m working with the NHS Digital Standards and Redesign team. We recently had results from usability testing a form, built by a team of colleagues from the NHS Digital Front-End library. The form didn’t test well, and we realised that it was probably because we offer little advice about how to design a form using the patterns in the library. We know that some teams won’t have access to any designers. These slides contain some ideas about what might go into that curriculum. The curriculum might become a training session, or might become advice online, or the need might be met some other way. 3
- 4. @leedsmeetup comments Ian Roddis published about the need for advice while I was typing up these notes 4 https://medium.com/@ianroddis/the-path-of-user-needs-avoiding-beautiful- nonsense-and-the-shelves-of-wisdom-fe19a9b7bff3
- 5. This talk is inspired by Ralph Hawkins Ralph Hawkins Service designer Government Digital Service @ralph_hawkins
- 6. @leedsmeetup comments Please use and discuss these slides This talk was inspired by one that Ralph Hawkins did at the GDS Forms-a-Palooza in January 2019. He described how to design a form and I’ve used some of his ideas and slides here. If I’ve got a slide, or something on it, from somewhere else then there’s a credit. If there isn’t a credit and there ought to be then please tell me and I’ll correct it. Anything I’ve created is ‘Creative commons’ licensed, meaning: Please use it and say where you got it from. I’m very keen for people to try out these slides and tell me what works and what doesn’t. 6
- 7. How to design a form 1.Investigate your forms 2.Write the questions 3.Get the questions into order 4.Put the questions onto pages 7
- 8. @leedsmeetup comments I asked attendees what was missing from the four steps Most of the suggestions were topics that I had included, but weren’t obvious from the four steps. I’ll mention these later. Attendees pointed out that I had skipped: • Identify user needs • What do the users want? • Why? (what are the objectives?) • Are we starting from scratch or starting with an existing form? • What are the outputs? (measures of success?) • Consider the medium • Prerequisites, for example what do people need to fill in the form? And how do they get it? • Who to include when designing a form (team, helpers and stakeholders) 8
- 9. @leedsmeetup comments Join in the discussion about the need for a form Because of comments around needs, I started a discussion on Twitter. People joined in with great comments. I’ve got lots to think about. 9 https://twitter.com/cjforms/status/1100786122920284160
- 10. How to design a form 1. Investigate your forms – Find out how you’ll use the answers – Observe people working with the forms – Observe users filling in the forms 2. Write the questions – Create a question protocol – Interview users about the topics on the form 3. Get the questions into order – Start with one thing per page – Provide a sense of control – Do card sorting with users for order of topics 4. Put the questions onto pages – Use the simplest possible interaction design – Put the right button in the right place – Do usability testing with users 10
- 11. @leedsmeetup comments Attendees did not recognise some terms I asked attendees if there was anything in the expanded list of topics that they did not recognise. As I expected (knowledgeable crowd) nearly everything was reasonably familiar, with these exceptions: • ‘question protocol’ • ‘sense of control’ We return to those topics later. 11
- 12. Activities with users in red with an asterisk 1. Investigate your forms – Find out how you’ll use the answers – Observe people working with the forms * Observe users filling in the forms 2. Write the questions – Create a question protocol * Interview users about the topics on the form 3. Get the questions into order – Start with one thing per page – Provide a sense of control * Do card sorting with users for order of topics 4. Put the questions onto pages – Use the simplest possible interaction design – Put the right button in the right place * Do usability testing with users 12
- 14. Start by reading the actual law Example from Ralph Hawkins
- 15. GDS Sometimes the law prescribes the form Example from Ralph Hawkins
- 16. GDS Read filled-in forms to establish the error rates Example from Ralph Hawkins
- 17. Map the ‘assumption’ process
- 18. Observe the actual process 18
- 19. @leedsmeetup comments Attendees wanted to know the outcomes of each step It’s not obvious that ‘Observe the actual process’ is intended to include: • Find out who is using the forms • Get to know the processes and technology behind the forms • Establish metrics such as failure rates, error rates, any other performance issues 19
- 20. Observe people dealing with forms 20
- 21. Observe users filling in the forms 21
- 22. Find out about people in crisis 22 https://meyerweb.com/eric/thoughts/2014/12/24/inadvertent-algorithmic-cruelty/
- 23. @leedsmeetup comments Missing topic: accessibility and inclusivity I explicitly mentioned ‘find out about people in crisis’. Attendees pointed out that we also need to be explicit about designing for accessibility and inclusivity, right from the start. 23
- 25. GDPR is your friend 25 “Any processing of personal data should be lawful and fair. It should be transparent to natural persons that personal data concerning them are collected, used, consulted or otherwise processed and to what extent the personal data are or will be processed”. https://eur-lex.europa.eu/legal-content/EN/TXT/PDF/?uri=CELEX:32016R0679
- 26. Create your question protocol 26 https://www.uxmatters.com/mt/archives/2010/06 the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php
- 27. @leedsmeetup comments The question protocol includes validation rules It wasn’t obvious to attendees that a question protocol includes: - The validation rules - The text of error messages - The reason you are obtaining every answer and how you will obtain that answer (not always by asking a user a question) 27
- 28. @leedsmeetup comments We need a clearer name for ‘question protocol’ The term ‘question protocol’ is jargon that is unfamiliar to attendees. We briefly discussed some alternatives, including Jessica Enders’ term ‘Question by Question’. I’d like to find out whether we need to invent jargon here, or whether there is a term for this that is already in use and works better than ‘question protocol’. 28
- 29. Track a sample of forms through your process to find out how you use the answers 29 Image credit: Shutterstock
- 30. Interview users about the topics in your form 30
- 31. Translate the questions into ‘user’ 31 ‘Are you a director of a close company?’ ‘Are you a director?’ ‘Are you a director of a close company?’
- 32. Get the questions into order
- 33. Start with one thing per page 33 https://www.gov.uk/service-manual/design/form-structure
- 34. Create a prototype map/wall Example from Ralph Hawkins
- 35. Get the questions into order Provide a sense of control
- 36. Progress indicators do not work • Simple forms don’t need them • ‘Step by step’ indicators aren’t flexible enough • Difficult forms need summary pages 36
- 37. Real journeys are complex 37
- 38. A successful summary screen gives control • You can access each step in any order • You can see which step(s) are un-started, partially complete, fully done • Each step “knows” which step is usually next • Each step “knows” if it can’t be done yet • You can see steps that are about things other than filling in the form: – Steps in the organisation’s control – Steps that are purely about reading content – Steps that mean obtaining documents from elsewhere – Anything else that you have to do to get to your goal
- 39. ‘Check your answers’ is an overview 39
- 40. ‘Task list’ is a (sort of) preview 40
- 41. ‘Step by step’ provides an order 41
- 42. Do card sorting with users for order of topics • Eligibility first? • Easy questions first? • Filter questions first? • Signing ceremonies and signatures at the end 42
- 43. Put the questions onto pages
- 44. GDS Create a prototype (usually a paper/electronic hybrid) Example from Ralph Hawkins
- 45. GDS ( ) radio buttons [ ] check boxes [ ] text input {{ dynamic content }} Use Ralph’s conventions for speedy design Layout-in-text conventions from Ralph Hawkins
- 46. GDS Where do you live? () England () Scotland () Wales () Northern Ireland () Other An example of design-in-a-document Example from Ralph Hawkins
- 47. Looks here first for button Best place for a button: aligned with left-hand end of text boxes 47 2 Then looks here 3 Looks here last 1 https://www.slideshare.net/cjforms/buttons-on-forms-and-surveys-a-look-at-some-research-2012
- 48. Label the buttons with what they do 48 https://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php
- 49. Usability test your form with users 49 Image credit: @gerrygaffney, Infodesign.com.au
- 50. How to design a form 1. Investigate your forms – Find out how you’ll use the answers – Observe people working with the forms – Observe users filling in the forms 2. Write the questions – Create a question protocol – Interview users about the topics on the form 3. Get the questions into order – Start with one thing per page – Provide a sense of control – Do card sorting with users for order of topics 4. Put the questions onto pages – Use the simplest possible interaction design – Put the right button in the right place – Do usability testing with users 50
- 51. A great form works well across all three layers Relationship Conversation Appearance Easy to get it done Easy to move on Goals achievedEasy to understand Easy to answer Goals achievedEasy to use Easy to read Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com51
Editor's Notes
- #6: This is a title side
- #13: Activities with users are in red. These are: Observe users filling in the forms Interview users about the topics on the form Do card sorting with users for order of topics Do usability testing with users
- #14: Back to designing forms
- #15: For example, the Residential Tenancies regulation...
- #16: If the law defines the form, then you’ve got a somewhat different set of problems.
- #18: It’s helpful to get the process of dealing with the form mapped out. I call this the ‘assumption’ process because it’s usually simpler than the real life one.
- #19: The actual process is likely to have many entry points, workarounds, back-tracking and a variety of other factors that make it more complicated.
- #21: Observing the actual process comes in two parts: observing the people who deal with the forms (usually, but not always, colleagues / members of staff)
- #22: Observe the people who fill in the forms (usually, but not always, members of the general public). Sometimes a colleague helps the user to fill in the form. Sometimes there are no members of the general public involved, only colleagues.
- #23: Your form will be encountered by people in crisis. This example from Eric Meyer happened when Facebook gave him a celebratory picture of his daughter. Sadly, Eric’s daughter died from brain cancer that year. People who have to fill in your form will be: recently bereaved, sick, suffering from a mental health crisis, dealing with a crisis in their personal or professional lives. Or they may have temporary or permanent disabilities.
- #32: People who are directors know whether they are a director of a close company or not. People who aren’t directors don’t have to consider the topic of close companies.
- #34: ‘Start with one thing per page’ does not mean that forms design starts here. It means that organising questions onto pages starts with one question on each page.
- #35: You might want to put things on post-it notes, or sketch rough pages to figure out flows. I strongly recommend doing this as a group.
- #40: The 'check your answers' pattern from GDS shows the forms steps, but appears at the end of the form
- #41: The Task List pattern from GDS shows the forms steps but not the content steps. It has a strange interaction design, with something that looks like a button but isn’t a button to indicate status
- #42: The GDS Step by Step pattern provides an order of steps, but doesn’t include any form-filling steps. It gives the impression that steps must be done in a specific order, and doesn’t include any status indicator.
- #45: You end up with something like this. Ralph adds a big number in the top right. I recommend that you choose a name for each page that reflects the question on the page, as that makes it conceptually easier to re-order questions and to remove questions.
- #46: For the first version optimise for quick to create and edit. I use a pseudocode in a google doc so it can be written quickly and shared easily and done by anyone. With 1 document page per web page // Designing a form is a multidisciplinary activity. Ask someone to be a critical friend who job it is to find ways to make the questions simpler.
- #47: Here’s how it looks —