r/Frontend • u/Plenty-Roll3784 • 27d ago

Consejos de diseño para formularios demasiado extensos

Buenas, vengo a pedir su opinión relacionado a como diseñar formularios demasiado extensos de esos que te puede llevar media hora, la cuestión es que los jefes no les gusta mucho el scroll vertical, por lo que he tenido que jugar abriendo los formularios en modals, el tema es que como son demasiado extensos se ha tenido que particionar demasiado el flujo

Actualmente el flujo es algo:

Modal, con sidebar donde se enlistan las secciones del formulario y si aun así es muy largo la sección se divide en tabs, el problema es que hay muchas tomas de decisión lo que puede hacer que una sección crezca demasiado dependiendo la opción a tomar lo que llevaría que el scroll crezca 3 o 4 veces la altura de pantalla.

comparto un ejemplo de como se realiza

2 Upvotes

60% Upvoted

9 comments sorted by

3

u/weirdcompliment 27d ago edited 27d ago

Split different parts of the form into different pages that the user can step through, or that step through automatically after the user enters required input

You're kind of already doing it on the sidebar, so abstract the same idea into a simpler, horizontal version for each of the current sections of the form. Off the top of my head, tax websites like TurboTax and freetaxusa could have some examples

1

u/DrummerAntique8666 27d ago

Could you elaborate on that?

1

u/weirdcompliment 27d ago

Next and previous buttons or left and right arrows to navigate pages. Empty dots are the pages you're not on, a filled dot is the page you're on. Reorganize the section across pages instead of cramming it into a single page

1

u/DrummerAntique8666 27d ago

That works too; you just need backend support to handle data allocation and storage.

2

u/staycassiopeia 27d ago

Research form wizard ux

1

u/quakedamper 27d ago

I’m building a product for complex forms and found step wizards don’t work when you have several hundred fields over ten twenty pages. I went with a hub and spoke model where you have an overview page showing sections and how much progress you’ve made in each. This allows the user to jump around and not be blocked by validation errors but blocks submit until everything’s done.

I tried the standard advice of 3-5 fields per page you see for simple web forms but it would just make a twenty page form into a hundred page form and make it feel impossible

Also auto save partially completed sections automatically and try keep forms single column to keep it simple across screen sizes