1

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.

  • Whether this works for you depends on if you can skip any field in your form. If yes, then a similar setup can work for you. If not, then this will make your form incredibly confusing. I don't think this has a specific name because it's just a sticky sidebar menu in a form. – Wanda Jan 10 '18 at 9:11
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.

  • Thanks for the link. She has some very interesting considerations. I think I agree partly with her about the "user's mental model"; I myself fell victim of this misunderstanding as a user quite a few times, usually FAQ pages where a big list of questions jumps to theirs answers below. But for my intended use (as an index for a lengthy form) I still think it will be clear to my users. I'll give it a try. – rslemos Mar 1 '18 at 18:03
1

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.

  • I'll also consider this. But first I'll give the in-page links (with scrollspy) a try. – rslemos Mar 1 '18 at 17:57

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.