Patrones

Formularios
complejos.

Cómo armar un formulario largo que se completa por partes, en varias sesiones y entre varias personas.

Sale de un proyecto real, la ficha de incorporación de socios de la CCS, y de sus pruebas con usuarios. Es un caso, no una norma: tómalo como punto de partida.

01 · En breve

En breve

Qué es
Un formulario de varios pasos, con decenas de campos, documentos y datos de otras personas, que casi nadie completa de una sentada.
Cuándo aplica
Cuando el formulario no cabe en una pantalla razonable y pide datos que la persona tiene que ir a buscar. Si cabe en una página, basta con Campo y Botones.
La base
Bienvenida mínima, pasos en orden, una columna, guardado al continuar y un indicador de avance que no desaparece.
Lo que más importa
Que la persona sienta que avanza mientras llena, no solo al cambiar de paso.

Para partir: abre el ejemplo y recórrelo como lo haría quien lo recibe. Ir a Ejemplo

02 · Ejemplo

Ejemplo

Se abre en una pestaña nueva. Guarda el avance en tu navegador; «Reiniciar» lo borra.

03 · Recorrido

Recorrido

Las pantallas

  1. Bienvenida: qué es, qué tener a mano y quién lo está completando. Nada más.
  2. Pasos: entre 3 y 6, en orden fijo, cada uno con un nombre que diga qué se completa.
  3. Último paso: documentos y aceptaciones, y el botón que envía.
  4. Confirmación: qué pasa ahora y quién te va a contactar.
  5. Al volver: un saludo y el paso donde quedaste.
Por qué

La bienvenida no lista los pasos ni explica que se puede retomar: los pasos ya se ven en el indicador y lo de retomar se descubre al volver. El orden fijo y los nombres descriptivos siguen a NN/g sobre wizards.

Guardar y retomar

  • Se guarda al presionar Continuar. No hay botón Guardar.
  • En el paso siguiente, un aviso corto confirma lo guardado, anunciado con aria-live.
  • Se retoma desde el mismo enlace que llegó por correo. El correo explica cómo.
  • El enlace se puede compartir dentro de la organización, para que completen varias personas.
Por qué

Un botón Guardar compite con Continuar por la misma decisión. Riesgo aceptado: lo escrito a mitad de un paso se pierde si la persona cierra antes de continuar. Base: GOV.UK One Login, guardar el progreso; el aviso, WCAG 4.1.3.

Lo que ya sabes

  • Los datos que tu organización ya tiene van precargados y en solo lectura, en un bloque con fondo suave al comienzo.
  • No se pregunta lo que decide otra persona. En el ejemplo, la forma de pago la ve el ejecutivo.

04 · Indicador de avance

Indicador de avance

Con pasos largos, saber en qué paso vas no alcanza: como cada pantalla tiene muchos campos, la persona siente que no avanza. Por eso aquí no va el Stepper.

  • Un paso es un tramo, no un punto. Barra continua, sin círculos de cada paso encima.
  • Un indicador, dos presentaciones. Un bloque arriba del paso («Paso 2 de 4», porcentaje, barra de 12 px y una línea de detalle) y una tira fija de 6 px que aparece cuando el bloque sale de pantalla. Nunca las dos a la vez.
  • El total no cambia. Una pregunta y el campo que aparece según su respuesta cuentan como una sola unidad.
  • Cada paso nombra su unidad: «2 de 3 roles asignados», «4 de 9 preguntas». No «datos» cuando la unidad es una persona con seis campos.
  • Un retroceso chico y con causa visible se acepta. Uno sin explicación, no.
  • Dentro de una ventana modal no va otro indicador.
  • Con la tira fija, scroll-padding-top en html, para que el campo enfocado con Tab no quede tapado.
Por qué

En las pruebas con usuarios, la queja fue «uno siente que no avanza». Medido en el ejemplo: un indicador solo arriba del paso se veía en el 12 % a 22 % del alto de cada paso, justo cuando no se estaba llenando nada. Un avance visible y honesto ayuda a terminar (NN/g, indicadores de progreso; Nunes y Drèze, 2006, efecto de avance dotado). La tira fija, por WCAG 2.4.11.

05 · Preguntas y campos

Preguntas y campos

Forma

  • Una columna. Dos o tres campos en una fila solo si son un mismo dato, como día, mes y año.
  • El ancho del campo anticipa el dato: RUT y teléfono, angostos.
  • Sin caja alrededor del formulario: los bloques se separan con espacio. Avisos y datos precargados, con fondo suave, según Alertas.
  • Los opcionales dicen «(opcional)». Los obligatorios no llevan marca.
Por qué

Con varias columnas la gente se salta campos (Baymard); una columna fue 15,5 segundos más rápida en computador (CXL, 702 personas). Un campo más largo o más corto de lo esperado hace dudar (Baymard, ancho de los campos).

Errores

  • El error va bajo el campo y se borra al empezar a escribir, no al salir del campo.
  • Si al continuar hay errores, un resumen arriba enlaza a cada campo. Detalle en Campo.
Por qué

Cuando el error se borraba al salir del campo, la página se movía hacia arriba y el clic en Continuar se perdía. Se vio en las pruebas.

Campos que aparecen según la respuesta

  • Aparecen justo debajo de su pregunta.
  • «Otro» siempre abre «¿Cuál?», y responderlo es obligatorio.
Por qué

El ejemplo llegó a tener tres reglas distintas para el mismo «Otro»: uno obligatorio, otro que parecía obligatorio y no se validaba, y otro opcional.

Listas de opciones

  • Si la persona escanea para reconocer su respuesta, lista visible de casillas. Si es larga, en dos columnas desde 640 px.
  • Si sabe qué busca y las opciones son muchas (países, códigos de actividad), Combobox con buscador. Lo elegido queda como chip, o como fila si el texto es largo.
Por qué

En el ejemplo, una lista de 23 sectores en una columna ocupaba 826 px, el 27 % del paso, para una pregunta opcional; en dos columnas bajó a 452 px. Los chips se descartaron ahí porque exigen saber de antemano qué se busca. El buscador sigue el patrón combobox de ARIA.

Documentos y aceptaciones

  • El formato y el tamaño se validan al elegir el archivo, con mensaje propio. Usa Carga de archivos.
  • Si un documento se pide afuera, enlaza a dónde se consigue.
  • Las aceptaciones van juntas al final: una casilla por finalidad, sin marcar, cada una con el texto completo a un clic. Los textos los confirma el área legal.

06 · Personas y roles

Personas y roles

Cuando el formulario pide datos de varias personas de la organización, cada una con su rol.

  • Una sola lista de personas, con «Agregar contacto» y «Agregarme a mí».
  • Arriba, los roles que hacen falta, como píldoras que se marcan cuando alguien los cubre.
  • Los roles se eligen dentro de la ficha de la persona, como casillas: es habitual que una misma persona cumpla dos o tres.
  • La ficha de la persona se llena en una ventana con encabezado y pie fijos, según Modal y Toast.
  • Si un dato se va a mostrar a otros, explica primero qué es ese lugar y para qué sirve, y después qué se muestra.
Por qué

Base: MoJ Design System, agregar a una lista. Una ficha precargada por cada rol obligaba a llenar la misma persona dos o tres veces y no resultó intuitiva en las pruebas. En el ejemplo, la gente no sabía qué era el directorio de socios, así que decirle que era exclusivo no la tranquilizaba.

07 · Lo que probamos y no funcionó

Lo que probamos y no funcionó

Para que no lo vuelvas a probar.

Círculos de cada paso sobre la barra
El relleno nunca calzaba con el círculo: al entrar a un paso parecía que todavía no llegabas. Quedó la barra continua.
Una ficha por rol
La misma persona se llenaba dos o tres veces. Quedó una lista de personas con los roles como casillas.
Foto de fondo en la bienvenida
Los textos se leían peor. Quedó fondo blanco.
Intereses de cada persona
Alargaban el paso y son datos de la persona, no de la organización. Se preguntan después, cuando cada una entra por primera vez.

08 · Lista de revisión

Lista de revisión

Recorrido y avance

  • La bienvenida dice qué tener a mano y nada más.
  • Continuar guarda, y el enlace del correo retoma donde quedaste.
  • El indicador se ve mientras llenas, no solo al empezar el paso.
  • El total del indicador no cambia cuando aparece un campo.
  • Con Tab, ningún campo queda tapado por la tira fija.

Campos

  • Una columna, con el ancho que anticipa el dato.
  • El error va bajo el campo y se borra al escribir.
  • «Otro» abre «¿Cuál?», obligatorio.
  • Los opcionales dicen «(opcional)».
  • Las aceptaciones van al final, sin marcar.