Barras de progreso e indicadores de tiempo

Es inevitable que las personas usuarias tengan que esperar en algún momento para que se complete un proceso o se cargue una página cuando están utilizando un producto digital. Los tiempos de carga, recuperación de datos, las instalaciones o las descargas pueden tardar algunos segundos.

Gestionar las expectativas de los usuarios durante las esperas es clave para prevenir emociones negativas en la UX del producto. También hay que tener en cuenta otras situaciones como la pérdida de conexión, y diseñar para offline explicando qué funcionalidades están disponibles en cada momento, informando a las personas usuarias para que no se frustren durante la espera.

El primer principio de los heurísticos de usabilidad de Jakob Nielsen es la visibilidad del estado del sistema. Esto significa que siempre hay que comunicar claramente a las personas usuarias cuál es el estado del sistema, y no se debe realizar ninguna acción con consecuencias sin informarlas. El objetivo de esta regla es minimizar la tensión de las personas usuarias, y proporcionar información sobre lo que está ocurriendo en cada momento dentro de un periodo de tiempo razonable.

Cuando diseñamos tareas que pueden tardar unos segundos en completarse hay dos preguntas que se pueden hacer las personas usuarias que tenemos que tener muy encuenta:

• ¿Cuánto tiempo tardará esta acción? Esta pregunta trata sobre la duración estimada de un proceso, y ayudará a la persona usuaria a determinar si es un tiempo que puede utilizar para llevar a cabo esa acción o si necesita esperar (o cancelar) y hacerlo en otro momento. Es importante pensar que pueden darse situaciones muy diferentes. Es posible que la persona usuaria esté dispuesta a esperar el tiempo necesario que necesita la acción mientras hace otras cosas, pero también puede darse una situación en la que la tarea necesita ser completada y monitoreada por la propia persona. Es muy importante determinar cuánto tiempo va a tardar en completarse una acción para que las personas usuarias determinen qué hacer.  
• ¿Cuánto tiempo más tardará esta acción? Esta pregunta resume el tiempo real que la persona usuaria está esperando. Al igual que en la pregunta anterior, si la acción lleva más tiempo del esperado, tenemos que ofrecer la oportunidad de cancelar la operación. 

Cuándo utilizar barras de progreso e indicadores de tiempo

Para informar de la cantidad de tiempo restante o estimado de un proceso se puede utilizar una fórmula visual o textual, o ambas a la vez. Los indicadores visuales pueden ser animaciones (como una rueda giratoria) o barras de progreso. Por otra parte, la representación textual puede indicar cuánto tiempo ha transcurrido, el tiempo restante hasta la finalización de la tarea o las tareas que faltan por completar.

La decisión final sobre si utilizar una fórmula visual o textual depende de las características de cada proyecto, pero como norma general, estas son las pautas de tiempo para tomar la decisión.

• 0 – 2 segundos: No se necesita indicación, ya que generalmente es instantáneo para la persona usuaria.
• 2 – 5 segundos: Es necesario una animación para que la persona usuaria sienta que la acción se está llevando a cabo.
• 5 – 10 segundos: Hay que integrar una indicación de progreso o una indicación visual de inicio y finalización.
• Más de 10 segundos: En el caso de que el tiempo de espera sea más de 10 segundos hay que incluir una indicación del progreso, además de un botón que permita cancelar la operación.

Tipos de barras de progreso e indicaciones de tiempo

Dependiendo del proyecto será necesario elegir unos elementos u otros para las barras de progreso o los indicadores de tiempo. Estos son algunos de los más utilizados:

• Loaders y spinners. Este elemento es una animación en bucle, y sirve para indicar que estás esperando, pero no indican cuánto tiempo hay que esperar, o si se está llevando a cabo alguna acción y por eso hay que esperar. Este recurso es útil cuando las esperas son muy cortas.

• Barras de progreso visual. Las barras de progreso ofrecen un punto de referencia en la espera. Indican dónde empieza y termina la carga y en qué punto se encuentra el proceso. A su vez, las barras de progreso pueden ser determinadas o indeterminadas. Los indicadores determinados indican cuánto tiempo queda por esperar (en porcentaje), mientras que los indeterminados no hacen ninguna referencia al tiempo esperado. Es recomendable utilizarlas cuando el tiempo de espera es medio.

• Barras de progreso con información textual. Esta fórmula utiliza etiquetas con información para informar a las personas usuarias sobre qué pasos tienen que seguir para completar la acción y en cuál se encuentran. Es preferible utilizarlas cuando el tiempo de espera es más elevado. De esta forma las personas usuarias tienen información en todo momento sobre en qué punto se encuentran.
• Pantallas de esqueleto. Las pantallas esqueléticas (también denominadas como contenedores de información temporales) son una versión en blanco de la página en la que la información se carga gradualmente. Es recomendable utilizarlas cuando el tiempo de espera es más elevado, ya que consiguen “distraer” a las personas usuarias, y la percepción de la espera es muchísimo menor.

Desde el punto de vista del diseño UX es muy importante asegurarse de que las personas no se aburran mientras esperan que suceda algo. Las barras de progreso o indicadores de tiempo pueden llegar incluso a ser algo divertido y que llame la atención durante el tiempo suficiente para que se cargue la aplicación o elemento del producto digital.