Mejores prácticas para implementar indicadores de progreso animados a su favor

Si alguna vez ha usado una PC, es posible que conozca el símbolo animado de Windows que aparece cuando se inicia el sistema. Fue necesaria una evolución en el diseño y la animación para convertirse en lo que vemos hoy, pero en Windows 1995 la imagen no se movía en absoluto. Algunos de ustedes podrían estar pensando, ¿por qué usar estos indicadores animados?

Pero considere esto, ¿preferiría esperar y ver una pantalla en blanco para ver su acción completada? ¿O permanecer entretenido con algo significativo hasta que la pantalla vuelva a aparecer?

Entre las características más cardinales del diseño de la interfaz de usuario se encuentra la capacidad de mostrar su progreso como estado del sistema. El usuario necesita saber si el sistema es consciente de su acción y está respondiendo en consecuencia. Los indicadores de progreso animados pueden mostrar el contexto actual de la operación en casi cualquier momento sin utilizar funciones extensas de texto o video. Esto los hace ideales para proporcionar el estado del sistema mientras el progreso se completa en segundo plano.

¿Por qué es importante interactuar con el usuario durante el progreso del sistema?

¿Quién no ama la respuesta rápida de una aplicación o sitio web? Si bien significa mucho para el usuario, no es posible ejecutarlo con una consistencia inquebrantable. Ciertos factores siempre se agregan a la ecuación que pueden dificultar la velocidad de su aplicación. Estos factores incluyen principalmente una mala conexión a Internet, un rendimiento lento debido a una gran carga e incluso fallas en el programa. En tales circunstancias, el mejor movimiento sería minimizar la tensión del usuario e introducir la tranquilidad de que la aplicación está funcionando y se está progresando. Para hacer eso, debe proporcionar comentarios al usuario para que el tiempo no afecte su paciencia.

Mantenga a los usuarios enganchados con comentarios

El tiempo de espera comienza casi inmediatamente cuando el usuario realiza una acción. Pero lo que lo empeora es la ausencia de un indicador adecuado para representar el progreso del sistema. El usuario, naturalmente, asume que la aplicación no ha respondido cuando no muestra una notificación de que el sistema está tardando. Los resultados pueden abarcar desde clics desenfrenados hasta incluso el abandono del usuario, solo porque la aplicación no proporcionó comentarios a tiempo.

Las acciones que están conectadas para reiniciar el progreso o actualizar el sistema, a menudo se realizan cuando la carga tarda más de lo previsto. Una vez más, la ausencia de retroalimentación no puede exhibir la respuesta de la solicitud aunque se realice en segundo plano. Es por eso que se debe introducir un indicador animado para promover el progreso del sistema de la aplicación en cualquier momento que lo necesite.

¿Cómo utilizar un indicador de progreso para cualquier acción que tarde más de un segundo?

Normalmente, cuando una aplicación tarda menos de 1 segundo en cargarse, el progreso parece casi sin obstáculos y el usuario no pierde la concentración. Sin embargo, si el tiempo de carga supera 1 segundo, se deben tomar medidas para mantener al usuario interesado. La breve demora se vuelve notoria y el usuario comienza a dudar sobre la efectividad de la tarea que se está realizando en la aplicación.

Es por eso que la aplicación debe responder a través de un indicador de progreso para ofrecer una razón creíble de la espera y reducir la incertidumbre del usuario antes de que se salga de control. Debe tenerse en cuenta que la acción que tarda menos de un segundo en cargarse no requiere necesariamente un indicador de animación, pero la imagen puede hacerlo. Esto se recomienda porque una animación que sigue parpadeando en la pantalla cada vez que se realiza una acción puede desorientar al usuario. Los indicadores de progreso animados se utilizan mejor para neutralizar los efectos de la espera prolongada y mantener al usuario interesado en la aplicación o el sitio web.

Tipos de indicadores de progreso

1. Indeterminado: los indicadores de espera animados están diseñados para comunicarse con el usuario y mantenerlo informado sobre su última acción del usuario. El tipo de indicador de espera más común y bastante más simple es «Indeterminado». Dichos tipos de indicadores les dicen a los usuarios que esperen a que se complete la acción sin que se den cuenta del tiempo que podría llevar completar el progreso. Casi se entiende que Indicador de progreso indeterminado debe usarse para acciones rápidas, preferiblemente dentro de un tiempo de 2 a 10 segundos. Cualquier tiempo más largo que eso puede afectar la paciencia del usuario. Esto puede aumentar la tasa de rebote de un sitio web y el abandono de aplicaciones.
2. Determinado: en el caso del indicador de progreso «Determinado», el tiempo se extiende bastante dentro de la animación. Este tipo de indicadores mantienen informado al usuario sobre el tiempo aproximado o exacto para completar el progreso. Son más bien el tipo más popular de indicadores de espera, ya que muestran el progreso desde donde comenzó, cuánto se ha logrado y cuánto más se necesitará para acabar con la espera. Esto ayuda al usuario a estar seguro del progreso realizado y mostrado a través de la animación, al tiempo que aumenta su disposición a permanecer comprometido con el sitio web o la aplicación.

Indicador de animación en bucle e indicador de porcentaje terminado

• Animación en bucle: el indicador de animación en bucle está diseñado para representar el progreso sin mostrar el tiempo de carga aproximado o exacto que llevará. Es por eso que la mayoría de los indicadores de progreso animados en bucle son indeterminados. Por ejemplo, el indicador de progreso de Windows 7 fue diseñado para mostrar la misma repetición de animación sin ningún tipo de información sobre el tiempo exacto que podría tomar completar el progreso. Además, incluía todo, desde funciones de arranque, configuración de la operación de la interfaz y otras formas de carga de datos. Debido a estas dos razones, los usuarios no prefieren ver un indicador de espera en bucle para representar el tiempo de carga del sitio web o la aplicación.

• Indicador de porcentaje de finalización: como sugiere el nombre, el indicador de porcentaje de finalización muestra el progreso de la carga llenando el espacio, el círculo o la barra de la animación entre un 0 % y un 100 %. Dado que muestra el tiempo que lleva completar el progreso, el indicador de porcentaje hecho se clasifica en indicadores de espera determinados. Para esta cualidad en particular, es mejor usar el indicador de porcentaje hecho para tareas que requieren más de 10 segundos para completarse.

  Según una investigación, 10 segundos es el umbral de paciencia promedio del usuario. Más allá de eso, el usuario se vuelve imprudente y se impacienta hasta que se proporciona más información. Al mostrar el indicador de progreso de porcentaje completado para los procesos que tardan más de 10 segundos en cargarse, puede mantener al usuario enganchado al sitio web o la aplicación sin comprometer su paciencia.

¿Cómo usar los indicadores de progreso de manera efectiva?

El uso efectivo de indicadores de progreso en sus aplicaciones y sitios web puede significar la diferencia entre el éxito y el fracaso. Aquí hay algunos consejos para asegurarse de que sus indicadores de progreso funcionen a la altura.

1. Mantenga al usuario informado sobre el motivo de la espera: es un error de novato mantener al usuario ajeno al progreso de carga que se está realizando en segundo plano. Esto aumenta su tendencia a perder la paciencia y abandonar la aplicación o el sitio web. Puede mantener informado al usuario mostrando un indicador de progreso animado acompañado de algún texto para mayor comprensión. Puede mostrar a qué proceso se dirige específicamente. Por ejemplo, puede mostrar el progreso de espera de un videojuego con una barra de carga y un texto que lea qué proceso se está realizando, por ejemplo, ‘cargando gráficos’ o ‘cargando mapas’, etc.
2. Indique una estimación de tiempo simple para tareas que requieren períodos de tiempo más largos: no lleve las cosas a escalas micro. Puede mantener al usuario comprometido al proporcionar una estimación simple. Hacer el tonto con promesas que no puede cumplir puede irritar a los usuarios y obligarlos a irse.
3. Muestre la cantidad precisa de tiempo requerido: sin embargo, para las operaciones que generalmente toman más tiempo que el límite de espera promedio del usuario, optar por indicadores de progreso determinados será el movimiento más inteligente. La opción ideal sería el indicador de progreso de porcentaje hecho, ya que trae el tiempo de carga preciso al centro de atención. Para las operaciones que son aún más largas de manejar, considere usar una cantidad de pasos para resaltar el progreso realizado.
4. Mantenga el progreso: trate de buscar la coherencia en su barra de progreso durante la carga de tareas. Después de algunas experiencias, la barra de progreso obliga a los usuarios a desarrollar una expectativa sobre qué tan rápido se completará la acción. En consecuencia, cualquier congelamiento en medio del progreso puede dar un golpe serio a las expectativas de los usuarios. Por ejemplo, cuando la barra llega al 99% y permanece así por un período prolongado de tiempo, la mayoría de los usuarios se sienten frustrados por este comportamiento y abandonan la aplicación creyendo que se congeló. Para contrarrestar esto, puede enmascarar estos retrasos inconsistentes en la barra de progreso mostrando que se mueve de manera instantánea y constante.
5. Muestre el progreso en la barra más rápido que la velocidad real: la velocidad bruta se puede manifestar mediante una percepción simple que puede crear para que la barra de progreso se sienta más rápida. Puede lograr esto diseñando la animación para que se mueva lentamente al principio y aumente su ritmo a medida que cierra el final. Esto creará una ilusión de progreso rápido sin comprometer el tiempo para completar la tarea.
6. Ofrezca una distracción: la percepción del tiempo por parte del usuario se puede reducir considerablemente mediante la introducción de indicadores de progreso creativos. Si la aplicación muestra algunos detalles textuales o visuales interesantes mientras se realiza el progreso, puede distraer la mente del usuario del tiempo que se tarda en completar la acción. Puede ofrecer una variedad de cosas para mantener ocupados a los usuarios, por ejemplo, videos cortos, datos interesantes, animaciones e incluso juegos triviales.

Alternativa: use pantallas de esqueletos contra los indicadores de progreso de animación

Aunque los indicadores de animación de progreso pueden sacudir casi todos los malos sentimientos que surgen de la espera, algunas audiencias son bastante resistentes a estas tácticas. Entre algunas buenas alternativas para hacer esperar a los usuarios sin usar indicadores de progreso se encuentra un método llamado pantalla esqueleto. También conocidas como contenedores de información temporal, estas técnicas implican mostrar el progreso en tiempo real al usuario en lugar de abrir una barra de carga. Imagine una pantalla en blanco que se llena gradualmente con sus componentes y elementos hasta que se llena por completo. Esto crea la ilusión de que la aplicación está actuando con el tiempo de carga y su espera está siendo recompensada con el progreso que se muestra.

No solo mantiene a la audiencia comprometida con el sitio web o la aplicación, sino que también los mantiene listos para completar su próxima tarea. Si bien los indicadores de progreso también son excelentes medios para satisfacer a los usuarios, no logran mantener la energía dentro de los usuarios que la pantalla esquelética mantiene durante su progreso de carga.

Pensamientos finales

No importa cuán rápidas sean las operaciones de nuestra aplicación o sitio web, siempre existe la posibilidad de un tiempo de procesamiento no solicitado. El uso de indicadores de progreso de espera animados, como los indicadores de porcentaje terminado y los indicadores de carga, ayudan a tranquilizar a los usuarios sobre los procesos en curso y el estado actual del sistema. Como resultado, aumenta la probabilidad de que permanezcan en el sitio web o la aplicación para esperar la carga y continuar con las tareas restantes. Al calcular el tiempo requerido para que se completen los procesos, debe asignar el tipo apropiado de indicadores de animación de progreso.

Un indicador en bucle es ideal para operaciones que toman de 2 a 10 segundos, mientras que las operaciones que consumen más tiempo pueden ser asistidas con un indicador de porcentaje realizado. En el caso de la animación en bucle y las pantallas de esqueleto, es mejor optar por las pantallas de esqueleto, ya que son capaces de realizar cualquier acción que vaya más allá de unos pocos milisegundos, y aún así mantener la calma con los usuarios.