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?

Denim

DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

Fluidity

Fludity
http://www.decipher.org/archive/2006/01/ui_fluidity.html

Fluidity:
* transparency (don't make me think)
* responsiveness (don't make me wait)
* "gestural efficiency" (How efficiently I can complete common multi-gesture acts)
o distance betweeen gestures (literal and cognitive)
o necessary precision of each gesture
o interruptions

Finally, a perfectly fluid interface would feel more like dancing than working, which suggests that rhythm and balance play a role as well.

Six suggestions that can make you a better designer

From Ideas on Ideas:

1. Find the problem

Don't try to push the creative envelope, rather find the problem and solve it.

2. Don't be so smart.

Just solve the damn problem - its hard enough.

3. Sorta stealing.

Is there a visual dialect, idioms, interactivity standards for websites/systems in this area? Invention might actually be counterproductive, if its too different.

4. Set the bar higher.

Skiing analogy.
Pitch for a local project as if it was a national one.
Find a great designer, and act as if he's your competitor.

5. Make, save and compare.

Versioning. Different copies of ideas, sequentially numbered.

6. Just start already.

Doesn't matter how crap it is, it gives you something to work with.