Form Design, cont’d

Here are the files from our last class. We have already built the form, this class we will be styling it.

Some guidelines in designing forms:

  • Chunk related fields in logical groupings so the user can process the form more easily
  • When the form is long and has a lot of fields for typical information (name, address, etc), be sure to design it to it ifs a vertical list. That way the user has only one way to go.
  • Make sure the labels of the form files stand out bolding or alternate colors can help.
  • If the information you are asking for is atypical, make the labels left-justify so that the user can scan them without being interrupted by form fields.
  • Alternately, you can lay the form labels out so they are flush right, thereby they are right up against the form fields to which they refer.
  • Use background colors and hairlines sparingly: every visual element you add could detract from the page’s main layout, the form.
  • Keep your design clean and simple.

Some articles you may find interesting:

Web Application Form Design
Luke Wroblewski |  January 22, 2005

Web Form Design: Modern Solutions and Creative Ideas
Vitaly Friedman  |  April 17th, 2008

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s