Guide to Form Design

In a world where digital interactions are pivotal, designing forms that are not only efficient but also user-friendly and engaging is crucial. We aim to empower you with the principles we use to create forms to make enterprise software delightful and accessible. Whether you're designing a simple feedback form or a complex application process, these guidelines will help ensure your forms are intuitive, and enjoyable for all users.

User-Centered Form Principals

Be Direct

Use straightforward language. Avoid technical jargon unless absolutely necessary.

Simplicity is Key

Keep forms short and straightforward. Eliminate unnecessary fields to increase the form's completion rate.

Labels Over Placeholders

Avoid using placeholders as replacements for field labels, as they can disappear when the user starts typing, straining their short-term memory. If placeholders are used, they should be in addition to, not in place of, labels.

Scannable Forms

Help users visually scan and navigate form fields easily by grouping fields into sections. Break up longer forms, by using the “turn top-level sections into pages” from setting.

Clear Messaging

Consider adding precise help text only when it will add value and clarity to a field.

Build a Form that Flows

Present fields in a single-column layout. Multiple columns interrupt the vertical momentum of moving down the form. Rather than requiring users to visually reorient themselves, keep them in the flow by sticking to a single column with a separate row for each field. (Exceptions to this rule: short and/or logically related fields such as City, State, and Zip Code can be presented on the same row.)

Minimize User Effort

Link auto-fill gadgets where possible and dropdowns for lengthy options while only displaying the absolutely necessary information.

Responsive Design

Consider the form's layout, navigability, and performance on any device - mobile, tablet, or desktop.

Privacy Matters

Clearly state how user data will be used and ensure its protection.

Gadget Type Considerations

Using the right form field type is essential to ensure data is entered in a format that the system can correctly process and understand. It also improves the user experience by providing appropriate constraints and guidance, thus reducing errors and making the form easier and more intuitive to complete.

Checkboxes

Use For Multiple Selections: Ideal for options where more than one can be selected.

Radio Buttons (Multiple Choice Gadget)

• Use For Single Selections: Perfect for choices where only one option is valid.
• Default Selection: Consider having a default selection if appropriate.

Dropdowns

• Use for Long Lists: Best for when the list of options has more than five choices.
• Relevant Ordering: Sort options logically (e.g., alphabetically, most common).
  Visible Default Option: Display a placeholder or instructional option like 'Select one…'.

Date Input Fields

For date inputs, consider the context. Use calendar pickers for dates close to the present but allow users to type the date for distant future or past dates. Avoid split date fields with drop-downs for each component as they increase the interaction cost.

Form Feedback and Improvement

User Feedback Loop

Regularly update forms based on user feedback and usability studies. Consider sending out yearly build surveys to evaluate the effectiveness of your forms. Always look for ways to make the form experience simple, intuitive, and enjoyable.