Componentes

Diseñar para la velocidad

Diseñar para la velocidad está convirtiéndose en un pilar cada vez más importante de una buena experiencia de usuario (UX). Cuanto más interactúen los usuarios con páginas web y aplicaciones de alta velocidad, más frustrados estarán cuando se enfrenten a tiempos de carga más largos.

Desafortunadamente, los tiempos de carga no siempre están bajo el control del diseñador. Pero con sitios web o apps que contienen mucho contenido y tardan un poco más en cargar, depende de los diseñadores de UX encontrar formas de manejar las expectativas de los usuarios sobre lo que están esperando (y cuánto tiempo tendrán que esperar). Aquí es donde entran en juego los skeleton loaders.

En este artículo, desglosaremos la psicología detrás de por qué las pantallas de esqueleto son tan efectivas, los diferentes tipos de pantallas de esqueleto que se pueden utilizar y cuándo no utilizarlas.

¿Qué es un skeleton loader?

Las pantallas con un skeleton loader ayudan a los usuarios al proporcionar una vista sin distracciones mientras esperan a que se cargue el contenido. También se pueden utilizar para indicar actividad y comunicar el propósito de una aplicación o sitio web.

El skeleton loader funciona principalmente para cuatro propósitos:

1. Mostrar a los usuarios lo que está sucediendo
2. Dar a los usuarios una idea de lo que vendrá después
3. Comunicar que se está trabajando en su problema
4. Proporcionar a los usuarios una indicación de qué tan cerca están de ver la página real

El uso del skeleton loader mejora la experiencia del usuario de nuestros clientes y generan una mejor percepción de eficiencia en lo que se carga el contenido en las páginas o pantallas.

¿Por qué es útil un skeleton loader?

Cuando un usuario despliega la pantalla en una app o algún sitio web y no sucede nada, asumirán que algo está mal. Para fomentar experiencias positivas de usuario, es importante comunicar claramente qué está sucediendo cuando la página se carga.

Un ícono de spinner puede parecer la opción obvia para comunicar que algo está sucediendo o para informar al usuario que debe esperar. Pero la investigación muestra que los estados vacíos sin ninguna indicación de progreso son menos efectivos para fomentar la confianza del usuario.

Las pantallas con skeleton loader se pueden utilizar como una forma de comunicarse con los usuarios de que hay actividad sucediendo en segundo plano y, lo crucial, es que no tomará mucho tiempo. Al darles algunas pistas visuales sobre cuánto tiempo tendrán que esperar antes de poder volver a usar el sitio, puede ayudar a construir confianza entre el usuario y su producto.

Los tiempos de carga largos pueden molestar a los usuarios, pero las pantallas de esqueleto brindan retroalimentación en puntos clave y hacen que esos tiempos de espera sean más soportables. También se puede utilizar una pantalla de esqueleto para indicar actividad. Por ejemplo, las pantallas de esqueleto animadas se pueden utilizar como indicador de progreso o incluso como mensaje de error que indica que algo salió mal.

Anatomía

El skeleton loader es esencialmente una proyección de los wireframes de las áreas y contenedores de contenido de la página o pantalla, el cual nos indicara las zonas de contenido, cómo imágenes, texto u otros componentes, en la que esta carga.

¿Cuándo utilizar skeleton loaders?

Las pantallas con skeleton loaders son una excelente manera de mantener a los usuarios interesados en nuestro producto. Pero no funcionan en todos los contextos y deben ser utilizadas estratégicamente.

Uno de los usos más comunes para aplicar un skeleton loader es en sitios web o apps, con mucho contenido e imágenes, como home, product cards o category list.

Si el sitio web o app, necesita cargar varias imágenes al mismo tiempo o extraer datos de varias fuentes diferentes, es probable que necesite una pantalla con skeleton loader para evitar frustrar a los usuarios.

Si los tiempos de carga son demasiado largos, incluso puede valer la pena considerar la combinación con lazy loading, la práctica de mostrar solo lo que es necesario en la página, mientras el resto del contenido se carga en segundo plano.

Cuándo no utilizar skeleton loaders

Puede parecer que no hay posibles desventajas en el uso de skeleton loaders, pero dependiendo de la audiencia, pueden causar más confusión que claridad. Aquí hay algunos ejemplos de cuándo un skeleton loader es el componente visual adecuado (y qué usar en su lugar):

· Sitios o apps que cargan rápido: Como los skeleton loaders se usan comúnmente para tiempos de carga lentos, no tiene sentido que sus usuarios las vean durante medio milisegundo antes de que se cargue la página. En este caso, no necesita nada.

· Contenido de video: Los spinners se consideran la señal estándar de la industria para el almacenamiento en búfer de video, por lo que es mejor seguir esta tendencia sin cambiar el elemento definido.

Procesos largos en ejecución: Las conversiones de archivos, las cargas/descargas o la importación de datos deben utilizar barras de progreso o indicadores de texto que expliquen cada etapa del proceso.

Comportamiento

1. Esta propiedad reemplaza el tradicional “spinner” de carga, que actualmente se encuentra en desuso o ya no forma parte de las tendencias en diseño y usabilidad de productos digitales actuales.

2. El skeleton loader es el primer componente en cargarse para que se visualice antes de la carga del contenido de texto, imágenes, botones y otros elementos.

3. Hasta que la carga de todo el contenido este completada, el skeleton loader deberá desvanecerse para dar paso a la pantalla con todo el contenido cargado, como en el siguiente ejemplo:

Animación

Este componente en general se puede desplegar sin animación o bien en alguno de los siguientes efectos: Pulse o Wave

Tamaño de elementos

Los elementos del skeleton loader vienen en cinco tamaños para coincidir con los tamaños típicos de los componentes dentro del sistema: extra pequeño, pequeño, mediano, grande y extra grande.