7

How to layout long, complex forms such that the largest possible number of fields is visible on the page, but legibility is maintained?

I am re-designing an enterprise web app where there are a total of 30x fields across 5 sections when creating a quote, and where an extra 10-20x fields get added depending on the state of the quote.

The client has expressed a strong preference for seeing as many form fields as possible within each screen without having to scroll, (this request seems sensible but I am yet to test)

This is what the form looks like:

enter image description here

My initial attempt was to introduce clear-er hierarchy and group the inputs into further sub-sections:

enter image description here

But I think the UX could be further improved by flowing the content within each tab vertically (and using the sidebar to present a summary) instead of horizontally + vertically.

Are there any other patterns that could be suitable here ?

What other ways are there of keeping a large number of form fields visible ?

Improve this question
5
  • Is there a save button, or does the form autosave? Is there an explicit order or dependencies between the sections? Also, what is the relationships between the tabs? Are users saving form data within each tab, with a larger save?
    – Mike M
    Mar 29, 2019 at 16:06
  • @MikeM Thanks for the clarifying questions. There is a static submit button in the toolbar at the bottom of the screen, however if clicked it will fail if mandatory fields on any of the tabs are incomplete. The tabs represent various parts of the quote, the only order that has been applied is with regards to importance, there is one dependency on the first tab that effects the second
    – Lukas_T
    Mar 29, 2019 at 16:31
  • Is there also an order between the containers under one tab like your second screenshot?
    – Mike M
    Mar 29, 2019 at 16:55
  • @MikeM yes there is an order to most of the items tho there are some that don't have a clear space, I am doing some card-sorting studies to find out what groupings make the most sense, though in the three columns under the main section in there are a few dropdown that only activate after something has been selected in the first dropdown. (but in other places in the UI there are new dropdowns that are inserted into the page )
    – Lukas_T
    Mar 29, 2019 at 17:01
  • Should your form be responsive or you have exact screen size requirements?
    – Serg
    Apr 1, 2019 at 14:36

1 Answer 1

Reset to default
3

Try being explicit about the dependencies and order, both within the tabs (which are stepped sections) and within the tab content (the current portion of the total forms).

If I understand you correctly, this is a multistep process. There's several aspects here:

  • Communicating the entirety of what's needed for completion
  • Clarity about order and dependencies (both between and within sections)
  • Empathy for users who have a lot of work to do to successfully comply with your requirements

1. Break up the tabs into ordered sections. You can use a numbered list with subtext for clarity about what they will encounter.

Tabs are often used for grouping related data, but not used as much to divide and group ordered or dependent data.

By using the vertical sections implying descending order (bottom is last), and further encoding using a numbered list you explain:

  • The total number of steps
  • The order
  • A description to prime the user what each section might require

enter image description here

2. Within each section, use a vertical path to completion so users know the order, and you have flexibility to change sections below depending on what a user has selected in a section above.

Since you have dependencies (i.e. conditional dropdowns that alter or expose information in a subsequent section), using the vertical format will emphasize the order in which things need to be completed.

It's also easier for customers to scan and scroll vertically so the see the labels for all inputs.

Tradeoffs: compact data vs. clarity of order

There are going to be tradeoffs between keeping the information 'above the fold', but chances are you don't have control over the users viewport. They could be using a 30 inch monitor, or an 11 inch Macbook Air.

3. Allow save and exit, as they may not have all the form data to complete, but don't want to start over.

Don't punish users by having to conform to your implementation model.

Since you have a complex, multistep form, assume customers have ALOT of data to input, some of which they may depend on coworkers (or outside systems) to gather from.

Allow them to save and exit, so they don't have to start from scratch.

Update: a note on tabs and steppers

As @plainclothes pointed out, this solution could also work with a horizontal stepper. I've seen examples of both that are effective:

If you're using Material as a framework, they offer use of horizontal or vertical.

enter image description here

Improve this answer
3
  • 1
    There's no reason tabs couldn't do exactly what your left nav does. And, thanks to the expectation of steppers like checkout flows, the sequential nature might be clearer to average users. Otherwise, I think you have a great potential solution there.
    – plainclothes
    Mar 29, 2019 at 20:52
  • 1
    @plainclothes Good point. I guess I was referring more to the tab control itself; This could also be done with a more explicit horizontal stepper, complete with numbers and / or arrows or something similar.
    – Mike M
    Mar 29, 2019 at 20:54
  • @MikeM great answer as always ! One caveat however :) I do have control over where the user will be viewing the form, this will be a corporate laptop either docked with two monitors or on its own. Both cases the the aspect ratio is the same.
    – Lukas_T
    Mar 30, 2019 at 12:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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