El skeleton es un pattern que solemos usar para que nuestros usuarios esperen a que cargué una página o un conjunto de elementos. Al usar este pattern reducimos la percepción del usuario sobre el tiempo de carga o espera, y además, les mostramos la estructura general de como se verá el contenido cuando termine de cargar.

¿Por qué usamos este pattern? Porque tiene algunos beneficios como:

• Evitar que el usuario piense que el sitio no está funcionando, en vez de ver una pantalla en blanco, ve el skeleton, lo cual le hace saber que la página está cargando.
• Modifica la percepción del usuario con respecto al tiempo de espera, como sabemos, los usuarios abandonan las páginas cuando el tiempo de carga es mayor a 3 segundos, no es lo mismo 3 segundos viendo una pantalla en blanco, que viendo el skeleton, el skeleton le hace pensar al usuario que el contenido terminará de cargar en cualquier momento.
• Reduce la carga cognitiva, el pasar de una página en blanco a una página llena de contenido, aumenta la carga cognitiva del usuario, pero si pasamos por el skeleton, este ayuda al usuario a procesar la estructura de la página poco a poco hasta ver el contenido final. Incluso tendrá una idea de la jerarquía de la página.

¿Hay distintos tipos de skeleton? Sí, y según N/N group, los podemos clasificar de la siguiente manera:

Static-content Skeleton

Es el skeleton más común, el que parece un wireframe, compuesto por figuras geométricas de color gris que representan bloques de contenido o imagenes( sin detalles). Estos bloques, como ya lo mencionamos, representa la estructura que tendrá el contenido al finalizar la carga.

Animated skeleton

Algunos skeletons no son estáticos (no son solo bloques grises), sino están acompañados de sutiles animaciones que lucen como una animación de pulso, utilizando degradados que se mueven a velocidad constante de izquierda a derecha infinitamente.

Frame-display skeleton

Está es la variación de skeleton menos recomendada, ya que solo muestra el background sin representación del contenido, es decir, muestran el fondo(el cuál puede ser blanco), el footer y en ocasiones también la navbar. Este tipo de skeleton no da suficiente valor al usuario, no le permite imaginar la estructura que tendrá la página, además de que genera la misma incertidumbre que una página en blanco, el usuario se pregunta si de verdad esta cargando o la página simplemente esta vacía.

Pero, ¿Debemos usar siempre skeleton? ¿Cómo sabemos si el skeleton, el spinner o la progress bar son mejor opción? ¿Son lo mismo o cuando debo usar cada uno? Si bien los 3 son usados como pantallas de carga, el objetivo de cada uno es distinto.

Los spinners, por ejemplo, brindan información a los usuarios de que el sistema está funcionando y cargando información, pero no da información acerca de cuanto tiempo falta para finalizar la carga. Por lo tanto, son recomendables cuando la página tarda entre 2 y 10 segundo en cargar, al igual que los skeletons, aunque como ya lo dijimos, los skeletons proporcionan mayor información al usuario y una mejor experiencia. Los spinners suelen ser útiles para el estado de carga de los botones, mientras validamos datos o esperamos la respuesta del servidor.

Por otro lado, las barras de progreso se recomiendan para páginas que tarde más de 10 segundos en cargar, ya que muestran al usuario visualmente cuanto tiempo va a tomar la carga y cuanto tiempo tiene que esperar. También podemos usarlas como estado de carga para archivos.

Si una página tarda menos de 1 segundo en cargar, no es necesario un skeleton o un spinner, ya que sería contraproducente para nuestro usuario mostrarle una pantalla que solo parpadea antes de mostrar el contenido final.

Si quieres codear tu propio skeleton, checa este post Y si te gustó el post, suscríbete al newsletter y entérate de más tips y datos interesantes sobre diseño.