When is a form too long

Question

I am working on a re-design of an onboarding process for a financial platform, which of course requires a plentidude of information.

The forms primary step in the process, has the user fill out their personal details, address, tax information, and identity verification among other things. The length of this page is just borderline what I would expect would still be fine for the user experience, however there is an option in this onboarding process to have multiple clients signed up for the same financial account (This is where the problem lies).

Previously in their design, the business had tabs which would allow you to switch between the clients as you wish, as the information required for each client to enter is just as much as in the singular sign up process. Orders from top however, have stated that they would now like these separate client form areas to be stacked linearly, and have the page just continue getting longer and longer.

Refer to the picture link below for the design of the singular client form area, and use your imagination to imagine what it would look like with 2-3+ of these forms copied and pasted beneath each other.

Personally I believe if the user completing this application wants to go and change information or at the very least review it, it would just look like a mess of fields and you wouldnt be able to have your baring.

(Note* I am restricted to following their current platform style, which is straying towards Material MUI)

Thanks for any responses, Id like to hear what others think.

Answer 1

I would add expandable areas to represent each client the user has already entered information for. In the collapsed state, the user would see identifying information about the client and could click to expand and see all form fields associated with the client, and collapse when they're done. So at any given time, the user would see the full form fields for the client they're currently entering, and collapsed sections at the top for clients they've already entered.

Answer 2

Onboarding flows and forms are exciting but are also notorious for being a crucial point of friction. If I'm understanding correctly, the experience you are describing goes as follows:

Statement

As a user who just went through sign-up (name / email / password?) I land on a "Client detail's page" with a list of +10 form fields.

If I add more clients to my account I need to complete the same set of form fields for each one of them.

Preliminary questions

• Is it really necessary to capture client information at this stage?
• Is this a mandatory step for the business in terms of data collection or is this adding value to the user by speeding their onboarding later?
• As a user, where can I add more clients? Let's say I have 3 clients, do I list them on the step previous to the one in your screenshot or can I add them after filling out every full client form?
• What's your form completion rate currently?
• How are you going to measure success of the changes you will apply?

General observations

Generally speaking, the main problem I see with the current form is content structure and hierarchy. From a UX PoV, all fields and all areas have the same relevance and visual importance. That's not bad necessarily but with such a long form it makes the task of scanning and understanding each request waaaay more tiring.

One way in which you could alleviate this problem is by headlining sections with a left navigation:

• client information / About the client (always try to use a descriptive human voice to form areas to make it easier to understand)
• tax information
• contact details
• bank details
• identity documents

That way the user can scan the side navigation and get a glimpse at all the types of data they will have to prepare before being able to respond. It brings clarity and transparency and it makes the whole experience less overwhelming.

Secondly, I think the order of those fields could be improved by sequencing related fields after each other. For instance, as a user I would expect "About the client", "Contact info", and "IDs" to be next to each other as they all relate to the personal details of a particular person (the client).

Similarly, this could allow you to split the form into 2 steps that load on the same view by simply showing the personal details first (with those 3 main groups) inside a pre-opened toggle for instance and having the other more legal/financial details be on a different toggle. The interaction here can be tricky and you'll have to test different approaches. The main advice I can give is try not to over engineer it.

Conclusions

I think you need to define the problem statement a bit more in order to find the right solution. Usually long forms are a symptom that you are trying to collect too much information at once and that you need to space the data collection into other touch points where they might make more sense. In cases when that is not an option, consider improving Information Architecture and leverage UI elements such as secondary navigation or contextual help to facilitate visual flow and layout.

Answer 3

There is a lot which is not clear based on your description above, however what I could make out is you are stuck with an infinite scroll form. If I am correct following are some food for thought:

You used progress tracker to divide the full information into parts, make more parts of the form and add it as a step in the progress tracker rather than going vertical.

Another way to look at it would be stack vertically with expandable list like below screenshot taken form google search:

This will reduce the infinite scroll and user will expand the area he/she is working on, and then you can give a status indicator with a tick icon or color.

Another thing I would do is to have capability of using a redundant information reduced while filling form and automating it. Hope this helps

Answer 4

1. I suggest you to envisaging to cut some steps if it's possible on the user journey.

---

2. Use an accordion

---

3. Remove all facultative field

---

4. Considering using "save" functionality

---

5. Considering using "template" functionality is possible for pre-fill input

---

Answer 5

One way you can push back against their request of having all of the fields on one page is WCAG. Per W3's recommendation:

Where possible, divide long forms into multiple smaller forms that constitute a series of logical steps or stages. This helps make long forms less daunting and easier to understand, particularly for people who are less experienced using computers or who have various cognitive disabilities.

I would separate the form into logical sections and split those across separate pages because the current system is overwhelming. Then that lets you duplicate sections if necessary without making the flow too onerous.