Web Form Design

If most of the inputs on a form are required, indicate the few that are optional. If most of the inputs on a form are optional, indicate the few that are required. When indicating what form fields are either required or optional, text is the most clear. However, the * symbol is relatively well understood to mean required.

Left-Aligned Labels When the data being collected by a form is unfamiliar or does not fall into easy-to-process groups (such as the various parts of an address), left-aligning input field labels makes scanning the information required by a form easier (see Figure 4-9 ). People can simply inspect the left column of labels up and down without

Some people will argue that a site’s Web forms should be consistent throughout, and therefore every required input field should be indicated as such, regardless of whether or not there are any optional input fields on the form. While this may be useful in forms that require several pages to complete, the variety of Web forms people encounter online makes it hard to imagine that they will remember a specific site’s system of indicating required input fields across the one to two forms they encounter.

In our testing, page-level selection performed averagely. It achieved average satisfaction scores, a relatively low number of errors, and faired well on eye-tracking measures like number of eye fixations, total length of fixations, and average fixation length. However, this solution had the second longest completion time of all the options we tested. So if you are looking for a safe solution with average performance, and quick completion times are not a concern, page-level selection-dependent inputs might be a good match.

The “expose within radio buttons” method also hid irrelevant form inputs from people until they needed them. This meant it was easy on the eyes and completed quite quickly. In fact, this was the fastest solution we tested and had the lowest number of average fixations.

similar concerns apply here as with the exposed below radio button solution. If the number of selection-dependent inputs is substantial, this method breaks down quickly. The combination of page jumping and the movement of the initial set of options as the elements between them are revealed and hidden makes for a disorientating interaction that frequently has people questioning which user interface element triggers which set of options.

Page-level selection-dependent inputs are probably your best bet when the number of additional options for each initial choice is large. Though you need two Web pages to break up the form, the dynamic hiding and showing of additional inputs won’t confuse people, and they won’t need to question whether or not their choices are mutually exclusive.

If you only have a few additional inputs for each initial option, exposed below radio buttons or exposed within radio buttons might be your best option. I’ve seen both of these options cause confusion with excessive page jumping and disassociation between initial choices, so tread carefully. But if you really only have 1–3 additional fields per initial choice, I’d go with exposed inline radio buttons. Just make sure you use clear visual associations and transitions, if possible.