Designing efficient web forms
🧾

Designing efficient web forms

We had a chance to discuss forms for complex use-cases during UX Camp Europe. I'm grateful for the great insights given especially by Paweł, Oliver, and Maximilian who have experience with designing complex forms for various industries - whether it's government, medical or enterprise organizations.

There's ton of great sources on how to design forms well, but we tried to go beyond that and focus on expert users, everyday use of our systems and complex use-cases.

The basics

It's always good to follow existing good practices, like only ask for the information that is necessary and your system can act on it, ask in a meaningful order, use gestalt principles when grouping related fields, don't go crazy with the form structure and make sure users understand your labels. But can we do some more if we're striving for efficiency? Should the design be any different if the users are experts working with our solution every day?

Additional resources

Optimize for user flow

Allow your user to follow their natural flow. That means that not only main pages and sections are in the order that is meaningful, expected, and corresponds to the context of the user. Make effort to organize the form accordingly on the micro-level, too. That means to show hints that should be read first just before filling the field and any subsequent validation right after. This also helps users with voice-over or screen readers.

image

Additional resources

Autofill with caution

Letting our system (or the browser) to autofill the data instead of our user saves time. But make sure this function doesn't hinder the user in the end. While this function is expected and appreciated by the users who fill the same data often, with not-so-often usage the data may change and result in wrong submissions. The same happens when the user fills the form often, but with different data, eg. when submitting medical information of different patients, when using CAPTCHA, or codes from 2FA authentication. For these types of fields, autocomplete function should be disabled. If you are worried about not being compliant with WCAG guidelines for autocomplete, keep in mind it's expected only to autocomplete the data about the user who is filling the form. Also, pre-filled fields may be less noticeable.

Additional resources

Allow for keyboard interaction

Keyboard interaction is generally faster than using the mouse—and that even amplifies when typing is the natural part of the task. Filling out a form is definitely such a case. To fully utilize the potential of speeding up by using the keyboard, we shouldn't stop with the correct tab order of text fields. Any field in a form should be fully accessible from the keyboard—is it a dropdown, date picker, or rich-text editor. While this can often be accomplished by using native components for simpler fields, using more complex input types requires custom solutions or fixing the native ones (eg. data picker for IE or desktop Safari). When designing these custom solutions, optimize for the main flow. This means tabbing through the whole form should be quick and straightforward while selecting side options (like formatting) should only be accessible with different keys.

Additional resources

Experts love their data

When you ask an expert user which data they want to manipulate at a time when filling out a form —they will often tell you they want to manipulate and see all available data at a time. This substantially differs for the general public that usually appreciates forms in one column, top-aligned labels, and more complex content split into pages. This is because they need to cope with much more complex problems. This means that they need to be aware of all their aspects to solve them. This implies that they often need to manipulate with a number of seemingly unrelated pieces of input to get to the desired outcome. And that's where complex, multiple-column forms with left-aligned labels may be useful to allow them to have greater control over what's happening. Also, you may organize the content in some of the less common (and more complex) compositions, like multiple panes with different forms next to each other (like in Photoshop) or tabgets.

Example of composition using tabgets—small widgets working also as tabs
Example of composition using tabgets—small widgets working also as tabs

Additional resources

Measure the efficiency of your form

There are three main ways to measure the efficiency of a form. The first and the easiest one is to measure perceived efficiency, usually using a Lickert scale. This method lies in asking the user how they felt the task was - from very tedious to very efficient (and a couple of options in between). This method is great for its simplicity and also for products that are marketed and sold directly to the user, as they also judge the system this way. On the other hand, perceived efficiency doesn't necessarily correlate with the actual efficiency and time spent on a task. Also, most of the standardized usability questionnaires, like SUS, SUMI, PSSUQ, or SUPR-Q.

Time spent on the task measured either directly during user testing or tracked through analytics is the second option to measure the overall efficiency of a form. This gives you a better overview of how much time it's needed to really fill out a form, but there are some shortcomings for these methods as well. When directly observing a user, the recorded time might not be accurate because the form is very new to the user (as we all usually measure new work), and also the results are seldom statistically significant due to a limited number of users observed. However, there we can see when some time was directed to a distraction on looking for the information in some other system or in the real world (like looking for a passport to get the passport number). While knowing about these situations is valuable to the designer, they shouldn't be included in measuring the efficiency of the form itself. And that is exactly the main shortcoming of using time spent on a task tracked through analytics.

The third option to measure the efficiency of a form is Keystroke Level Modeling. This allows us to compute how much time a user objectively needs after mastering the task. It's based on the sum of actions the user needs to do—is it a click, keystroke, or a mental operation. The huge advantage is that you don't need to recruit the users nor wait for the form to publish. However, this method won't tell you how much time the users will really spend on the form since you can't really predict how long the mental operations will really take.

Additional resources

To sum up

When designing forms that are really complex and intended for expert users, common design rules may not work as expected—so always try to test with the audience when you're introducing the form and also when they already mastered the task. Do not worry when your findings differ from what is commonly accepted among designers and focus on what your users really need. The same applies to measuring how efficient the form is. Be aware of the options available as there's no single method working for all either.