Wednesday, June 27, 2007

Web Application Form Design

Designing forms for applications ...

"Input elements should be organized in logical groups so that your brain can process the form layout in chunks of related fields.” –HTML: the Definitive Guide

Quite rare is the Web application that doesn’t make extensive use of forms for data input and configuration. But not all Web applications use forms consistently. Variations in the alignment of input fields, their respective labels, calls to action, and their surrounding visual elements can support or impair different aspects of user behavior.

Form Layouts
When the time to complete a form needs to be minimized and the data being collected is mostly familiar to users (for instance, entering a name, address, and payment information in a check-out flow), a vertical alignment of labels and input fields is likely to work best. Each label and input field is grouped by vertical proximity and the consistent alignment of both input fields and labels reduces eye movement and processing time. Users only need to move in one direction: down.

In this layout, it’s advisable to use bold fonts for input field labels. This increases their visual weight and brings them to the foreground of the layout. When they are not bold, labels may compete with input fields for a user’s attention as they have almost equal visual weight."    (Continued via UIE)    [Usability Resources]

Applicaton Forms Design - Usability, User Interface Design

Applicaton Forms Design


Post a Comment

<< Home

<< Home