Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Forms Usability Workshop

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.

Jay Stakelon

October 10, 2013
Tweet

More Decks by Jay Stakelon

Other Decks in Design

Transcript

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

    ⬆ INCREASED COMPLETION RATES REDESIGNING A BAD FORM CAN GET YOU
  2. 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
  3. 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)
  4. ␡ ✓ ✓ 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
  5. 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 ✓
  6. 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”
  7. WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 25 Inputs Text boxes

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

    Accepts free text input from the user
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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 ␡
  15. 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
  16. VISUAL & TEXTUAL CLARITY ␡ Always make a clear visual

    distinction between primary and secondary actions Use pointed and unmistakably clear call-to-action copy
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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!
  23. 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
  24. 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
  25. 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 ✓ ␡
  26. 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 ✓ ␡
  27. DON’T ALLOW INCOMPLETE SUBMISSIONS Disabling submission until a form is

    complete saves time and prevents frustration ⬇
  28. 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
  29. 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.
  30. WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 61 User registration Keep

    it brief Consider common oAuth providers Allow users to progressively build out their profiles
  31. 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
  32. 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
  33. 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
  34. 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)
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. “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
  42. 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
  43. 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
  44. <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
  45. 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.
  46. 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
  47. “Forms are a conversation, not an interrogation.” Nathan Barry, Forms

    are a Conversation http://uxmag.com/articles/forms-are-a-conversation
  48. 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!
  49. 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/