Deja de usar el spinner de carga, hay algo mejor

Deja de usar esos aburridos spinners de carga en tus interfaces de usuario. En serio. Está matando la experiencia de tus aplicaciones más de lo que crees.

Un spinner de carga podría ser la solución a tus problemas de carga de contenido. Pero estoy aquí para decirte que no lo es.

Incluso podrías utilizar algunos de esos Spinners de carga animados tan elegantes. Pero tampoco son mejores.

Por qué el Loading Spinner no funciona

Desde hace mucho tiempo seguimos, o más bien estamos influenciados por las reglas duras de los lenguajes de diseño. Sin embargo, no te culpo.

La clave de la sabiduría es ésta: el cuestionamiento constante y frecuente, pues dudando somos llevados a cuestionar y cuestionando llegamos a la verdad. – Peter Abelard

El Spinner de carga es uno de los indicadores de progreso más utilizados en el diseño de interfaces de usuario. Pero tiene sus propios defectos que, por lo general, se pasan por alto.

No hay señales de progreso

¿Qué te dice el loading spinner? Denota que el contenido se está cargando actualmente. Pero, ¿dice cuánto se ha cargado? ¿Dice cuánto queda por cargar?

No, no lo dice.

Además, es difícil de determinar. Si pudiera, estaríamos usando una barra de progreso, ¿no?

Ese período de incertidumbre

¿Cuánto tiempo pasaste mirando eso? Esperabas que algún contenido se cargara después de un tiempo? Siento decepcionaros.

Bien, supongamos que la carga del GIF realmente se completó y se muestra algún contenido. Haceos estas preguntas y dadme una respuesta sincera. Estoy seguro de que habéis mirado suficientes Loading Spinners para saberlo.

1. Cuando habéis mirado el Loading Spinner, ¿sabéis cuánto tiempo queda para que se complete?
2. ¿Cuánto contenido se ha cargado?
3. ¿Cuánto queda para que se cargue?

Simplemente nos quedamos mirando un Loading Spinner. Esperando que se cargue a tiempo, sin respuesta a ninguna de esas 3 preguntas.

Además, las conexiones de red pueden ser inestables. Así que nunca podemos dar por sentado que el contenido siempre se cargará rápido.

Se percibe que es más lento que lo real

Los Spinners de carga hacen que la carga parezca más lenta.

Es como un reloj, que hace tictac constantemente. Muestra el tiempo que pierdes al mirarlo. Como el GIF de arriba, que te hice mirar fijamente.

http://gph.is/1MoI2wJ

Hasta que todo se haya cargado, ¿tienes alguna idea de qué esperar en la pantalla? Apuesto a que no. Incluso podría sorprenderse una vez que la UI y el contenido se muestren.

Ahora piense en sus usuarios. Hasta que no se haya cargado todo, no tienen ni idea de qué esperar en la pantalla. Apuesto a que también se sorprenderán.

Esto no será culpa de ellos. Para empezar, ¡no les has dicho qué esperar!

Una «sorpresa» no siempre es algo bueno

Un acontecimiento, hecho, etc., inesperado o sorprendente. – Sorpresa

Desde la propia definición de la palabra, una sorpresa indica un hecho ‘inesperado’. La gente tiende a tener reacciones polarizantes ante tales acontecimientos. Esto puede ser positivo o negativo.

Las sorpresas no suelen dejar un impacto positivo en la gente. A menos que sea su cumpleaños. Depende de cómo se lo tome la persona. Así, aquí radica el problema.

Mira bien las dos imágenes. Mira la imagen de la derecha. Podrías predecir honestamente que la interfaz de usuario finalmente se vería así? Estoy seguro de que no.

De acuerdo, la UI final es un diseño de baja fidelidad. Pero ya entiendes el punto.

Deliberadamente no saqué ejemplos de aplicaciones existentes. Porque tú y yo sabemos cómo será. Con una aplicación conocida, ya hemos visto la interfaz, incluso antes de su carga.

Las emociones afectan a nuestro sentido del tiempo

¿Sabías que? Los humanos podemos predecir el tiempo. Eso también con bastante precisión.

Pero bajo una influencia emocional, nuestro sentido del tiempo se nubla significativamente.

http://gph.is/1XcuFKh

Todos hemos experimentado esto. El tiempo parece volar cuando haces lo que te gusta. Pero si es algo que odias, el tiempo parece arrastrarse. Incluso cuando estás aburrido, mirando el reloj esperando tu programa favorito. El tiempo se mueve aún más lento entonces.

Lo mismo ocurre con nuestras interfaces.

El punto que estoy tratando de hacer es. Su contenido podría no tomar mucho tiempo para cargar. De hecho, puede que no sea un gran problema. Pero puede parecer más largo de lo que realmente tarda. Es sólo cómo la gente podría percibirlo, y no hay nada que podamos hacer para cambiarlo.

Pero lo que podemos hacer, es ayudar a cambiar su percepción. Podemos hacer que nuestra aplicación parezca más rápida de lo que es en realidad.

NOTA
No te dejes llevar demasiado por el intento de fingirlo. Tu interfaz necesita una combinación de velocidad real y percibida para tener éxito.

La ilusión de las alternativas

Típicamente, tenemos dos opciones para denotar la carga del contenido:

1. Barra de progreso finita – si podemos determinar los tiempos de carga
2. Spinner de carga (progreso de carga infinito) – si se desconocen los tiempos de carga

Pero vuelve a fijarte en las opciones. ¿Te das cuenta de que no hay ninguna opción real aquí?

No podemos usar una barra de progreso finita porque no podemos medir los tiempos de carga. Además, ya sabemos que el Spinner de carga no es bueno.

Un buen indicador de progreso

Un buen indicador de progreso es aquel que, obviamente, no tiene ninguno de los aspectos negativos que he mencionado anteriormente. Pero para tener un tono más optimista, dejadme que los enumere.

• Da un feedback inmediato
• Proporciona una sensación de tiempo ( cuánto se ha avanzado, y cuánto está pendiente)
• Elimina la duda (el progreso gradual tranquiliza a la gente de que la app está funcionando)

Alguna prueba como respaldo

Algunos de vosotros puede que no os creáis lo que he dicho. Pero creedme. Si fuera yo, tampoco me creería lo que he dicho. Después de todo, ¿dónde están las pruebas? ¿Los indicadores de carga realmente hacen daño? ¿Quién lo ha experimentado?

Bueno, entonces considérese afortunado. Tienes la oportunidad de aprender de los errores de otra persona. La aplicación de iOS Polar sugiere encarecidamente evitar el Spinner.

Polar recibió muchas quejas sobre la lentitud de su app. Esto se debía a los indicadores de carga que incluían en su app.

Con los indicadores de progreso, habíamos hecho que la gente mirara el reloj. Como resultado, el tiempo iba más lento y nuestra app también. Nos centramos en el indicador y no en el progreso, es decir, dejar claro que estás avanzando hacia tu objetivo y no sólo esperando.
– Polar

Creo que ya he divagado bastante sobre por qué los Spinner de carga son malos. El problema del Spinner radica en no proporcionar una sensación de progreso. Sin embargo, podemos remediarlo.

¿Cómo, te preguntarás? La respuesta es ‘Pantallas Esqueleto’.

Pantallas Esqueleto al rescate

A diferencia de los Spinners de Carga, en los que la UI se muestra toda de una vez. Una pantalla esqueleto ayuda a cargar una interfaz de usuario gradualmente, un poco a la vez.

Esto significa que la UI barebones muestra primero. Luego el contenido cargado se va poblando gradualmente en la pantalla.

«Una pantalla esqueleto es esencialmente una versión en blanco de una página en la que la información se carga gradualmente.»
– Luke Wroblewski

Las pantallas esqueleto desplazan la atención de los usuarios. Hace que la gente se centre en el progreso, en lugar del tiempo de espera.

Las pantallas esqueleto indican visualmente a los usuarios lo que pueden esperar de la interfaz. Les da una idea de lo que va a venir y crea una sensación de progreso gradual.

Sobre todo, hace que la gente perciba que su sitio es más rápido de lo que realmente es. Recuerde que estamos diseñando interfaces para que las utilicen personas reales. Tenemos que dar a la gente la ilusión de velocidad.

Cuanto más información dé el sistema sobre el tiempo de espera, mayor será la satisfacción del usuario.
– Cómo mejorar el tiempo de espera percibido en HCI

Usar una pantalla esqueleto le da los siguientes beneficios:

• Ayuda a la gente a percibir que su pantalla se carga más rápido
• Elimina las sorpresas
• Carga gradual de la UI – indicación clara del progreso
• Muestra exactamente lo que está cargado y lo que queda por cargar

Progresión gradual

Sé que es un término elegante. Lo que significa es que el contenido se carga gradualmente. La gente de diseño y desarrollo web conoce esto como ‘Lazy-loading’.

Diferir la inicialización de un objeto hasta el punto en que se necesita.
– Lazy Loading

Primero, diseñar la UI de huesos desnudos (pantalla esqueleto). A continuación, cargar los datos de texto. El usuario sabe que ha recibido el contenido. Finalmente carga las imágenes. El usuario entiende que la mayor parte del contenido se ha cargado. Lo que queda son las imágenes.

De esta manera, has dado a los usuarios:

• una clara sensación de progreso
• qué esperar a continuación
• qué queda por esperar

Nota cómo Instagram maneja inteligentemente la carga aquí.

Primero, Instagram muestra un spinner de carga durante un breve periodo. A continuación, presenta la interfaz de usuario básica. Esta es la pantalla de esqueleto o Placeholder UI. Esto indica el lugar que el contenido eventualmente llenará.

También, observe que los datos de texto ya ha poblado la pantalla. Finalmente, en la tercera captura de pantalla, las imágenes se cargan gradualmente en su lugar.

Aquí hay algunos sitios web que utilizan pantallas esqueleto para mostrar la carga.

Podrías argumentar que estos sitios web utilizan Spinners de carga. Pero fíjate en cómo se utiliza. Un Spinner solo no se muestra de principio a fin. Se muestra sólo durante un breve período, seguido por la pantalla del esqueleto.

TIP
Si su tiempo de carga es más largo, puede mostrar brevemente un Spinner de carga, antes de la UI del esqueleto. Esto puede comprar su tarea un poco más de tiempo para completar.

Carga progresiva para imágenes

Incluso puede aplicar la progresión gradual a la carga de imágenes. Por ejemplo, Medium y Google utilizan la carga progresiva para sus imágenes.

Seguro que has visto alguna de ellas. Quizás no sabías que tenía un nombre propio hasta ahora.

Aquí tienes los pasos genéricos sobre la carga progresiva de imágenes.

1. Mostrar el esqueleto de la pantalla
2. Cargar una versión de muy baja calidad (pixelada) de la imagen (o de color prominente)
3. Cargar la imagen de alta calidad en segundo plano
4. Introducir la imagen de alta calidad, sustituyendo a la anterior de baja calidad

Por supuesto, lo que se muestra primero varía. Medium opta por utilizar una imagen extremadamente pixelada y aplica un filtro de desenfoque sobre ella. Después carga una imagen de mayor calidad para sustituirla. Mientras que Google muestra primero el color destacado de la imagen.

Nótese que no ha dado entonces una indicación clara de CUÁNDO se completará la tarea. Todavía no hay una estimación de tiempo sólido. Pero usted ha dicho que lo que ha completado y lo que queda. Eso en sí mismo es una clara señal de progreso.

Pantallas esqueleto en Android e iOS

Podrías argumentar diciendo que la mayoría de los ejemplos de pantallas esqueleto son sitios web. Entonces, ¿cómo hacer esto en el móvil? Tienes toda la razón. Leer todo esto no valdría la pena si ni siquiera te diera una pista de cómo hacerlo.

Facebook ha escrito una librería llamada Shimmer tanto para Android como para iOS.

Funciona de la misma manera que Facebook utiliza el esqueleto de la interfaz de usuario para cargar el contenido entrante. La animación shimmer representa que el contenido se está cargando en ese momento.

Puedes usar esta librería para mostrar pantallas esqueleto para denotar la carga en tus aplicaciones.

Manejo de fallos con pantallas esqueleto

No hay garantía de que una petición se ejecute siempre con éxito. Así que no podemos asumir que si un contenido se carga gradualmente, finalmente se completará. Lo más probable es que falle a mitad de camino. Las razones más comunes incluyen una conectividad defectuosa, lenta o nula.

Suponga que ha iniciado una solicitud para cargar un contenido. A continuación, la pantalla del esqueleto también se muestra. Entonces, de repente, su Internet se apaga. ¿Cómo manejarías esto?

Típicamente, debes informar al usuario y permitirle reintentar.

Recuerda que dar retroalimentación es un buen diseño de interacción y una experiencia de usuario positiva.

Los estados vacíos ocurren cuando el contenido de un elemento no puede ser mostrado.

TIP
Considera usar ‘ Estados vacíos ‘. Le permite proporcionar información clara con un botón de ‘Llamada a la Acción’ (CTA).

Conectividad en Android y iOS

Aquí hay un par de recursos que pueden ayudarle a manejar la conectividad.

Android

• Utiliza Snackbar para dar feedback con el botón CTA
• Conectividad – clase de manejo de redes

iOS – Swift

• Alertas de iOS – colección de librerías de alertas para elegir
• Alcanzabilidad – manejo de la red

Envolver

Las aplicaciones se están volviendo inteligentes. La gente está empezando a darse cuenta de que el Loading Spinner está perjudicando su UX. Ya es hora de que tú también lo hagas.

Las pantallas esqueleto proporcionan un progreso incremental en la carga de tu interfaz. Tal retroalimentación incremental da una mejor experiencia de usuario, y reduce la incertidumbre. Además, la gente estaría dispuesta a esperar un poco más.