Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

The Features of Highly Effective Forms [SmashingConf NYC 2016]

940 vues

Publié le

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!

Publié dans : Technologie
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

The Features of Highly Effective Forms [SmashingConf NYC 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. HATE SPEECHHARASSMENT
  9. 9. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
  10. 10. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
  11. 11. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
  12. 12. Talk to your users like they talk
 to one another.
  13. 13. Ask higher value questions.
  14. 14. Make it clear users need to respond
  15. 15. “What’s your first name?”
  16. 16. “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”
  17. 17. “Reserve your spot”
  18. 18. IIIMake good
 markup choices
  19. 19. Label every field
  20. 20. Who you gonna call? <input name=“calling”>
  21. 21. <label>Who you gonna call?</label> <input name=“calling”>
  22. 22. <label for=“calling”>Who you gonna call?</label> <input id=“calling” name=“calling”>
  23. 23. <label> Who you gonna call? <input name=“calling”> </label>
  24. 24. <label for=“calling”> Who you gonna call? <input id=“calling” name=“calling”> </label>
  25. 25. <label for=“calling”>Who you gonna call?</label> <input id=“calling” name=“calling”>
  26. 26. Use real buttons
  27. 27. Sign In
  28. 28. <input type=“submit” value=“Sign In”> Sign In
  29. 29. <button type=“submit”>Sign In</button> Sign In
  30. 30. <a href=“#” class=“button”>Sign In</a> Sign In
  31. 31. <div class=“button”>Sign In</div> Sign InSign In
  32. 32. <input type=“submit” value=“Sign In”> Sign In Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes
  33. 33. <button type=“submit”>Sign In</button> Sign In Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes
  34. 34. <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 <
  35. 35. <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 <
  36. 36. <button type=“submit”>Sign In</button> Sign In Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes
  37. 37. Use the right
 field type
  38. 38. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“calling”>Who you gonna call?</label> <input type=“text” id=“calling” name=“calling”> Free Response
  39. 39. THE FEATURES OF HIGHLY EFFECTIVE FORMS <label for=“calling”>Who you gonna call?</label> <input id=“calling” name=“calling”> Free Response (is the default)
  40. 40. 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
  41. 41. 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
  42. 42. Browsers ignore what they don’t understand
  43. 43. Progressive Enhancement
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. Radio controls can outperform select dropdowns by
 as much as 15% http://is.gd/radio_vs_dropdown
  53. 53. 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
  54. 54. 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
  55. 55. THE FEATURES OF HIGHLY EFFECTIVE FORMS Choose One or More
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. Don’t introduce unnecessary complexity.
  61. 61. Phone Number:
  62. 62. 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
  63. 63. 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
  64. 64. We should work harder
 so our users don’t have to.
  65. 65. 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
  66. 66. IVLay out fields
 with purpose
  67. 67. THE FEATURES OF HIGHLY EFFECTIVE FORMS Field & Label Layouts Label Label Label Label Label
  68. 68. THE FEATURES OF HIGHLY EFFECTIVE FORMS Field & Label Layouts Label Label Label Label Label
  69. 69. THE FEATURES OF HIGHLY EFFECTIVE FORMS Field & Label Layouts Label Label Label Label Label
  70. 70. THE FEATURES OF HIGHLY EFFECTIVE FORMS Checkboxes & Radio Controls Embarrassing Upsetting Saddening Bad Photo Other
  71. 71. 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
  72. 72. THE FEATURES OF HIGHLY EFFECTIVE FORMS .confirmation label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; } Checkboxes & Radio Controls Embarrassing
  73. 73. THE FEATURES OF HIGHLY EFFECTIVE FORMS .confirmation label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; } Checkboxes & Radio Controls Embarrassing
  74. 74. THE FEATURES OF HIGHLY EFFECTIVE FORMS .confirmation label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; } Checkboxes & Radio Controls Embarrassing
  75. 75. THE FEATURES OF HIGHLY EFFECTIVE FORMS .confirmation label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; } Checkboxes & Radio Controls Embarrassing
  76. 76. Don’t fall into the custom control trap.
  77. 77. on
  78. 78. VHelps users avoid (and fix) errors
  79. 79. Let users know when a field is required.
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. Provide useful hints as to the type of response you’re expecting.
  84. 84. 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
  85. 85. (The placeholder is not
 a substitute for a label.)
  86. 86. Validate
 in the browser.
  87. 87. 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
  88. 88. 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
  89. 89. 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
  90. 90. 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
  91. 91. 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
  92. 92. 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
  93. 93. Validate
 on the server.
  94. 94. <input type=“hidden” name=“price” value=“399.99”>
  95. 95. <input type=“hidden” name=“price” value=“1”>
  96. 96. Never trust
 the client.
  97. 97. Summarize
 server-side errors.
  98. 98. <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>
  99. 99. 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
  100. 100. THE FEATURES OF HIGHLY EFFECTIVE FORMS <li class="text validation-error"> <!-- field with an error --> </li> Provide Visual Feedback of Errors
  101. 101. 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
  102. 102. 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
  103. 103. 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 159
  104. 104. 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/ 164
  105. 105. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson
  106. 106. Questions? Tweet me at
 @AaronGustafson

×