Design tips for complex forms Malta 2012

11,202 views
10,883 views

Published on

New design tips for complex forms, presented at Malta's first usability and user experience conference.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Design tips for complex forms Malta 2012

  1. 1. Design tips for complex forms Malta 2012 Caroline Jarrett
  2. 2. This form looks appealing, the questions are simple, the task is easy Image credit: www.swiths.com 2
  3. 3. But what happens if we have to work with complex forms like this? © Effortmark Ltd, from “Forms that work: Designing web forms for usability" 3
  4. 4. Apply to be authorised as a financial adviser 4
  5. 5. Privacy on Facebook http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html 5
  6. 6. A form is complex if … • It has more than one page • Answers come from elsewhere: – Form – Document – Page – Person • The consequences are important: – Money – Stress – Prison? 6
  7. 7. Three women do their tax Anna Maria Lisa Image credits: Shutterstock.com 7
  8. 8. Which of these statements is most important for Maria? That form was easy because… 1. I liked the way it looked and it was easy to read 2. I understood the questions and could answer them 3. I knew exactly what I had to do and I got my tax done on time 8
  9. 9. Users experience a form in three layers Appearance Conversation Relationship Can’t read it Can’t answer it Can’t achieve my goal 9
  10. 10. A good form works well across all three layers Appearance Conversation Relationship Lovely and legible Goals achieved (mine and yours) Easy questions, obvious answers 10
  11. 11. Live site Beta site 11
  12. 12. Task: find the right form 12
  13. 13. Let’s see what’s visible on a typical laptop
  14. 14. Next click? 14
  15. 15. That ‘Income Tax Return’ link… isn’t a link 15
  16. 16. Ah ha, there it is 16
  17. 17. A quick suggestion? 17
  18. 18. A quick suggestion? 18
  19. 19. Form tip 1 (about relationship) Focus on what your users need to do Image credit: Fraser Smith 19
  20. 20. Let’s keep clicking 20
  21. 21. Task: find the right form 21
  22. 22. What do you need to do first? 22
  23. 23. Form tip 2 (about relationship) Put the first thing first Image credit: Per Ola Wiberg 23
  24. 24. Let’s try that in the UK: ‘beta’ version of gov.uk 24
  25. 25. 25
  26. 26. Click or scroll? 26
  27. 27. I’m a new user 27
  28. 28. Um, um, um… not so sure here 28
  29. 29. Um, um, um… where is ‘tax return’? 29
  30. 30. Form tip 3 (about conversation) Use the same words all the way through Image credit: Paul Luffel (PakaLoeff) 30
  31. 31. 31
  32. 32. Suggestion: put the help on the same page 32
  33. 33. Form tip 4 (about conversation) Put just enough help where the user needs it Image credit: Betsy Weber 33
  34. 34. A quick look at buttons. 34
  35. 35. Typical eye-movement when reading a form: Look for field, turn left for label, look for field Where to put the button? A B C 35
  36. 36. In eye-tracking studies, I observed this Looks here first for button Then looks here second Looks here last 3 1 2 36
  37. 37. A quick look at buttons. 37
  38. 38. A second suggstion 38
  39. 39. Appearance Tip Best place for a button: aligned with left-hand end of text entry boxes Appearance Tip Next 39
  40. 40. Complexity affects all three layers of the form • Relationship – Focus on what your users need to do – Put the first thing first • Conversation – Use the same words all the way through – Put just enough help where the user needs it • Appearance – Put clearly labelled buttons in the right place Schema from “Forms that work: Designing web forms for usability” 40
  41. 41. Recently I had to fill in this form And I succeeded, because the task was important 41
  42. 42. More resources on http://www.slideshare.net/cjforms 42
  43. 43. Thanks to Morgan Kaufmann for these books 43
  44. 44. Virtual seminar “Design tips for surveys” • 28th February 2012 • 1:30pm Eastern time = 7:30pm Malta time • 2nd in ‘Next Steps’ series from User Interface Engineering and Rosenfeld Media 44
  45. 45. Caroline Jarrett twitter @cjforms caroline.jarrett@effortmark.co.uk 45

×