Luke Wroblewski at BayCHI IxD BOF: Input: Moving Beyond Static Forms
2 likes1,074 views
Luke Wroblewski's document discusses moving beyond static forms by leveraging rich interactions, commonly used tools for input, web services, and new mobile capabilities. It recommends using inline validation and input masks to reduce errors. Web services can bypass registration by using existing profiles from Facebook or email. Mobile inputs include location, gestures, images and adaptive layouts. Adopting these techniques allows forms to match how users already work and provide instant experiences across more devices.
![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](https://image.slidesharecdn.com/inputbeyondforms02172010-sm-100817151729-phpapp01/85/Luke-Wroblewski-at-BayCHI-IxD-BOF-Input-Moving-Beyond-Static-Forms-30-320.jpg)
Luke Wroblewski at BayCHI IxD BOF: Input: Moving Beyond Static Forms
- 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
- 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