Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
New England Adobe Users GroupNovember 3, 2009<br />Universally Usable Web Forms<br />Julie Strothman, M.S.<br />User Exper...
“My life would be easier…”<br />
Measuring Usability of Forms<br />Successful completion<br />Abandoned forms<br />Completion time<br />Number of help requ...
Pop Quiz #1<br />Some toolbars offer the option of displaying a label below each tool. <br />Why can labeled tools be acce...
Fitts’s Law<br />“The time to acquire a target is a function of the distance to andsize of the target.”<br />
NEAUG Survey Results: Typical Workflow for Developing Forms<br />Client identifies fields& which are required<br />Layout<...
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 devic...
Forms are conversations<br />“After all, if software is to be social, then it may as well learn social skills.”<br />-Mich...
What face-to-face social interaction rules should our forms follow?<br />Only ask what you need to know(Don’t be impertine...
Surfacing a Path to Completion: Progress Meters<br />Progress & Location<br />Scope<br />
Pop Quiz #2: Which is Fastest?<br />Right-Aligned<br />Top-Aligned<br />Left-Aligned<br />Some field<br />Some other field...
What?!!<br />Use more vertical space?!!<br />
Scan Line<br />
Pop Quiz #3: Higher accuracy rate?<br />Mushrooms<br />Pepperoni<br />Eggplant<br />Mushrooms      Pepperoni	Eggplant<br />
Label tags<br />Mushrooms<br />Pepperoni<br />Eggplant<br />&lt;input type=“radio” name=“pizza-toppings” id=“toppings-mush...
What flavor pizza do you prefer?<br />Mushrooms (no label tag)<br />Pepperoni (has label tag)<br />Eggplant (no label tag)...
View Form Information<br />
Labels & Reading Order: Acrobat & Flash<br />Must turn on accessibility.<br />When turned on, the software will make best ...
Labels Inside Inputs<br />Not enough contrast<br />Label goes away when input receives focus<br />No recovery if your atte...
Captcha<br />
In-line error-catching <br />
Dismissable Error Messages<br />
Error Messages<br />Alert at page top explains in friendly language that something needs fixing.<br />Alert does not rely ...
Confirmation Screen<br />What happens next<br />What was submitted<br />Contact invitation<br />
Thank You!<br />http://delicious.com/strottrot/neaug<br />Julie Strothman, M.S.<br />User Experience Researcher & Designer...
Nächste SlideShare
Wird geladen in …5
×

Universally Usable Web Forms

4.364 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design, Business, Wirtschaft & Finanzen
  • Dating direct: ❶❶❶ http://bit.ly/369VOVb ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating for everyone is here: ❶❶❶ http://bit.ly/369VOVb ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • On Slide 5, and my trouble with keyboard navigating OK/Cancel tabs on a mac: Roger Johansson to the rescue: http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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 />

×