4 trucos para acelerar los tiempos de carga

No importa qué tan bien diseñada esté su interfaz de usuario, en algún momento u otro, las personas que la usen tendrán que esperar a que se cargue algo.

El tiempo de carga podría dañar la experiencia general. Hacer que los usuarios esperen demasiado para que se cargue su aplicación puede hacer que los usuarios se sientan impacientes. Si los usuarios tienen esa sensación, abandonarán su sitio y se irán a otro lugar. Afortunadamente, hay algunas cosas que puede hacer para acelerar el sentido del tiempo de su usuario y hacer que sienta que su contenido se carga más rápido de lo que lo hace.

1. Nunca haga que los usuarios esperen sin darles su opinión

Si la conexión del usuario es lenta, un sitio puede tardar un poco en completar el contenido de la pantalla. El tiempo de espera de un usuario comienza en el momento en que inicia una acción, y el peor de los casos es cuando no tiene ningún indicador de que el sitio la haya recibido.

Cuando su sitio no notifica a los usuarios que necesita algo de tiempo para completar una acción, los usuarios a menudo piensan que no recibió la solicitud y lo vuelven a intentar. Se han producido muchos toques adicionales debido a la falta de retroalimentación. Para hacer feliz a la gente, debemos dar una indicación de que alguna cosa está sucediendo, ofrezca comentarios visuales.

2. Evite los indicadores de progreso estáticos

Los indicadores de progreso estático son aquellos que tienen una imagen o texto inmóvil, como “Cargando…” o “Espere…” para indicar que la solicitud ha sido recibida. Si bien cualquier comentario es mejor que ninguno, los indicadores estáticos son una mala experiencia de usuario. Los usuarios no tienen ningún indicador de que se esté cargando contenido, por lo que no están seguros de si el proceso está realmente atascado.

3. Utilice indicadores de carga animados

Los estudios psicológicos del tiempo de espera muestran que el enfoque del usuario comienza a cambiar después de un segundo de espera sin recibir retroalimentación. Para reducir la incertidumbre de un usuario, utilice un indicador de progreso para cualquier acción que requiera más tiempo. (Nota: el uso de la animación no se recomienda para nada que tarde menos de un segundo en cargar, porque los usuarios pueden sentirse ansiosos por lo que acaba de aparecer y salir de la pantalla).

Hilanderos de carga infinita para operaciones razonablemente rápidas

La forma más simple de indicadores animados es una ruleta de carga. Este tipo de retroalimentación visual solo indica el hecho de que el usuario tiene que esperar, pero no dice cuánto tiempo debe esperar. Como regla general, debe utilizar este tipo de indicador de progreso para acciones rápidas (2 a 10 segundos).

Una ruleta de líneas grises que irradian desde un punto central es un enfoque estándar.

Los giradores de carga se utilizan a menudo junto con el gesto de extracción para actualizar. Actúa como intermediario entre dos estados de la interfaz de usuario y ayuda a los usuarios a comprender qué sucede cuando cambia la pantalla.

Aplicación Apple Mail para iOS

Animación porcentual realizada para operaciones duraderas

La carga de hilanderos no es la forma correcta de indicar una carga duradera. Es mucho más llevadero esperar algo si sabemos cuándo sucederá. Por eso, para operaciones de larga duración, debe darles a sus usuarios una indicación clara de cuánto tiempo deben esperar. Como regla general, debe usar una animación de porcentaje realizado para procesos más largos que demoren 10 segundos o más.

Credito de imagen: Behance

Alternativamente, puede proporcionar una estimación de tiempo general para la operación. No intente ser exacto, un simple «Esto puede tardar un minuto» puede ser suficiente para informar al usuario y animarle a esperar.

Instalación de la actualización de software en Mac OS X

4. Modificar la percepción del tiempo del usuario

Qué tan rápido se carga su contenido está en la mente del usuario. Al intentar crear una experiencia de usuario más rápida, puede acortar el tiempo percibido en lugar del tiempo real. Para hacerlo, puede completar los tiempos de espera utilizando contenido, animaciones o acciones que el usuario puede realizar.

Barras de progreso

Una barra de progreso hace que los usuarios desarrollen una expectativa de la rapidez con la que se procesa la acción. La forma en que se mueve la barra de progreso afecta la forma en que perciben el tiempo de carga. Para hacer una barra de progreso sentir más rápido para los usuarios que puede utilizar siga técnicas simples:

• La barra de progreso debe Nunca detente, de lo contrario, los usuarios pensarán que el sitio se congeló. El peor caso posible es cuando la barra de progreso se acerca al 99% y se detiene repentinamente. La mayoría de los usuarios se sentirán frustrados por este comportamiento.
• Puede disfrazar pequeños retrasos en su barra de progreso moviéndola de forma instantánea y constante.
• Mueva la barra de progreso lentamente al principio y acelere hacia el final para dar a los usuarios una rápida sensación de tiempo de finalización.

Credito de imagen: Regate

Pantallas de esqueleto

El tiempo de espera es un momento adecuado para pantallas de esqueleto (también conocidos como contenedores de información temporal). Una pantalla de esqueleto es esencialmente una versión en blanco de una página en la que se carga información gradualmente. Proporciona una alternativa a los indicadores animados tradicionales. En lugar de mostrar un widget abstracto, las pantallas de esqueleto crean una anticipación de lo que está por venir y hacen que el usuario se concentre en el progreso en lugar de en los tiempos de espera.

Las imágenes de esqueleto se cargan rápidamente, ya que es una imagen pequeña que a menudo se compone de formas simples. Estas técnicas se pueden llevar aún más lejos en aplicaciones móviles porque la plantilla básica se puede almacenar localmente junto con los datos de la aplicación. La aplicación de Facebook para iOS muestra a los usuarios bloques y líneas grises para representar imágenes y texto a medida que se carga la aplicación. Una vez que termina de cargarse, las imágenes y el texto aparecen en lugar de los contenedores temporales. Esto no es más rápido que tener una pantalla de carga con una ruleta, pero en la mente del usuario, parece que lo es.

Operaciones en segundo plano

Otro truco de velocidad que puede utilizar son las operaciones en segundo plano. Las acciones que se empaquetan en operaciones en segundo plano tienen dos beneficios: son invisibles para el usuario y ocurren antes de el usuario realmente los solicita. Brinde a los usuarios otras cosas en las que centrarse a medida que se desarrolla un proceso en segundo plano. Un buen ejemplo de esto es subir imágenes a Instagram. Tan pronto como el usuario elige una imagen para compartir, comienza a cargarse. La aplicación invita a los usuarios a agregar títulos y etiquetas mientras se carga la imagen en segundo plano. Para cuando los usuarios estén listos para presionar un botón ‘Compartir’, la carga se completará y será posible compartir su imagen. instantáneamente.

Carga progresiva de imágenes

A medida que las aplicaciones y los sitios modernos cargan cada vez más imágenes, es bueno pensar en su proceso de carga, ya que afecta el rendimiento y la experiencia del usuario. Con un efecto de desenfoque puede crear un efecto de carga de imagen progresiva.

Un buen ejemplo es Medium, que difumina la portada de la imagen de la publicación y las imágenes dentro del contenido de la publicación hasta que la imagen está completamente cargada. Primero, carga una pequeña imagen borrosa (miniatura) y luego hace una transición a la imagen grande. Las miniaturas son muy pequeñas (solo unos pocos kilobytes), lo que combinado con el efecto borroso permite un mejor marcador de posición que un color sólido, sin sacrificar la carga útil.

Medio usa desenfoque para crear un efecto de carga de imagen progresiva

Distracción visual

Siempre debe intentar que la espera sea más agradable si no puede acortar la fila. Para asegurar a la gente no te aburras mientras espera que suceda algo, ofrézcales un poco de distracción. Las animaciones finas pueden distraer a sus visitantes y hacer que ignoren los largos tiempos de carga.

Pantalla de bienvenida animada. Credito de imagen: Ramotion (regate)

Credito de imagen: Vimeo