Por qué gira el spinner

Durante la carga de páginas web, el inicio de aplicaciones, la descarga de archivos... la animación giratoria (spinner de carga) que se muestra en pantalla es uno de los iconos más vistos en la vida digital.

Esa animación giratoria no solo dice "por favor espere". Detrás de ella se esconde una ingeniosa sabiduría de diseño UX (Experiencia de Usuario) que aprovecha hábilmente la psicología humana.

La psicología de la espera - La incertidumbre genera sufrimiento

La mayor causa de estrés durante los tiempos de espera es la incertidumbre de "no saber cuándo terminará". Las investigaciones psicológicas demuestran que, incluso para la misma duración de espera, el tiempo percibido difiere significativamente dependiendo de si el progreso es visible o no.

• Sin nada en pantalla: Estrés máximo. "¿Se habrá congelado?" "¿Debería pulsar el botón otra vez?" - la ansiedad se acumula
• Spinner girando: Saber que "está procesando" reduce la ansiedad. Pero "cuándo terminará" sigue siendo desconocido
• Barra de progreso avanzando: El progreso y el tiempo restante estimado son visibles, resultando en el menor estrés

Un spinner de carga es mucho mejor que no mostrar nada, pero proporciona menos información que una barra de progreso: es una solución intermedia.

La historia de los spinners - Del reloj de arena al círculo giratorio

Cursor de reloj de arena (década de 1980-)

En las primeras versiones de Windows, el cursor del ratón cambiaba a un reloj de arena durante el procesamiento. El reloj de arena era una metáfora excelente para transmitir intuitivamente que "el tiempo está pasando", pero como no se podía ver cuánta arena quedaba, no proporcionaba información sobre el progreso.

Cursor arcoíris (macOS)

El círculo arcoíris giratorio de macOS (apodado "cursor arcoíris" o "pelota de playa") aparece cuando una aplicación deja de responder. Los usuarios lo llaman la "pelota de playa de la muerte", convirtiéndolo en uno de los iconos más odiados.

Spinners modernos

Los spinners actuales utilizados en web y aplicaciones son animaciones ligeras implementadas con animaciones CSS o SVG. Aunque las variaciones de diseño son abundantes (círculos giratorios, puntos que se iluminan en secuencia, barras ondulantes), todos comparten el propósito común de comunicar "procesando".

Incluso la velocidad del spinner tiene significado

La velocidad de rotación de un spinner afecta la psicología del usuario.

• Demasiado rápido: Crea sensación de urgencia y ansiedad. Da la impresión de que "algo podría estar mal"
• Demasiado lento: Refuerza la impresión de procesamiento lento. Hace que los usuarios sientan que "este sitio es pesado"
• Velocidad moderada (1-2 segundos por rotación): Da una impresión tranquila y transmite el mensaje de "procesando sin problemas"

Las directrices de Material Design de Google recomiendan establecer el período de rotación del spinner en aproximadamente 1,3 segundos.

Mejor que los spinners - Pantallas esqueleto

En los últimos años, más sitios y aplicaciones están adoptando "pantallas esqueleto" en lugar de spinners. Las pantallas esqueleto muestran la estructura del diseño (marcadores de posición grises) antes de que se cargue el contenido.

Adoptadas por Facebook, YouTube, LinkedIn y otros, ofrecen estas ventajas:

• Poder predecir "qué se mostrará" hace que la espera se sienta más corta
• Como la estructura de la página es visible primero, los usuarios pueden empezar a leer en el momento en que aparece el contenido
• La sensación de "estar esperando" es más débil en comparación con los spinners

La "regla de los 3 segundos" para tiempos de espera

Según la investigación de Google, el 53% de los usuarios abandonan una página móvil si tarda más de 3 segundos en cargar. La aceleración de entrega basada en CDN, la optimización de imágenes y la eliminación de JavaScript innecesario: reducir el tiempo de espera en sí es la mejora de UX más efectiva.

Los spinners y las pantallas esqueleto son técnicas para hacer que los tiempos de espera "se sientan cómodos", pero no pueden superar la "eliminación" del tiempo de espera por completo. La razón por la que IP Check-san carga rápidamente es el enfoque en la velocidad de respuesta del servidor y la optimización de la página.

Resumen

Un spinner de carga puede parecer una simple animación que solo dice "procesando", pero en realidad es un producto del diseño UX que considera la psicología humana. Reduce la incertidumbre, acorta el tiempo de espera percibido y previene el abandono del usuario. La próxima vez que veas un spinner girando, imagina el procesamiento que ocurre detrás: resolución DNS, conexión TCP, handshake TLS.