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.

Universally Usable Web Forms

This presentation to the New England Adobe Users Group discusses best practices in designing and building forms that can be used by everyone, and even enjoyed by some.

  • Be the first to comment

Universally Usable Web Forms

  1. 1. New England Adobe Users GroupNovember 3, 2009<br />Universally Usable Web Forms<br />Julie Strothman, M.S.<br />User Experience Researcher & Designer<br />Landmark College Institute for Research and Training<br />
  2. 2. “My life would be easier…”<br />
  3. 3. Measuring Usability of Forms<br />Successful completion<br />Abandoned forms<br />Completion time<br />Number of help requests<br />Number of errors<br />Satisfaction after submitting the form<br />Call center: Top issues<br />
  4. 4. Pop Quiz #1<br />Some toolbars offer the option of displaying a label below each tool. <br />Why can labeled tools be accessed faster? <br />(Assume the user knows the tool & does not need the label to identify the tool.)<br />From Bruce Tognazinni’sAsk Tog<br />
  5. 5. Fitts’s Law<br />“The time to acquire a target is a function of the distance to andsize of the target.”<br />
  6. 6. NEAUG Survey Results: Typical Workflow for Developing Forms<br />Client identifies fields& which are required<br />Layout<br />Test<br />
  7. 7. Who is filling out the form?<br />What do they need with them?<br />Where might they be?<br />If they’re on a mobile device, do their needs change?<br />What will they need to do with the transaction in a month?<br />How often will individuals use the form?<br />How will the data be retrieved?<br />What will it be used for?<br />
  8. 8.
  9. 9. Forms are conversations<br />“After all, if software is to be social, then it may as well learn social skills.”<br />-Michael Angeles, konigi.com<br />
  10. 10. What face-to-face social interaction rules should our forms follow?<br />Only ask what you need to know(Don’t be impertinent!)<br />Be friendly<br />Be patient<br />Don’t speak for the other person(e.g. “Please contact me with more information”)<br />
  11. 11.
  12. 12.
  13. 13. Surfacing a Path to Completion: Progress Meters<br />Progress & Location<br />Scope<br />
  14. 14. Pop Quiz #2: Which is Fastest?<br />Right-Aligned<br />Top-Aligned<br />Left-Aligned<br />Some field<br />Some other field<br />Which of these?<br />An opinion<br />Some field<br />Some other field<br />Which of these?<br />An opinion<br />Some field<br />Some other field<br />Which of these?<br />An opinion<br />This option<br />That option<br />This option<br />That option<br />This option<br />That option<br />
  15. 15. What?!!<br />Use more vertical space?!!<br />
  16. 16. Scan Line<br />
  17. 17.
  18. 18.
  19. 19. Pop Quiz #3: Higher accuracy rate?<br />Mushrooms<br />Pepperoni<br />Eggplant<br />Mushrooms Pepperoni Eggplant<br />
  20. 20. Label tags<br />Mushrooms<br />Pepperoni<br />Eggplant<br />&lt;input type=“radio” name=“pizza-toppings” id=“toppings-mushrooms” value=“”&gt; &lt;label for=“toppings-mushrooms”&gt;Mushrooms&lt;/label&gt;<br />
  21. 21. What flavor pizza do you prefer?<br />Mushrooms (no label tag)<br />Pepperoni (has label tag)<br />Eggplant (no label tag)<br />What’s clickable?<br />
  22. 22. View Form Information<br />
  23. 23. Labels & Reading Order: Acrobat & Flash<br />Must turn on accessibility.<br />When turned on, the software will make best guess.<br />Must review and adjust.<br />
  24. 24. Labels Inside Inputs<br />Not enough contrast<br />Label goes away when input receives focus<br />No recovery if your attention is diverted<br />No recovery if you fat-finger the field<br />No recovery if you are blind & want to preview the fields<br />
  25. 25. Captcha<br />
  26. 26. In-line error-catching <br />
  27. 27. Dismissable Error Messages<br />
  28. 28. Error Messages<br />Alert at page top explains in friendly language that something needs fixing.<br />Alert does not rely on color alone.<br />The error message is inside the label tag.<br />
  29. 29. Confirmation Screen<br />What happens next<br />What was submitted<br />Contact invitation<br />
  30. 30. Thank You!<br />http://delicious.com/strottrot/neaug<br />Julie Strothman, M.S.<br />User Experience Researcher & Designer<br />Landmark College Institute for Research and Training<br />

×