- Las pantallas de carga pueden mejorar la experiencia de usuario al brindar visibilidad sobre lo que está haciendo el sistema.
- Hay varios puntos que conviene considerar para crear una pantalla de carga adecuada.
- Antes de diseñarla, hay que revisar el sistema de carga.
- Por ejemplo, si la carga bloquea la entrada del usuario, si se puede conocer el progreso, cuánta información se está cargando, cómo es la experiencia móvil, etc.
- También si se trata de carga pasiva (cuando el sistema precarga) o carga activa (cuando se carga según la acción del usuario).
- Cambios según la cantidad que se muestra de una vez
- En componentes complejos, puede ser mejor mostrarlos uno por uno.
- En componentes relativamente simples, puede ser mejor mostrarlos todos de una vez cuando termine la carga.
- Si hay muchos componentes, se necesita carga diferida.
- Se pueden usar enfoques como scroll infinito, botón de "ver más" o paginación.
- Cambios según la frecuencia
- Si cambia constantemente, conviene minimizar la UI que muestra la carga.
- Puede tomarse como referencia la UI de guardado en tiempo real de Google Drive.
- Si cambia de vez en cuando, es mejor mostrarlo de inmediato al usuario.
- Por ejemplo, un popup indicando que el contenido que está viendo se actualizó y que debe refrescar la pantalla.
- Cambios según el tiempo requerido
- Primero hay que revisar si el progreso puede conocerse con claridad o si es incierto.
- Si tarda menos de 0.1 segundos
- Basta con mostrar el resultado de inmediato.
- En algunos casos, puede ser mejor mostrar una pantalla de carga falsa.
- Cuando se trata de una tarea importante para la percepción del usuario (como guardar), o cuando se necesita un pequeño retraso para permitir una acción del usuario (como el botón para deshacer el envío de un correo).
- Si tarda entre 0.1 y 1 segundo
- Es una latencia muy común y, como no suele ser perceptible para el usuario, es mejor no agregar una pantalla de carga.
- Si tarda más de 1 segundo
- En el momento en que supera 1 segundo, el usuario empieza a percibir la espera, por lo que conviene agregar una pantalla de carga adecuada.
- Si el componente que se carga es pequeño, un spinner de carga es una buena opción. (como en la subida de archivos)
- Si cambia la pantalla, una pantalla de carga tipo skeleton funciona bien.
- Si la imagen es el contenido principal, extraer los colores predominantes y aplicar un desenfoque puede funcionar muy bien.
- Si tarda entre 2 y 10 segundos
- Un indicador de tiempo como "toma alrededor de 5 segundos" puede ser efectivo.
- La barra de progreso siempre es una buena opción.
- Si el proceso tiene varias etapas, también puede mostrarse cada una de ellas.
- Incluso si no hay etapas claras, se pueden usar mensajes generales. (como "conectando con el servidor")
- Si tarda más de 10 segundos
- Si el progreso puede conocerse con claridad, conviene mostrar porcentaje y tiempo restante. (como 50% en la subida de archivos)
- Pero quedarse atascado en 99% es algo muy dañino, así que si eso puede pasar, hay que usar otro método.
- Si tarda aún más y no se puede conocer con claridad el progreso, conviene avisar que se notificará por correo u otro medio cuando termine, y permitir que el usuario mantenga el control.
- También puede ser buena idea que la tarea se ejecute completamente en segundo plano sin interrumpir ninguna acción del usuario. (como el estado de progreso de las subidas en Google Drive)
3 comentarios
Gracias por el buen artículo.
. Yo no la muestro hasta los 250 ms, pero no sé si estaría bien extender eso hasta 1 segundo.
¡Oh, justo estaba buscando fundamentos sobre la pantalla de carga! Gracias jajaja
Creo que el resumen se alargó demasiado... En fin, había mucho contenido bueno, así que traje la mayor cantidad posible.
Me pareció interesante eso de que una pantalla de carga falsa puede aumentar la confiabilidad. En Hacker News también hablaron bastante de ese tema.