User Assistance in Web Forms

Luke Wroblewski is the Sr. director of Ideation & Design at Yahoo! and has written a book about web form design.

"Forms suck," but form design matters, in commerce, in engagement, in access (membership).

People look for the first input field, and then just go straight down, and if your stray from that line, users will have trouble.

Have a clear flow. (Illuminate a clear path to completion.)

Best practice: Clear path to completion.

Top aligned labels are quick to complete. People see the label and the field in one "stop." Works better for translation. But it takes more vertical space.

Right aligned lables, also clear association between label and field. Left rag makes scanning difficult.

Left aligned labels, enables label scanning, if need to pick one or more out. People make association, but takes longer. Label length change may impair layout.

Showing eye-tracking data of different layouts. Cool stuff. Top-aligned labels 10%, 20%, faster completion.

Best practice: top aligned labels for speedy input, left aligned for unfamiliar or advanced data entry.

How about labels within fields? Make sure that assistance text goes away when people are providing answers. Problem: as soon as you start provide an answer, the label goes away, makes it hard to go back and check answers.

Required field indicators are useful when lots of field, but few required. Likewise, optional field indicators are useful when few optional fields. Not useful when all fields are required.

Best practice: tell people what is required and what is not.

Help & tips useful when asking for unfamiliar data, but too much can be overwhelming.

Best visible and adjacent to where it applies.

Automatic inline help is useful when users are unsure about how or why to answer.

On-the-fly validation is tough.

In Yahoo Answers, use inline validation to help users form good questions, so they can get good--and quick--answers.

Not all form actions are equal. Reset, Cancel, Go Back are secondary, rarely used. Save, Continue, Submit, are primary actions. Differentiate. Make primary actions primary looking.

Best practice: avoid secondary actions (if possible), align primary actions with input fields. (The clear path to completion thing again.)

When there's an error on the page, it's the most important thing on the form.