THE FEATURES OF

HIGHLY EFFECTIVE
FORMS
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson
IConsider the
conversation
Make every field
fight for its place in
your forms.
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_conver...
MICHAEL AAGAARD, UNBOUNCE
I finally convinced the client to let me
remove three form fields. I wanted to

remove more, but I...
Prepare for
pushback.
IIChoose your

words carefully
How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other
How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
◉ Other it’s embarrassing
Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad
Talk to your users
like they talk

to one another.
Ask higher value
questions.
Make it clear users
need to respond
“What’s your first name?”
“Without your first name, I won’t

know how to address you.

Could you please provide it?”
“Reserve your spot”
IIIMake good

markup choices
Label every field
What’s your first name?
<input name=“first_name”>
<label>What’s your first name?</label>
<input name=“first_name”>
<label for=“first_name”>What’s your first name?</label>
<input id=“first_name” name=“first_name”>
<label>
What’s your first name?
<input name=“first_name”>
</label>
<label for=“first_name”>
What’s your first name?
<input id=“first_name” name=“first_name”>
</label>
<label for=“first_name”>What’s your first name?</label>
<input id=“first_name” name=“first_name”>
Use real buttons
Sign In
<input type=“submit” value=“Sign In”>
Sign In
<button type=“submit”>Sign In</button>
Sign In
<a href=“#” class=“button”>Sign In</a>
Sign In
<div class=“button”>Sign In</div>
Sign InSign In
<input type=“submit” value=“Sign In”>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes Y...
<button type=“submit”>Sign In</button>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes ...
<a href=“#” class=“button” role=“button”>Sign In</a>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Inline T...
<div class=“button” role=“button” tabindex=“0”>Sign In</div>
Sign InSign In
Appearance Seen As Focusable Activates Submits...
Everyone has

CSS & JavaScript,

why should I

be concerned?
POTENTIAL BLOCKERS TO CSS
• Browser doesn’t support CSS
• CSS is disabled for performance
• User has altered CSS (via a us...
POTENTIAL BLOCKERS TO JS
• Browser doesn’t support JavaScript
• JavaScript is disabled
• A networking issue caused the Jav...
POTENTIAL BLOCKERS TO JS
• 3rd party JavaScript error caused JavaScript execution
to stop
• A bug in the code caused the J...
POTENTIAL BLOCKERS TO ARIA
• The browser does not support ARIA
• The assistive technology does not support ARIA
<button type=“submit”>Sign In</button>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes ...
Use the right

field type
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“first_name”>What’s Your First Name?</label>
<input type=“text” id=“firs...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“first_name”>What’s Your First Name?</label>
<input id=“first_name” name...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“email”>What’s Your Business Email Address?</label>
<input type=“email” ...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“email”>What’s Your Business Email Address?</label>
<input type=“email” ...
Browsers ignore
what they don’t
understand
Progressive
Enhancement
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“url”>What’s Your Website’s URL?</label>
<input type=“url” id=“url” name...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“url”>What’s Your Website’s URL?</label>
<input type=“url” id=“url” name...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“time_at_job”>How Many Years Have You Been

in Your Current Position?</l...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“time_at_job”>How Many Years Have You Been

in Your Current Position?</l...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Choose One
Please describe the photo
It’s embarrassing
It’s a bad photo of me
It ma...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Please describe the photo
<label>
<input type=“radio” name=“reason” value=“embarras...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“reason”>Please describe the photo</label>
<select id=“reason” name=“rea...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“reason”>Please describe the photo</label>
<select id=“reason” name=“rea...
Radio controls can
outperform select
dropdowns by

as much as 15%
http://is.gd/radio_vs_dropdown
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“volume">How Loud is Spinal Tap?</label>
<input type=“range" id=“volume"...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“volume">How Loud is Spinal Tap?</label>
<input type=“range" id=“volume"...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Choose One or More
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Gaming Systems (4 available)
<label>
<input type=“checkbox” name=“reserve[]” value=...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“gaming”>Gaming Systems (4 available)</label>
<select id=“gaming” name=“...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“gaming”>Gaming Systems (4 available)</label>
<select id=“gaming” name=“...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Gaming Systems (4 available)
<label>
<input type=“checkbox” name=“reserve[]” value=...
Group related fields.
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<fieldset>
<legend>Please describe the photo</legend>
<ul>
<li>
<label>
<input type...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<fieldset>
<legend>Please describe the photo</legend>
<ul>
<li>
<label>
<input type...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<fieldset>
<legend tabindex=“0”>Please describe the photo</legend>
<ul>
<li>
<label...
Don’t introduce
unnecessary
complexity.
Phone Number:
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“tel”>What’s Your Business Phone Number?</label>
<input type=“tel” id=“t...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“tel”>What’s Your Business Phone Number?</label>
<input type=“tel” id=“t...
We should work
harder so our users
don’t have to.
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Structured Data: Dates & Times
๏ input[type=date]
๏ input[type=datetime] (global)
๏...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Structured Data: Dates & Times
๏ input[type=date]
๏ input[type=datetime] (global)
๏...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Structured Data: Dates & Times
๏ input[type=date]
๏ input[type=datetime] (global)
๏...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Structured Data: Dates & Times
๏ input[type=date]
๏ input[type=datetime] (global)
๏...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Structured Data: Dates & Times
๏ input[type=date]
๏ input[type=datetime] (global)
๏...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“flight”>What flight are you looking for?</label>
<input id="flight" nam...
IVLay out fields

with purpose
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Checkboxes & Radio Controls
Embarrassing
Upsetting
Saddening
Bad Photo
Other
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Checkboxes & Radio Controls
Embarrassing
Upsetting
Saddening
Bad Photo
Other
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<fieldset class=“grouped radios”>
…
<label>
<input type=“radio”
name=“reason”
value...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1e...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1e...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1e...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1e...
Don’t fall into the
custom control trap.
on
VHelps users avoid
(and fix) errors
Let users know when
a field is required.
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<p>Fields marked with a * are
<strong id=“required">required</strong>.</p>
…
<label...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<p><strong>All of the fields are required.</strong></p>
…
<label for=“first_name”>W...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<p><strong>All of the fields are required.</strong></p>
…
<label for=“first_name”>W...
Provide useful hints
as to the type of
response you’re
expecting.
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“pattern”>Enter three numbers followed by

two letters</label>
<input id...
(The placeholder is not

a substitute for a label.)
Validate

in the browser.
LUKE WROBLEWSKI
Our participants were faster, more
successful, less error-prone, and more
satisfied when they used the form...
LUKE WROBLEWSKI
22% increase in success rates
22% decrease in errors made
31% increase in satisfaction rating
42% decrease...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“first_name”>What’s Your First Name?</label>
<input id="first_name" name...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“email”>What’s Your Business Email Address?</label>
<input type=“email” ...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“flight”>What flight are you looking for?</label>
<input id="flight" nam...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“email”>Your Email Address</label>
<input id="email" type="email" name=“...
Validate

on the server.
<input type=“hidden” name=“price” value=“399.99”>
<input type=“hidden” name=“price” value=“1”>
Never trust

the client.
Summarize

server-side errors.
<div role=“alert”>
<p>There were errors with your form submission:</p>
<ol>
<li><a href="#message">Message</a> is a requir...
<div role=“alert”>
<p>There were errors with your form submission:</p>
<ol>
<li><a href="#message">Message</a> is a requir...
<div role=“alert”>
<p>There were errors with your form submission:</p>
<ol>
<li><a href="#message">Message</a> is a requir...
<div role=“alert”>
<p>There were errors with your form submission:</p>
<ol>
<li><a href="#message">Message</a> is a requir...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“email”>Your Email Address</label>
<input id="email" type="email" name=“...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<li class="text validation-error">
<!-- field with an error -->
</li>
Provide Visua...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
li.validation-error {
color: #922026;
}
li.validation-error input, li.validation-er...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.validation-error label::before {
content: “x ";
font-family: Verdana, sans-serif;
...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
The Features of Highly Effective Forms
๏ Consider the conversation
๏ Choose your wo...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
The Features of Highly Effective Forms
๏ Consider the conversation
๏ Choose your wo...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
The Features of Highly Effective Forms
๏ Consider the conversation
๏ Choose your wo...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
The Features of Highly Effective Forms
๏ Consider the conversation
๏ Choose your wo...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
The Features of Highly Effective Forms
๏ Consider the conversation
๏ Choose your wo...
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Further Reading
๏ “Web Form Design”by Luke Wroblewski (Rosenfeld Media)
๏ “An Exten...
Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
Upcoming SlideShare
Loading in …5
×

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

1,239 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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,239
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
15
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×