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!
11. 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
45. <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
<
46. <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
<
48. 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
49. 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
50. 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
51. POTENTIAL BLOCKERS TO ARIA
• The browser does not support ARIA
• The assistive technology does not support ARIA
54. 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
55. 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)
56. 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
57. 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
60. 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
61. 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
62. 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
63. 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
64. 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
65. 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
66. 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
67. 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
69. 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
70. 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
72. 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
73. 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
74. 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
75. 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
77. 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
78. 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
79. 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
83. 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
84. 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
86. 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
87. 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
88. 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
89. 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
90. 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
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”
>
Structured Data: Custom
108. 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
109. 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
110. 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
112. 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
115. 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
116. 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
117. 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
118. 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
119. 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
120.
121. 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
129. <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>
130. <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>
131. <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>
132. <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>
133. 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
134. THE FEATURES OF HIGHLY EFFECTIVE FORMS
<li class="text validation-error">
<!-- field with an error -->
</li>
Provide Visual Feedback of Errors
135. 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
136. 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
137. 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
138. 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
139. 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
140. 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
141. 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
142. 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