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.

The Features of Highly Effective Forms [An Event Apart Nashville 2016]

1,356 views

Published on

Web forms are complex beasts with many moving parts. That’s one of the reasons they're so challenging to build well. In this session, Aaron Gustafson will walk you through the process of creating a form—from planning to production—and give you sage advice for improvement. You’ll learn ways to keep forms focused, how to leverage HTML5 for better user interaction, and a variety of design techniques to enhance forms’ usability. Whether you have one form or a thousand, you’ll leave this session with a much better handle on how to take them from distressing to delightful!

Published in: Internet
  • Be the first to comment

The Features of Highly Effective Forms [An Event Apart Nashville 2016]

  1. 1. THE FEATURES OF
 HIGHLY EFFECTIVE FORMS Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. IConsider the conversation
  3. 3. Make every field fight for its place in your forms.
  4. 4. PercentageofUsersConverted 0% 5% 10% 15% 20% 25% 30% Number of Fields 1 2 3 4 5 6 7 8 9 10 http://is.gd/field_count_conversion
  5. 5. MICHAEL AAGAARD, UNBOUNCE I finally convinced the client to let me remove three form fields. I wanted to
 remove more, but I could only get away 
 with removing three. But that’s still one 
 third of the form fields – a lot less friction. The result? 14% drop in conversion. http://is.gd/fewer_fields_fewer_conversions
  6. 6. Prepare for pushback.
  7. 7. IIChoose your
 words carefully
  8. 8. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
  9. 9. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
  10. 10. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
  11. 11. Talk to your users like they talk
 to one another.
  12. 12. Ask higher value questions.
  13. 13. Make it clear users need to respond
  14. 14. “What’s your first name?”
  15. 15. “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”
  16. 16. “Reserve your spot”
  17. 17. IIIMake good
 markup choices
  18. 18. Label every field
  19. 19. What’s your first name? <input name=“first_name”>
  20. 20. <label>What’s your first name?</label> <input name=“first_name”>
  21. 21. <label for=“first_name”>What’s your first name?</label> <input id=“first_name” name=“first_name”>
  22. 22. <label> What’s your first name? <input name=“first_name”> </label>
  23. 23. <label for=“first_name”> What’s your first name? <input id=“first_name” name=“first_name”> </label>
  24. 24. <label for=“first_name”>What’s your first name?</label> <input id=“first_name” name=“first_name”>
  25. 25. Use real buttons
  26. 26. Sign In
  27. 27. <input type=“submit” value=“Sign In”> Sign In
  28. 28. <button type=“submit”>Sign In</button> Sign In
  29. 29. <a href=“#” class=“button”>Sign In</a> Sign In
  30. 30. <div class=“button”>Sign In</div> Sign InSign In
  31. 31. <input type=“submit” value=“Sign In”> Sign In Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes
  32. 32. <button type=“submit”>Sign In</button> Sign In Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes
  33. 33. <a href=“#” class=“button” role=“button”>Sign In</a> Sign In Appearance Seen As Focusable Activates Submits Forms Inline Text Link Yes Kinda No JS dependency < JS dependency < ARIA dependency <CSS dependency <
  34. 34. <div class=“button” role=“button” tabindex=“0”>Sign In</div> Sign InSign In Appearance Seen As Focusable Activates Submits Forms Block Text Generic No No No JS dependency < JS dependency < ARIA dependency <CSS dependency < HTML dependency <
  35. 35. Everyone has
 CSS & JavaScript,
 why should I
 be concerned?
  36. 36. POTENTIAL BLOCKERS TO CSS • Browser doesn’t support CSS • CSS is disabled for performance • User has altered CSS (via a user style sheet) for accessibility or some other personal preference • A networking issue caused the CSS to be unavailable • Selector is too advanced for the browser • Rules are in a media query and the browser doesn’t support them
  37. 37. POTENTIAL BLOCKERS TO JS • Browser doesn’t support JavaScript • JavaScript is disabled • A networking issue caused the JavaScript to be unavailable • A firewall blocked requests for JavaScript • A browser plugin blocked the JavaScript download or execution
  38. 38. POTENTIAL BLOCKERS TO JS • 3rd party JavaScript error caused JavaScript execution to stop • A bug in the code caused the JavaScript to stop executing • The browser failed a feature detection test and exited the script early
  39. 39. POTENTIAL BLOCKERS TO ARIA • The browser does not support ARIA • The assistive technology does not support ARIA
  40. 40. <button type=“submit”>Sign In</button> Sign In Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes
  41. 41. Use the right
 field type
  42. 42. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“first_name”>What’s Your First Name?</label> <input type=“text” id=“first_name” name=“first_name”> Free Response
  43. 43. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“first_name”>What’s Your First Name?</label> <input id=“first_name” name=“first_name”> Free Response (is the default)
  44. 44. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“email”>What’s Your Business Email Address?</label> <input type=“email” id=“email” name=“email”> Free Response: Email Appearance Native Validation Custom Keyboard Text Field Maybe Maybe
  45. 45. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“email”>What’s Your Business Email Address?</label> <input type=“email” id=“email” name=“email”> Free Response: Email Appearance Native Validation Custom Keyboard Text Field Maybe Maybe
  46. 46. Browsers ignore what they don’t understand
  47. 47. Progressive Enhancement
  48. 48. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“url”>What’s Your Website’s URL?</label> <input type=“url” id=“url” name=“url”> Free Response: URL Appearance Native Validation Custom Keyboard Text Field Maybe Maybe
  49. 49. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“url”>What’s Your Website’s URL?</label> <input type=“url” id=“url” name=“url”> Free Response: URL Appearance Native Validation Custom Keyboard Text Field Maybe Maybe
  50. 50. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“time_at_job”>How Many Years Have You Been
 in Your Current Position?</label> <input type=“number” id=“time_at_job” name=“time_at_job”> Free Response: Number Appearance Native Validation Custom Keyboard Text Field+ Maybe Maybe
  51. 51. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“time_at_job”>How Many Years Have You Been
 in Your Current Position?</label> <input type=“number” id=“time_at_job” name=“time_at_job”> Free Response: Number Appearance Native Validation Custom Keyboard Text Field+ Maybe Maybe
  52. 52. THE FEATURES OF HIGHLY EFFECTIVE FORMS Choose One Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
  53. 53. THE FEATURES OF HIGHLY EFFECTIVE FORMS Please describe the photo <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> <label> <input type=“radio” name=“reason” value=“bad photo”> It’s a bad photo of me </label> <label> <input type=“radio” name=“reason” value=“saddening”> It makes me sad </label> Choose One
  54. 54. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“reason”>Please describe the photo</label> <select id=“reason” name=“reason”> <option value=“embarrassing”>It’s embarrassing</option> <option value=“bad photo”>It’s a bad photo of me</option> <option value=“saddening”>It makes me sad</option> </select> Choose One
  55. 55. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“reason”>Please describe the photo</label> <select id=“reason” name=“reason”> <option>It’s embarrassing</option> <option>It’s a bad photo of me</option> <option>It makes me sad</option> </select> Choose One
  56. 56. Radio controls can outperform select dropdowns by
 as much as 15% http://is.gd/radio_vs_dropdown
  57. 57. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“volume">How Loud is Spinal Tap?</label> <input type=“range" id=“volume" name=“volume” min=“0” max=“11” step=“1” > Choose One: Number Appearance Native Validation Custom Keyboard Slider (Maybe) Maybe No
  58. 58. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“volume">How Loud is Spinal Tap?</label> <input type=“range" id=“volume" name=“volume” min=“0” max=“11” step=“1” > Choose One: Number Appearance Native Validation Custom Keyboard Slider Maybe No
  59. 59. THE FEATURES OF HIGHLY EFFECTIVE FORMS Choose One or More
  60. 60. THE FEATURES OF HIGHLY EFFECTIVE FORMS Gaming Systems (4 available) <label> <input type=“checkbox” name=“reserve[]” value=“DS Lite”> Nintendo DS Lite </label> <label> <input type=“checkbox” name=“reserve[]” value=“Wii”> Nintendo Wii </label> <label> <input type=“checkbox” name=“reserve[]” value=“Vita”> PlayStation Vita </label> Choose One or More
  61. 61. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“gaming”>Gaming Systems (4 available)</label> <select id=“gaming” name=“reserve[]” multiple> <option value=“DS Lite”>Nintendo DS Lite</option> <option value=“Wii”>Nintendo Wii</option> <option value=“Vita”>PlayStation Vita</option> <option value=“360”>Xbox 360</option> </select> Choose One or More
  62. 62. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“gaming”>Gaming Systems (4 available)</label> <select id=“gaming” name=“reserve[]” multiple> <option value=“DS Lite”>Nintendo DS Lite</option> <option value=“Wii”>Nintendo Wii</option> <option value=“Vita”>PlayStation Vita</option> <option value=“360”>Xbox 360</option> </select> Choose One or More
  63. 63. THE FEATURES OF HIGHLY EFFECTIVE FORMS Gaming Systems (4 available) <label> <input type=“checkbox” name=“reserve[]” value=“DS Lite”> Nintendo DS Lite </label> <label> <input type=“checkbox” name=“reserve[]” value=“Wii”> Nintendo Wii </label> <label> <input type=“checkbox” name=“reserve[]” value=“Vita”> PlayStation Vita </label> Choose One or More
  64. 64. Group related fields.
  65. 65. THE FEATURES OF HIGHLY EFFECTIVE FORMS <fieldset> <legend>Please describe the photo</legend> <ul> <li> <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> </li> … </ul> </fieldset> Group related fields
  66. 66. THE FEATURES OF HIGHLY EFFECTIVE FORMS <fieldset> <legend>Please describe the photo</legend> <ul> <li> <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> </li> … </ul> </fieldset> Group related fields
  67. 67. THE FEATURES OF HIGHLY EFFECTIVE FORMS <fieldset> <legend tabindex=“0”>Please describe the photo</legend> <ul> <li> <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> </li> … </ul> </fieldset> Group related fields
  68. 68. Don’t introduce unnecessary complexity.
  69. 69. Phone Number:
  70. 70. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“tel”>What’s Your Business Phone Number?</label> <input type=“tel” id=“tel” name=“business_phone”> Free Response: Telephone Appearance Native Validation Custom Keyboard Text Field No Maybe
  71. 71. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“tel”>What’s Your Business Phone Number?</label> <input type=“tel” id=“tel” name=“business_phone”> Free Response: Telephone Appearance Native Validation Custom Keyboard Text Field No Maybe
  72. 72. We should work harder so our users don’t have to.
  73. 73. THE FEATURES OF HIGHLY EFFECTIVE FORMS Structured Data: Dates & Times ๏ input[type=date] ๏ input[type=datetime] (global) ๏ input[type=datetime-local] (local) ๏ input[type=month] (year & month) ๏ input[type=week] (year & week) ๏ input[type=time] 120
  74. 74. THE FEATURES OF HIGHLY EFFECTIVE FORMS Structured Data: Dates & Times ๏ input[type=date] ๏ input[type=datetime] (global) ๏ input[type=datetime-local] (local) ๏ input[type=month] (year & month) ๏ input[type=week] (year & week) ๏ input[type=time] 121
  75. 75. THE FEATURES OF HIGHLY EFFECTIVE FORMS Structured Data: Dates & Times ๏ input[type=date] ๏ input[type=datetime] (global) ๏ input[type=datetime-local] (local) ๏ input[type=month] (year & month) ๏ input[type=week] (year & week) ๏ input[type=time] 122
  76. 76. THE FEATURES OF HIGHLY EFFECTIVE FORMS Structured Data: Dates & Times ๏ input[type=date] ๏ input[type=datetime] (global) ๏ input[type=datetime-local] (local) ๏ input[type=month] (year & month) ๏ input[type=week] (year & week) ๏ input[type=time] 123
  77. 77. THE FEATURES OF HIGHLY EFFECTIVE FORMS Structured Data: Dates & Times ๏ input[type=date] ๏ input[type=datetime] (global) ๏ input[type=datetime-local] (local) ๏ input[type=month] (year & month) ๏ input[type=week] (year & week) ๏ input[type=time] 124
  78. 78. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“flight”>What flight are you looking for?</label> <input id="flight" name=“flight” pattern=“DLd{2,}” placeholder=“e.g. DL5407” > Structured Data: Custom
  79. 79. IVLay out fields
 with purpose
  80. 80. THE FEATURES OF HIGHLY EFFECTIVE FORMS Field & Label Layouts Label Label Label Label Label
  81. 81. THE FEATURES OF HIGHLY EFFECTIVE FORMS Field & Label Layouts Label Label Label Label Label
  82. 82. THE FEATURES OF HIGHLY EFFECTIVE FORMS Field & Label Layouts Label Label Label Label Label
  83. 83. THE FEATURES OF HIGHLY EFFECTIVE FORMS Checkboxes & Radio Controls Embarrassing Upsetting Saddening Bad Photo Other
  84. 84. THE FEATURES OF HIGHLY EFFECTIVE FORMS Checkboxes & Radio Controls Embarrassing Upsetting Saddening Bad Photo Other
  85. 85. THE FEATURES OF HIGHLY EFFECTIVE FORMS <fieldset class=“grouped radios”> … <label> <input type=“radio” name=“reason” value=“embarrassing”> It’s embarrassing </label> … </fieldset> Checkboxes & Radio Controls Embarrassing
  86. 86. THE FEATURES OF HIGHLY EFFECTIVE FORMS .confirmation label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; } Checkboxes & Radio Controls Embarrassing
  87. 87. THE FEATURES OF HIGHLY EFFECTIVE FORMS .confirmation label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; } Checkboxes & Radio Controls Embarrassing
  88. 88. THE FEATURES OF HIGHLY EFFECTIVE FORMS .confirmation label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; } Checkboxes & Radio Controls Embarrassing
  89. 89. THE FEATURES OF HIGHLY EFFECTIVE FORMS .confirmation label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; } Checkboxes & Radio Controls Embarrassing
  90. 90. Don’t fall into the custom control trap.
  91. 91. on
  92. 92. VHelps users avoid (and fix) errors
  93. 93. Let users know when a field is required.
  94. 94. THE FEATURES OF HIGHLY EFFECTIVE FORMS <p>Fields marked with a * are <strong id=“required">required</strong>.</p> … <label for=“first_name”>What’s Your First Name? <b role=“presentation” class=“required”>*</b> </label> <input id="first_name" name=“first_name" required aria-required=“true" > Required Fields
  95. 95. THE FEATURES OF HIGHLY EFFECTIVE FORMS <p><strong>All of the fields are required.</strong></p> … <label for=“first_name”>What’s Your First Name?</label> <input id="first_name" name=“first_name" required aria-required=“true" > Required Fields
  96. 96. THE FEATURES OF HIGHLY EFFECTIVE FORMS <p><strong>All of the fields are required.</strong></p> … <label for=“first_name”>What’s Your First Name?</label> <input id="first_name" name=“first_name" required aria-required=“true" > Required Fields
  97. 97. Provide useful hints as to the type of response you’re expecting.
  98. 98. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“pattern”>Enter three numbers followed by
 two letters</label> <input id="pattern" name=“pattern” pattern=“d{3}[a-zA-Z]{2}” placeholder=“e.g. 123ab” > Suggesting a response
  99. 99. (The placeholder is not
 a substitute for a label.)
  100. 100. Validate
 in the browser.
  101. 101. LUKE WROBLEWSKI Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation. http://is.gd/inline_form_validation
  102. 102. LUKE WROBLEWSKI 22% increase in success rates 22% decrease in errors made 31% increase in satisfaction rating 42% decrease in completion times 47% decrease in the number of eye fixations http://is.gd/inline_form_validation
  103. 103. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“first_name”>What’s Your First Name?</label> <input id="first_name" name=“first_name" required aria-required=“true" > Indicate Required Fields
  104. 104. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“email”>What’s Your Business Email Address?</label> <input type=“email” id=“email” name=“email”> Use Native Validation
  105. 105. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“flight”>What flight are you looking for?</label> <input id="flight" name=“flight” pattern=“DLd{2,}” placeholder=“e.g. DL5407” > Use Custom Validation Schema
  106. 106. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“email”>Your Email Address</label> <input id="email" type="email" name=“email" required aria-required=“true” aria-invalid=“true” aria-describedby=“email-error" > <strong id="email-error" class=“validation-error-message"> Your email address is required</strong> Provide Inline Error Messages
  107. 107. Validate
 on the server.
  108. 108. <input type=“hidden” name=“price” value=“399.99”>
  109. 109. <input type=“hidden” name=“price” value=“1”>
  110. 110. Never trust
 the client.
  111. 111. Summarize
 server-side errors.
  112. 112. <div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  113. 113. <div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  114. 114. <div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  115. 115. <div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  116. 116. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“email”>Your Email Address</label> <input id="email" type="email" name=“email" required aria-required=“true” aria-invalid=“true” aria-describedby=“email-error" > <strong id="email-error" class=“validation-error-message"> Your email address is required</strong> Provide Inline Error Messages
  117. 117. THE FEATURES OF HIGHLY EFFECTIVE FORMS <li class="text validation-error"> <!-- field with an error --> </li> Provide Visual Feedback of Errors
  118. 118. THE FEATURES OF HIGHLY EFFECTIVE FORMS li.validation-error { color: #922026; } li.validation-error input, li.validation-error select, li.validation-error textarea { border-color: #922026; } Provide Visual Feedback of Errors
  119. 119. THE FEATURES OF HIGHLY EFFECTIVE FORMS .validation-error label::before { content: “x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ } Provide Visual Feedback of Errors
  120. 120. THE FEATURES OF HIGHLY EFFECTIVE FORMS The Features of Highly Effective Forms ๏ Consider the conversation ๏ Choose your words carefully ๏ Make good markup choices ๏ Lay out fields with purpose ๏ Help users avoid (and fix) errors 173
  121. 121. THE FEATURES OF HIGHLY EFFECTIVE FORMS The Features of Highly Effective Forms ๏ Consider the conversation ๏ Choose your words carefully ๏ Make good markup choices ๏ Lay out fields with purpose ๏ Help users avoid (and fix) errors 174
  122. 122. THE FEATURES OF HIGHLY EFFECTIVE FORMS The Features of Highly Effective Forms ๏ Consider the conversation ๏ Choose your words carefully ๏ Make good markup choices ๏ Lay out fields with purpose ๏ Help users avoid (and fix) errors 175
  123. 123. THE FEATURES OF HIGHLY EFFECTIVE FORMS The Features of Highly Effective Forms ๏ Consider the conversation ๏ Choose your words carefully ๏ Make good markup choices ๏ Lay out fields with purpose ๏ Help users avoid (and fix) errors 176
  124. 124. THE FEATURES OF HIGHLY EFFECTIVE FORMS The Features of Highly Effective Forms ๏ Consider the conversation ๏ Choose your words carefully ๏ Make good markup choices ๏ Lay out fields with purpose ๏ Help users avoid (and fix) errors 177
  125. 125. THE FEATURES OF HIGHLY EFFECTIVE FORMS Further Reading ๏ “Web Form Design”by Luke Wroblewski (Rosenfeld Media) ๏ “An Extensive Guide To Web Form Usability”by Justin Mifsud
 https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/ ๏ “Optimizing forms for greater conversions”by Maya Nix
 http://blog.usabilla.com/optimizing-forms-greater-conversions/ ๏ “The Definitive Guide to Form Label Positioning”by Jessica Enders
 http://www.sitepoint.com/definitive-guide-form-label-positioning/ 178
  126. 126. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×