The document discusses ways to improve online forms by making them more minimal, flexible, and user-centered. It recommends organizing forms into logical sections, placing optional fields after required ones, using minimalist and task-focused design, testing different designs, and considering usability and accessibility best practices. The key message is that there is always room for improvement and new testing provides opportunities to create better forms and user experiences.

1. You’re Still Doing It Wrong

2. @paularmstrong

3. Forms

5. turbotax.com

6. An Internet
Without Forms

11. Social Networks

12. Social Networks

17. Where Would We Be?

18. Good Question

19. © Cern, Geneva

20. INTERNET
SERIOUS BUSINESS
© Cern, Geneva

21. HTML5

22. Progression and
Lessons Learned

23. Goal: A Better Way

24. tl;dr

26. Instructions Are Ignored

27. twitter.com/devices (2009)

28. twitter.com/devices (2009)

29. twitter.com/devices (2009)

30. twitter.com/devices (2010)

31. twitter.com/devices (2010)

32. twitter.com/devices (2010)

33. Organize Into Sections

35. • Name, Age, Location, etc

36. • Name, Age, Location, etc
• Details, Quantity of Order, Relayed Info

37. • Name, Age, Location, etc
• Details, Quantity of Order, Relayed Info
• Contact Method, Email, Phone

39. • Ask for optional information after the required

40. • Ask for optional information after the required
• Consider multi-page forms

41. • Ask for optional information after the required
• Consider multi-page forms
• Let them know before they start

42. • Ask for optional information after the required
• Consider multi-page forms
• Let them know before they start
• Relay progress back to the user

43. officedepot.com

44. officedepot.com

45. officedepot.com

46. amazon.com

47. amazon.com

48. Be Minimalist

49. Be Minimalist
• User-Centered Design

50. Be Minimalist
• User-Centered Design
• Task-Focused

51. Be Minimalist
• User-Centered Design
• Task-Focused
• Single Call-To-Action

52. Be Minimalist
• User-Centered Design
• Task-Focused
• Single Call-To-Action
• Kill the Clutter

53. digg.com

54. digg.com

55. dailymile.com

56. dailymile.com

57. godaddy.com

58. godaddy.com

59. scribbls.com

60. scribbls.com

61. cl.ly

62. cl.ly

63. my.cl.ly/register

64. my.cl.ly/register

65. my.cl.ly/register

66. my.cl.ly/login

67. my.cl.ly/register

68. Flexible Form Fields

69. No Dashes or Spaces

70. unixwiz.net/ndos-shame.html

71. You User Was Right

72. Remove All
Non-AlphaNumeric
Characters

73. <?php
preg_replace(
/[W_]/g,
'',
‘+1-(650) 328-2345’
);
// returns -> 16503282345
?>

74. Reformat with
JavaScript

75. Reformat with
JavaScript

76. Account For Differences

77. Account For Differences
• Phone Numbers

78. Account For Differences
• Phone Numbers
• Postal Codes

79. Account For Differences
• Phone Numbers
• Postal Codes
• Credit Cards

80. Account For Differences
• Phone Numbers
• Postal Codes
• Credit Cards
• Dates

81. Mad-Libs Style Forms

82. One day, [noun] [verb,
pt.] down to the [noun]
and saw a [adjective]
[noun].

83. huffduffer.com/signup

84. usedcars.kbb.com

85. lukew.com/ff/entry.asp?1007

86. 25-40% Increased
Conversion Rate

87. bingocardcreator.com

88. bingocardcreator.com

89. Label Position

90. Left Aligned
Right Aligned
Above
Overlay

91. First Name
Last Name
Email Address

92. First Name
Last Name
Email Address

93. First Name
Last Name
Email Address

94. First Name
Last Name
Email Address

95. First Name
Last Name
Email Address

96. First Name
Last Name
Email Address

97. Above
30%
Left-Aligned
29% Right-Aligned
41%
smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

98. Left Aligned
Right Aligned
Above
Overlay

99. First Name
Last Name
Email Address

100. First Name
Last Name
Email Address

101. <input type=“text”
value=“Search Here” />

102. <input type=“text”
value=“Search Here” />

103. <input type=“text”
value=“Search Here”
onclick=“this.value=‘’” />

104. <input type=“text”
value=“Search Here”
onclick=“this.value=‘’” />

105. Input Value != Label

106. First Name
Last Name
Email Address
Submit

107. Label
First Name
Last Name
Email Address
Submit

108. Input
First Name
Last Name
Email Address
Submit

109. First Name
Last Name
Email Address
Submit

110. Last Name
Email Address
Submit

111. Paul
Email Address
Submit

112. Paul
Armstrong
Submit

113. First Name
Last Name
Email Address
Submit

114. First Name
Last Name
Email Address
Submit

115. Paul Name
First
Last Name
Email Address
Submit

116. Paul Name
First
Last Name
Email Address
Submit

117. Paul Name
First
Last Name
Armstrong
Email Address
Submit

118. $(‘input’).labelover();
github.com/paularmstrong/labelover

119. Usability & Accessibility

120. Don’t Use Helper Values

121. <input type=“text”
value=“First Name” />

122. Tab Index

123. Error Messages

124. Color Hinting
Success Error

125. en.wikipedia.org/wiki/File:Ishihara_9.png

126. Color Hinting
Success Error

127. Color Hinting
Success Error

128. Iconography
Success Error

129. Iconography
Error Success

130. Iconography
Error Success

131. Error Proximity

132. my.cl.ly/register

133. facebook.com

134. yahoo.com

135. Test Everything

136. bingocardcreator.com

137. A/B Testing

138. A B
kalzumeus.com/2010/02/27/lesson-from-madlibs-signup-fad-do-your-own-tests/

139. Free and Easy
http://google.com/websiteoptimizer

141. • Always a Better Way

142. • Always a Better Way
• Be Minimal

143. • Always a Better Way
• Be Minimal
• Be Flexible

144. • Always a Better Way
• Be Minimal
• Be Flexible
• Be Open to New Things

145. • Always a Better Way
• Be Minimal
• Be Flexible
• Be Open to New Things
• Test!

147. @paularmstrong
paul@paularmstrongdesigns.com
http://paularmstrongdesigns.com