AEA Chicago 2009: Web Form Design in Action

Making web forms easier for the user was the subject of Session 10 of An Event Apart Chicago 2009, presented by Luke Wroblewski.

  • forms sit between the user and your site
  • no one wants to fill out a form
  • IN YOUR WAY!!

7 best practices

  1. Path to completion – light at the end of the tunnel
    • clear scan line
    • need to draw a straight line for users to scan and follow down the form
    • progress indicators (start pages? – not sure about that)
  2. People jump directly in at first field
    • top aligned labels vs. right aligned labels vs. left aligned labels
    • different design for different uses
    • can use label within input field, but with caveats
  3. Help & Tips
    • Why do you want me email?
    • Why do I need a username?
    • w/ dynamic data, careful obsuring the form; maybe dedicated help area
    • minimize help text; if there’s too much, you’re design probably sucks
  4. Inline validation
    • no pogo-sticking: realtime feedback (username taken)
    • push people toward more correct answers (password strength)
    • prevent an error state (confirm password)
    • where & when? show validation onblur, except selecting a username; keep persistent A List Apart article on inline validation
    • prevent people from having to fill in forms
    • show input masks (gently guide) reveal formatting onfocus
  5. form buttons are not equal
    • save/submit good, reset/cancel evil
    • people aren’t thinking, they want to get out of the form fast
    • drop people off at the “good part”
  6. form organization; be conversational
    • one form should speak with one voice (not conglomerate from all depts, etc.)
  7. gradual engagement
    • sign up forms must die! sign up is an OUTCOME
    • make successful within first few seconds of engagement: lightweight action that’s integral