FORGE UI FORM PATTERN
TL;DR
Overview
The Forge UI Design System team was seeing inconsistent visual designs and interactions when a form was displayed on a Honeywell Forge product.
Because forms are a heavily used way of inputting data in Honeywell Forge products, whether it be creating an Incident Report or Work Order, the pattern needs to be consistent. Our users shouldn't have to adjust their expectations when filling out a form in different sections of the same product or different Honeywell products.
Best practices for the UI pattern of a form was researched, and documentation for the Forge UI Design System was created to implement consistency in forms.
Goals
Research industry best practices on form design
Understand how users prefer to complete forms in Asset Management software
Create Form Design documentation for design system adopters to use
Role
UX UI Designer Lead
Duration
Winter 2022
RESEARCH
Research questions
What form type do users prefer when completing or editing a form?
How do users expect a form to appear on their screen?
Methodology
Type: 3 rounds of moderated usability tests
Task: Ask users to complete multiple forms (on desktop or mobile devices)
Goal: Identify user expectations and how users prefer to fill out forms
Recruitment
Honeywell engineers: Internally recruited through email
Warehouse/ Distribution center employee: Externally recruited through User Testing
Round 1 Testing
Task: Create an Integration template on a desktop screen
User: Honeywell engineer (3 participants)
Goal: Determine if users prefer a long form or a multi-step form
Results: All participants preferred the long form experience because they could fill out the form quicker, and don't have to wait for new pages to load.
Round 2 Testing
Task: Create an incident report on a desktop screen
User: External warehouse employee (5 participants)
Goal: Determine if users prefer a side panel or modal presentation
Results: 4 of 5 participants preferred the long form experience. If reporting an incident, they need the ability to fill it out as efficiently as possible.
Round 3 Testing
Task: Create an incident report on a mobile screen
User: External warehouse employee (6 participants)
Goal: Determine if users prefer a long form or multi-step form
Results: 5 of 6 participants preferred the multi-step form experience. Participants mentioned feeling disoriented filling out a long form on a mobile device.
Note: 2 participants mentioned that unreliable WiFi or service will disrupt the multi-step form experience due to low loading speeds.
BUILD A FORM
When to use a form
It is best to use a form when a user:
Creates or signs in their account
Reconfigures their settings
Reports an incident or creates a task
Takes a survey or provides feedback
Anatomy
Form title
Form instructions
Section divider
Section title (if 2+ sections)
Freeform input
Help
Selection control input
Bounded-entry input
Buttons (CTA)
Layout
The layout of a form must be consistent within a product experience.
Position
On desktop, place the form on a card or tile to give it visual distinction
On mobile, place the form on the application background
Column
Use a single-column layout, unless the input fields are a group
I.E., City, State, Zip code
Spacing
Use spacing that is a multiple of 4px to fit the form in a soft grid
Use spacing to create visual hierarchy between inputs fields and sections
Headers & labels
Provide descriptive headers and labels for the form so users know what the form is about and the data needed for user fields.
Headers
Use headings for the form title and subtitles for the form's sections (if applicable).
Form titles should:
Be largest type size used (Heading 1)
Use short & concise language
Be positioned at the top-left
Form subtitles should:
Be the second-largest type sized used (Heading 2)
Be placed at the top-left of its section
Labels
Use labels for data fields, such as text input fields or date-pickers
Form field labels should:
Always be present (with a Required (*) or Optional label)
Be concise with 1 to 3 words
Be top-aligned to the input
Use sentence-case capitalization
Buttons
Use primary, secondary, and quiet buttons appropriately (Main action uses primary).
Buttons should:
Use action-specific language
Use concise words (Submit)
Align buttons:
Right-align the primary button
Left-align the secondary button
FORM TYPES
Presentation
A form can be presented on a screen on a dedicated page, modal, or a side panel.
Dedicated page
Dedicated pages take the user to a new page to complete the task.
Use when the form is complex on desktop screens
Always use on mobile screens
Modal
Modals appear in the center of the screen and cover the main experience of the application.
Use for simple forms on desktop screens
Do not use on mobile screens
Side panel
Side panels appear on the right-side of the screen and cover the main experience.
Use for simple forms on desktop screens
Do not use on mobile screens
Types
A form can be simple, complex-long, or complex-multi step.
Simple
Users can see all input fields without scrolling
Presented on a modal, side panel, or dedicated page
Includes one to a few input fields
Complex-long
Users must scroll to see all input fields
Presented on a dedicated page
Includes many user inputs categorized and ordered in a logical way
Includes a "Back to top" button
Complex-multi step
Presented on a dedicated page
Includes many user inputs categorized and ordered in a logical way
Includes a progress indicator
Includes a summary page at end
Form type on desktop
Simple forms
Present the form on a modal or a side panel to allow for quick completion
The login screen is typically on a dedicated page and is an exception
Complex forms
Present the form on a dedicated page, and group inputs into relevant and clear sections
Use multi-step forms when accuracy is needed or when the form is excessively long
Form type on mobile
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
Complex forms
Present a multi-step form on a dedicated page
Use a horizontal progress bar to place at the top of the form
Note: if the user doesn't have reliable WiFi , the multi-step form will have longer load speeds
CONCLUSION
Always respect the user
Only ask for necessary information
Separate the form's user inputs into related sections
Give the user a single path to form completion & a predictable order of inputs
Provide clear directions for inputs the user may not understand