Downloaded 15 times
Uploaded bySerhiy Baryshniev
Web forms usability
This document provides guidelines for designing usable web forms. It discusses three layers of form design: the relationship between the form and user, the conversation created by the questions and instructions, and the appearance of the form. Key recommendations include understanding user perspectives, asking only for necessary information, making questions easy to understand and answer, using clear instructions and controls, organizing the form flow logically, and testing forms with real users. The document emphasizes designing forms that create good user experiences through an effective balance of these layers.
Web forms usability
- 1. November 2012 U sab 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 Whatis 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 talkis about — How to design good forms — How to avoid design mistakes
- 14. Three layers ofthe form Three layers of the form — Relationtship — Conversation — Appearance
- 15. Three layers ofthe 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 ofthe 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 ofthe 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 messybut 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 toanswer — If you understand people, you design better forms
- 24. Persuading people toanswer How people react to forms: — Readers — Rushers — Refusers
- 25. Persuading people toanswer Three rules that influence response rates: — Establish trust — Reduce social costs — Increase rewards
- 26. Persuading people toanswer How long can a form be?
- 27. Persuading people toanswer Rewards Effort Trust
- 28. Asking for theright information — Asking for information that you don’t need is bad
- 29. Asking for theright information — As ing for information k that you don’t need is bad — Find out why you need the information
- 30. Asking for theright information — Check with stakeholders — Check with people who work with the information
- 31. Asking for theright 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 theright 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 easyto answer How does a user answering a question on a form?
- 35. Making questions easyto answer — Understand the question
- 36. Making questions easyto answer — Understand the question — Find the answer
- 37. Making questions easyto answer — Understand the question — Find the answer — Judge the answer
- 38. Making questions easyto answer — Understand the question — Find the answer — Judge the answer — Put the answer on the form
- 39. Making questions easyto answer How to make these steps as easy as possible?
- 40. Making questions easyto answer — As about concepts k that the users are familiar with, using words that they understand
- 41. Making questions easyto answer — Ask one question at a time
- 42. Making questions easyto answer — As one question at a time k — Turn negative questions into positive ones
- 43. Making questions easyto answer — Ask one question at a time — Turn negative questions into positive ones — Clarify meaning by careful grouping
- 44. Making questions easyto 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 easyto answer — Th nk about how users find i the answer
- 46. Making questions easyto answer — Think about how users find the answer — Should you offer help about where an answer could come from?
- 47. Making questions easyto answer — Th nk about whether users i will want to answer
- 48. Making questions easyto 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 easyto answer — An think about forcing users d into your options
- 50. Making questions easyto 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 textthat is not a question is an instruction
- 52.
- 53. Writing instructions — Aood title that says g what the form is for
- 54. Writing instructions — Aood 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 — Soething that tells users m how to get help
- 56. Writing instructions — Soething 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 tochoose appropriate controls?
- 61. Choosing controls — Isit more natural to type rather than select?
- 62. Choosing controls — Isit more natural to type rather than select? — Are the answers easily mistyped?
- 63. Choosing controls — Isit more natural to type rather than select? — Are the answers easily mistyped? — How many options are there?
- 64. Choosing controls — Isit 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 — Arethe options visually distinctive?
- 66. Choosing controls — Arethe options visually distinctive? — Does the user need to see the options to understand the question?
- 67. Choosing controls Consider specialistcontrols — cautiously
- 68. Making the formflow easily “Information forms by topic Break up long consists of differences that make a difference”
- 69. Making the formflow easily Provide a clear scan line from start to finish
- 70. Break up longforms by topic
- 71. Making the formflow easily Break up long forms by topic
- 72. Making the formflow 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 formflow easily — Keep to one topic at a time
- 74. Making the formflow easily — Keep to one topic at a time — Ask anticipated questions before surprising ones, and less intrusive before more intrusive
- 75. Making the formflow easily Use progress indicators
- 77. Making the formflow easily Use progress indicators — Form is a defined series of steps
- 78. Making the formflow easily Use progress indicators — Form is a defined series of steps — There is a real progress from one step to another
- 79. Making the formflow 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 formflow easily Use summary menus
- 82. Making the formflow easily Use summary menus — Form don’t really progress
- 83. Making the formflow easily Use summary menus — Form don’t really progress — User is allowed to complete the steps in any order
- 84. Making the formflow 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 formflow easily — Avoid tabs
- 86. Making the formflow easily — Avoid tabs — Avoid pages that change without warning
- 87. Making the formflow easily — Avoid tabs — Avoid pages that change without warning — It’s OK to change pages on user command
- 88. Making the formflow easily Be gentle with errors
- 89. Making the formflow easily Be gentle with errors — Use validation
- 90. Making the formflow easily Be gentle with errors — Use validation — Be polite
- 91. Making the formflow easily Finish the conversation smoothly
- 92. Making the formflow easily Finish the conversation smoothly — Provide a “thank you”
- 93. Making the formflow easily Finish the conversation smoothly — Provide a “thank you” — Let the user know what will happen next
- 94. Making the formflow 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 ofthe details Don’t stress over the details
- 97. Taking care ofthe details Don’t stress over the details — Decide on one way to deal with each detail and then stick to it
- 98. Taking care ofthe 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 ofthe 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 ofthe 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 ofthe details Top-aligned labels — The best way in terms of speed — Long questions — Consumes screen real estate
- 103. Taking care ofthe details Right-aligned labels — Not so many questions — Short questions — Easy answers
- 104. Taking care ofthe details Left-aligned labels — The slowest option — Lots of questions — Long questions — Complex answers
- 105. Taking care ofthe details Labels within fields — Extreme space constraints — Ensure the right interaction
- 106. Taking care ofthe 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 ofthe details Indicating required fields — Use * for required — Use (optional) for nonrequired — Include explanation of the indicator you choose
- 108. Taking care ofthe details Buttons — Avoid secondary actions on forms whenever possible — Otherwise ensure that there is a clear visual distinction
- 109. Making a formlook easy “Attractive things works better”
- 110. Making a formlook easy — Make sure users know who you are: logos and branding
- 111. Making a formlook easy — Make sure users know who you are: logos and branding — Check your colors for legibility
- 112. Making a formlook easy — Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids
- 113. Making a formlook easy — Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids — Use grouping
- 114. Making a formlook 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 yyou” test e — If the client can’t afford or is not interested in performing a user test, use personas
- 117. Testing — Test withmore users (five is usually enough) — Try to get “real” users
- 118.