Web forms usability
•
0 recomendaciones•682 vistas
My recent presentation on web forms that is generally based on Caroline Jarrett's book
Recomendados
Más contenido relacionado
Similar a Web forms usability
Similar a Web forms usability (20)
Web forms usability
- 1. November 2012 U sa b ility o f w e b fo rm s Practical guidelines that you can easily follow Suffix Mr. First Name Middle Name (optional) Harry Bill Last Name Generation (optional) Bradley Junior Patient ID Patient Alias
- 2. Introduction What is a form? — Why forms matter — What this talk is about — Three layers of the form — Processes
- 3. Why forms matter — Forms are everywhere
- 4. Why forms matter — Forms are everywhere — Checkout, registration, data entry
- 8. Why forms matter — Fo ms are everywhere r — Checkout, registration, data entry — Bad forms can have serious consequences
- 10. Why forms matter — Fo ms are everywhere r — Checkout, registration, data entry — Bad forms can have serious consequences — Good forms create good experiences
- 13. What this talk is about — How to design good forms — How to avoid design mistakes
- 14. Three layers of the form Three layers of the form — Relationtship — Conversation — Appearance
- 15. Three layers of the form The relationship of a form is the relationship between the organization that is asking the questions and the person who is answering
- 16. Three layers of the form The conversation of a form comes from the questions that it asks, any other instructions, and the way the form is arranged into topics
- 17. Three layers of the form The appearance of a form is the way that it looks: the arrangement of text, input areas, graphics, and the use of color
- 18. Processes — A messy but typical process
- 19. Processes First draft appears from somewhere Try to persuade stakeholders to change what they want Write and rewrite questions Jiggle layout Pull together to make the form something logical look tidy for topic order Launch it – no time for testing
- 20. Processes —A m essy but typical process — Methodical process that actually works
- 21. Relationship Conversation Appearance Persuading Making Writing useful Taking care people questions easy instructions of the details to answer to answer Asking for Making Making the right Choosing the form the form information forms controls flow easily look easy Testing
- 22. Part #1 Relationship — Persuading people to answer — Asking for the right information
- 23. Persuading people to answer — If you understand people, you design better forms
- 24. Persuading people to answer How people react to forms: — Readers — Rushers — Refusers
- 25. Persuading people to answer Three rules that influence response rates: — Establish trust — Reduce social costs — Increase rewards
- 26. Persuading people to answer How long can a form be?
- 27. Persuading people to answer Rewards Effort Trust
- 28. Asking for the right information — Asking for information that you don’t need is bad
- 29. Asking for the right information — As ing for information k that you don’t need is bad — Find out why you need the information
- 30. Asking for the right information — Check with stakeholders — Check with people who work with the information
- 31. Asking for the right information — Users will assume that you will actually use the information you request, so make sure you do use it in a sensible way
- 32. Asking for the right information — Find out what your competitors and similar organizations are doing
- 33. Part #2 Conversation — Making questions easy to answer — Writing instructions — Choosing controls — Making the form flow easily
- 34. Making questions easy to answer How does a user answering a question on a form?
- 35. Making questions easy to answer — Understand the question
- 36. Making questions easy to answer — Understand the question — Find the answer
- 37. Making questions easy to answer — Understand the question — Find the answer — Judge the answer
- 38. Making questions easy to answer — Understand the question — Find the answer — Judge the answer — Put the answer on the form
- 39. Making questions easy to answer How to make these steps as easy as possible?
- 40. Making questions easy to answer — As about concepts k that the users are familiar with, using words that they understand
- 41. Making questions easy to answer — Ask one question at a time
- 42. Making questions easy to answer — As one question at a time k — Turn negative questions into positive ones
- 43. Making questions easy to answer — Ask one question at a time — Turn negative questions into positive ones — Clarify meaning by careful grouping
- 44. Making questions easy to answer — Ask one question at a time — Turn negative questions into positive ones — Clarify meaning by careful grouping — Get rid of decision points
- 45. Making questions easy to answer — Th nk about how users find i the answer
- 46. Making questions easy to answer — Think about how users find the answer — Should you offer help about where an answer could come from?
- 47. Making questions easy to answer — Th nk about whether users i will want to answer
- 48. Making questions easy to answer — Th nk about whether users i will want to answer — Is this the right moment in the relationship to ask this question?
- 49. Making questions easy to answer — An think about forcing users d into your options
- 50. Making questions easy to answer — An think about forcing users d into your options — Could you offer an “other” option to cater for the unexpected?
- 51. Writing instructions Any text that is not a question is an instruction
- 52. Writing instructions Where to begin?
- 53. Writing instructions — A ood title that says g what the form is for
- 54. Writing instructions — A ood title that says g what the form is for — A list of anything that users might have to gather to answer the questions
- 55. Writing instructions — So ething that tells users m how to get help
- 56. Writing instructions — So ething that tells users m how to get help — A thank-you message at the end that says what will happen next
- 57. Writing instructions For better instructions: — Write them in plain language
- 58. Writing instructions For better instructions: — Wr te them in plain language i — Place them to where they are needed
- 59. Writing instructions For better instructions: — Write them in plain language — Place them to where they are needed — Cut the ones that aren’t needed
- 60. Choosing controls How to choose appropriate controls?
- 61. Choosing controls — Is it more natural to type rather than select?
- 62. Choosing controls — Is it more natural to type rather than select? — Are the answers easily mistyped?
- 63. Choosing controls — Is it more natural to type rather than select? — Are the answers easily mistyped? — How many options are there?
- 64. Choosing controls — Is it more natural to type rather than select? — Are the answers easily mistyped? — How many options are there? — Is the user allowed to select more than one option?
- 65. Choosing controls — Are the options visually distinctive?
- 66. Choosing controls — Are the options visually distinctive? — Does the user need to see the options to understand the question?
- 67. Choosing controls Consider specialist controls — cautiously
- 68. Making the form flow easily “Information forms by topic Break up long consists of differences that make a difference”
- 69. Making the form flow easily Provide a clear scan line from start to finish
- 70. Break up long forms by topic
- 71. Making the form flow easily Break up long forms by topic
- 72. Making the form flow easily Break up long forms by topic — Crush the fields onto as few pages as possible — Split across multiple pages by dividing the form into topics
- 73. Making the form flow easily — Keep to one topic at a time
- 74. Making the form flow easily — Keep to one topic at a time — Ask anticipated questions before surprising ones, and less intrusive before more intrusive
- 75. Making the form flow easily Use progress indicators
- 77. Making the form flow easily Use progress indicators — Form is a defined series of steps
- 78. Making the form flow easily Use progress indicators — Form is a defined series of steps — There is a real progress from one step to another
- 79. Making the form flow easily Use progress indicators — Form is a defined series of steps — There is a real progress from one step to another — Form can be easily completed in one session
- 80. Making the form flow easily Use summary menus
- 82. Making the form flow easily Use summary menus — Form don’t really progress
- 83. Making the form flow easily Use summary menus — Form don’t really progress — User is allowed to complete the steps in any order
- 84. Making the form flow easily Use summary menus — Form don’t really progress — User is allowed to complete the steps in any order — User is allowed to store the form and come back to it later
- 85. Making the form flow easily — Avoid tabs
- 86. Making the form flow easily — Avoid tabs — Avoid pages that change without warning
- 87. Making the form flow easily — Avoid tabs — Avoid pages that change without warning — It’s OK to change pages on user command
- 88. Making the form flow easily Be gentle with errors
- 89. Making the form flow easily Be gentle with errors — Use validation
- 90. Making the form flow easily Be gentle with errors — Use validation — Be polite
- 91. Making the form flow easily Finish the conversation smoothly
- 92. Making the form flow easily Finish the conversation smoothly — Provide a “thank you”
- 93. Making the form flow easily Finish the conversation smoothly — Provide a “thank you” — Let the user know what will happen next
- 94. Making the form flow easily Finish the conversation smoothly — Provide a “thank you” — Let the user know what will happen next — Offer a suitable next landing point within your website
- 95. Part #3 Appearance — Taking care of the details — Making a form look easy
- 96. Taking care of the details Don’t stress over the details
- 97. Taking care of the details Don’t stress over the details — Decide on one way to deal with each detail and then stick to it
- 98. Taking care of the details Don’t stress over the details — Decide on one way to deal with each detail and then stick to it — Create a mini-style guide for your team or organization
- 100. Taking care of the details Don’t stress over the details — Decide on one way to deal with each detail and then stick to it — Create a mini-style guide for your team or organization — Be flexible
- 101. Taking care of the details Labels — Stick the label to its field — Don’t use colons — Use sentence case — Labels in bold are harder to read
- 102. Taking care of the details Top-aligned labels — The best way in terms of speed — Long questions — Consumes screen real estate
- 103. Taking care of the details Right-aligned labels — Not so many questions — Short questions — Easy answers
- 104. Taking care of the details Left-aligned labels — The slowest option — Lots of questions — Long questions — Complex answers
- 105. Taking care of the details Labels within fields — Extreme space constraints — Ensure the right interaction
- 106. Taking care of the details Fields — Different field lenghts provide meaningful affordances — When there’s clearly more than one way to format an answer, consider flexible field
- 107. Taking care of the details Indicating required fields — Use * for required — Use (optional) for nonrequired — Include explanation of the indicator you choose
- 108. Taking care of the details Buttons — Avoid secondary actions on forms whenever possible — Otherwise ensure that there is a clear visual distinction
- 109. Making a form look easy “Attractive things works better”
- 110. Making a form look easy — Make sure users know who you are: logos and branding
- 111. Making a form look easy — Make sure users know who you are: logos and branding — Check your colors for legibility
- 112. Making a form look easy — Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids
- 113. Making a form look easy — Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids — Use grouping
- 114. Making a form look easy — Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids — Use grouping — Avoid two-column forms
- 115. Part #4 Testing — Us bility testing is easy a and gets quick results
- 116. Testing — “H y you” test e — If the client can’t afford or is not interested in performing a user test, use personas
- 117. Testing — Test with more users (five is usually enough) — Try to get “real” users
- 118. Thank you.