Best practices for long data entry forms

Question

I'd like to know if there is some kind of best practices for this kind of form.

There is a redesign project for a long data-entry form, not only for aesthetics and UX, but there are also some fields that are going to be deleted. The users are employees, they already know the form and what they have to type in each input.

The form has 2 steps (two separate pages) and is designed in 3 columns, most of the fields are text and dropdowns (some will be changed to radio buttons or checkboxes matching the information).

I added this image as an example, it's not the actual product.

Given that the user already has physical memory of this task and the goal is aiding its job, should the redesign be subtle? (keep the columns and make small changes) or a bigger one would be better in the long run?

Any other suggestion is appreciated!

Answer 1

I think something like stepper may help you

These are some samples

Or like this

Vertical stepper

Answer 2

When you're dealing with long forms, the solution usually is a combination of the following:

1. Reuse as much data you already have
2. Only ask for the most critical data first (email, name, phone number). This way you can contact the user if they abandon the page early on.
3. Divide the information into groups and maybe ask for the information only when you need it.

Answer 3

I have used the following principles while designing long forms:

1. Give users a preview of sections that they have filled
2. Group related information
3. Ensure that responses that triggers other questions are earlier in the hierarchy.

In terms of components, I have a preference for expansion panels since they allow the entered content to be displayed even after they have been collapsed.

Before deciding on such a component, do check with the front-end coder on whether the component allows them to store the information temporarily, before it is saved to the database. I have faced some issues with temp storage of info while using steppers in Angular.

Answer 4

Since the users are employees, im assuming this is an enterprise / B2B product - which means the users are already used to how the forms are and have learnt a way around to work with it, though it may not be user friendly.

We also need to consider any new employee who will be onboarded in future. The solution i would suggest is break these 3 columns into 3 consumable steps.(if each column is separate section in itself - like in the example provided) We can follow a vertical stepper model - if the form is going to scale into multiple steps in future. Or a horizontal stepper model if the number of steps is going to countable - maybe less than 6.

Also you mentioned the whole form is split into 2 pages, instead of that we can bring it into 1 single page: broken down into multiple steps - where the user has the complete outline of all the steps on the right like: https://docs.microsoft.com/en-in/microsoft-365/enterprise/about-microsoft-365-identity?view=o365-worldwide#cloud-only-identity (in this article section)

Thus the redesign will aid both news users giving them an overview of the form & helping the existing users by breaking down existing columns into consumable steps.

Answer 5

There are countless resources online about form best practices.

• Here is a reputable source: https://www.nngroup.com/articles/web-form-design/
• A second one: https://cxl.com/blog/form-design-best-practices/#coupon

Regarding subtle vs bigger redesign:

1. Users might be used to the current form. That could also mean they are used to hate the current form. You can find out by running a few usability tests.
2. What is your metric for a successful design? Time saved over the year? Security? Frustration? Find out the metric and use it to guide your choices. Also, measure the impact.
3. Consider new employees seeing this form for the first time. What is their feedback? A fresh pair of eyes might reveal huge issues overseen by a veteran.
4. Stress about the need to reduce the number of fields filled by the user. If the data is available, pull it in. Not only will this reduce your database record error entries, but also save everyone's time.