Monday, 31 March 2008

Web Form Tips

Web Form Design: Corgi

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.

Form design tip five: Provide adequate feedback to people filling in your forms. The CORGI site prevents people form progressing without explaining why.

Form design tip six: Ensure people are aware of all the questions they have to answer before they attempt to submit a form. The CORGI site only surfaced additional inputs (natural gas, LPG) after a user submitted the form.

Form design tip seven: Use natural language so people know how to answer the questions on a form. What’s LPG?

No comments: