1. THE FEATURES OF
HIGHLY EFFECTIVE
FORMS
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

2. IConsider the
conversation

8. Make every field
fight for its place in
your forms.

9. 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

10. 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

11. Prepare for
pushback.

15. IIChoose your
words carefully

16. HATE SPEECHHARASSMENT

17. How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other

18. How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
◉ Other it’s embarrassing

19. Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad

20. Talk to your users
like they talk
to one another.

21. Ask higher value
questions.

22. Make it clear users
need to respond

23. “What’s your first name?”

24. “Without your first name, I won’t
know how to address you.
Could you please provide it?”

25. “Reserve your spot”

26. IIIMake good
markup choices

27. Label every field

28. Who you gonna call?
<input name=“calling”>

29. <label>Who you gonna call?</label>
<input name=“calling”>

30. <label for=“calling”>Who you gonna call?</label>
<input id=“calling” name=“calling”>

31. <label>
Who you gonna call?
<input name=“calling”>
</label>

32. <label for=“calling”>
Who you gonna call?
<input id=“calling” name=“calling”>
</label>

33. <label for=“calling”>Who you gonna call?</label>
<input id=“calling” name=“calling”>

34. Use real buttons

35. Sign In

36. <input type=“submit” value=“Sign In”>
Sign In

37. <button type=“submit”>Sign In</button>
Sign In

38. <a href=“#” class=“button”>Sign In</a>
Sign In

39. <div class=“button”>Sign In</div>
Sign InSign In

40. <input type=“submit” value=“Sign In”>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes Yes

41. <button type=“submit”>Sign In</button>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes Yes

42. <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
<

43. <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
<

44. <button type=“submit”>Sign In</button>
Sign In
Appearance Seen As Focusable Activates Submits Forms
Button Button Yes Yes Yes

45. Use the right
field type

46. THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“calling”>Who you gonna call?</label>
<input type=“text” id=“calling” name=“calling”>
Free Response

47. THE FEATURES OF HIGHLY EFFECTIVE FORMS
<label for=“calling”>Who you gonna call?</label>
<input id=“calling” name=“calling”>
Free Response (is the default)

48. 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

49. 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

50. Browsers ignore
what they don’t
understand

51. Progressive
Enhancement

52. 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

53. 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

54. 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

55. 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

56. 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

57. 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

58. 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

59. 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

60. Radio controls can
outperform select
dropdowns by
as much as 15%
http://is.gd/radio_vs_dropdown

61. 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

62. 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

63. THE FEATURES OF HIGHLY EFFECTIVE FORMS
Choose One or More

64. 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

65. 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

66. 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

67. 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

68. Don’t introduce
unnecessary
complexity.

69. Phone Number:

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. 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. We should work harder
so our users don’t have to.

73. 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

74. IVLay out fields
with purpose

75. THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label

76. THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label

77. THE FEATURES OF HIGHLY EFFECTIVE FORMS
Field & Label Layouts
Label
Label
Label
Label
Label

78. THE FEATURES OF HIGHLY EFFECTIVE FORMS
Checkboxes & Radio Controls
Embarrassing
Upsetting
Saddening
Bad Photo
Other

79. 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

80. THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1em 0;
}
Checkboxes & Radio Controls
Embarrassing

81. THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1em 0;
}
Checkboxes & Radio Controls
Embarrassing

82. THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1em 0;
}
Checkboxes & Radio Controls
Embarrassing

83. THE FEATURES OF HIGHLY EFFECTIVE FORMS
.confirmation label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1em 0;
}
Checkboxes & Radio Controls
Embarrassing

84. Don’t fall into the
custom control trap.

85. on

87. VHelps users avoid
(and fix) errors

88. Let users know when
a field is required.

89. 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

90. 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

91. 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

92. Provide useful hints
as to the type of
response you’re
expecting.

93. 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

94. (The placeholder is not
a substitute for a label.)

95. Validate
in the browser.

96. 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

97. 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

98. 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

99. 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

100. 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

102. 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

103. Validate
on the server.

105. <input type=“hidden” name=“price” value=“399.99”>

106. <input type=“hidden” name=“price” value=“1”>

107. Never trust
the client.

108. Summarize
server-side errors.

110. <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>

111. 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

112. THE FEATURES OF HIGHLY EFFECTIVE FORMS
<li class="text validation-error">
<!-- field with an error -->
</li>
Provide Visual Feedback of Errors

113. 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

114. 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

115. THE FEATURES OF HIGHLY EFFECTIVE FORMS
The Features of Highly Effective Forms
๏ Consider the conversation
๏ Choose your words carefully
๏ Make good markup choices
๏ Lay out fields with purpose
๏ Help users avoid (and fix) errors
159

116. THE FEATURES OF HIGHLY EFFECTIVE FORMS
Further Reading
๏ “Web Form Design”by Luke Wroblewski (Rosenfeld Media)
๏ “An Extensive Guide To Web Form Usability”by Justin Mifsud
https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/
๏ “Optimizing forms for greater conversions”by Maya Nix
http://blog.usabilla.com/optimizing-forms-greater-conversions/
๏ “The Definitive Guide to Form Label Positioning”by Jessica Enders
http://www.sitepoint.com/definitive-guide-form-label-positioning/
164

117. Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson

118. Questions?
Tweet me at
@AaronGustafson