Web Form Tips

By Robert John Stevens, CEO of WriteExpress Corporation

Web Form Types

Sequential—Display labels and form fields in a row
Non linear—Show label and fields but don't require sequential form filling
In context—Edit inline as quickly as possible

Web Form Tips

Web forms are just a series of questions.

Can a question be removed? How can we reduce uncessary inputs without complicating the form?
The more help text, the more likely the design needs improvement.
Red help text may be perceived as a red flag
Consider eye movement. Make it easy to create a clear, linear path to completion with the submit button set apart. Align the fields.
Provide feedback where a person is in the process. Provide status. Tell the number of steps and what step they are on.
If there are many sub steps, create a simple, generic progress indicstor (i.e. three easy steps), but don't lie by hiding steps.
Tell people upfront what they need to complete the form.
Use single column form layouts, not multi column. It is easier on the eye. Tabbing is easier too.
Consider that the majority of people use their keyboard to tab between fields
Left-aligned labels are easy to vdertically scan the labels but they may become too far away from their fields and take longer to correlate. This approach slows people down.
Right-aligned labels increase a user's ability to fill out a form by 50%.
Top-aligned labels cut down a user's time even further than right-aligned labels, are easier to localize and code, but require more vertical height on the page. Top-aligned labels work best for mobile too.
Labels or messages inside text boxes are often submitted, people assume the text is already the answer, and when you tab into the form the label question disapepars. They do make sense in well-known blocks of fields like "Shipping Address."
Size form fields equally unless they represent an expected size (like zip code)
Using astericks, don't mark every field as required. Put the astericks to the right of the field labels.

Help Text Tips for Web Forms

Help text is useful underneath fields. Too much help text is an indication of further complexity.
Wufoo creates well designed forms with automatic help text
User-activated popop tips or dialogs are good
eBay activates help for first-time users by creating a yellow-background column on the right side

International Web Forms

This article was commenced on January 2, 2012. Last update: January 2, 2012.

Ad by Google