Forms are everywhere. You use them when signing up for a new bank account, or booking travel. Good forms help you succeed in your goals without getting in the way, or are even a pleasant experience. Bad forms can have potentially catastrophic consequences.
Pega’s customers create forms for almost every industry across the world. Many of our customers’ case management tasks rely on data-entry by users. Finding a way to shave even a few seconds off form completion times without affecting accuracy can add up to significant savings in both time and money.
Most studies around form design focus on first-use, and/or consumer applications. What’s wrong with this? Well, these forms tend to be very short (e.g. sign-up forms). Not to mention these studies come with an innate bias. By their very nature, sign-up forms are collecting data that is personal and well-known to the user. However, in enterprise applications, the user entering data doesn’t have same the luxury of being as familiar with each piece of data to be entered.
Also, the metrics used in the short form studies (conversion rate, etc.) are not helpful in many enterprise scenarios, as users are compelled to use the application or process as part of their work.
Although many of the same principles should apply between consumer and enterprise form design, validation on this assumption is rare.
This led us to take matters into our own hands and test the following layout scenarios:
Does grouping inputs of similar data onto a single line (such as City, State, Zip) feel more natural than each input residing on its own line? If so, is it also faster?
Does condensing whitespace between fields improve completion time? If so, does it still feel natural?
And finally, can positioning inputs or fieldsets differently than the usual simple top-to-bottom approach effect the perception or actual speed of completion time?
What we tested
Speed: Optimizing our default form for speed will reduce the time spent on processes, and provide a better experience no matter the form length. Our team commonly sees form-based processes that are 50+ fields in length… and that’s after being shortened and optimized!
Preference: To have an effective default, we needed to have a form layout that was generally accepted by users. A form could be the fastest to fill in, but without user buy-in, application authors are going to be looking for an alternate style.
Layouts: We tested six different form layouts. Each version had the same field heights, text styles, and content (the content was mildly shuffled between rounds).
- Left labels
- One column
- One column, tight spacing
- Two column
- Two stacked
(Three column was eliminated in the pilot round)
We thought that our proposed design would do well in testing, as it followed many of the good principles of form design established by previous studies.
In addition to the field layout, our proposed form design also had a few other design choices:
- Fields are mostly one consistent size, unless there is a reason to have it longer, e.g. Street address.
- The form has a max width of 800px.
- Field heights are 32px
How we tested
To test various form designs, we had participants fill in three forms:
- A short practice round to familiarize them with the questions
- Round 1, with a form design randomly selected.
- Round 2, with a random (but different from round 1) design selected.
Round 1 and round 2 had the exact same questions with the order swapped.
Time comparison: To control for the differences between individuals, we calculated the difference in time between their first and second round to compare those form designs. We expected to see improvements across all the conditions, as our pilot study showed that people improved with practice no matter what. We were interested in the degree of change.
We matched up each condition in head-to-head competition, and found some statistical differences:
- “Left labels” is statistically slower than “One column (tight)” (p < 0.1)
- “Two column” is statistically shower than “Proposed” (p<0.05), “One column (tight)” (p<0.01), “One column” (p <0.05), and Two stacked (p < 0.1)
(See this breakdown in the Appendix)
Apart from the raw data we saw, we considered the performance on a few additional aspects:
- We saw a lot of errors with the “two stacked” condition. People tended to miss fields in the form. There was no validation to slow users down if they missed a field.
- There was no statistical difference between performance on all the top-labels one column varieties (“Proposed”, “One column (tight)”, and “One column”).
Preference comparison: We asked participants to indicate their preference of the two form varieties they filled out. We wanted this additional piece of information to guide our decision making.
We asked participants to leave some notes about why they picked the form type they did.
Participants told us they liked:
- Form width that matches input length.
- Forms that feel shorter.
- Tabbing instead of clicking.
- Tabbing in a consistent direction.
- Labels in a consistent location.
They told us they disliked:
- Whitespace that doesn’t seem well-used.
- Tabbing from the bottom of a tile/card to the top of another.
These opinions were reflected in what they chose.
So, what does all this mean for designing forms?
Our study showed us that for speed, one column layouts, top labels, and consistent tabbing behavior is best. This is not surprising, given previous research, but we were excited to see this hold up for longer forms. Participants preferred forms that had logically grouped fields, also not a surprise.
- Group fields logically. Two stacked and the proposed design did well because they grouped fields clearly
- Default to “Default.” Pega’s “Default” layout is a one column layout with tight spacing between fields. This performed well in our tests, and we continue to refine it as we learn more about how people fill in forms.
- Use a max-width for your form. Reducing the stretch of fields makes things easier to read, and helps to group things logically.
- Don’t put form fields in multiple columns. Two and three column layouts are slower and less preferred than one column layouts.
- Don’t use left labels for data entry. Left label layouts are slower and less preferred than top label layouts.
- Don’t neglect designing a form. One column layouts with no logical grouping are less preferred than ones with grouping.
We are at the beginning stages of researching forms. Our results so far are unsurprising – a great thing! They match up with what is known about form design, while validating these principles when used in arbitrarily long forms. That being said, our research has a few caveats and restrictions to note:
- We only tested Pega employees. All of the participants can be assumed to be computer literate.
- There were regional differences we didn’t have enough data to parse out. We would like to research more to see if there are actual differences between U.S. and International groups.
- Due to random chance, we didn’t directly compare the proposed design to two stacked. This is especially unfortunate because the two of them were the top preferred layouts. Future research will control better for this.
- The test form was a contrived example, real world applications may get different results.
- A well-designed two-column form will probably beat a poorly-designed one-column form. Even though one-column is faster than two-column, good design of the form could make up for this deficit.
What’s next for Pega Design and form research?
Research tends to expose more questions than it answers, and our form study is no exception. We have a lot more questions we want to explore, including:
- How do people interpret large amounts of data?
- Are there differences based on language or culture?
- How do non-tech literate people fill in forms?
- Does dynamic content change things?
- How does speed and preference change with a user is very familiar with a form?
- Does the content of a form change which layout is best?
- Are there differences between mobile, tablet, and desktop for optimal forms?
Appendix – more data on our research