HTML & CSS: The Good Parts

Prototyping and Layout

Once a form has been designed at the functional level and implemented, the next step is to lay out the form so that it can be tested as a prototype.

Prototyping 101

A web application prototype serves the same function as any tangible product of an engineer’s labor: to ensure that the product works as its designers intended. Much of the effort of prototyping an application goes into ensuring that executable code is bug- and hassle-free, but prototyping is also an opportunity to verify the usability of that application’s human interface.

The user-facing aspects of prototype testing should answer the following questions:

• Are the application’s forms adequately easy for the target users to follow?

• Does the draft design of any form appear to lead to any habitual or typical user errors?

• Do users routinely neglect certain fields, or intuitively invest extraordinary effort in others?

• Are there any aspects of the application’s visual design and layout that require a labor investment out of proportion to the benefits gained from the resulting production values?

All of the information gleaned from the prototype testing process can have effects on the user experience of an application, but the aspects discussed here focus on markup and CSS.

Stylists need to avoid creating situations in which:

• The relationship between a form’s fields and their associated labels is unclear or inadequate.

• Fields have been assigned a source or presentation order that poorly reflects user priorities. ...