Wilson's Landing

More on Form Design

50 - 75 % of the height of an input field between each question works best.

Where possible, remove global site navigation for critical forms such as checkout…reducing the number of ways people can exit out of the process. 

For multi-page forms, consider ensuring you have a scope, position, and status. 

Scope is an idea of the steps involved.

Position indicated where you are in the process.

Status is a way to save and return to your form.

Best Practices:

• Titles matter! ensure they match the purpose of the form and they explain what the form is for
• For long forms, use a start page to explain everything that will be required.
• illuminate a clear path to completion by contemplating scan lines and “effective visual pacing”
• Remove distractions and any links or content that may lead to form abadonment
• For multi-page forms that follow a clear sequence of pages include a progress tracker.
• it there is no clear sequence of steps, don’t use a progress indicator or try to use one that only overviews the process at a very high level.
• Use tabindex.

Labels:

• Succinct, and written in natural language.
• Consistent capitalization
• Top aligned for reducing completion time / flexible label lengths
• Right aligned labels to minimize vertical real estate
• labels within inputs should only be used for short forms.
• Distinguish between labels and data clearly, by using -Select Month- and Email Address….
• Different label alignments in a single form will disrupt a clear path to completion.