best practices for web form design

These contents are refered from a pdf file named 'best practices for web form design '.

information

Layout

• top aligned : for reduced completion times & familiar data input.
• right aligned : when vertical screen space is a constraint.
• left aligned : for unfamiliar, or advanced data entry.

Required Form Fields

• try to avoid optional fileds.
• indicate optional fields: if mosts fields are required.
• indicate required fields: if mosts fields are optional.
• Text is best, but * often  works for required fields.
• Associate indicators with labels.

Field Lengths

• when possible, use field length as an affordance.
• otherwise consider a consistent length that provides enough room for inputs.

Content Grouping

• use relevant content groupings to organize forms.
• use the minimum amount of visual elements necessary to communicate useful relationships.

Action

• avoid secondary actions if possible
• otherwise, ensure a clear visual distinction between primary & secondary actions.

Help & Tips

• minimize the amount of help & tips required to fill out a form
• help visible and adjacent to a data request is most useful
• when lots of unfamiliar data is being requested, consider using a dynamic help system.

interaction

path to completion

• remove all unnecessary data requests
• enable smart defaults
• employ flexible data entry
• illuminate a clear path to completion
• for long forms, show progress & save.

tabbing

• remember to account for tabbing behavior
• use the tabindex attribute to control tabbing order
• consider tabbing expectations when laying out forms.

progressive disclosure

• map progressive disclosure to prioritized user needs.
• most effective when user-initiated.
• maintain a consistent approach.

exposing dependent inputs

• maintain clear relationship between initial selection options
• clearly associate additional inputs with their trigger
• avoid 'jumping' that disassociates initial selection options.

feedback

inline validation

• use inline validation for inputs have potentially high error rates.
• use suggested inputs to disambiguate
• communicate limits.

Errors

• clearly communicate an error has occurred: top placement, visual contrast
• provide actionable remedies to correct errors.
• associate responsible fields with primary error message
• 'Double' the visual language where errors have occurred.

progress

• provide indication of tasks in progress
• disable 'submit' button after user clicks it to avoid duplicate submissions.

success

• clearly communicate a data submission has been successful
• provide feedback in context of data submitted.

 

Three web form creation tools

• wufoo http://www.wufoo.com
• form assembly http://www.formassembly.com
• icebrrg http://www.icebrrg.com