Sistema de Estados Esqueleto

¿Qué hace Sistema de Estados Esqueleto?

Propósito

El Sistema de Estados Esqueleto proporciona una metodología para diseñar el estado de "carga" de una interfaz. A diferencia de los spinners genéricos o las barras de progreso, los esqueletos aproximan el diseño final utilizando "huesos" (formas de baja fidelidad), lo que reduce el tiempo de espera percibido por el usuario y previene el Cambio Acumulativo de Diseño (CLS) al reservar el espacio necesario antes de que llegue el contenido.

Casos de Uso

• Paneles con muchos datos: Donde múltiples widgets se cargan a diferentes velocidades.
• Feeds de contenido: Desplazarse por listas de artículos, productos o publicaciones sociales.
• Cuadrículas con muchas imágenes: Reservar espacio para imágenes de alta resolución y evitar que la página "salte".
• Vistas de búsqueda y filtros: Proporcionar retroalimentación inmediata de que el sistema está procesando una consulta.
• Aplicaciones de una sola página (SPA): Gestionar transiciones entre rutas donde los datos se obtienen de forma asíncrona.

Cuándo NO Usar

• Interacciones instantáneas: Si el contenido se carga en menos de 300 ms, un esqueleto puede causar un "parpadeo" molesto.
• Cargas simples de bajo contexto: Para elementos pequeños como un solo botón o una etiqueta minúscula, un spinner estándar o el texto "Cargando..." es más apropiado.
• Contenido estático: Contenido que está codificado o en caché y se renderiza inmediatamente.
• Datos en tiempo real de alta velocidad: Si los datos cambian tan rápido que el esqueleto aparecería y desaparecería constantemente, puede causar fatiga visual.

Entradas

1. Diseño objetivo: El diseño final "completamente cargado" del componente o página.
2. Variables de contenido: ¿Qué partes de la UI son dinámicas (Texto, Imágenes, Precios, Avatares)?
3. Dimensiones espaciales: La altura, anchura y relaciones de aspecto exactas de los elementos finales.
4. Tono de la marca: Los colores primarios y secundarios utilizados para la base del "hueso" y el efecto de brillo.

Salidas

1. Plano del esqueleto: Un mapa de baja fidelidad que muestra la disposición de los huesos.
2. Especificación de huesos: Definiciones para la forma (círculos frente a rectángulos) y el tamaño (fijo frente a porcentual).
3. Estrategia de transición: Reglas sobre cómo se desvanece el esqueleto y cómo aparece el contenido.
4. Requisitos de accesibilidad: Guía para la implementación de aria-busy y aria-hidden.

Flujo de trabajo

1. Mapa de la geometría "objetivo"

Descompón el componente final en sus primitivas geométricas básicas:

• Círculos: Para avatares, iconos o botones redondeados.
• Rectángulos (redondeados): Para tarjetas, contenedores de imágenes y bloques de texto.
• Líneas: Para filas individuales de texto (titulares, metadatos).

2. Define la jerarquía de huesos

No todos los elementos necesitan un hueso. Concéntrate en los "anclajes" estructurales:

• Hueso primario: El elemento visual más grande (por ejemplo, una imagen de producto).
• Huesos secundarios: Titulares y metadatos principales.
• Huesos terciarios: Pequeños metadetalles o botones de acción (a menudo se pueden omitir si son demasiado pequeños).

3. Establece la coincidencia espacial (La regla CLS)

Asegúrate de que las dimensiones del esqueleto coincidan exactamente con el contenedor del contenido final:

• Relación de aspecto: Utiliza relaciones de aspecto fijas (por ejemplo, 16:9 para videos) para el hueso, de modo que no cambie de tamaño cuando se cargue el activo.
• Tamaño del texto: Utiliza huesos que coincidan con la altura de línea y la anchura aproximada del texto que representan.

4. Diseña el ritmo y el brillo

Los esqueletos deben sentirse "vivos" pero no distractores:

• Color base: Utiliza un color neutro de bajo contraste (por ejemplo, Gris claro).
• Brillo (El pulso): Aplica una animación de gradiente sutil que se mueva de izquierda a derecha.
• Sincronización: Si hay varios esqueletos en pantalla, asegúrate de que sus animaciones estén sincronizadas para evitar el caos visual.
• Movimiento reducido: Envuelve la animación de fotogramas clave del brillo en una consulta @media (prefers-reduced-motion: reduce) que deshabilite el movimiento y recurra a un hueso estático o con un pulso de opacidad suave.

5. Define la transición de "entrega"

Planifica la salida del esqueleto:

• Temporización: Utiliza una breve aparición (por ejemplo, 200 ms) para el contenido real, para evitar una transición abrupta.
• Escalonamiento: Para listas, decide si los elementos deben aparecer todos a la vez o a medida que se cargan individualmente.

Reglas de decisión

• La regla de los 300 ms: Solo muestra un esqueleto si se espera que la carga tarde más de 300 ms.
• Precisión del hueso: Un hueso debe representar el contenedor, no los datos específicos. Por ejemplo, un hueso de texto debe ser una barra simple, no una línea irregular que imite letras concretas.
• Número de líneas: Para texto de varias líneas, utiliza 2 o 3 huesos de diferentes anchos (por ejemplo, la última línea al 60% de ancho) para simular el flujo natural de un párrafo.
• Spinner vs. Esqueleto:
  • Utiliza un Esqueleto para transiciones a nivel de página o sección.
  • Utiliza un Spinner para acciones pequeñas y localizadas (como un estado de botón "Guardando...").

Restricciones

• Accesibilidad: Los esqueletos deben marcarse con aria-hidden="true" para que los lectores de pantalla no intenten "leer" las barras vacías. El contenedor padre debe usar aria-busy="true" mientras se carga, e idealmente debe contener una región aria-live="polite" visualmente oculta que anuncie "Cargando" y luego el estado de finalización una vez que el contenido reemplace al esqueleto. No uses aria-live en los propios huesos del esqueleto. Respeta prefers-reduced-motion para el efecto de brillo.
• Contraste: Los colores del esqueleto deben ser distintos del fondo, pero no tan contrastados que parezcan contenido activo.
• Capacidad de respuesta: Los huesos del esqueleto deben escalarse utilizando la misma lógica de cuadrícula/flex que el contenido final.

Patrones de fallo comunes

• El "Salto CLS": Un esqueleto de 200 px de altura reemplazado por contenido de 300 px de altura, haciendo que la página "salte".
• Sobrecarga de brillo: Animaciones demasiado rápidas o de alto contraste que causan mareos o distracción.
• Desajuste contenido-hueso: Usar un hueso circular para una imagen cuadrada, o viceversa.
• Sobrecomplejidad: Intentar recrear cada pequeño icono como un hueso, resultando en un diseño "fantasma" desordenado.
• El "Esqueleto estático": Un esqueleto sin animación, que puede confundirse con una página rota o vacía.

Criterios de validación

• Las dimensiones del esqueleto coinciden exactamente con el estado final "cargado" (CLS cero).
• Las relaciones de aspecto para imágenes/videos se reservan utilizando contenedores fijos.
• La animación de brillo es sutil y se mueve de izquierda a derecha.
• Las áreas con mucho texto utilizan huesos que simulan longitudes naturales de línea.
• Se aplica aria-hidden="true" a los elementos del esqueleto, y el contenedor de carga usa aria-busy="true".
• La animación de brillo respeta prefers-reduced-motion: reduce.
• La transición de esqueleto a contenido es un desvanecimiento suave (aproximadamente 200 ms).
• El esqueleto no aparece para cargas más rápidas de 300 ms.