Lengthy forms with scroll (on Web)

Question

Is there any recommended way to tackle very lengthy forms, with long scrolls? I'm talking about web interface.

My use case requires the user to fill up a lengthy form for each operation ("operation" here is a particular business concept), and sometimes he must revisit this form to enter updated information (which is very important, given that "operation" has many financial and legal implications).

Long ago authors have been using tabbed interfaces, but I think they are very annoying for a heavy user (the one that uses keyboard almost exclusively, rarely reaching for the mouse), specially when filling up the form for the first time, from empty to completely full.

I was thinking about an interface of a simple long form, with sections grouping the fields. Alongside the form a navigation area with links that quickly scrolls to the appropriate section.

Currently (jan/2018) booking.com settings page implements this concept.

Does this sort of UI have a specific name? (I thought of vscode's and sublimetext's minimap, but even searching for "minimap" actually finds a kind of component for gaming user interfaces).

Is this UI advisable? Is there a better alternative?

PS: the primary target for my app is the desktop (I can't even imagine a user filling up those forms on mobile phone), but just out of curiosity I would like to hear about your impressions also for other targets.

EDIT

I found this to be called scrollspy.

Materialize, Bootstrap and UIkit have this tool in their toolboxes.

Answer 1

Scrollspy is rather a term from the technical side, in UX field it would be called in-page links, anchor links, or jump links.

This article may be useful for you: https://www.nngroup.com/articles/in-page-links/, on how to implement this pattern.

Essentially the writer thinks lengthiness is the only excuse for having in-page links, but otherwise she seems to have negative attitude. I can't really comprehend why, because it is kind of widely used pattern and she doesn't really back up the "user's mental model is that link will lead to another page" -argument with any kind of research.

Answer 2

You can either divide the lengthy form into sections, like Boat suggests or you can split the form into sections that fit one screen (and items in the section correspond with each other more or less).

Each section can have buttons like "Go back and correct" and "Save and proceed", with some sort of progress bar between them, indicating how many sections have been filled in already.

Upon reaching the last section the button "Save and post/commit the form" can be shown.

This will give you some strong foundation for developing an interface for handheld devices. Furthermore, after each section was filled in, the status of the for would be (temporarily) stored. Should the user be interrupted in the process of filling in the form, they can resume it later without losing the data already filled in.