Design tips for complex forms Malta 2012
Download as PPTX, PDF8 likes7,751 views
This document provides design tips for complex forms based on principles of usability. It discusses how complexity can affect a form's appearance, the conversation with the user, and the relationship between the form and the user's goals. Tips include focusing on the user's needs, putting the first task first, using consistent language, providing just enough help where needed, and placing buttons in alignment with text boxes for optimal visibility. Complex forms require consideration of all three layers - appearance, conversation, and relationship - to ensure the user can successfully complete the important task.
Design tips for complex forms Malta 2012
- 1. Design tips for complex forms Malta 2012 Caroline Jarrett
- 2. This form looks appealing, the questions are simple, the task is easy Image credit: www.swiths.com 2
- 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. Apply to be authorised as a financial adviser 4
- 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 Lisa Image credits: Shutterstock.com 7
- 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. 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. 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
- 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
- 19. Form tip 1 (about relationship) Focus on what your users need to do Image credit: Fraser Smith 19
- 21. Task: find the right form 21
- 22. What do you need to do first? 22
- 23. Form tip 2 (about relationship) Put the first thing first Image credit: Per Ola Wiberg 23
- 24. Let’s try that in the UK: ‘beta’ version of gov.uk 24
- 25. 25
- 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 (about conversation) Use the same words all the way through Image credit: Paul Luffel (PakaLoeff) 30
- 31. 31
- 32. Suggestion: put the help on the same page 32
- 33. Form tip 4 (about conversation) Put just enough help where the user needs it Image credit: Betsy Weber 33
- 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 Where to put the button? A B C 35
- 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. A quick look at buttons. 37
- 39. Appearance Tip Best place for a button: aligned with left-hand end of text entry boxes Appearance Tip 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 Schema from “Forms that work: Designing web forms for usability” 40
- 41. Recently I had to fill in this form And I succeeded, because the task was important 41
- 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