4 trucos para hacer que los tiempos de carga sean más rápidos
No importa cuán bien diseñada sea 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 cargar su aplicación puede impacientar a los usuarios. Si los usuarios tienen esa sensación, abandonarán su sitio e irán a otro sitio. 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, el sitio puede tardar un tiempo en llenar el contenido de la pantalla. El tiempo de espera de un usuario comienza en el momento en que inician una acción, y el peor caso es cuando no tienen ningún indicador de que el sitio lo haya recibido.
Cuando su sitio no notifica a los usuarios que necesita tiempo para completar una acción, los usuarios a menudo piensan que no recibieron la solicitud y lo intentan de nuevo. Se han producido muchos grifos adicionales debido a la falta de retroalimentación. Para hacer felices a las personas, debemos dar una indicación de que algo está sucediendo, ofrecer retroalimentación visual.
2. Evite los indicadores de progreso estáticos
Los indicadores de progresión estáticos son aquellos que tienen una imagen o texto inmóvil, como "Cargando ..." o "Espere ..." para indicar que se recibió la solicitud. Si bien cualquier comentario es mejor que ninguno, los indicadores estáticos son malos UX. Los usuarios no tienen ningún indicador de que el contenido se esté cargando, por lo que no están seguros de si el proceso está bloqueado.
3. Usa 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 ningún comentario. Para reducir la incertidumbre del usuario, use un indicador de progreso para cualquier acción que tarde más. (Nota: el uso de la animación no se recomienda para nada que tarde menos de un segundo en cargarse, ya que los usuarios pueden sentirse ansiosos por lo que acaba de encender y apagar en la pantalla).
Infinitas ruedecillas de carga para operaciones razonablemente rápidas
La forma más simple de indicadores animados es un spinner de carga. Este tipo de comentarios visuales simplemente establece el hecho de que el usuario tiene que esperar, pero no dice cuánto tiempo debe esperar. Como regla general, debe usar este tipo de indicador de progreso para acciones rápidas (2-10 segundos).
Una hilera de líneas grises que irradian desde un punto central es un enfoque estándar.
Los giradores de carga a menudo se usan junto con el gesto de extracción por renovación. Actúa como intermediario entre dos estados de la IU y ayuda a los usuarios a comprender lo que está sucediendo cuando cambia la pantalla.
Aplicación Apple Mail para iOS
Animación porcentual para operaciones de larga duración
Los cargadores giratorios no son la manera correcta de indicar una carga de larga duración. Es mucho más soportable esperar algo si sabemos cuándo sucederá. Es por eso que para las operaciones de larga duración debe dar a sus usuarios una indicación clara de cuánto tiempo deben esperar. Como regla general, debe usar una animación porcentual hecha para procesos más largos que toman 10 o más segundos.
Credito de imagen: Behance
Alternativamente, puede proporcionar un estimado de tiempo general para la operación. No intente ser exacto, un simple "Esto puede tomar un minuto" puede ser suficiente para informar al usuario y alentarlo a esperar.
Instalación de actualización de software en Mac OS X
4. Ajustar la percepción del tiempo del usuario
La velocidad de carga de 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 qué tan rápido 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 que una barra de progreso se sienta más rápida para los usuarios, puede seguir técnicas simples:
- La barra de progreso nunca debe detenerse; 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 de repente. La mayoría de los usuarios se sentirán frustrados por este comportamiento.
- Puede ocultar pequeñas demoras en su barra de progreso moviéndola de manera instantánea y estable.
- Mueva la barra de progreso lentamente al principio y agítela hacia el final para dar a los usuarios un sentido rápido del tiempo de finalización.
Credito de imagen: Dribbble
Pantallas de esqueleto
El tiempo de espera es el correcto para las pantallas de esqueleto (también conocidas como contenedores de información temporal). Una pantalla de esqueleto es esencialmente una versión en blanco de una página en la que la información se carga gradualmente. Proporciona una alternativa a los indicadores animados tradicionales. En lugar de mostrar un widget abstracto, las pantallas esqueleto crean anticipación de lo que está por venir y hacen que el usuario se centre 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 tomar aún más en aplicaciones móviles porque la plantilla de esqueleto 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, se siente como es.
Operaciones de fondo
Otro truco de velocidad que puedes usar es operaciones de fondo. Las acciones que se empaquetan en operaciones en segundo plano tienen dos ventajas: son invisibles para el usuario y suceden antes de que el usuario realmente las solicite. Ofrezca a los usuarios otras cosas en las que concentrarse mientras se desarrolla un proceso en segundo plano. Un buen ejemplo de esto es cargar imágenes en Instagram. Tan pronto como el usuario elige una imagen para compartir, comienza a cargar. La aplicación invita a los usuarios a agregar títulos y etiquetas mientras la imagen se carga en segundo plano. Para cuando los usuarios estén listos para presionar el botón "Compartir", la carga se completará y será posible compartir su imagen al instante .
Carga de imagen progresiva
A medida que las aplicaciones y sitios modernos cargan más y más imágenes, es bueno pensar en su proceso de carga, ya que afecta el rendimiento y la experiencia del usuario. Usando un efecto de desenfoque puedes crear un efecto de carga de imagen progresiva.
Un buen ejemplo es Medium, que difumina la portada de la imagen de la publicación, así como 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) que, combinadas con el efecto borroso, permiten 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 tratar de hacer la espera más agradable si no puede acortar la línea. Para garantizar que las personas no se aburran mientras esperan que algo suceda, ofrézcales algo de distracción. Las animaciones finas pueden distraer a los visitantes y hacer que ignoren los tiempos de carga largos.
Pantalla de bienvenida animada. Credito de imagen: Ramotion (Dribbble)
Credito de imagen: Vimeo