1

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.

enter image description here

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!

  • 1
    Is there any reason why all of the fields should be kept on one screen and scrolling should be minimized? – Izquierdo Aug 31 at 15:41
  • Do your users always start of with an empty form that is filled out completely? Do they edit specific fields on a form often? We'd need more context of the use case to give better advice. – Martyn Sep 6 at 8:29
3

I think something like stepper may help you

These are some samples

Horizontal

Or like this

Vertical stepper

| improve this answer | |
  • This method is only preferred if the user always starts with an empty form and if the form can be completed in one session. In business applications that is often not the case. – Martyn Sep 6 at 8:26
2
+25

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.
| improve this answer | |
1

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.

Material Angular expansion panel screenshot

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.

| improve this answer | |
1

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.

| improve this answer | |
0

There are countless resources online about form best practices.

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.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.