Overview

Form Research

Usability testing

Documentation

Image showing multiple pictures of forms in the product
Image showing multiple pictures of forms in the product
Image showing multiple pictures of forms in the product

Objectives

Identify user preferences and best features for usability in form design within the context of software within the warehouse domain.

This research, alongside secondary research on form design, was used to create the UI pattern documentation on form design to support the design system guidelines, found here.

Completion

November 2022

Objectives

My role in research

I partnered with a researcher to complete usability testing to assess preferences in applying forms in the context of filling out and editing forms in the warehouse space.

Other secondary research was done to find standard UX practices, such as reviewing "Web Form Design" by Luke Wroblewski, as well as reviewing documentation on form design from other design systems, like IBM's Carbon.

Image showing the cover of Web Form Design by Luke Wroblewski
Image showing the cover of Web Form Design by Luke Wroblewski
Image showing the cover of Web Form Design by Luke Wroblewski

Research questions & hypotheses

  1. What form types do user prefer when completing or editing a form?

  • Users prefer long forms that scroll on one page versus multi-step forms on multiple pages to avoid the wait time of loading a new page.​

  • Users prefer to complete certain forms on desktop or mobile depending on the scenario or context of the form.

  • Users prefer to edit forms on a long form on one page that scrolls to quickly edit the form.

  1. How do users expect a form to appear on their screen?

  • Users do not expect a form to populate from the side of their screen in a panel presentation.

  • Users most expect the form to populate on a new page or appear on a modal in the center of the UI.​

  1. What do users prefer with the general layout on a form?

  • Users prefer single column layout unless the inputs are directly related.​

  • Users appreciate having a "Back to top" FAB to navigate through the form.

  • Users prefer the form's primary button to be left-aligned to the form on desktop screens, and prefer right-aligned on mobile phones.

  • Users prefer clear visual indications of form sections and separations through the use of tiles/ cards and divider lines.

Methodology

Image showing an illustration of two hands on a laptop keyboard with images of data visualizations
Image showing an illustration of two hands on a laptop keyboard with images of data visualizations
Image showing an illustration of two hands on a laptop keyboard with images of data visualizations

Conduct three rounds of moderated usability tests and interviews to ask participants to complete and edit a form.

Note: Rounds 1 and 2 only test on desktop screens, and Round 3 tests on mobile. Certain user flows that involve mobile devices, such as an active warehouse worker, is anticipated to need mobile forms. This impacted testing majority of forms on desktop.

Image showing a table explaining the methodology of the usability tests
Image showing a table explaining the methodology of the usability tests
Image showing a table explaining the methodology of the usability tests

Recruitment

Interview the right participants

Round 1 were recruited within Honeywell employees, and screeners were used in the User Testing platform for Round 2 and 3.
  1. Software developer at Honeywell

  • Recruited for Round 1 participants

  • Internally recruited within Honeywell

  • Actively works on customer integrations

Image showing a white male in front of a desktop monitor working
Image showing a white male in front of a desktop monitor working
Image showing a white male in front of a desktop monitor working
Image showing illustration of a worker with a hard hat and safety vest on in front of two desktop monitors
Image showing illustration of a worker with a hard hat and safety vest on in front of two desktop monitors
Image showing illustration of a worker with a hard hat and safety vest on in front of two desktop monitors
  1. Warehouse or Factory workers

  • Recruited for Round 2 participants

  • General recruit from UserTesting platform screened for specific demographics

  • Warehouse or factory work experience, either current or recent

  • Uses desktop within their role

  • Even mix of gender and age

  1. Warehouse or Factory workers

  • Recruited for Round 3 participants

  • General recruit from UserTesting platform​ screened for specific demographics

  • Warehouse or factory work experience, either current or recent

  • Uses mobile phone within their role

  • Even mix of gender and age

Image showing a worker packing boxes on a conveyor belt line
Image showing a worker packing boxes on a conveyor belt line
Image showing a worker packing boxes on a conveyor belt line

Usability tests

Round 1 prototypes

  • User: Software developer at Honeywell 

  • Task: Create an integration template in both a long form and multi-step form

  • User was probed throughout the interview asking for element preferences.

  • User was asked which experience was preferred after interacting with both prototypes

  1. Create an integration template - Long form

All form input fields were placed on one page and the user scrolled to complete all required inputs.

Gif showing the Round 1 prototype asking users to fill out an integration template using a long form
Gif showing the Round 1 prototype asking users to fill out an integration template using a long form
Gif showing the Round 1 prototype asking users to fill out an integration template using a long form
  1. Create an integration template - Multi-step form

Form input fields were separated into sections, and each section was placed on one page of the form.

Gif showing the Round 1 prototype asking users to fill out an integration template using a multi-step form
Gif showing the Round 1 prototype asking users to fill out an integration template using a multi-step form
Gif showing the Round 1 prototype asking users to fill out an integration template using a multi-step form

Round 2 prototypes

  • User: Warehouse/factory worker that uses desktop screens in their role

  • Task: Create an incident report in both a side panel and modal format

  • User was probed throughout the interview asking for element preferences.

  • User was asked which experience was preferred after interacting with both prototypes

  1. Report an incident - Long form, Desktop

The form appears in a right-rail panel and all form inputs are available from scrolling.

Gif showing a form that appears from the right side of a desktop screen in a panel
Gif showing a form that appears from the right side of a desktop screen in a panel
Gif showing a form that appears from the right side of a desktop screen in a panel
  1. Report Incident - Multi-step form, Desktop

The form appears in the middle of the UI in a modal dialog with different form sections.

Gif showing a form that appears in the middle of the desktop screen in a modal popup
Gif showing a form that appears in the middle of the desktop screen in a modal popup
Gif showing a form that appears in the middle of the desktop screen in a modal popup

Round 3 prototypes

  • User: Warehouse/factory worker that uses mobile phones in their role

  • Task: Create an incident report on a phone for both prototypes

  • User was probed throughout the interview asking for element preferences.

  • User was asked which experience was preferred after interacting with both prototypes

  1. Report Incident - Long form, Mobile

A form on a mobile screen to report an incident on a long form with the same inputs as the desktop version.

Gif showing a long form on a mobile screen to report an incident
Gif showing a long form on a mobile screen to report an incident
Gif showing a long form on a mobile screen to report an incident
  1. Report Incident - Multi-step form, Mobile

Gif showing a multi-step form on a mobile screen to report an incident
Gif showing a multi-step form on a mobile screen to report an incident
Gif showing a multi-step form on a mobile screen to report an incident

A form on a mobile screen to report an incident on a multi-step form with the same inputs as the desktop version.

Results

Raw data

In the raw results below, you can view where users preferences trended between desktop users, which were rounds one and two, to mobile users, which was round three. 

  • Majority desktop users preferred a long form, while mobile users preferred a multi-step form.

  • Majority of desktop and mobile users preferred right-aligned CTA button.

  • Almost all participants for desktop and mobile preferred the buttons to be at the bottom of the form.

  • All desktop users preferred having a 'Back to top' button on the form, and majority of mobile users preferred to not have one.

Image showing the raw data in a chart
Image showing the raw data in a chart
Image showing the raw data in a chart

Key takeaways

  • Desktop users prefer scrolling on a long form over clicking through a multi-step form.

  • Mobile users prefer a multi-step form over a long form.

  • Users expect to be taken to a dedicated page to complete a form, versus the form appearing from the side or within a modal.

  • Users do not have a significant preference in CTA button placement, data input types, or how form sections are divided. 

Image showing a form titled Create New Template on a desktop screen
Image showing a form titled Create New Template on a desktop screen
Image showing a form titled Create New Template on a desktop screen
Image showing a form titled Report Incident on a mobile screen
Image showing a form titled Report Incident on a mobile screen

Insights

Gif showing a form on a mobile screen loading slow due to low cell service
Gif showing a form on a mobile screen loading slow due to low cell service
Gif showing a form on a mobile screen loading slow due to low cell service
  • Users value efficiency of a long form, but would prefer a multi-step form when accuracy is prioritized over efficiency, on desktop.

  • Users prefer to focus on the form on a new page when opening the form so they complete it effectively.

  • Mobile users prefer a long form that scrolls versus a multi-step form when they have low cell service or WiFi.

paschalallie@gmail.com

Connect with me

Copyright © Allie Paschal.