Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
November 2012U sa b ility o f w e b fo rm sPractical guidelinesthat you can easily follow  Suffix    Mr.  First Name    Mi...
Introduction  What is a form?— Why forms matter— What this talk is about— Three layers of the form— Processes
Why forms matter— Forms are everywhere
Why forms matter— Forms are everywhere— Checkout, registration, data entry
Why forms matter— Fo ms are everywhere     r— Checkout, registration, data entry— Bad forms can have  serious consequences
Why forms matter— Fo ms are everywhere     r— Checkout, registration, data entry— Bad forms can have  serious consequences...
What this talk is about— How to design good forms— How to avoid design mistakes
Three layers of the form  Three layers of the form— Relationtship— Conversation— Appearance
Three layers of the formThe relationship of a formis the relationship betweenthe organization that is askingthe questions ...
Three layers of the formThe conversation of a formcomes from the questions thatit asks, any other instructions,and the way...
Three layers of the formThe appearance of a formis the way that it looks:the arrangement of text,input areas, graphics,and...
Processes— A messy but typical process
Processes                     First draft appears                     from somewhere                                      ...
Processes—A   m   essy but typical process— Methodical process that  actually works
Relationship             Conversation               Appearance Persuading       Making        Writing useful    Taking car...
Part #1  Relationship— Persuading people to answer— Asking for the right information
Persuading people to answer— If you understand people,  you design better forms
Persuading people to answer  How people react to forms:— Readers— Rushers— Refusers
Persuading people to answer  Three rules that influence  response rates:— Establish trust— Reduce social costs— Increase r...
Persuading people to answerHow long can a form be?
Persuading people to answer   Rewards                    Effort                    Trust
Asking for the right information— Asking for information  that you don’t need is bad
Asking for the right information— As ing for information      k  that you don’t need is bad— Find out why you need  the in...
Asking for the right information— Check with stakeholders— Check with people who work  with the information
Asking for the right information— Users will assume that you will  actually use the information  you request, so make sure...
Asking for the right information— Find out what your competitors  and similar organizations  are doing
Part #2  Conversation— Making questions easy to answer— Writing instructions— Choosing controls— Making the form flow easily
Making questions easy to answerHow does a user answeringa question on a form?
Making questions easy to answer— Understand the question
Making questions easy to answer— Understand the question— Find the answer
Making questions easy to answer— Understand the question— Find the answer— Judge the answer
Making questions easy to answer— Understand the question— Find the answer— Judge the answer— Put the answer on the form
Making questions easy to answerHow to make these stepsas easy as possible?
Making questions easy to answer— As about concepts     k  that the users are familiar with,  using words that they  unders...
Making questions easy to answer— Ask one question at a time
Making questions easy to answer— As one question at a time     k— Turn negative questions  into positive ones
Making questions easy to answer— Ask one question at a time— Turn negative questions  into positive ones— Clarify meaning ...
Making questions easy to answer— Ask one question at a time— Turn negative questions  into positive ones— Clarify meaning ...
Making questions easy to answer— Th nk about how users find     i  the answer
Making questions easy to answer— Think about how users find  the answer— Should you offer help  about where an answer  cou...
Making questions easy to answer— Th nk about whether users     i  will want to answer
Making questions easy to answer— Th nk about whether users     i  will want to answer— Is this the right moment  in the re...
Making questions easy to answer— An think about forcing users      d  into your options
Making questions easy to answer— An think about forcing users      d  into your options— Could you offer an “other” option...
Writing instructionsAny text that is not a questionis an instruction
Writing instructionsWhere to begin?
Writing instructions— A ood title that says     g  what the form is for
Writing instructions— A ood title that says     g  what the form is for— A list of anything that users  might have to gath...
Writing instructions— So ething that tells users      m  how to get help
Writing instructions— So ething that tells users      m  how to get help— A thank-you message  at the end that says what  ...
Writing instructions  For better instructions:— Write them in plain language
Writing instructions  For better instructions:— Wr te them in plain language      i— Place them to where  they are needed
Writing instructions  For better instructions:— Write them in plain language— Place them to where  they are needed— Cut th...
Choosing controlsHow to chooseappropriate controls?
Choosing controls— Is it more natural to type  rather than select?
Choosing controls— Is it more natural to type  rather than select?— Are the answers easily mistyped?
Choosing controls— Is it more natural to type  rather than select?— Are the answers easily mistyped?— How many options are...
Choosing controls— Is it more natural to type  rather than select?— Are the answers easily mistyped?— How many options are...
Choosing controls— Are the options  visually distinctive?
Choosing controls— Are the options  visually distinctive?— Does the user need to  see the options to  understand the quest...
Choosing controlsConsider specialist controls —cautiously
Making the form flow easily“Information forms by topic Break up long consists of differences that make a difference”
Making the form flow easilyProvide a clear scan linefrom start to finish
Break up long forms by topic
Making the form flow easilyBreak up long forms by topic
Making the form flow easily  Break up long forms by topic— Crush the fields onto  as few pages as possible— Split across m...
Making the form flow easily— Keep to one topic at a time
Making the form flow easily— Keep to one topic at a time— Ask anticipated questions before  surprising ones, and less intr...
Making the form flow easilyUse progress indicators
Making the form flow easily  Use progress indicators— Form is a defined series of steps
Making the form flow easily  Use progress indicators— Form is a defined series of steps— There is a real progress from  on...
Making the form flow easily  Use progress indicators— Form is a defined series of steps— There is a real progress from  on...
Making the form flow easilyUse summary menus
Making the form flow easily  Use summary menus— Form don’t really progress
Making the form flow easily  Use summary menus— Form don’t really progress— User is allowed to complete  the steps in any ...
Making the form flow easily  Use summary menus— Form don’t really progress— User is allowed to complete  the steps in any ...
Making the form flow easily— Avoid tabs
Making the form flow easily— Avoid tabs— Avoid pages that change   without warning
Making the form flow easily— Avoid tabs— Avoid pages that change   without warning— It’s OK to change pages  on user command
Making the form flow easilyBe gentle with errors
Making the form flow easily  Be gentle with errors— Use validation
Making the form flow easily  Be gentle with errors— Use validation— Be polite
Making the form flow easilyFinish the conversation smoothly
Making the form flow easily  Finish the conversation smoothly— Provide a “thank you”
Making the form flow easily  Finish the conversation smoothly— Provide a “thank you”— Let the user know  what will happen ...
Making the form flow easily  Finish the conversation smoothly— Provide a “thank you”— Let the user know  what will happen ...
Part #3  Appearance— Taking care of the details— Making a form look easy
Taking care of the detailsDon’t stress over the details
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
Taking care of the details  Don’t stress over the details— Decide on one way to deal with  each detail and then stick to i...
Taking care of the details  Don’t stress over the details— Decide on one way to deal with  each detail and then stick to i...
Taking care of the details  Labels— Stick the label to its field— Don’t use colons— Use sentence case— Labels in bold are ...
Taking care of the details  Top-aligned labels— The best way in terms of speed— Long questions— Consumes screen real estate
Taking care of the details  Right-aligned labels— Not so many questions— Short questions— Easy answers
Taking care of the details  Left-aligned labels— The slowest option— Lots of questions— Long questions— Complex answers
Taking care of the details  Labels within fields— Extreme space constraints— Ensure the right interaction
Taking care of the details  Fields— Different field lenghts provide  meaningful affordances— When there’s clearly more  th...
Taking care of the details  Indicating required fields— Use * for required— Use (optional) for nonrequired— Include explan...
Taking care of the details  Buttons— Avoid secondary actions on forms  whenever possible— Otherwise ensure that there  is ...
Making a form look easy“Attractive things works better”
Making a form look easy— Make sure users know who you are:  logos and branding
Making a form look easy— Make sure users know who you are:  logos and branding— Check your colors for legibility
Making a form look easy— Make sure users know who you are:  logos and branding— Check your colors for legibility— Use grids
Making a form look easy— Make sure users know who you are:  logos and branding— Check your colors for legibility— Use grid...
Making a form look easy— Make sure users know who you are:  logos and branding— Check your colors for legibility— Use grid...
Part #4  Testing— Us bility testing is easy            a  and gets quick results
Testing— “H y you” test     e— If the client can’t afford or  is not interested in performing  a user test, use personas
Testing— Test with more users  (five is usually enough)— Try to get “real” users
Thank you.
Web forms usability
Web forms usability
Web forms usability
Web forms usability
Web forms usability
Web forms usability
Web forms usability
Web forms usability
Web forms usability
Upcoming SlideShare
Loading in …5
×

Web forms usability

1,028 views

Published on

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

  • Be the first to comment

  • Be the first to like this

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.

×