1

I'm making a webpage where there are some really big forms. Splitting them is not an option (it's been done as much as it could). One of the longest forms has 20 "sections" each, with 1-6 items, some of which are checklists with over 15 options. I would like to know how to best make my form usable, since the number one complaint I get is how difficult it is to navigate the form, but no suggestion on how to improve it (I completely agree that it should be easier to navigate, but I'm at a loss when it comes to actually improving)

At the moment, each section is selected form a vertical "pills" menu (bootstrap); when you click a pill it displays the section of the form. Before it was simply a long wall of text. The current approach has many flaws: It requires too much clicking, you have to manually click each section to check if there are missing items, it's generally "hard to navigate"...

Right now, when a user wants to input or edit data they go to the form page and have to click at least one time for each "section" of the form. So first they'd have a checklist, fill it, then click to change section, fill the three radios there, click to change sections and so on. Before there was less clicking, since all of the form was avaliable in one screen, but it was too textual and "stuffed", and it was hard to look for a specific section to edit.

The main problem is that the same form is also used to edit the data, and having a progress bar would make navigation when editing a nightmare. I've been unable to find examples where very long forms are used, besides some horribly designed and nearly unusable "public service" websites. Links to websites that pull off something similar while remaining easy to navigate would be very welcome.

Improve this question
6
  • Can you break down what you mean by "hard to navigate"? What are some use cases that typify this problem?
    – dennislees
    Mar 12, 2018 at 15:34
  • It's the literal feedback I've been given, I guess it's a rephrasing of the other points. I could leave it out, but I don't really know how to rephrase it.
    – LordHieros
    Mar 12, 2018 at 15:47
  • It's a big form that's hard to move around, we get that, but this is all relatively abstract. Solutions usually lie in the specifics of the problem. A description of what it looks like when a real user is actually using the UI and the kinds of actions that create issues would help visualize potential solutions more easily. "A user needs to ____, so first they ____, and then they have to _____, but because _______, they _______, and also________, so_______." A screenshot/mockup would be even more helpful.
    – dennislees
    Mar 12, 2018 at 15:55
  • Added a usecase, I hope it helps. Else, I'd appreciate any suggestions on how to improve the answer. I can't provide screenshots without the client's permission.
    – LordHieros
    Mar 12, 2018 at 16:04
  • You're not getting much attention with this because even with the extra information, this question is still really broad. So many questions still/ Like, is the use case always the same? Or is there a difference between the initial set up and later editing. When the user comes back to edit, could they just be doing random stuff, or is there a set list of system-generated things for them to do when they get there? And ultimately, do you know that the pill navigation actually causes problems for users, or are you acting under the assumption that it will?
    – dennislees
    Mar 13, 2018 at 0:43

1 Answer 1

Reset to default
2

The question explains all the high-level requirement and upgrade.

I believe you already used the tabbed approach, to continue on the tabbed approach you need to have validation in each tab, Tab1 should validate and do not let the user go to a Tab2, that will solve most issues.

Inside the Tabs, you can define sections, logical or similar information sections.

Example enter image description here

If you need, you can make this as a wizard, by providing Next/Back buttons for each Tab content.

Improve this answer

Your Answer

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

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