Pantallas esqueléticas: cuándo usarlas en lugar de ruedas giratorias
Qué son las pantallas esqueléticas, cuándo superan a los hilanderos, cómo diseñarlas para que coincidan con el contenido real y cómo animarlas sin afectar el rendimiento o la accesibilidad.
Idea clave
Una pantalla esqueleto es un marcador de posición similar a una estructura alámbrica que muestra el diseño del contenido mientras se carga. Úselo para páginas completas y listas con una forma predecible; use una rueda giratoria para áreas pequeñas o contenido desconocido y progreso real para tareas largas. Haga que el esqueleto coincida con el diseño real para que nada salte cuando llegue el contenido.
Qué es una pantalla esqueleto
Nielsen Norman Group define una pantalla esqueleto como un marcador de posición para una página de carga que imita el diseño con una imagen similar a una estructura alámbrica. Se utiliza para cargas de página completa y reduce el tiempo de carga percibido, porque las personas ven la estructura de lo que viene en lugar de un área vacía.
Cuando usar cual
Relaciona el indicador con el contenido y la espera:
- Esqueleto: cargas de páginas o listas donde se conoce el diseño, como feeds, tarjetas y perfiles.
- Spinner: áreas pequeñas, botones o contenido cuya forma no se puede predecir.
- Barra de progreso: tareas largas que puedes medir, como cargas y exportaciones.
- Nada: respuestas muy rápidas, donde un indicador sólo parpadearía.
Diseñando un buen esqueleto
Utilice las dimensiones reales del componente para que la página no se mueva cuando llegue el contenido, lo que también protege su puntuación de cambio de diseño acumulativo. Mantenga formas simples (bloques para imágenes, barras para texto), use grises de bajo contraste y reemplace cada marcador de posición con contenido real tan pronto como esté listo en lugar de esperar por todo.
Esqueletos animados
NN/g señala que algunos esqueletos incluyen una animación parpadeante o brillante para indicar que el sistema todavía está funcionando. Manténgalo lento y sutil, anime la opacidad o una transformación en lugar de las propiedades de diseño, y deténgalo cuando el movimiento reducido esté activado. Asigne a la región de carga una etiqueta accesible como "Resultados de carga".
Principios clave para recordar
- Los esqueletos muestran el diseño del contenido próximo y reducen la espera percibida.
- Úselos para cargas predecibles de páginas y listas; hilanderos para áreas pequeñas o desconocidas
- Haga coincidir las dimensiones reales para evitar cambios de diseño
- Mantenga el brillo sutil y deténgalo para reducir el movimiento.
- Regiones de carga de etiquetas para lectores de pantalla
Preguntas frecuentes
Fuentes
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev