Monday, March 10, 2008

Web Form Design: Corgi

Anatomy of a form and resulting tips ...

"Not long ago, a frustrated user shared with me his experience trying to find a gas installer in the United Kingdom. The source of his confusion was a Web form on the Council for Registered Gas Installers (CORGI) Web site. It starts out rather innocuously –simply enter your postal code to find an installer near you.

This leads to a form theoretically designed to allow you to filter your results. Unfortunately, no results are shown. So despite just having run an installer search, my first reaction was to make my way to the unjustifiably long button at the bottom of the form titled “search for installer”. I thought I just searched for an installer, but what the heck –I’ll try it again.

Well, still no results. But the form did update a bit –with an error. It turns out “area of work” is required. Considering I’m looking for a gas installer, let’s set that to “gas” and try again.

... /Form design tip one: filtering works best when people have a sense of the results they are dealing with. Don’t force people to filter what they can’t see. The CORGI site could easily present these options next to a next of results instead of before them.

Form design tip two: primary actions should clearly look like actions –don’t make people guess how to complete a form. The “search for an installer” button on the CORGI site is styled to span the whole length of the form – not very button-like.

Form design tip three: clearly communicate when an error is preventing someone from completing a form with a top level message that is visually associated with the input field(s) responsible. In the CORGI form, the lack of a top-level error message forces people to scan the form in order to determine why they can’t complete it. The form also doesn’t mark all the input fields responsible for an error.

Form design tip four: Don’t send mixed messages about required input fields. The instructional text on the CORGI form asks people to “give as much information as possible” but some of the fields are required and not marked as such."    (Continued via Functioning Form)    [Usability Resources]

Just enter postal code. - Usability, User Interface Design

Just enter postal code.


Post a Comment

<< Home

<< Home