Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

You're Still Doing It Wrong

5,505 views

Published on

In this extension to "It's the Little Things" from 2009, this presentation will focus on the most widely used interactive sets of elements and most frustrating user experience of the web: forms. By looking at the necessity of collecting data from web site visitors, we'll look at worst and best practices, managing user assumptions, new ideas and future considerations, and how we can help our visitors finish painful forms without frustrating them to the point of giving up and bouncing from your site.

Published in: Design

You're Still Doing It Wrong

  1. 1. You’re Still Doing It Wrong
  2. 2. @paularmstrong
  3. 3. Forms
  4. 4. turbotax.com
  5. 5. An Internet Without Forms
  6. 6. Social Networks
  7. 7. Social Networks
  8. 8. Where Would We Be?
  9. 9. Good Question
  10. 10. © Cern, Geneva
  11. 11. INTERNET SERIOUS BUSINESS © Cern, Geneva
  12. 12. HTML5
  13. 13. Progression and Lessons Learned
  14. 14. Goal: A Better Way
  15. 15. tl;dr
  16. 16. Instructions Are Ignored
  17. 17. twitter.com/devices (2009)
  18. 18. twitter.com/devices (2009)
  19. 19. twitter.com/devices (2009)
  20. 20. twitter.com/devices (2010)
  21. 21. twitter.com/devices (2010)
  22. 22. twitter.com/devices (2010)
  23. 23. Organize Into Sections
  24. 24. • Name, Age, Location, etc
  25. 25. • Name, Age, Location, etc • Details, Quantity of Order, Relayed Info
  26. 26. • Name, Age, Location, etc • Details, Quantity of Order, Relayed Info • Contact Method, Email, Phone
  27. 27. • Ask for optional information after the required
  28. 28. • Ask for optional information after the required • Consider multi-page forms
  29. 29. • Ask for optional information after the required • Consider multi-page forms • Let them know before they start
  30. 30. • Ask for optional information after the required • Consider multi-page forms • Let them know before they start • Relay progress back to the user
  31. 31. officedepot.com
  32. 32. officedepot.com
  33. 33. officedepot.com
  34. 34. amazon.com
  35. 35. amazon.com
  36. 36. Be Minimalist
  37. 37. Be Minimalist • User-Centered Design
  38. 38. Be Minimalist • User-Centered Design • Task-Focused
  39. 39. Be Minimalist • User-Centered Design • Task-Focused • Single Call-To-Action
  40. 40. Be Minimalist • User-Centered Design • Task-Focused • Single Call-To-Action • Kill the Clutter
  41. 41. digg.com
  42. 42. digg.com
  43. 43. dailymile.com
  44. 44. dailymile.com
  45. 45. godaddy.com
  46. 46. godaddy.com
  47. 47. scribbls.com
  48. 48. scribbls.com
  49. 49. cl.ly
  50. 50. cl.ly
  51. 51. my.cl.ly/register
  52. 52. my.cl.ly/register
  53. 53. my.cl.ly/register
  54. 54. my.cl.ly/login
  55. 55. my.cl.ly/register
  56. 56. Flexible Form Fields
  57. 57. No Dashes or Spaces
  58. 58. unixwiz.net/ndos-shame.html
  59. 59. You User Was Right
  60. 60. Remove All Non-AlphaNumeric Characters
  61. 61. <?php preg_replace( /[W_]/g, '', ‘+1-(650) 328-2345’ ); // returns -> 16503282345 ?>
  62. 62. Reformat with JavaScript
  63. 63. Reformat with JavaScript
  64. 64. Account For Differences
  65. 65. Account For Differences • Phone Numbers
  66. 66. Account For Differences • Phone Numbers • Postal Codes
  67. 67. Account For Differences • Phone Numbers • Postal Codes • Credit Cards
  68. 68. Account For Differences • Phone Numbers • Postal Codes • Credit Cards • Dates
  69. 69. Mad-Libs Style Forms
  70. 70. One day, [noun] [verb, pt.] down to the [noun] and saw a [adjective] [noun].
  71. 71. huffduffer.com/signup
  72. 72. usedcars.kbb.com
  73. 73. lukew.com/ff/entry.asp?1007
  74. 74. 25-40% Increased Conversion Rate
  75. 75. bingocardcreator.com
  76. 76. bingocardcreator.com
  77. 77. Label Position
  78. 78. Left Aligned Right Aligned Above Overlay
  79. 79. First Name Last Name Email Address
  80. 80. First Name Last Name Email Address
  81. 81. First Name Last Name Email Address
  82. 82. First Name Last Name Email Address
  83. 83. First Name Last Name Email Address
  84. 84. First Name Last Name Email Address
  85. 85. Above 30% Left-Aligned 29% Right-Aligned 41% smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
  86. 86. Left Aligned Right Aligned Above Overlay
  87. 87. First Name Last Name Email Address
  88. 88. First Name Last Name Email Address
  89. 89. <input type=“text” value=“Search Here” />
  90. 90. <input type=“text” value=“Search Here” />
  91. 91. <input type=“text” value=“Search Here” onclick=“this.value=‘’” />
  92. 92. <input type=“text” value=“Search Here” onclick=“this.value=‘’” />
  93. 93. Input Value != Label
  94. 94. First Name Last Name Email Address Submit
  95. 95. Label First Name Last Name Email Address Submit
  96. 96. Input First Name Last Name Email Address Submit
  97. 97. First Name Last Name Email Address Submit
  98. 98. Last Name Email Address Submit
  99. 99. Paul Email Address Submit
  100. 100. Paul Armstrong Submit
  101. 101. First Name Last Name Email Address Submit
  102. 102. First Name Last Name Email Address Submit
  103. 103. Paul Name First Last Name Email Address Submit
  104. 104. Paul Name First Last Name Email Address Submit
  105. 105. Paul Name First Last Name Armstrong Email Address Submit
  106. 106. $(‘input’).labelover(); github.com/paularmstrong/labelover
  107. 107. Usability & Accessibility
  108. 108. Don’t Use Helper Values
  109. 109. <input type=“text” value=“First Name” />
  110. 110. Tab Index
  111. 111. Error Messages
  112. 112. Color Hinting Success Error
  113. 113. en.wikipedia.org/wiki/File:Ishihara_9.png
  114. 114. Color Hinting Success Error
  115. 115. Color Hinting Success Error
  116. 116. Iconography Success Error
  117. 117. Iconography Error Success
  118. 118. Iconography Error Success
  119. 119. Error Proximity
  120. 120. my.cl.ly/register
  121. 121. facebook.com
  122. 122. yahoo.com
  123. 123. Test Everything
  124. 124. bingocardcreator.com
  125. 125. A/B Testing
  126. 126. A B kalzumeus.com/2010/02/27/lesson-from-madlibs-signup-fad-do-your-own-tests/
  127. 127. Free and Easy http://google.com/websiteoptimizer
  128. 128. • Always a Better Way
  129. 129. • Always a Better Way • Be Minimal
  130. 130. • Always a Better Way • Be Minimal • Be Flexible
  131. 131. • Always a Better Way • Be Minimal • Be Flexible • Be Open to New Things
  132. 132. • Always a Better Way • Be Minimal • Be Flexible • Be Open to New Things • Test!
  133. 133. @paularmstrong paul@paularmstrongdesigns.com http://paularmstrongdesigns.com

×