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.

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)
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