Skeletons. ¿Qué son y cuando utilizarlos?

Un skeleton es un marcador de posición temporal que anticipa la estructura del contenido que se va a cargar.

Beneficios de usar skeletons

• Evita que el usuario piense que el sitio no funciona: Los skeletons proporcionan retroalimentación visual inmediata, indicando que el contenido está en proceso de carga.

• Modifica la percepción del tiempo de espera: La animación y el movimiento del skeleton crean la ilusión de que el contenido se está cargando más rápidamente de lo que realmente es.

• Reduce la carga cognitiva: Los skeletons preparan al usuario para el tipo de contenido que está por llegar, facilitando la transición y mejorando la experiencia de usuario.

Tipos de skeleton

Según el N/N group existen tres tipos de skeleton:

Static-content Skeleton

Es la versión más básica que existe. Son grises de fondo.

Animated skeleton

Es la opción más usada por ofrecer una mejor experiencia de usuario.

Frame-display skeleton

Muestra el contenido del sitio, por ejemplo las imágenes en baja resolución.

¿Cuándo usar skeleton, spinner o progress bar?

• Skeleton: Cuando el tiempo de carga es de 3 a 10 segundos.
• Spinner: Para cargas de menos de 3 segundos.
• Progress bar: Si el tiempo de carga supera los 10 segundos.

👀 Aprende aquí cómo hacer un skeleton utilizando HydrateFallback.

¿Te gustaría recibir más tips de diseño UI/UX? Suscríbete a nuestro newsletter para no perderte ningún artículo.