Designing digital forms seems like a pretty simple task. You just make an interface that looks like your existing paper forms, right? If you take that approach, you might solve some of the problems with paper, but you’re going to miss out on most of the capabilities that make switching to digital so compelling in the first place. At Kordata, we’ve noticed that our customers’ first instinct is to create a 1:1 copy of their paper forms in our system. That train of thought makes sense on the surface: “Minimize the impact on my staff so they don’t lose productivity.” But what you should be thinking is, “How do I leverage the technology so I can increase productivity?”
In this article, we’re going to look at some common form design patterns, and then I’ll show you how modifying the digital version can save time, increase accuracy, and ensure data integrity. Let’s get started!
Give your user a clear path to completion
A request we commonly hear from customers is to put form fields side-by-side on the mobile device. This is a very common practice on paper forms, but the design doesn’t work well when people actually fill out the form. Here’s a form that demonstrates this. The animation represents the path a ‘user’ must take to complete the form.
You should immediately notice a couple things about the form. First, the completion path bounces back and forth between the question prompt and the area for the response. This creates mental strain on the person filling out the form, thereby reducing speed. Second, the big box for comments spreads across the whole form. The ‘user’ will expend significant mental effort filling out that comment box because it requires them to write a response. When finished, the natural inclination is to keep moving down the form, not back up to the top to fill out the ‘verification method(s)’ section. It will be a common occurrence for that section of the form to come back blank.
You’re probably thinking, ‘If side-by-side doesn’t work very well, why do we design so many forms like that?’ To save paper! But with digital forms, length / layout of a form has zero impact on the cost of the form – so why are we still operating under the constraints of the old system? Let’s redesign this form:
That’s a much clearer path to completion, and it results in less mental strain, and fewer omissions.
Let your user tell you how many line items there are
It’s very common for forms to have sections where the respondent enters in one or more line items. Some examples are order forms, inspections, and test results. It’s simple to design the layout for such a section, but how many blank spaces for items should you put in the form? Take a look at the following two examples. On the one hand, there probably aren’t enough spaces, and you’ll end up with people writing ‘see back’ or putting lab results in the margins. On the other hand, almost the entire form is blank spaces for line items. That’s a lot of wasted space if you only need to fill out one or two.
You can solve this problem easily on a digital form: don’t display any blank fields at all! Instead, present a button that allows the user to create a new item and put control in the user’s hands. You’ll have a perfectly sized form every time.
Don’t display fields you don’t need filled out
You might want to have a form where the respondent needs to fill out a section of fields, but only if some condition is true. Here’s an example:
You might think that’s not too bad, but forms comprised entirely of logic like this create a serious mental load on the person doing the work. Mistakes are commonplace in forms like these, but there’s no better solution for a paper form – you have to have a place to enter all possible data. Fortunately, this is another problem that digital forms solve extremely well. A software application can change dynamically as the user enters data. So the previous form might become something like this:
Fantastic!
Link your data to save time and reduce errors
Here’s an excerpt from a common OSHA Form 301 report:
This is a good example of how paper forms ask for information we probably already know or have previously collected in order to provide context to the information in the form. First, the blue box on this form presents a challenge because the respondent won’t have the data immediately available. They’ll have to go look it up to be able to complete the form.
Digital forms can link to other forms they share data with. In this case, the employee’s information was probably already collected and entered into the system when they were hired. So on the injury report, present a selection box to your user to show a list of current employees. Then, use the selection to link the new form to the employee information form and present the previously collected data to the user. You can even filter the list down based on any criteria you need to further reduce error.
In addition, with a digital form there’s no need to have a section for collecting data about the respondent (the red box on the example form). The system already knows all of that information because it has the current user’s account information. Simply link the new form to the current user account, then display the data you need.
Use validation rules to ensure correct data
The last design pattern we’ll cover is validation rules. Most people are familiar with the concept of required fields in digital forms, but the power and complexity of validation logic takes their power to the next level. Here are a couple more examples of paper forms that can be improved:
Forms have rules, and forms often try to enforce their rules. But at the end of the day, the person with the pen can still write whatever and wherever they want (or not at all). Digital forms can guarantee valid data and provide a better experience. Implement logic behind-the-scenes that monitors the state of the form. Check that the data matches the pattern or format you expect, or change the requirements of fields further down the form when the user enters data. Maybe even tell the user they don’t need to fill out the form after all!
Moving forms from paper to digital is sometimes more of an art than a science. At Kordata, we’ve spent years refining this process and studying user interface design to really take forms to the next level. Now we’ve given you the tools to start thinking about how to improve your processes rather than just duplicate them.
