Design tips for complex forms Malta 2012

  • 8,446 views
Uploaded on

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

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,446
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
74
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Design tipsfor complex formsMalta 2012Caroline Jarrett
  • 2. This form looks appealing,the questions are simple,the task is easy 2Image credit: www.swiths.com
  • 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. Apply to beauthorised as afinancial adviser 4
  • 5. Privacy onFacebook http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html 5
  • 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. Three women do their tax Anna Maria LisaImage credits: Shutterstock.com 7
  • 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. Users experience a form in three layersAppearance Can‟t read itConversation Can‟t answer it Can‟t achieveRelationship my goal 9
  • 10. A good form works well across all three layersAppearance Lovely and legibleConversation Easy questions, obvious answers Goals achievedRelationship (mine and yours) 10
  • 11. Live siteBetasite 11
  • 12. Task: find the right form 12
  • 13. Let‟s see what‟s visible on a typical laptop
  • 14. Next click? 14
  • 15. That „Income Tax Return‟ link… isn‟t a link 15
  • 16. Ah ha, there it is 16
  • 17. A quick suggestion? 17
  • 18. A quick suggestion? 18
  • 19. Form tip 1 Focus on what your users need to do(aboutrelationship) 19 Image credit: Fraser Smith
  • 20. Let‟s keep clicking 20
  • 21. Task: find the right form 21
  • 22. What do you need to do first? 22
  • 23. Form tip 2 Put the first thing first(aboutrelationship) 23 Image credit: Per Ola Wiberg
  • 24. Let‟s try that in the UK: „beta‟ version of gov.uk 24
  • 25. 25
  • 26. Click or scroll? 26
  • 27. I‟m a new user 27
  • 28. Um, um, um… not so sure here 28
  • 29. Um, um, um… where is „tax return‟? 29
  • 30. Form tip 3 Use the same words all the way through(aboutconversation) 30 Image credit: Paul Luffel (PakaLoeff)
  • 31. 31
  • 32. Suggestion:put the help on the same page 32
  • 33. Form tip 4 Put just enough help where the user needs it(aboutconversation) 33 Image credit: Betsy Weber
  • 34. A quick look at buttons. 34
  • 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. In eye-tracking studies, I observed this Looks Looks here Then looks here second here last first for button 3 1 2 36
  • 37. A quick look at buttons. 37
  • 38. A second suggstion 38
  • 39. Appearance Best place for a button:Tip aligned with left-hand end of text entry boxes Next 39
  • 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. Recently I had to fill in this form And I succeeded, because the task was important 41
  • 42. More resources onhttp://www.slideshare.net/cjforms 42
  • 43. Thanks to Morgan Kaufmann for these books 43
  • 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. Caroline Jarretttwitter @cjformscaroline.jarrett@effortmark.co.uk 45