Overview

Design a Form

UI pattern

Documentation

Image showing a dummy form on a desktop screen
Image showing a dummy form on a desktop screen
Image showing a dummy form on a desktop screen

Objectives

Create a UI pattern for form design to live in Design System documentation to be accessible to product designers for enterprise SaaS software.

This documentation will allow for consistency across forms within the product experience, while using proven practices and user preferences.

Completion

December 2022

Form intro

When to use a form

Forms have a variety of complexity and usage. It may be best to use a form when a user:

  • Creates or signs in their account

  • Reconfigures their settings

  • Reports an incident

  • Creates a task

  • Takes a survey

  • Provides feedback

Image showing dummy form on a mobile screen
Image showing dummy form on a mobile screen
Image showing dummy form on a mobile screen

Types of forms

Simple form

  • Includes one to a few user inputs​

  • Is completed in one sitting

  • User inputs are related

Gif showing the sign in process for Amazon
Gif showing the sign in process for Amazon
Gif showing the sign in process for Amazon

Amazon sign-in

Gif showing the checkout process for Barnes & Noble
Gif showing the checkout process for Barnes & Noble
Gif showing the checkout process for Barnes & Noble

Checkout process for Barnes & Noble

Complex, long form

  • Scrolling is required to see all user inputs​

  • May need 1+ sittings to complete

  • User inputs are categorized into sections based on their relationship

Complex, multi-step form

  • User inputs are shown on multiple pages​

  • May need 1+ sittings to complete

  • User inputs are categorized into sections based on their relationship; each section is one page of the form

  • Typically includes a progress indicator

Gif showing the quote process for Geico insurance
Gif showing the quote process for Geico insurance
Gif showing the quote process for Geico insurance

Car insurance quote process for Geico

Anatomy

A form is built from the following elements. Not all forms use every listed element.
  1. Form title

  2. Form instructions

  3. Section divider

  4. Section title (if 2+ sections)

  5. Freeform input

  6. Help

  7. Selection control input

  8. Bounded-entry input

  9. Buttons (CTA)

Image showing a dummy form with labels to match the provided legend
Image showing a dummy form with labels to match the provided legend
Image showing a dummy form with labels to match the provided legend

Building forms

Note: The following visuals were developed using open-sourced Orbit Design System.

Layout

Image showing a dummy form on a mobile screen
Image showing a dummy form on a mobile screen
Image showing a dummy form on a mobile screen
  • Use a light-colored card to present a form.

    • Note: On desktop, do not place the form directly on the application background.​

  • Center-align the card on desktop screens, and left-align the card on mobile screens.

  • Left-align all form elements with the card container, except the primary button.

Presentation

A form can be presented on a desktop screen in three types, but should be consistent across product:​
  1. Dedicated page

Use when the form is more complex on desktop screens.

Image showing a dummy form on its own page in the application
Image showing a dummy form on its own page in the application
Image showing a dummy form on its own page in the application
  1. Modal dialog

Use for simple forms only on desktop screens.

Image showing a dummy form on a modal dialog on a desktop screen
Image showing a dummy form on a modal dialog on a desktop screen
Image showing a dummy form on a modal dialog on a desktop screen
  1. Side panel

Use for simple forms only on desktop screens.

Image showing a dummy form on a side panel from the right side of a desktop screen
Image showing a dummy form on a side panel from the right side of a desktop screen
Image showing a dummy form on a side panel from the right side of a desktop screen

Column

Use a single vertical column for user inputs, unless the inputs are directly related.​ I.E. city, state, zip code inputs
Image showing a form titled Personal Information with several user inputs on desktop screen
Image showing a form titled Personal Information with several user inputs on desktop screen
Image showing a form titled Personal Information with several user inputs on desktop screen

Spacing

Spacing should be a multiple of 4px to fit within a soft grid.
  • Spacing between inputs should be at least 16px to 32px

  • Place a spacing of at least 40px between the last input and the primary button of the form

  • Spacing between form sections should be larger than the spacing between inputs

Image showing the spacing for a form on a desktop screen
Image showing the spacing for a form on a desktop screen
Image showing the spacing for a form on a desktop screen

Headers

Use form titles and subtitles to distinguish form sections to provide a table contents for scanning.
Image showing a form titled Personal Information on a mobile screen
Image showing a form titled Personal Information on a mobile screen
Image showing a form titled Personal Information on a mobile screen
  • Form titles:
    • Should be largest type size on the screen​

    • Use short & concise language

    • Position at the top-left of the form

  • Form subtitles:
    • Should be smaller than the title, but larger than the input's labels​

    • Use short & concise language

    • Position at the top-left of its section

Buttons

Button guidelines should be followed consistently across the product.
  1. Choose button type based on the emphasis given to the action the button is connected to.

​The primary button should be the 'Submit' action.

Image showing a primary, seocndayr, and ghost button together
Image showing a primary, seocndayr, and ghost button together
Image showing a primary, seocndayr, and ghost button together
Image showing Dos and Don'ts for butotn labels
Image showing Dos and Don'ts for butotn labels
Image showing Dos and Don'ts for butotn labels
  1. Use action-specific language in the button.

Use 'Report incident' instead of 'Submit"'.

  1. Right-align the primary button to the card & left-align the secondary button to the card.

Image showing a dummy form with two buttons at the bottom of the form
Image showing a dummy form with two buttons at the bottom of the form
Image showing a dummy form with two buttons at the bottom of the form
Image showing a dummy form with three buttons at the bottom of the form
Image showing a dummy form with three buttons at the bottom of the form
Image showing a dummy form with three buttons at the bottom of the form
  1. For button groups, right-align the primary, place the secondary to the left of primary, & left-align the tertiary to the card.

  1. Do not top-align buttons on a form.

Gif showing a form with buttons at the top and bottom of the form
Gif showing a form with buttons at the top and bottom of the form
Gif showing a form with buttons at the top and bottom of the form
Gif showing a form with a sticky footer at the bottom with buttons
Gif showing a form with a sticky footer at the bottom with buttons
Gif showing a form with a sticky footer at the bottom with buttons
  1. Do not anchor the buttons to the form.

  1. Do not disable buttons until form requirements are met; let the user make mistakes.

Gif showing a user submit an incomplete form and gets a error message showing them the missing fields
Gif showing a user submit an incomplete form and gets a error message showing them the missing fields
Gif showing a user submit an incomplete form and gets a error message showing them the missing fields
Gif showing a snackbar appearing after the user submits the form using the submit button
Gif showing a snackbar appearing after the user submits the form using the submit button
Gif showing a snackbar appearing after the user submits the form using the submit button
  1. Provide feedback after the user clicked the button through a loader or disabled state.

Types of forms

Use form titles and subtitles to distinguish form sections to provide a table contents for scanning.
  1. Simple form

  • Users can typically see all input fields without scrolling​

  • Can be presented on a modal, side panel, or dedicated page

  • Includes one to a few input fields

Gif showing a sign in screen on a desktop device
Gif showing a sign in screen on a desktop device
Gif showing a sign in screen on a desktop device
Gif showing a long form that requires the user to scroll on a desktop screen
Gif showing a long form that requires the user to scroll on a desktop screen
Gif showing a long form that requires the user to scroll on a desktop screen
  1. Complex, long form

  • Users must scroll to see all input fields

  • Should be presented on a dedicated page

  • Includes many user inputs categorized and ordered in a logical way

  • Can include a "back to top" button

  1. Complex, multi-step form

  • Should be presented on a dedicated page​

  • Includes many user inputs categorized and ordered in a logical way

  • Includes a progress indicator showing the user where they are in the form

  • Can include a summary page at end

  • Users expect this type of form to save automatically as they progress

Gif showing a multi step form on desktop screen
Gif showing a multi step form on desktop screen
Gif showing a multi step form on desktop screen

Input field labels

Use form titles and subtitles to distinguish form sections to provide a table contents for scanning.
Image showing Dos and Don'ts for headings in a form
Image showing Dos and Don'ts for headings in a form
Image showing Dos and Don'ts for headings in a form
  • Input labels must always be present​

  • Labels should be 1 to 3 words

  • Top-align the label to the input

  • Use sentence-case capitalization

  • All field should be labelled as "Required (*)" or "Optional"

  • Try to avoid optional fields in the form

Errors & validation

Not errors are preventable, but be proactive in helping the user fix them.
  1. Data formatting

  • Provide data entries with input-masking.

  • Allow submission of multiple data formats.

  • Provide default values.

  1. Inline validation

  • Provide immediate feedback of user inputs as soon as the user input field loses focus.

  1. Error messages

  • Provide clear indication of which input have errors and how to fix them​

  • Do not use technical jargon or negative phrasing in the message

Image showing error message with input fields
Image showing error message with input fields
Image showing error message with input fields

Feedback

Use consistent feedback types to display a message across the product experience.​
  1. Success messages

  • Use after user successfully submits form.

  • Use a toast message or snack-bar.

  • Do not add a timer to automatically close the success message.

Image showing a dahsboar with a success message in the bottom-left corner of the screen
Image showing a dahsboar with a success message in the bottom-left corner of the screen
Image showing a dahsboar with a success message in the bottom-left corner of the screen
Image showing a confirmation dialog asking if you want to save or discard changes
Image showing a confirmation dialog asking if you want to save or discard changes
Image showing a confirmation dialog asking if you want to save or discard changes
  1. Confirmation dialogs

  • If the user has made progress on a form and tries to navigate from the form, provide a confirmation dialog that lets the user know the actions they are taking.

  • Make the dialog clear with distinct actions.

  1. Progress indicators

  • If the form takes long to upload, let the user know their form has been submitted or of their progress in the form.

  • Use a loader or progress bar.

Gif showing a submit button that has a loading state after clicking on the submit button
Gif showing a submit button that has a loading state after clicking on the submit button
Gif showing a submit button that has a loading state after clicking on the submit button

Desktop specs

For simple forms

  • Present the form on a popup or a side panel to allow for quick completion and action.

  • An exception; the login screen is typically on a dedicated page

Gif showing a simple form popup on a modal in a desktop screen
Gif showing a simple form popup on a modal in a desktop screen
Gif showing a simple form popup on a modal in a desktop screen

For complex forms

Gif showing a long form on a dedicated page on desktop screen
Gif showing a long form on a dedicated page on desktop screen
Gif showing a long form on a dedicated page on desktop screen
  • Present the form on one dedicated page, and group inputs into relevant and clear sections.

When to use a multi-step form on desktop

  • If the form is infrequently completed.

  • If accuracy is prioritized over efficiency.

  • If the form is excessively long.

  • Do not present a multi-step form in a popup if other popups are expected to appear over the popup, but use a dedicated page instead.

Gif showing Rocket Mortage multi step form for a mortgage quote
Gif showing Rocket Mortage multi step form for a mortgage quote
Gif showing Rocket Mortage multi step form for a mortgage quote

Mobile specs

For simple forms

  • Present the form on a bottom sheet or a dedicated page.

  • Do not use a popup or side panel on a mobile screen.​

Gif showing a simple form appear as a bottom sheet on a mobile device
Gif showing a simple form appear as a bottom sheet on a mobile device
Gif showing a simple form appear as a bottom sheet on a mobile device

For complex forms

Gif showing a multi step form on a mobile device
Gif showing a multi step form on a mobile device
Gif showing a multi step form on a mobile device
  • Present the form on a multi-step form on a dedicated page.

  • Use a horizontal progress bar and place it at the top of the form.

When to use a long form on mobile

  • If the user is expected to not have reliable WiFi or cell service, which will slow progression in the form.

  • I.E., the user works in a warehouse that has electromagnetic interference with the plant machines.

Gif showing a multi step form have slow loading times
Gif showing a multi step form have slow loading times
Gif showing a multi step form have slow loading times

Other mobile best practices

Gif showing the number keyboard appear after the user clicks into a phone number input field
Gif showing the number keyboard appear after the user clicks into a phone number input field
Gif showing the number keyboard appear after the user clicks into a phone number input field
  • Show the expected input keyboard when the user clicks the trigger.​

  • Ensure touch targets are at least 40px x 40px.

  • Use at least 16px or 1rem font size in text fields.​

  • Provide mobile-friendly shortcuts by using the mobile device's native features, such as a camera or date picker

Accessibility

Respect the user

  • Only ask for information that is necessary.​

  • Consolidate inputs if possible.​

  • Separate the form's user inputs into related sections.​

  • Give the user a single path to form completion by providing a predictable order of user inputs.

  • If there is a field the typical user will not understand, provide clear directions to guide them in their response. ​

Image showing illustration of a UX designer and wireframes
Image showing illustration of a UX designer and wireframes
Image showing illustration of a UX designer and wireframes

Form layout is critical for keyboard-only users

Image showing a graphic for keyboard focus layout
Image showing a graphic for keyboard focus layout
Image showing a graphic for keyboard focus layout
  • Use one column unless the input fields are directly related ('City, State, Zip code')​​

  • Ensure the keyboard-tab order is correct

  • Group related inputs under the same section to give users more context.​

  • Order the input fields in a predictable manner.​

Consider cell service or WiFi of the user

  • Will the user have limited Wi-Fi or cell service?

  • ​If yes, consider limiting how many pages the user has to load​​

  • Common scenario in large manufacturing plants:​

  • ​Rapid temperature changes in work environment can degrade cell service.​

  • ​Electromagnetic interference coming from machines can also degrade cell service.

Image showing illustration of someone holding a phone trying to get a WiFi signal
Image showing illustration of someone holding a phone trying to get a WiFi signal
Image showing illustration of someone holding a phone trying to get a WiFi signal

Ensure visibility of the form elements

Image showing a tooltip element being hidden by another element when focused on
Image showing a tooltip element being hidden by another element when focused on
Image showing a tooltip element being hidden by another element when focused on
  • Critical information should always be visible

  • If using tooltips, accordions, or progressive disclosure behaviors to store additional information, ensure they are friendly to users who use assistive technology or keyboard-only

Resources used

paschalallie@gmail.com

Connect with me

Copyright © Allie Paschal.