Web Forms Usability Workshop

49eec51ef4a3335cb3247a41d1f08971?s=47 Jay Stakelon
October 10, 2013

Web Forms Usability Workshop

Forms are the common language for exchanging information on the web. They should be friendly, effortless and intuitive.

I taught this workshop at General Assembly in Los Angeles in October 2013.

49eec51ef4a3335cb3247a41d1f08971?s=128

Jay Stakelon

October 10, 2013
Tweet

Transcript

  1. Jay Stakelon VP Product Design @Fullscreen WEB FORMS USABILITY WORKSHOP

  2. WEB FORMS USABILITY WORKSHOP 2 DESIGN PRINCIPLES

  3. WEB FORMS USABILITY WORKSHOP DESIGN PRINCIPLES 3 Why forms matter

  4. FORMS ARE THE STANDARD INTERFACE THAT PEOPLE USE TO SHARE

    INFORMATION
  5. WITH BUSINESSES http://signup.netflix.com/getstarted

  6. WITH SYSTEMS http://www.paypal.com

  7. WITH EACH OTHER http://facebook.com

  8. A COMMON LANGUAGE FOR INFORMATION EXCHANGE ON THE WEB

  9. Luke Wroblewski, Web Form Design: Filling in the Blanks 10%-40%

    ⬆ INCREASED COMPLETION RATES REDESIGNING A BAD FORM CAN GET YOU
  10. WEB FORMS USABILITY WORKSHOP DESIGN PRINCIPLES 10 Principles Form design

    is behavioral design Design from the outside-in for the user’s mental model Go for the Minimum Viable Ask Everything is measurable
  11. VISCERAL BEHAVIORAL REFLECTIVE Donald Norman, Emotional Design

  12. Indi Young, Mental Models DATABASE SCHEMA ORG CHART MENTAL MODEL

  13. MVP MVA Minimum Viable Ask Minimum Viable Product

  14. IT’S ALL MEASURABLE 

  15. WEB FORMS USABILITY WORKSHOP 15 FORM COMPONENTS

  16. WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 16 Labels The unsung

    heroes of form usability Top-aligned vs. right-aligned vs. left-aligned Inline labels and placeholder text Indicate what’s optional (or just remove it)
  17. None
  18. NAME EMAIL (optional) COMMENT

  19. TOP VS. RIGHT VS. LEFT ALIGNMENT http://css-tricks.com/label-placement-on-forms/

  20. HOW USERS SCAN FORMS

  21. ␡ ✓ ✓ Doesn’t reinforce relationship between label and input

    field 10x as long to scan the form as top-aligned labels Best completion rates 2x faster comprehension than right-aligned labels Accommodates different length labels Makes longer forms appear shorter If vertical space is at a premium http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php WHEN TO USE
  22. INLINE LABELS AND PLACEHOLDERS

  23. LABELS SHOULDN’T DISAPPEAR http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/ ␡ Generally: use inline placeholder text

    to reinforce input formatting or provide hints The HTML5 placeholder attribute generally doesn’t disappear on focus See https://edit.yahoo.com/registration for a good inline label interaction design ✓
  24. INDICATE WHAT’S OPTIONAL Try to keep it simple and minimize

    optional fields The most intuitive way to mark something as optional is with the word “optional”
  25. WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 25 Inputs Text boxes

    Single selectors Multiple selectors Other inputs
  26. TEXT BOXES Can be one single line or multiple lines

    Accepts free text input from the user
  27. http://www.tinymce.com/ http://basecamp.com https://developer.apple.com/library/ios/documentation http://developer.android.com/guide/topics/ui/controls.html

  28. SINGLE SELECTORS Allow a user to choose one mutually exclusive

    value from a set of existing options Or allow a user to toggle a single value
  29. https://developer.apple.com/library/ios/documentation http://developer.android.com/guide/topics/ui/controls.html http://harvesthq.github.io/chosen/

  30. MULTIPLE SELECTORS Allow a user to choose multiple values from

    a set of options Consider using autocomplete or a tag-style input instead of a standard HTML multiselect
  31. http://aehlke.github.io/tag-it/ http://harvesthq.github.io/chosen/ http://developer.android.com/guide/topics/ui/controls.html

  32. OTHER INPUTS  ⏲

  33. http://basecamp.com http://dropbox.com UPLOADING FILES Drag-and-drop is a best practice for

    browser-based file upload fields Ideally, forms should support both traditional file selection and drag-and-drop functionality
  34. https://github.com/dangrossman/bootstrap-daterangepicker https://developer.apple.com/library/ios/documentation http://developer.android.com/guide/topics/ui/controls.html DATES & TIMES Dates can be entered

    using free text, dropdowns or datepickers Free text is error-prone and puts the onus on the user Dropdowns are a good choice for birthdays Datepickers work for single dates as well as date ranges
  35. WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 35 Actions Primary actions:

    buttons Secondary actions: buttons or links Strive for visual and textual clarity Placement matters with multiple actions
  36. PRIMARY ACTIONS Primary actions either complete a task or move

    to the next step in a multi-step process Don’t settle for “Submit”: use descriptive, action-oriented copy The primary action should always be distinctly styled as a button or actionable element ␡
  37. SECONDARY ACTIONS Necessary actions that don’t move the user forward

    in a process or complete the task Actions like “Cancel”, “Back”, “Close” are all secondary They can be buttons or links http://www.forrst.com http://www.tadalist.com http://www.delicious.com
  38. VISUAL & TEXTUAL CLARITY ␡ Always make a clear visual

    distinction between primary and secondary actions Use pointed and unmistakably clear call-to-action copy
  39. PLACEMENT ⬅❓➡

  40. Luke Wroblewski, Primary & Secondary Actions in Web Forms http://www.lukew.com/ff/entry.asp?571

  41. ✓ ␡ ✓ ␡ ␡ ␡

  42. MULTI-STEP PROCESSES http://www.campaignmonitor.com When designing a multi-step form, it’s intuitive

    for the primary action (“Next”) to be on the right and secondary left
  43. WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 43 Help & messaging

    Inline help and user-activated help Provide suggestions and coach the user Use groupings and legends for context Be communicative about the system’s state
  44. HELP TEXT: INLINE & USER-ACTIVATED http://twitter.com http://casacertificada.pt Inline help: good

    for formatting hints, recommendations or brief explanations User-activated help: good for more complex asks or frequently-accessed forms
  45. COACHING

  46. Use placeholder/inline text to suggest formatting or give examples http://getsatisfaction.com

    PROVIDE SUGGESTIONS
  47. Make sure that your users know your good intentions Use

    help text to reassure users about their privacy and safety concerns http://wufoo.com http://teamtreehouse.com http://facebook.com TALK YOUR USERS THROUGH TOUGH SPOTS
  48. GROUP RELATED FIELDS

  49. GROUPINGS MAKE FORMS EASIER TO SCAN http://public-supply.com http://www.yahoo.com Using a

    legend or heading on a grouping allows the user to scan quickly Both visually obvious and subtle groupings of related fields are effective
  50. BE COMMUNICATIVE http://monolo.co Give feedback on the state of the

    system and your user’s submission status If you’re waiting for a response from the server, disable actions to prevent repeat submissions When things go well, celebrate!
  51. WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 51 Validation Inline validation

    vs. validating on submission The 3 C’s of error messaging: contextualized, clear and concise Don’t allow users to submit incomplete forms Give feedback and make suggestions
  52. INLINE VALIDATION IS A BEST PRACTICE ⚠

  53. Validate formatting inline: email addresses, phone numbers, credit card numbers

    Validate availability inline: usernames, domains Wait for the user to submit to check for required inputs (or even better, don’t allow submission without them) Generally, wait for the user to submit if data needs server-side verification: logins, purchases WHEN TO USE INLINE VALIDATION
  54. CONTEXTUALIZED CLEAR CONCISE   

  55. CLEAR & CONCISE http://www.foxycart.com/admin.php http://beatsmusic.com Good error messaging speaks to

    the user in plain language Give the user a clue how to correct the error ✓ ␡
  56. CONTEXTUALIZED http://somewherehq.com/auth/identity/register Use visual emphasis to show where something went

    awry Connect the error message with the form field By default, popular frameworks like Rails don’t contextualize their error messages ✓ ␡
  57. DON’T ALLOW INCOMPLETE SUBMISSIONS Disabling submission until a form is

    complete saves time and prevents frustration ⬇
  58. IMMEDIATE FEEDBACK & SUGGESTIONS Give unobtrusive inline feedback during completion

    Helps improve quality of user- generated inputs (ex: password strength) Helps users understand their status (characters left) http://developer.nokia.com/Community/Wiki/Mobile_Web_Design http://www.twitter.com
  59. WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 59 Exercise: FORM DISSECTION

    TIME 3 minutes RESOURCES http://patterntap.com/pattern/ post-good GOAL Partner up and select one form of decent heft from the examples that both of you brought to the workshop. If you didn’t bring any, feel bad for a moment, then use the example to the right. Go through the form field-by-field and component-by-component, and identify each element, input and component by type.
  60. WEB FORMS USABILITY WORKSHOP 60 USE CASES

  61. WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 61 User registration Keep

    it brief Consider common oAuth providers Allow users to progressively build out their profiles
  62. KEEP IT BRIEF http://new.myspace.com http://squareup.com/register Don’t ask for anything more

    than the basics up front Consider common oAuth providers (Facebook, Twitter, Google, etc.) to reduce friction even further
  63. USERS CAN PROGRESSIVELY ENGAGE Aim for minimal time-to-value for a

    new user Tie requests for information to the actions that require information Users can progressively build their profile and identity http://somewherehq.com/auth/identity/register
  64. WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 64 Lead generation The

    submit button is your call-to-action Coach and educate your users Shorter isn’t always better
  65. CALLS-TO-ACTION Don’t be generic Action-oriented: “Download”, “Sign up”, “Create”, “Read”

    Create incentives: “Free”, “Unlimited”, “Now” ␡
  66. ALWAYS BE COACHING Reinforce the benefits as your user completes

    the form
  67. SHORTER ISN’T ALWAYS BETTER http://offers.hubspot.com/free-icons Longer forms help qualify leads

    Depending on your business goals, a smaller quantity of qualified or well-segmented leads might be preferable More copy can actually increase quantity and quality of leads (http://www.quicksprout.com/2012/12/20)
  68. WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 68 Purchase flows Remove

    distractions Use progress meters to tell the user where they stand Prefill and persist data Allow your users to checkout as a guest
  69. REMOVE DISTRACTIONS http://amazon.com Strive to reduce the number of exit

    points from the checkout flow The less choices available, the more likely the user will follow your purchase funnel
  70. USE PROGRESS METERS http://amazon.com http://fab.com http://moo.com Progress bars show a

    clear path to completion and communicate the user’s position Don’t use numbered steps if one step can have multiple parts
  71. PREFILL & PERSIST http://store.apple.com http://public-supply.com ✓ ␡ Prefill potentially duplicative

    input fields: billing/shipping address is commonly the same Generally, default to options that let your users work less Always make sure to persist users’ data between steps or if a form doesn’t validate
  72. ALLOW GUEST CHECKOUT http://blog.rejoiner.com/2012/09/checkout-usability-crate-and-barrel/ Forcing customers to create an account

    in order to check out creates unnecessary friction BUT: repeat customers will appreciate the convenience
  73. WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 73 “Dark Patterns” Interfaces

    designed to mislead users Defaulting into unintended consequences Tricky language and messaging Optimized for short-term conversion vs. long-term gains
  74. http://darkpatterns.org TRICK QUESTIONS HIDDEN COSTS SNEAK INTO BASKET BAIT &

    SWITCH
  75. http://darkpatterns.org/library/hidden_costs/ DEFAULTING INTO PURCHASES

  76. http://darkpatterns.org/library/trick_questions/ TRICKY LANGUAGE

  77. “Dark patterns tend to perform very well in A/B and

    multivariate tests simply because a design that tricks users into doing something is likely to achieve more conversions than one that allows users to make an informed decision.” Harry Brignull, Dark Patterns: Deception vs. Honesty in UI Design http://alistapart.com/article/dark-patterns-deception-vs.-honesty-in-ui-design
  78. http://techcrunch.com/2013/09/27/not-so-vip http://techcrunch.com/2013/05/04/path-blocked

  79. WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 79 Mobile web Don’t

    rely on inline labels Top-align labels Vertically align input fields in a single column Tab order is important Use HTML5 input types CAPTCHAs: just don’t, please
  80. http://baymard.com/blog/mobile-forms-avoid-inline-labels STEER CLEAR OF INLINE LABELS ✓ ␡ ✓ ␡

    Only use inline labels for extremely intuitive form inputs: username/password, for example
  81. ONE COLUMN WITH TOP-ALIGNED LABELS ✓ ␡ ␡

  82. http://yelp.com Mobile keyboards with previous/next buttons rely on the tabindex

    attribute VERIFY INPUTS’ TAB ORDER
  83. <input type=”email”> <input type=”url”> <input type=”date”> and 10 more... HTML5

    INPUT TYPES http://sixrevisions.com/html5/new-html5-form-input-types/ HTML5 input types signal the mobile OS to use a specialized keyboard
  84. NO CAPTCHAs (PLEASE) http://cheezburger.com/6394194432 https://twitter.com/joelmmathis/status/86602335031267328

  85. http://www.josscrowcroſt.com/demos/motioncaptcha/ http://groups.ischool.berkeley.edu/mobilecaptcha/tickets.html

  86. WEB FORMS USABILITY WORKSHOP USE CASES 86 Exercise: HOT OR

    NOT, THE WEB FORMS EDITION TIME 5 minutes RESOURCES http://patterntap.com http://www.wufoo.com/gallery http://www.formstack.com/ examples GOAL With a partner, review the form examples that you both brought with you to the workshop today. Using the best practices we’ve discussed for different use cases, pick one that you agree is “hot” and another that’s “not.” Make a list of why you think they work or don’t work for their use case. Suggest improvements! Be ready to share your thoughts with the rest of the group.
  87. WEB FORMS USABILITY WORKSHOP 87 DESIGNING FORMS

  88. WEB FORMS USABILITY WORKSHOP DESIGNING FORMS 88 Ask as little

    as possible of your user Conversation, not interrogation Coach, remind and reassure Provide a clear path to completion Orient the user Group tasks based on the user’s mental model The devil is in the defaults Give users something to do next Measure, then iterate
  89. ASK AS LITTLE AS POSSIBLE OF YOUR USER

  90. http://me.com http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/ ␡ ✓

  91. “Forms are a conversation, not an interrogation.” Nathan Barry, Forms

    are a Conversation http://uxmag.com/articles/forms-are-a-conversation
  92. http://www.dartmouthsportsplex.com/ http://www.constantcontact.com ␡ ✓

  93. http://www.dartmouthsportsplex.com/ http://www.constantcontact.com

  94. COACH! REMIND! REASSURE! 

  95. http://www.basecamp.com

  96. PROVIDE A CLEAR PATH TO COMPLETION

  97. http://www.perfume.com http://amazon.com ✓ ␡

  98. http://assets.baymard.com/blog/multi-column-reading-paths.png

  99. DON’T FORGET THE TAB ORDER In HTML5, you can set

    tabindex for any element tab
  100. ORIENT THE USER 

  101. http://platform.fullscreen.net

  102. http://www.wufoo.com

  103. GROUP ELEMENTS USING MENTAL MODELS

  104. Via http://www.badforms.com http://www.yahoo.com ✓ ␡

  105. http://aiaiai.dk http://public-supply.com ✓ ␡

  106. THE DEVIL IS IN THE DEFAULTS

  107. ✓ ␡ ❓ ❓ ❓ http://campaignmonitor.com http://flowersdirect.com

  108. ✓ ␡ http://platform.fullscreen.net

  109. GIVE YOUR USERS A NEXT STEP

  110. http://apply.fullscreen.net http://www.vox.com/register

  111.  MEASURE & ITERATE

  112. http://visualwebsiteoptimizer.com http://kissmetrics.com

  113. WEB FORMS USABILITY WORKSHOP DESIGNING FORMS 113 Exercise: REDESIGN A

    FORM! TIME 20 minutes RESOURCES http://patterntap.com http://www.wufoo.com/gallery http://www.formstack.com/examples GOAL Start with one of your example forms or find an form that needs improvement from anywhere on the internet or from Patterntap, Wufoo’s gallery or Formstack’s examples. With your partner, use what you’ve learned and redesign it in a whiteboard session!
  114. WEB FORMS USABILITY WORKSHOP 114 RESOURCES

  115. BOOKS, ARTICLES & BLOGS Luke Wroblewski, Web Form Design: Filling

    In The Blanks http://rosenfeldmedia.com/books/web-form-design/ Steve Krug, Don’t Make Me Think http://www.sensible.com/dmmt.html http://baymard.com/blog http://alistapart.com/article/sensibleforms http://www.usertesting.com/blog/2013/04/04/42-form-usability-resources/ http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/ http://www.nngroup.com/articles/ten-usability-heuristics/
  116. WEB FORMS USABILITY WORKSHOP 116 Q&A