Filling out forms are painful when they’re time-consuming. A form that’s efficient to fill out can save users time. But it can also save companies a lot of money. A few seconds saved on a form can end up saving companies millions of dollars a year in reduced labor costs. Form efficiency makes a huge difference when you look at how it affects thousands of people over an extended period.
There are a couple of innovative form techniques that can save users time and companies a lot money. A unified text field unites multiple form fields into a single text field so that users can type all the information asked at once. A location automation field automatically fills in the city and state fields after you enter the zip code.
Keystroke-Level Model
Just how fast is using a unified text field and location automation field compared to the traditional approach of using multiple form fields? The best way to find out is to analyze the time it takes for users to complete each step in the process and compare each approach. To do this, we’ll use a hard science approach known in the field of human-computer interaction as the Keystroke-Level Model (KLM).
KLM is a widely used method for predicting how long it takes users to do a task on a user interface. It uses estimated times for basic, routine user actions. These predictions come from a study by Card, Moran & Newell involving extensive tests with users.
To compare the efficiency of each approach, we’ll analyze the time it takes for users to enter an address into a system. We’ll assign each user action in the task a duration that represents the average amount of time an experienced user would take to do it.
- Keystrokes (each) 0.28 seconds
- Mouse pointing 1.1 seconds
- Press or release mouse button 0.1 seconds
- Homing (hands on keyboard or mouse) 0.4 seconds
- Mentally preparing 1.2 seconds
Multiple Form Fields
- User decides to do task 1.2 seconds
- Points mouse to “address” field 1.1 seconds
- Clicks on the “address” field 0.2 seconds
- Types in the address “1100 Congress Ave.” (0.28 x 18) = 5.04 seconds
- Presses Tab to change focus to “city” field 0.28 seconds
- Types in the city “Austin” (0.28 x 6) = 1.68 seconds
- Moves hands back to mouse 0.4 seconds
- Points mouse to “state” dropdown box 1.1 seconds
- Clicks on “state” dropdown box 0.2 seconds
- Points mouse to scrollbar 1.1 seconds
- Clicks and holds the scrollbar 0.1 seconds
- Drags the scrollbar so that the correct state shows up 1.1 seconds
- Finds “Texas” 1.2 seconds
- Releases mouse button 0.1 seconds
- Points to “Texas” 1.1 seconds
- Clicks on “Texas” 0.2 seconds
- Moves hands back to keyboard 0.4 seconds
- Presses Tab to change focus to “zip code” field 0.28 seconds
- Types in the zip code “78701” (0.28 x 5) = 1.4 seconds
- Verifies that information entered is correct 1.2 seconds
- Presses Enter 0.28 seconds
Total Task Time: 19.66 seconds
Unified Text Field
- User decides to do task 1.2 seconds
- Points mouse to “address” field 1.1 seconds
- Clicks on “address” field 0.2 seconds
- Moves hands on keyboard 0.4 seconds
- Types in “1100 Congress Ave. Austin, TX 78701” (0.28 x 35) = 9.8 seconds
- Verifies that information entered is correct 1.2 seconds
- Presses Enter 0.28 seconds
Total Task Time: 14.18 seconds
Location Automation Field
- User decides to do task 1.2 seconds
- Points mouse to “address” field 1.1 seconds
- Clicks on “address” field 0.2 seconds
- Moves hands on keyboard 0.4 seconds
- Types in “1100 Congress Ave.” (0.28 x 18) = 5.04 seconds
- Presses Tab to change focus to “zip code” field 0.28 seconds
- Types in “78701” (0.28 x 5) = 1.4 seconds
- Verifies that information entered is correct 1.2 seconds
- Presses Enter 0.28 seconds
Total Task Time: 11.10 seconds
Results Analysis
From the results, we can see that a location automation field is the fastest approach. Compared to using multiple form fields, users save 8.56 seconds with a location automation field. That might not seem like a lot of time for one user. But for a large company of employees, that’s a lot of man-hours and labor costs saved over the course of a year. While a location automation field works well for zip codes, it may not work for other types of fields. However, the main takeaway is to always automate your fields when there’s an opportunity to do so on your form.
A unified text field is not as fast as a location automation field, but it still beats using multiple form fields. Users save 5.48 seconds with a unified text field. That’s fast, but only when the user doesn’t make any typing errors. When the user makes a typing error, filling out the form could take longer. So if a company is full of employees who are expert typists, a unified text field can work well. But if most of their employees are poor at typing, a unified text field might make things harder.
It’s important to note that in this situation, typing in state names in the abbreviated form does not make users do that much more work. In fact, using a dropdown box to get a state name can take users more time, as it requires users to take their hands off the keyboard in the middle of their task and point to the control.
Homing (0.4 sec) and pointing (1.1 sec) are physical actions that both require more time to do than a keystroke (0.28 sec). And a dropdown box requires you to do both. Another benefit that a unified text field has is that they keep the user’s visual fixations and focus in a single area, where multiple form fields force more visual fixations while breaking the user’s flow.
Conclusion
A good user interface is one that makes the user more productive. It’s clear that these new form techniques do just that. A productive design not only brings more satisfaction to users, but it can also save labor costs on company employees who use the user interface. By saving company time and money through better user productivity, you can even save jobs when the rough economic times hit. Companies don’t have to cut labor costs by cutting the labor. Improving user productivity through an efficient user interface is the answer.
Book
Affiliate
You fail to factor into the calculations the time it takes for the application to perform the search and return the correct city+state based on the zip code. For a web app in a busy organisation, that could easily add a second or two to the time taken for the location automation approach.
In KLM, you usually don’t factor in system response time unless the difference is substantial. In most cases, the waiting time is negligible. And in this case, with all the zipcode automation fields I’ve ever experienced, city/state retrieval has always taken near-zero time.
what about user input error? Wouldn’t that increase with the unified text field approach? If unified field approach is generally better, then why even care about creating forms?! Why not just give users a big text area to write in whatever they want?!
What if the location automation generated multiple suggestions? You didn’t factor that at all. And what about international addresses?
User error with unified text fields is addressed in the article. As for the rare occurrence of incorrect suggestions in a location automation field, the displayed dropdown box should not only show the suggested location, but also have an ‘other’ option that turns the dropdown box into a text field in case the suggested location is incorrect. If you have international addresses, then you need a field that specifies the user’s country.
Keep in mind that this article was not meant to be a tutorial for how to flawlessly execute each technique. The point of it was to show that these techniques can make forms faster and easier to fill out than the more common approach used today.
I’m slightly perplexed, as to what user would be experienced enough to tab between fields, and still be inexperienced enough to wrestle with the mouse when encountering a select box?
Apart from that, it’s definitely worth considering these things, when designing forms.
This is becoming quite common for UK sites where postcodes are even more useful – which can locate the city and street you live on and then they provide a drop down to select your house number.
Few things we ran into using these alternate address input techniques in our application. For the Unified Text Field, it created many challenges parsing the input data to store it in our data model. How would you separate City from State for proper data storage? This causes the data to be stored as one string instead of multiple fields. For the Location Automation Field, this works for the user if they are using their own address. However, if they are filling out the form and do not know the ZIP code but only know the City and State this will not work. What we are experimenting with is allowing the user to do a reverse search for the ZIP based on the City/State.
Where can I find out how to implement this into my form? Do I need to have a zip code database on my servers, or is there a site I can link to. Any help on how to implement this from beginning to end, is much appreciated.
I’m not a fan of combining the city and state. I do agree that you should auto generate them based on the zip. However, zip codes can be shared between 2 cities. For example also in Austin, 78746 is Austin or West Lake Hills. It’s fundamentally wrong to force a user to ship to an incorrect city even if the package will more than likely make it there.