web表单设计

Web Application Form Design Expanded
02.21.2005 byLukeWThere was a large amount of interest in last month’sWeb Application Form Design article, so I decided to provide some additional details and a few examples for the following concepts:
Uniting Input Fields and Labels
A number of readers were interested in how the limitations of a“left-justified horizontal label” layout (primarily the separation ofinput fields and their respective labels) could be solved. Thoughexcessive visual elements (even when they are quite subtle) in a formwill increase visual noise substantially, a few carefully selectedelements can help users connect input fields and their respectivelabels.

Visually separating related groups of content with a horizontal rule orbackground color makes it easier to associate left-aligned labels tofields. However, these groupings cannot be arbitrary (there must be areason the fields are considered a group i.e. related content) andshould not exceed 5-6 items (otherwise the adjacency problem willreemerge).
Primary & Secondary Actions
When a form has both primary and secondary actions such as “Continue”(primary) and “Go Back” (secondary) it may be wise to reduce the visualweight of the secondary action. This minimizes the risk for potentialerrors and directs users to completion. The following examplesillustrate this concept in action on Orbitz, Yahoo, and Expedia. Thoughthe visual treatments vary, primary actions are consistently heavier(bold fonts, button-shapes, bright background colors, etc.) thansecondary actions.

Label & Input Field Lengths
The length of input fields can be used to communicate importantinformation to users. For instance, an input field for a five-digit zipcode should not be 40 characters in length as this sets an incorrectexpectation for users (what kind of zip code is this long?). When thereisn’t a specific length associated with an input, maintaining aconsistent input field length can ease the visual complexity of a formby reducing the rag caused by input fields of varying length.
Because input field labels can vary in length (especially when a layoutwill be localized), it’s a good idea to build a flexible layout thatadjusts not only to various screen resolutions and browser window sizesbut to different line lengths as well.

For more on Form Design...
Check out Luke‘s upcoming book about Web form usability, visual design, and interaction design considerations:Web Form Design Best Practices.