Sistema de Pasos y Progreso

¿Qué hace Sistema de Pasos y Progreso?

Propósito

El skill Sistema de Pasos y Progreso proporciona una metodología para diseñar y documentar cómo los usuarios avanzan a través de procesos de múltiples pasos o esperan tareas en segundo plano. Garantiza que los flujos de trabajo complejos (como pagos o incorporación) se dividan en partes manejables, reduciendo la carga cognitiva al comunicar dónde se encuentra el usuario, qué ha completado y qué queda por hacer.

Casos de Uso

• Pagos en Comercio Electrónico: Guiar a los usuarios a través de envío, pago y revisión.
• Formularios de Múltiples Pasos: Dividir tareas largas de entrada de datos en secciones lógicas.
• Incorporación de Usuarios: Visualizar el proceso de configuración de una nueva cuenta.
• Estados de Carga/Subida: Comunicar el estado de operaciones de larga duración.
• Rutas de Aprendizaje: Mostrar el progreso a través de un curso o plan de estudios.

Cuándo NO Usar

• Tareas de una Solo Vista: Si una tarea se puede completar en una sola vista sin cambiar de contexto, un sistema de progreso añade ruido innecesario.
• Flujos Infinitos: Desplazarse por contenido donde no hay un "fin" definido del progreso.
• Interacciones Críticas de Alta Velocidad: Donde el retraso de mostrar indicadores de progreso dificultaría una tarea sensible al tiempo (por ejemplo, IU de juegos en tiempo real).

Entradas

1. Inventario de Pasos: Una lista de las etapas discretas necesarias para completar la tarea.
2. Tipo de Tarea: ¿Es una secuencia impulsada por el usuario (Pasos) o un proceso impulsado por el sistema (Barras de Progreso)?
3. Linealidad: ¿Los pasos deben completarse en orden, o el usuario puede saltar entre ellos?
4. Restricciones de Contenido: Etiquetas, descripciones e iconos para cada paso.

Salidas

1. Marco de Progreso: Una definición del tipo de componente (Horizontal, Vertical o Circular).
2. Matriz de Estados: Especificaciones visuales para los estados Pendiente, Activo, Completado y Error.
3. Estrategia de Adaptación: Cómo se adapta el indicador a las pantallas móviles (por ejemplo, ocultar etiquetas, cambiar a numérico).
4. Especificaciones de Accesibilidad: Roles ARIA, regiones en vivo y reglas de interacción con el teclado.

Flujo de Trabajo

1. Categorizar el Tipo de Progreso

Determinar el patrón visual más apropiado:

• Paso Horizontal: Mejor para procesos lineales con 3–5 pasos en escritorio.
• Paso Vertical: Mejor para procesos no lineales, pasos con longitudes de contenido variables o flujos centrados en móvil.
• Barra de Progreso Continua: Mejor para tareas impulsadas por el sistema (subidas, carga) o procesos con un alto número de micro-pasos.
• Círculo de Progreso: Mejor para widgets de panel de control o cuando el espacio es extremadamente limitado.

2. Definir Jerarquía y Etiquetas de Pasos

• Etiqueta Primaria: Nombre conciso del paso (por ejemplo, "Envío").
• Etiqueta Secundaria (Opcional): Breve descripción o estado (por ejemplo, "En Progreso").
• Indicador Visual: Números (para orden), Iconos (para contexto) o Puntos (para diseño minimalista).

3. Establecer Visualización de Estados

Definir distinciones visuales claras para cada estado:

• Pendiente: Bajo contraste, típicamente atenuado.
• Activo: Alto contraste, a menudo usando el color primario de la marca o un efecto de "brillo".
• Completado: Usar un icono de "marca de verificación" y un color distintivo (a menudo verde o una versión atenuada del color activo).
• Error: Usar un icono de "advertencia" y un color semántico de error (rojo).

4. Diseñar para Movimiento y Retroalimentación

• Transiciones: Usar animaciones sutiles al moverse entre pasos para reforzar la progresión.
• Capacidad de Clic: Determinar si los usuarios pueden hacer clic en pasos anteriores para retroceder.
• Validación: Visualizar que un paso es válido/completo antes de permitir la progresión.

5. Planificar Adaptaciones Responsivas

Los indicadores de múltiples pasos son famosos por romperse en móvil:

• Reducción de Etiquetas: En móvil, ocultar etiquetas de texto y mostrar solo números o iconos.
• Transición a "Paso X de Y": Reemplazar la barra visual completa con un resumen textual o numérico simple.
• Cambio Vertical: Convertir barras horizontales en listas verticales en pantallas pequeñas.

Reglas de Decisión

• La Regla de los 5 Pasos: Si un paso horizontal tiene más de 5 pasos, cambiar a un paso vertical o un indicador de texto simple "Paso X de Y" para evitar saturación.
• Icono vs. Número: Usar números si el orden de la secuencia es crítico; usar iconos solo si proporcionan un valor semántico inmediato (por ejemplo, un icono de "Tarjeta de Crédito" para pago).
• Linealidad: Si los usuarios deben completar los pasos en orden, deshabilitar los clics en pasos "futuros". Si es una configuración flexible, permitir saltos.
• Preservación del Contexto: Mostrar siempre las etiquetas del paso actual, anterior y siguiente. Los demás se pueden truncar si es necesario.

Restricciones

• Accesibilidad:
  • Usar role="progressbar" con aria-valuenow, aria-valuemin, aria-valuemax y un aria-valuetext legible por humanos (por ejemplo, "Paso 2 de 4: Pago") para barras continuas.
  • Usar aria-current="step" para identificar el paso activo en una secuencia.
  • Asegurar que las relaciones de contraste para pasos activos vs. inactivos cumplan con WCAG AA (4.5:1).
  • Si los pasos son clickables, sus objetivos deben cumplir con WCAG 2.2 SC 2.5.8 (mínimo 24x24px, preferible 44px) y exponer estados :focus-visible visibles.
• Jerarquía: El indicador de progreso debe ser una guía, no el enfoque principal. Generalmente se sitúa en la parte superior (horizontal) o izquierda (vertical) del contenido.
• Capacidad de Respuesta: No debe causar desbordamiento horizontal.

Patrones Comunes de Fallo

• El "Progreso Misterioso": Mostrar una barra sin etiqueta ni porcentaje, dejando al usuario preguntándose "¿cuánto falta?"
• Estados Inaccesibles: Usar solo color (por ejemplo, verde vs. gris) para indicar finalización sin iconos ni texto.
• Horizontales Saturados: Forzar demasiados pasos en un diseño horizontal, causando superposición de texto o objetivos pequeños en móvil.
• Falta de Persistencia: Ocultar el indicador de progreso en algunas páginas de un flujo de múltiples pasos, haciendo que los usuarios pierdan su sentido de ubicación.

Criterios de Validación

• El paso actual está claramente distinguido de los pasos completados y próximos.
• Los pasos completados usan un indicador sin color (como una marca de verificación).
• La vista móvil es funcional y no se desborda ni satura.
• Los roles ARIA y aria-current se aplican correctamente.
• El sistema maneja estados de "Error" para pasos individuales.
• El indicador se coloca de manera consistente en todos los pasos del flujo.