The Features of Highly Effective Forms [An Event Apart Nashville 2016]
-
Upload
aaron-gustafson -
Category
Internet
-
view
1.156 -
download
0
Transcript of The Features of Highly Effective Forms [An Event Apart Nashville 2016]
![Page 1: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/1.jpg)
THE FEATURES OF H I G H LY E F F E C T I V E
FORMSAaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
![Page 2: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/2.jpg)
IConsider the conversation
![Page 3: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/3.jpg)
![Page 4: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/4.jpg)
![Page 5: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/5.jpg)
![Page 6: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/6.jpg)
![Page 7: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/7.jpg)
![Page 8: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/8.jpg)
![Page 9: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/9.jpg)
Make every field fight for its place in
your forms.
![Page 10: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/10.jpg)
Perc
enta
ge o
f Use
rs C
onve
rted
0%
5%
10%
15%
20%
25%
30%
Number of Fields1 2 3 4 5 6 7 8 9 10
http://is.gd/field_count_conversion
![Page 11: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/11.jpg)
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
![Page 12: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/12.jpg)
Prepare for pushback.
![Page 13: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/13.jpg)
![Page 14: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/14.jpg)
![Page 15: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/15.jpg)
![Page 16: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/16.jpg)
![Page 17: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/17.jpg)
IIChoose yourwords carefully
![Page 18: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/18.jpg)
![Page 19: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/19.jpg)
![Page 20: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/20.jpg)
How does this photo make you feel?
� Embarrassing � Upsetting � Saddening � Bad Photo � Other
![Page 21: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/21.jpg)
How does this photo make you feel?
� Embarrassing � Upsetting � Saddening � Bad Photo ◉ Other it’s embarrassing
![Page 22: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/22.jpg)
Please describe the photo
� It’s embarrassing � It’s a bad photo of me � It makes me sad
![Page 23: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/23.jpg)
Talk to your users like they talk
to one another.
![Page 24: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/24.jpg)
Ask higher value questions.
![Page 25: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/25.jpg)
Make it clear users need to respond
![Page 26: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/26.jpg)
“What’s your first name?”
![Page 27: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/27.jpg)
“Without your first name, I won’tknow how to address you.
Could you please provide it?”
![Page 28: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/28.jpg)
“Reserve your spot”
![Page 29: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/29.jpg)
IIIMake goodmarkup choices
![Page 30: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/30.jpg)
Label every field
![Page 31: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/31.jpg)
What’s your first name? <input name=“first_name”>
![Page 32: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/32.jpg)
<label>What’s your first name?</label> <input name=“first_name”>
![Page 33: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/33.jpg)
<label for=“first_name”>What’s your first name?</label> <input id=“first_name” name=“first_name”>
![Page 34: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/34.jpg)
<label> What’s your first name? <input name=“first_name”> </label>
![Page 35: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/35.jpg)
<label for=“first_name”> What’s your first name? <input id=“first_name” name=“first_name”> </label>
![Page 36: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/36.jpg)
<label for=“first_name”>What’s your first name?</label> <input id=“first_name” name=“first_name”>
![Page 37: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/37.jpg)
Use real buttons
![Page 38: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/38.jpg)
Sign In
![Page 39: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/39.jpg)
<input type=“submit” value=“Sign In”>
Sign In
![Page 40: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/40.jpg)
<button type=“submit”>Sign In</button>
Sign In
![Page 41: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/41.jpg)
<a href=“#” class=“button”>Sign In</a>
Sign In
![Page 42: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/42.jpg)
<div class=“button”>Sign In</div>
Sign InSign In
![Page 43: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/43.jpg)
<input type=“submit” value=“Sign In”>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes Yes
![Page 44: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/44.jpg)
<button type=“submit”>Sign In</button>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes Yes
![Page 45: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/45.jpg)
<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<
![Page 46: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/46.jpg)
<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<
![Page 47: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/47.jpg)
Everyone hasCSS & JavaScript,
why should Ibe concerned?
![Page 48: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/48.jpg)
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
![Page 49: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/49.jpg)
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
![Page 50: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/50.jpg)
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
![Page 51: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/51.jpg)
POTENTIAL BLOCKERS TO ARIA
• The browser does not support ARIA • The assistive technology does not support ARIA
![Page 52: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/52.jpg)
<button type=“submit”>Sign In</button>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes Yes
![Page 53: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/53.jpg)
Use the rightfield type
![Page 54: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/54.jpg)
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
![Page 55: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/55.jpg)
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)
![Page 56: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/56.jpg)
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
![Page 57: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/57.jpg)
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
![Page 58: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/58.jpg)
Browsers ignore what they don’t
understand
![Page 59: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/59.jpg)
Progressive Enhancement
![Page 60: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/60.jpg)
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
![Page 61: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/61.jpg)
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
![Page 62: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/62.jpg)
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
![Page 63: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/63.jpg)
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
![Page 64: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/64.jpg)
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
![Page 65: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/65.jpg)
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
![Page 66: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/66.jpg)
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
![Page 67: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/67.jpg)
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
![Page 68: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/68.jpg)
Radio controls can outperform select
dropdowns byas much as 15%
http://is.gd/radio_vs_dropdown
![Page 69: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/69.jpg)
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
![Page 70: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/70.jpg)
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
![Page 71: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/71.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Choose One or More
![Page 72: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/72.jpg)
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
![Page 73: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/73.jpg)
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
![Page 74: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/74.jpg)
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
![Page 75: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/75.jpg)
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
![Page 76: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/76.jpg)
Group related fields.
![Page 77: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/77.jpg)
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
![Page 78: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/78.jpg)
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
![Page 79: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/79.jpg)
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
![Page 80: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/80.jpg)
![Page 81: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/81.jpg)
Don’t introduce unnecessary complexity.
![Page 82: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/82.jpg)
Phone Number:
![Page 83: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/83.jpg)
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
![Page 84: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/84.jpg)
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
![Page 85: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/85.jpg)
We should work harder so our users
don’t have to.
![Page 86: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/86.jpg)
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
![Page 87: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/87.jpg)
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
![Page 88: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/88.jpg)
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
![Page 89: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/89.jpg)
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
![Page 90: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/90.jpg)
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
![Page 91: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/91.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“flight”>What flight are you looking for?</label> <input id="flight" name=“flight” pattern=“DL\d{2,}” placeholder=“e.g. DL5407” >
Structured Data: Custom
![Page 92: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/92.jpg)
IVLay out fieldswith purpose
![Page 93: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/93.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label
![Page 94: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/94.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label
![Page 95: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/95.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label
![Page 96: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/96.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Checkboxes & Radio Controls
� Embarrassing � Upsetting � Saddening � Bad Photo � Other
![Page 97: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/97.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
Checkboxes & Radio Controls
� Embarrassing � Upsetting � Saddening � Bad Photo � Other
![Page 98: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/98.jpg)
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
![Page 99: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/99.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
Checkboxes & Radio Controls
� Embarrassing
![Page 100: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/100.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
Checkboxes & Radio Controls
� Embarrassing
![Page 101: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/101.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
Checkboxes & Radio Controls
� Embarrassing
![Page 102: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/102.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
Checkboxes & Radio Controls
� Embarrassing
![Page 103: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/103.jpg)
Don’t fall into the custom control trap.
![Page 104: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/104.jpg)
on
![Page 105: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/105.jpg)
![Page 106: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/106.jpg)
VHelps users avoid (and fix) errors
![Page 107: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/107.jpg)
Let users know when a field is required.
![Page 108: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/108.jpg)
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
![Page 109: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/109.jpg)
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
![Page 110: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/110.jpg)
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
![Page 111: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/111.jpg)
Provide useful hints as to the type of response you’re
expecting.
![Page 112: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/112.jpg)
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
![Page 113: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/113.jpg)
(The placeholder is nota substitute for a label.)
![Page 114: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/114.jpg)
Validatein the browser.
![Page 115: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/115.jpg)
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
![Page 116: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/116.jpg)
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
![Page 117: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/117.jpg)
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
![Page 118: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/118.jpg)
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
![Page 119: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/119.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“flight”>What flight are you looking for?</label> <input id="flight" name=“flight” pattern=“DL\d{2,}” placeholder=“e.g. DL5407” >
Use Custom Validation Schema
![Page 120: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/120.jpg)
![Page 121: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/121.jpg)
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
![Page 122: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/122.jpg)
Validateon the server.
![Page 123: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/123.jpg)
![Page 124: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/124.jpg)
<input type=“hidden” name=“price” value=“399.99”>
![Page 125: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/125.jpg)
<input type=“hidden” name=“price” value=“1”>
![Page 126: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/126.jpg)
Never trustthe client.
![Page 127: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/127.jpg)
Summarizeserver-side errors.
![Page 128: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/128.jpg)
![Page 129: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/129.jpg)
<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>
![Page 130: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/130.jpg)
<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>
![Page 131: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/131.jpg)
<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>
![Page 132: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/132.jpg)
<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>
![Page 133: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/133.jpg)
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
![Page 134: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/134.jpg)
THE FEATURES OF HIGHLY EFFECTIVE FORMS
<li class="text validation-error"> <!-- field with an error --> </li>
Provide Visual Feedback of Errors
![Page 135: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/135.jpg)
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
![Page 136: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/136.jpg)
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
![Page 137: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/137.jpg)
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
![Page 138: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/138.jpg)
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
![Page 139: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/139.jpg)
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
![Page 140: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/140.jpg)
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
![Page 141: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/141.jpg)
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
![Page 142: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/142.jpg)
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
![Page 143: The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://reader035.fdocuments.us/reader035/viewer/2022062503/58f9b343760da3da068bd44e/html5/thumbnails/143.jpg)
Thank you!
@AaronGustafson aaron-gustafson.com
slideshare.net/AaronGustafson