Web forms usability

954 views

Published on

My recent presentation on web forms that is generally based on Caroline Jarrett's book

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

  • Be the first to like this

No Downloads
Views
Total views
954
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web forms usability

  1. 1. November 2012U sa b ility o f w e b fo rm sPractical guidelinesthat you can easily follow Suffix Mr. First Name Middle Name (optional) Harry Bill Last Name Generation (optional) Bradley Junior Patient ID Patient Alias
  2. 2. Introduction What is a form?— Why forms matter— What this talk is about— Three layers of the form— Processes
  3. 3. Why forms matter— Forms are everywhere
  4. 4. Why forms matter— Forms are everywhere— Checkout, registration, data entry
  5. 5. Why forms matter— Fo ms are everywhere r— Checkout, registration, data entry— Bad forms can have serious consequences
  6. 6. Why forms matter— Fo ms are everywhere r— Checkout, registration, data entry— Bad forms can have serious consequences— Good forms create good experiences
  7. 7. What this talk is about— How to design good forms— How to avoid design mistakes
  8. 8. Three layers of the form Three layers of the form— Relationtship— Conversation— Appearance
  9. 9. Three layers of the formThe relationship of a formis the relationship betweenthe organization that is askingthe questions and the personwho is answering
  10. 10. Three layers of the formThe conversation of a formcomes from the questions thatit asks, any other instructions,and the way the form isarranged into topics
  11. 11. Three layers of the formThe appearance of a formis the way that it looks:the arrangement of text,input areas, graphics,and the use of color
  12. 12. Processes— A messy but typical process
  13. 13. 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 formsomething logical look tidy for topic order Launch it – no time for testing
  14. 14. Processes—A m essy but typical process— Methodical process that actually works
  15. 15. 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
  16. 16. Part #1 Relationship— Persuading people to answer— Asking for the right information
  17. 17. Persuading people to answer— If you understand people, you design better forms
  18. 18. Persuading people to answer How people react to forms:— Readers— Rushers— Refusers
  19. 19. Persuading people to answer Three rules that influence response rates:— Establish trust— Reduce social costs— Increase rewards
  20. 20. Persuading people to answerHow long can a form be?
  21. 21. Persuading people to answer Rewards Effort Trust
  22. 22. Asking for the right information— Asking for information that you don’t need is bad
  23. 23. Asking for the right information— As ing for information k that you don’t need is bad— Find out why you need the information
  24. 24. Asking for the right information— Check with stakeholders— Check with people who work with the information
  25. 25. 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
  26. 26. Asking for the right information— Find out what your competitors and similar organizations are doing
  27. 27. Part #2 Conversation— Making questions easy to answer— Writing instructions— Choosing controls— Making the form flow easily
  28. 28. Making questions easy to answerHow does a user answeringa question on a form?
  29. 29. Making questions easy to answer— Understand the question
  30. 30. Making questions easy to answer— Understand the question— Find the answer
  31. 31. Making questions easy to answer— Understand the question— Find the answer— Judge the answer
  32. 32. Making questions easy to answer— Understand the question— Find the answer— Judge the answer— Put the answer on the form
  33. 33. Making questions easy to answerHow to make these stepsas easy as possible?
  34. 34. Making questions easy to answer— As about concepts k that the users are familiar with, using words that they understand
  35. 35. Making questions easy to answer— Ask one question at a time
  36. 36. Making questions easy to answer— As one question at a time k— Turn negative questions into positive ones
  37. 37. Making questions easy to answer— Ask one question at a time— Turn negative questions into positive ones— Clarify meaning by careful grouping
  38. 38. 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
  39. 39. Making questions easy to answer— Th nk about how users find i the answer
  40. 40. Making questions easy to answer— Think about how users find the answer— Should you offer help about where an answer could come from?
  41. 41. Making questions easy to answer— Th nk about whether users i will want to answer
  42. 42. 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?
  43. 43. Making questions easy to answer— An think about forcing users d into your options
  44. 44. 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?
  45. 45. Writing instructionsAny text that is not a questionis an instruction
  46. 46. Writing instructionsWhere to begin?
  47. 47. Writing instructions— A ood title that says g what the form is for
  48. 48. 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
  49. 49. Writing instructions— So ething that tells users m how to get help
  50. 50. 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
  51. 51. Writing instructions For better instructions:— Write them in plain language
  52. 52. Writing instructions For better instructions:— Wr te them in plain language i— Place them to where they are needed
  53. 53. Writing instructions For better instructions:— Write them in plain language— Place them to where they are needed— Cut the ones that aren’t needed
  54. 54. Choosing controlsHow to chooseappropriate controls?
  55. 55. Choosing controls— Is it more natural to type rather than select?
  56. 56. Choosing controls— Is it more natural to type rather than select?— Are the answers easily mistyped?
  57. 57. Choosing controls— Is it more natural to type rather than select?— Are the answers easily mistyped?— How many options are there?
  58. 58. 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?
  59. 59. Choosing controls— Are the options visually distinctive?
  60. 60. Choosing controls— Are the options visually distinctive?— Does the user need to see the options to understand the question?
  61. 61. Choosing controlsConsider specialist controls —cautiously
  62. 62. Making the form flow easily“Information forms by topic Break up long consists of differences that make a difference”
  63. 63. Making the form flow easilyProvide a clear scan linefrom start to finish
  64. 64. Break up long forms by topic
  65. 65. Making the form flow easilyBreak up long forms by topic
  66. 66. 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
  67. 67. Making the form flow easily— Keep to one topic at a time
  68. 68. Making the form flow easily— Keep to one topic at a time— Ask anticipated questions before surprising ones, and less intrusive before more intrusive
  69. 69. Making the form flow easilyUse progress indicators
  70. 70. Making the form flow easily Use progress indicators— Form is a defined series of steps
  71. 71. 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
  72. 72. 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
  73. 73. Making the form flow easilyUse summary menus
  74. 74. Making the form flow easily Use summary menus— Form don’t really progress
  75. 75. Making the form flow easily Use summary menus— Form don’t really progress— User is allowed to complete the steps in any order
  76. 76. 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
  77. 77. Making the form flow easily— Avoid tabs
  78. 78. Making the form flow easily— Avoid tabs— Avoid pages that change without warning
  79. 79. Making the form flow easily— Avoid tabs— Avoid pages that change without warning— It’s OK to change pages on user command
  80. 80. Making the form flow easilyBe gentle with errors
  81. 81. Making the form flow easily Be gentle with errors— Use validation
  82. 82. Making the form flow easily Be gentle with errors— Use validation— Be polite
  83. 83. Making the form flow easilyFinish the conversation smoothly
  84. 84. Making the form flow easily Finish the conversation smoothly— Provide a “thank you”
  85. 85. Making the form flow easily Finish the conversation smoothly— Provide a “thank you”— Let the user know what will happen next
  86. 86. 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
  87. 87. Part #3 Appearance— Taking care of the details— Making a form look easy
  88. 88. Taking care of the detailsDon’t stress over the details
  89. 89. 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
  90. 90. 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
  91. 91. 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
  92. 92. 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
  93. 93. Taking care of the details Top-aligned labels— The best way in terms of speed— Long questions— Consumes screen real estate
  94. 94. Taking care of the details Right-aligned labels— Not so many questions— Short questions— Easy answers
  95. 95. Taking care of the details Left-aligned labels— The slowest option— Lots of questions— Long questions— Complex answers
  96. 96. Taking care of the details Labels within fields— Extreme space constraints— Ensure the right interaction
  97. 97. 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
  98. 98. Taking care of the details Indicating required fields— Use * for required— Use (optional) for nonrequired— Include explanation of the indicator you choose
  99. 99. Taking care of the details Buttons— Avoid secondary actions on forms whenever possible— Otherwise ensure that there is a clear visual distinction
  100. 100. Making a form look easy“Attractive things works better”
  101. 101. Making a form look easy— Make sure users know who you are: logos and branding
  102. 102. Making a form look easy— Make sure users know who you are: logos and branding— Check your colors for legibility
  103. 103. Making a form look easy— Make sure users know who you are: logos and branding— Check your colors for legibility— Use grids
  104. 104. Making a form look easy— Make sure users know who you are: logos and branding— Check your colors for legibility— Use grids— Use grouping
  105. 105. 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
  106. 106. Part #4 Testing— Us bility testing is easy a and gets quick results
  107. 107. Testing— “H y you” test e— If the client can’t afford or is not interested in performing a user test, use personas
  108. 108. Testing— Test with more users (five is usually enough)— Try to get “real” users
  109. 109. Thank you.

×