Formularios de varios pasos y guardar el contexto

1) Principios

1. Un objetivo son varios pasos naturales. Divida no por tablas de BD, sino por la lógica del usuario: «Datos → Confirmación → Finalización».
2. Cada paso es un significado completo. No triture demasiado fino: 3-5 pasos óptimamente.
3. La transición no debe restablecer el contexto. Se guardan todos los campos, las elecciones y los archivos.
4. Deje que vuelva. Atrás, sin pérdida de datos.
5. Seguir el progreso. Barra de progreso, título de paso y CTA claros.
6. El usuario puede salir y volver. Borrador - local o en el servidor.

2) Arquitectura de forma de varios pasos

State del cliente: Splot local (por ejemplo, Nat Context/Redux/Signal) o almacenamiento temporal ('sessionStorage', IndexedDB).
Servidor: cree un borrador con 'draft _ id', guarde después de cada paso.
Seguridad: 'draft _ id' se asocia al usuario y expira después de N horas; los datos se cifran en reposo.

• 'currentStep' es el índice del paso actual;
• 'completedSteps': lista de completados;
• 'errors' - errores de paso a paso;
• `progress = current / total`.

js const formState = {
draftId: "d-84f...",
currentStep: 2,
steps: [ { id: "personal", completed: true }, { id: "kyc", completed: false } ],
data: { name:"", idPhoto:null },
lastSaved: Date. now()
}

3) Diseño de pasos y diseño

Estructura: navegación vertical (escritorio )/barra de progreso en la parte superior (móvil).
El nombre visible del paso es: "1. Datos personales», «2. Confirmación de identidad".

• El principal es «Siguiente «/« Continuar ».
• El secundario es «Back».
• En el último paso, «Finalizar «/» Enviar ».

• Utilice 'aria-current =' step '.
• Muestre% si los pasos son desiguales.
• Agregue la sugerencia «Puede volver más tarde».

4) Guardar el contexto y los datos

Almacenamiento automático

• Cambio de campo (con desbauns de 500-1000 ms);
• pasar al siguiente paso;
• pérdida del enfoque de la pestaña.

• local ('localStorage '/IndexedDB): si la forma es corta;
• servidor - para KUS/pagos/cuestionarios.

js const saveDraft = debounce(async (data) => {
await fetch('/api/draft', { method:'POST', body: JSON. stringify(data) });
}, 800);

Cuando abra el formulario, busque el borrador ('draft _ id' o la clave local).

• En caso de conflicto (nuevos campos), «actualizar el borrador» resaltando los cambios.

5) Patrones de transición UX

Avance sólo después de la validación local del paso.
Atrás - sin confirmación, si no hay pérdida de datos.
En caso de error de red: guardamos localmente, mostramos «Recuperemos la próxima vez que conectemos».
No cambie la URL arbitrariamente: '/form/step/2 '→ conveniente para la navegación/recuperación.
Admita 'Ctrl + Enter' para pasar rápidamente al siguiente paso.

6) Estados y consejos visuales

En progreso: indicador gris/activo, el paso se hace clic sólo si se ha completado el anterior.
Completado: marca verde/icono; puede abrirse para su edición.
Error: esquema rojo, texto debajo del campo y en la línea de progreso.
Disabled: los pasos posteriores al actual están ocultos o inaccesibles.

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> 3 Verification </li>
</ol>
</nav>

7) A11y y accesibilidad

'aria-current =' step 'para el paso activo.
El cambio de paso se pone en voz 'aria-live = «polite»'.
Mantenga el enfoque dentro del paso actual; durante la transición: mueva a la cabecera.
La navegación de Amb y Enter es predecible; CES no debe perder contexto.
Para barras de progreso paso a paso, utilice 'role =' list ',' role = 'listitem' y 'aria-label' para el paso.

8) Comportamiento en errores e interrupciones

Fallo de red: banner "Conexión perdida. Los datos se mantendrán localmente".
Tiempo de espera: repetir automáticamente a través de 3-5 s; si falla, un borrador fuera de línea.
Interrupción de la sesión: después del inicio de sesión → «Continuar desde el último paso».
Error de paso: guardamos los campos parcialmente llenos, resaltamos los problemáticos.

9) Sesiones paralelas y seguridad

'draft _ id' es único en el usuario.
Al abrir una nueva pestaña - sugerir "Otra sesión está abierta. Actualizar o continuar aquí".
Para formularios CUS/financieros: los datos se cifran en el cliente (AES/GCM) antes de guardar el borrador.
Elimina borradores por TTL (por ejemplo, 7 días de inactividad).

10) Ejemplos de escenarios de iGaming

10. 1 CUS/verificación

1. Datos personales → 2. Documentos → 3. Verificación → 4. Finalización.

Auto Seave después de subir la foto.
Recuperación del paso de validación después de la pausa.
Estado de «espera de confirmación» con el indicador.

10. 2 Pago/depósito

Pasos: 1. Cantidad → 2. Método → 3. Confirmación.
Los datos del método se guardan entre sesiones.
Es posible volver a seleccionar el método sin restablecer la cantidad.

10. 3 Establecer límites

Pasos: tipo de límite → valor → confirmación.
El progreso muestra los pasos restantes.
Una vez terminado, la pantalla «Entrará en vigor a través de»....

11) Métricas y controles

Completion rate:% de los usuarios que completaron todos los pasos.
Drop-off per step: en qué paso se van.
Average time per step и Time-to-Complete.
Tasa de éxito de ahorro automático (cuántos borradores se han restaurado).
Error recovery rate: una fracción de continuar con éxito después de la falla.

12) Antipatternas

Navegación dura sin «Atrás».
Pérdida de los datos introducidos durante el reinicio.
Saltar a través de los pasos sin contexto.
Un submit común en 10 pantallas.
Error en el paso - y «Empezar de nuevo».
Pantalla en blanco después de una falla en la red.
Progress-bar sin nombres semánticos («1/4/7»...).

13) Tokens del sistema de diseño (ejemplo)

json
{
"steps": {
"radius": 10,
"gap": 8,
"barHeight": 4,
"activeColor": "#2B9F5E",
"inactiveColor": "#E0E0E0"
},
"autosave": {
"debounceMs": 800,
"retryMs": 3000,
"ttlDays": 7
},
"a11y": {
"ariaLive": "polite",
"focusBehavior": "scrollToTitle"
}
}

Preajustes CSS

css
.steps { display:flex; gap:8px; list-style:none; counter-reset:step; }
.steps li { position:relative; flex:1; text-align:center; }
.steps li::before { counter-increment:step; content:counter(step); display:block; width:24px; height:24px; line-height:24px; margin:0 auto 4px; border-radius:50%; background:var(--inactive); color:#fff; }
.steps li. done::before { background:var(--success); }
.steps li[aria-current="step"]::before { background:var(--primary); }

14) Lista de comprobación de QA

Guardar y restaurar

• El borrador se crea y actualiza cada paso.
• Durante el reinicio, la recuperación está disponible y correcta.
• Se procesa el conflicto de versiones (formato antiguo/nuevo).

• «Back» no pierde datos.
• La URL corresponde al paso actual.
• Barra de progreso sincronizada con el estado.

Red y offline

• Offline se guarda localmente y se recupera en línea.
• Los mensajes de fallo son comprensibles y no destructivos.

A11y

• 'aria-current =' step ',' aria-live = 'polite' 'funcionan.
• El enfoque se transfiere al título del paso.

Performance

• Las transiciones son instantáneas (≤ 100 ms).
• Las preservaciones asíncronas no bloquean la IU.

15) Documentación en el sistema de diseño

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Gaids de almacenamiento de contexto (local vs server), A11y y atributos ARIA.
Plantillas UX: KYC, depósitos, límites, cuestionarios, devoluciones después de un error.
Do/Don 't con ejemplos de fallas en la red y recuperación exitosa.

Resumen breve

El formulario de varios pasos debe sentirse mediante un proceso continuo, incluso si el usuario se distrae, reinicia la página o pierde la red. El almacenamiento automático, la recuperación, el progreso visible y los retiros seguros convierten escenarios complejos (KYC, pagos, límites) en una experiencia predecible y confiable.