Luke Wroblewski at BayCHI's Interaction Design BOF, February 17, 2010:

1. INPUT: MOVING
BEYOND STATIC FORMS
LUKE WROBLEWSKI
BAYCHI/IXDA, FEBRUARY 2010
1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17

18. Forms Suck.
18

19. MOVING BEYOND STATIC FORMS
1. Rich Interactions to enhance standard forms
2. Commonly used tools for input
3. Web services to bypass registration & set-up
4. New capabilities on mobile devices
19

20. MOVING BEYOND STATIC FORMS
1. Rich Interactions to enhance standard forms
2. Commonly used tools for input
3. Web services to bypass registration & set-up
4. New capabilities on mobile devices
20

21. Rich Interactions
Inline Validation
• Real time feedback to validate inputs, suggest valid
answers, & help people stay within limits
Input Masks & Types
• Take the burden of formatting answers off people
Inline Multi-step Forms
• Utilize rich interactions to maintain context
TESTING IN PROGRESS
21

22. Unique User Name Validation
22

23. Inline Validation on Yahoo! Registration
23

24. Validating Before Input
24

25. Inline Validation
25

26. Preventing Errors
26

27. Inline Validation Testing
VS. a page submit/refresh model
• 22% increase in completions
• 31% increase in satisfaction ratings
• 42% decrease in completion times
• 22% decrease in errors made
• 47% decrease in number of eye fixations
etre usability testing, March 2009 27

28. Where to Show Inline Validation
30% noticed inline validation
in top part of form: name,
email, gender, location
“How do you know that’s my
correct email address?”
etre usability testing,
March 2009 28

29. Where to Show Inline Validation
80-100% noticed inline
validation in bottom part of
form: user ID & password
etre usability testing,
March 2009 29

30. When to Show Inline Validation
Highest success rates,
lowest number of errors,
shortest time to completion,
highest satisfaction rates
7-10 seconds slower
“It’s frustrating that you
don’t get the chance to put
anything in [the field]
before it’s flashing red at
you.”
etre usability testing,
March 2009 30

31. When to Show Inline Validation
etre usability testing,
March 2009 31

32. How to Show Inline Validation
Most people are “hunt and peck” typists
Persistent messages support both
“check as you go” & “check after
complete” done strategies
etre usability testing,
March 2009 32

33. Real Time Feedback
33

34. Real Time Feedback
34

35. Real Time Feedback
35

36. Valid Input Suggestions
36

37. 37

38. Inline Validation & Additional Inputs
38

39. • Use inline validation for
inputs that have potentially
high error rates
• Validate “open” inputs after
BEST PRACTICE people finish
• Keep validation messages
persistent
• Use suggested inputs to
disambiguate
• Avoiding “jumping” forms
around
39

40. Password Masks
“Usability suffers when users
type in passwords and the only
feedback they get is a row of
bullets. Typically, masking
passwords doesn't even increase
security, but it does cost you
business due to login failures.” -
Jakob Nielsen, 2009
40

41. Password Masks
41

42. HTML Input Types
Images from Dive Into HTML5 by Mark Pilgrim
42

43. HTML Input Types
Images from Dive Into HTML5 by Mark Pilgrim
43

44. HTML Input Types
Images from Dive Into HTML5 by Mark Pilgrim
44

45. HTML Input Types
Images from Dive Into HTML5 by Mark Pilgrim
45

46. Required Formats
46

47. Input Masks
Surface formatting right up
front
Do not gradually reveal
formatting as people enter
input
47

48. MOVING BEYOND STATIC FORMS
1. Rich Interactions to enhance standard forms
2. Commonly used tools for input
3. Web services to bypass registration & set-up
4. New capabilities on mobile devices
48

49. Commonly Used Tools
Communication Tools
• Email: 247 billion emails/day (worldwide)
• Text Messaging: 4.1 billion text messages/day (US only)
• Instant Messaging, Twitter, etc.
Web Browsers
• People spend more time off your site than on it
• Integrate Input options into the Web browser
Supporting Multiple Tools
• Input can come from anywhere
• Let people use their existing workflow to provide input
49

50. Using Email for Input
50

51. Using Email for Input
51

52. Using Email for Input
52

53. Using Email for Input
53

54. Using Email for Input
54

55. Using Email for Input
55

56. Using Email for Input
56

57. Using SMS Text for Input
57

58. Using the Web Browser for Input
58

59. Using the Web Browser for Input
59

60. Using the Web Browser for Input
60

61. Using the Web Browser for Input
61

62. Using the Web Browser for Input
62

63. Using the Web Browser for Input
Enables anyone who knows
HTML, CSS, and JavaScript to
create powerful Firefox add-ons.
Add browser actions, page
actions, and content scripts to the
Google Chrome browser using
HMTL, CSS and Javascript.
63

64. Supporting Multiple Tools
Email
Twitter
Calendar
Portal/Home
Browser
64

65. MOVING BEYOND STATIC FORMS
1. Rich Interactions to enhance standard forms
2. Commonly used tools for input
3. Web services to bypass registration & set-up
4. New capabilities on mobile devices
65

66. Web Services
Remove barriers to account creation
• Over 60 million people use Facebook Connect on
external sites (80k total) per month
Don’t re-create what they’ve already done
• Identity, bio, profile, contact information
• Friends & contact lists
Deliver an instant-on start experience
66

67. Typical Account Creation
67

68. Typical Account Creation
68

69. Re-create your identity & friends list
69

70. Simplified Account Creation
70

71. Web Services for Account Creation
71

72. Web Services for Account Creation
72

73. Instant-on Start Experience
73

74. Single Sign-on Solutions
74

75. Instant-on Start Experience
75

76. Instant-on Start Experience
76

77. MOVING BEYOND STATIC FORMS
1. Rich Interactions to enhance standard forms
2. Commonly used tools for input
3. Web services to bypass registration & set-up
4. New capabilities on mobile devices
77

78. Why Care About Mobile?
Mobile Web growth has outpaced desktop Web growth 8x
Smartphone sales will pass PC sales in 2011
PC Desktop Internet Mobile Consumer
100M+ 1B+ 10B+
1990 2000 2010 2020
Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25
78
Source: ITU, Mark Lipacis, Morgan Stanley Research.

79. Text Input on Mobile is Hard
“The rule of thumb is to limit
the use of forms in the mobile
context”
–Mobile Web Design &
Development, O’Reilly 2009
79

80. Mobile Device Capabilities
Form Fields
Audio
Location
Gestures
Images
80

81. Field Zoom on the iPhone
81

82. Field Zoom on the iPhone
82

83. Left Aligned Labels on Android
83

84. Top Aligned Labels
• When data being
collected is familiar
• Minimize time to
completion
• Flexibility for localization
and complex inputs
• Easier to code: no floats
or tables
• Accessibility: label, field
in order
• Better format for mobile
screen
• Support help/error
messaging column
• Require more vertical
space
84

85. HTML5 Input Types
Images from Dive Into HTML5 by Mark Pilgrim
85

86. HTML5 Input Types
Images from Dive Into HTML5 by Mark Pilgrim
86

87. HTML5 Input Types
Images from Dive Into HTML5 by Mark Pilgrim
87

88. Pop-Up Menus on iPhone
88

89. Pop-Up Menus on iPhone
89

90. Multi-Field Pop-Up Menus on iPhone
90

91. Multi-Field Pop-Up Menus on Android
91

92. Input Controls on Mobile Devices
Android WebOS iPhone OS
92

93. Multiple Orientations
93

94. Location as Input
94

95. Location as Input
95

96. Location as Input
96

97. Location Systems
Accuracy Positioning Time Battery Life
GPS 10m 2-10 minutes (only 5-6 hours on
outdoors) most phones
WiFi 50m (improves with Almost instant No additional
density) (server connect & effect
lookup)
Cell tower 100-1400m (based on Almost instant Negligible
triangulation density) (server connect &
lookup)
Single Cell 500-2500m (based on Almost instant Negligible
Tower density) (server connect &
lookup)
IP Country: 99% Almost instant Negligible
City: 46% US, 53% Intl (server connect &
Zip: 0% lookup)
Smartphones: hybrid of GPS, Wifi, and cell tower triangulation
Laptops/desktops: WiFi, IP, rarely GPS 97

98. Location & Orientation as Input
98

99. Location & Orientation as Input
99

100. Gestures as Input
100

101. Voice as Input
101

102. 102

103. Images as Input
103

104. Images as Input
104

105. Images as Input
105

106. Images as Input
106

107. Images as Input
107

108. Images as Input
108

109. Images as Input
109

110. Input Capabilities
Form Fields
Audio
Location
Gestures
Images
110

111. MOVING BEYOND STATIC FORMS
1. Rich Interactions to enhance standard forms
2. Commonly used tools for input
3. Web services to bypass registration & set-up
4. New capabilities on mobile devices
111

112. CAN I USE THIS NOW?
1. Rich Interactions to enhance standard forms
IE6 is less than 20% of all browsers
2. Commonly used tools for input
Email: 247 billion emails/day (worldwide)
Text Messaging: 4.1 billion text messages/day (US only)
3. Web services to bypass registration & set-up
Over 60 million people use Facebook Connect per month
80K sites have implemented Facebook Connect
4. New capabilities on mobile devices
RIM, Android, iPhone all use WebKit browser
Smartphone sales will pass PC sales next year
112

113. For more information…
• More Information
• @lukewdesign
• www.lukew.com/ff/
• Web Form Design
• www.rosenfeldmedia.com/books/
webforms/
• Discount code: LUKE (25%)
113