Overview

This forms test was to prove efficiency in a specific layout in a form. We had three types of forms within our software: vertical cards, vertical stepped cards, and horizontal cards. There was a disagreement within our design and product team as to which to use. I had prepared three sets of questions and had them take form into the three forms that would display in random order. We had a fairly small data set, but it was enough to draw conclusions. We found that both of the forms in vertical order were far more efficient than the forms in horizontal order.

Plan behind the test

Each card has 5 questions. First and second five are text inputs. On the third card, there are two dropdowns, a radial button selection, and a couple checkbox lists. The first form, variable A, is a three column card layout on a singular page. The second is a stepped form, variable B, is a similar three column card layout, but with a next between each card. The third, variable C, is a horizontal layout.

Form layouts
Fig. 1 - Layout of forms with corresponding variable assignment.

Questions

Most of what our persona does is more of a data entry. With this in mind, I wanted the questions to be as off the top of the head as quickly as possible. The three things people know most about are their car, home, and employment.

Form layouts
Fig. 2-1 - The first set of questions were about a persons residence.
Form layouts
Fig. 2-2 - The second set were on their current vehicle.
Form layouts
Fig. 2-3 - The forms were generated in random order, but the list of questions stayed consistent.
Form layouts
Fig. 2-4 - This lead us to standardize the data by finding an approximate reading WPM.
Form layouts
Fig.2-5 - The last section was on employment. All categories had ten inputs, four selectors, and a singular array of checkboxes.

Building

I first built the page with placeholder form options and put the forms together first. After the code was implemented, I started with JavaScript to get the forms to progress through as intended. I then started iterating through an array of questions and input types. I then started iterating through the form array. Soon I had form and questions pulling in dynamically. With PHP, I pushed the response times to JSON. Those times were from when the form was opened to when the “Continue” button was hit.

Data analysis

This is always the most complex part of the data, processing it and seeing what it is telling you. From the data that was collected, we removed outliers that seemed to be outside of understandable range. We removed anything that was less than ten seconds and anything more than 252 (yes, this is an odd cutoff, but there was a significant gap afterwards). We then took the number of words of all the questions and made it into a ratio to negate the difference of reading speed. We then averaged the forms by sets of questions, then averaged those together to get our outcome. These results were very clear. The horizontal form was consecutively about 20% slower than both vertical layouts.

Form layouts
Fig. 3 - Each row has the "order | title | words in questions". Each column has the type of form used. We had around 250 submissions with about 4-6 left out on each due to time inconsistencies.
Form layouts
Fig. 4 - Form layout A and B were clear winners in our short survey. A and B were the vertical columned layouts. We had around 250 submissions from our internal test.