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
- 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)
- 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
- 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
- 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
- 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”
- form organization; be conversational
- one form should speak with one voice (not conglomerate from all depts, etc.)
- 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