Monday, March 01, 2010

Usability: Web Form Design Best Practices

Recently I picked up a Usability session about Web Form Design Best Practices, by Luke Wroblewski, which took place last year at MIX09, Las Vegas.
It's a bit lengthy (>70 mins) but worth it.
I bring you here the summary of the session:


Web Form Design
Best practices

According to slides by Luke Wroblewski

1. Path to Completion.
a.     Illuminate clear path to completion
b.     Use progress indicators to communicate scope, status and position
c.     If requiring substantial time or information look-up, consider using a start page
d.     Use more general progress indicators for form with variable sequence.

2. Label Alignment
a.     For reduced completion time & familiar data input (name, address etc.): top aligned.
b.     When vertical screen space is a constraint: right aligned.
c.     For unfamiliar or advanced data entry: left aligned.

3.     Help & Tips
a.     Minimize the amount of help & tips required to fill out a form.
b.     Help visible and adjacent to a data request is most useful.
c.     When people maybe unsure about why or how to answer, consider automatic inline system.
d.     For complex & reused forms, consider user-activated system.
e.     Use inline help unless you have a lot of help content (text, graphics, charts).
f.       Use a consistent help section if you have a lot of help content.

4.     Inline Validation
a.     Use inline validation for inputs that have potentially high error rates.
b.     Use suggested inputs to disambiguate.
c.     Communicate limits.

5.     Primary & secondary actions
a.     Avoid secondary actions if possible
b.     Otherwiste, ensure a clear visual distinction between primary & secondary actions ("submit" and "cancel").
c.     Align primary actions with input fields for a clear path to completion.

6.     Actions in progress
a.     Provide indication of tasks in progress.
b.     Disable "submit" button after user clicks it to avoid supplicate submissions.
c.     Consider opportunities to streamline legal requirements.

7.     Error
a.     Clearly communicate an error has occurred: top placement, visual contrast.
b.     Provide actionable remedies to correct errors.
c.     Associate responsible fields with primary error message.
d.     "Double" the visual language where errors have occurred.

8.     Unnecessary inputs
a.     Look for opportunities to remove unnecessary inputs.
b.     Do not complicate questions for the sake of removing inputs.

9.     Form organization
a.     Take the time to evaluate every question you ask.
b.     Ensure your forms speak with one voice.
c.     Strive for succinctness.
d.     If a form naturally breaks down into few short topics, use a single web page.
e.     When a form contains a large number of questions that are only related by a few topics, try multiple web pages.
f.       When a form contains a large number of questions related to a single topic, one long web page.

10.            Gradual engagement
a.     Try to avoid sign-up forms.
b.     Reflect your service's core essence through lightweight interactions.
c.     Make people successful instantly.
d.     If you auto-generate accounts, ensure there is a clear way to access them.
e.     Do not simply distribute the various input fields in a sign-up form across multiple pages.



That's it. Hope you find it helpful.