Design tipsfor complex formsMalta 2012Caroline Jarrett
This form looks appealing,the questions are simple,the task is easy                               2Image credit: www.swith...
But what happens if we have to workwith complex forms like this?© Effortmark Ltd, from “Forms that work: Designing web for...
Apply to beauthorised as afinancial adviser                    4
Privacy onFacebook             http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html   5
A form is complex if …• It has more than one page• Answers come from elsewhere:   –   Form   –   Document   –   Page   –  ...
Three women do their tax        Anna                      Maria   LisaImage credits: Shutterstock.com                     ...
Which of these statementsis most important for Maria?             That form was easy because…             1. I liked the w...
Users experience a form in three layersAppearance      Can‟t                read itConversation        Can‟t answer       ...
A good form works well across all three layersAppearance       Lovely and                 legibleConversation       Easy q...
Live       siteBetasite              11
Task: find the right form                            12
Let‟s see what‟s visible on a typical laptop
Next click?              14
That „Income Tax Return‟ link… isn‟t a link                                              15
Ah ha, there it is                     16
A quick suggestion?                      17
A quick suggestion?                      18
Form tip 1        Focus on what your                  users need to do(aboutrelationship)                                 ...
Let‟s keep clicking                      20
Task: find the right form                            21
What do you need to do first?                                22
Form tip 2      Put the first thing first(aboutrelationship)                                                      23      ...
Let‟s try that in the UK: „beta‟ version of gov.uk                                                 24
25
Click or scroll?                   26
I‟m a new user                 27
Um, um, um… not so sure here                               28
Um, um, um… where is „tax return‟?                                     29
Form tip 3        Use the same words                  all the way through(aboutconversation)                              ...
31
Suggestion:put the help on the same page                                32
Form tip 4      Put just enough help                where the user needs it(aboutconversation)                            ...
A quick look at buttons.                           34
Typical eye-movement when reading a form:Look for field, turn left for label, look for field       A               B      ...
In eye-tracking studies, I observed this        Looks                     Looks here       Then looks here second       he...
A quick look at buttons.                           37
A second suggstion                     38
Appearance   Best place for a button:Tip             aligned with left-hand end             of text entry boxes           ...
Complexity affects all three layers of the form• Relationship   – Focus on what your users need to do   – Put the first th...
Recently I had to fill in this form                      And I succeeded, because                      the task was import...
More resources onhttp://www.slideshare.net/cjforms                                    42
Thanks to Morgan Kaufmann for these books                                            43
Virtual seminar “Design tips for surveys”• 28th February 2012• 1:30pm Eastern time = 7:30pm Malta time• 2nd in „Next Steps...
Caroline Jarretttwitter @cjformscaroline.jarrett@effortmark.co.uk                                    45
Upcoming SlideShare
Loading in...5
×

Design tips for complex forms Malta 2012

9,585

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.

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,585
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
88
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Design tips for complex forms Malta 2012"

  1. 1. Design tipsfor complex formsMalta 2012Caroline Jarrett
  2. 2. This form looks appealing,the questions are simple,the task is easy 2Image credit: www.swiths.com
  3. 3. But what happens if we have to workwith complex forms like this?© Effortmark Ltd, from “Forms that work: Designing web forms for usability" 3
  4. 4. Apply to beauthorised as afinancial adviser 4
  5. 5. Privacy onFacebook 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 LisaImage credits: Shutterstock.com 7
  8. 8. Which of these statementsis 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 layersAppearance Can‟t read itConversation Can‟t answer it Can‟t achieveRelationship my goal 9
  10. 10. A good form works well across all three layersAppearance Lovely and legibleConversation Easy questions, obvious answers Goals achievedRelationship (mine and yours) 10
  11. 11. Live siteBetasite 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 Focus on what your users need to do(aboutrelationship) 19 Image credit: Fraser Smith
  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 Put the first thing first(aboutrelationship) 23 Image credit: Per Ola Wiberg
  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 Use the same words all the way through(aboutconversation) 30 Image credit: Paul Luffel (PakaLoeff)
  31. 31. 31
  32. 32. Suggestion:put the help on the same page 32
  33. 33. Form tip 4 Put just enough help where the user needs it(aboutconversation) 33 Image credit: Betsy Weber
  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 A B C Where to put the button? 35
  36. 36. In eye-tracking studies, I observed this Looks Looks here Then looks here second here last first for button 3 1 2 36
  37. 37. A quick look at buttons. 37
  38. 38. A second suggstion 38
  39. 39. Appearance Best place for a button:Tip aligned with left-hand end of text entry boxes 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 40 Schema from “Forms that work: Designing web forms for usability”
  41. 41. Recently I had to fill in this form And I succeeded, because the task was important 41
  42. 42. More resources onhttp://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 Jarretttwitter @cjformscaroline.jarrett@effortmark.co.uk 45
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×