Por qué la barra de progreso de carga de GitHub se ve bien y cómo construirla

Introducción#

Cuando navegas a una nueva página en GitHub (también en este sitio web), verás una barra de progreso de carga en la parte superior de la página. La animación de la barra es suave y se ve natural. Discutiré la experiencia de usuario subyacente y construiremos una similar en React.

En este tutorial, utilizaré Remix como el marco de trabajo de React. Sin embargo, puedes utilizar cualquier otro marco o biblioteca de React, siempre y cuando soporte el seguimiento del estado de transición de página.

Experiencia de usuario#

Puedes notar que el progreso de la carga no es lineal. Comienza rápido y se ralentiza rápidamente, luego progresa en pequeños pasos. Una vez que la página está cargada, la barra de progreso rápidamente alcanza el 100% y desaparece.

Si revisas la pestaña de red en las herramientas de desarrollo del navegador, verás que la barra de progreso no está directamente relacionada con la solicitud de red, sino que se parece más a un efecto visual.

Este diseño es intencional y un truco psicológico para hacer que el usuario sienta que la página se carga más rápido. Comparemos esto con una barra de progreso lineal y un spinner tradicional:

Como puedes ver, la barra de progreso lineal se ve un poco lenta, mientras que el spinner no brinda ningún feedback sobre el progreso. La barra de progreso de GitHub le da al usuario una sensación de avance y hace que la experiencia de carga sea más placentera.

Pero, ¿por qué?#

En la interacción humano-computadora, existe un concepto llamado rendimiento percibido. Se trata de cuán rápido el usuario siente que es el sistema, no de lo rápido que realmente es.

Para movimientos lineales, a menudo pueden parecer abruptos y mecánicos, lo que puede ser más mentalmente agotador de seguir (más carga cognitiva). Los movimientos más naturales, como suavizados y muelles, pueden resultar más predecibles y fáciles de procesar.

Los estudios han encontrado que las transiciones más suaves pueden reducir la carga cognitiva en los usuarios, haciendo que las interfaces sean más amigables. Esto ayuda a que el sistema se sienta más receptivo.

Además, Harrison et al. (2007) encontraron que los usuarios perciben la barra de progreso como más rápida cuando sigue la función de suavizado "Fast Power", que es muy similar a la barra de progreso de GitHub.

Podemos concluir que la clave para hacer que la barra de progreso parezca más rápida es "comenzar rápidamente, ralentizarse y luego acelerarse de manera exponencial".

Construyendo la barra de progreso#

Ahora construyamos una barra de progreso similar en React. Usaremos Remix y su hook useNavigation para rastrear el estado de transición de la página. Si estás usando otros marcos de React, puedes usar APIs similares para lograr el mismo efecto.

Organiza la animación#

Para hacerla aún más natural, aprovecharemos la animación de resorte de react-spring para animar la barra de progreso (esta biblioteca ya es un buen ejemplo de cómo las animaciones basadas en la física pueden mejorar la experiencia del usuario). Podemos dividir la animación en tres etapas:

1. Comienza rápido y ralentízate rápidamente
2. Progresar lentamente y de manera constante
3. Alcanzar 100% y desaparecer

Con las API imperativas de react-spring, podemos lograr fácilmente este efecto. Aquí está el código:

Desglosemos el código:

Tenemos un resorte de referencia api para controlar la animación. Cuando necesitamos iniciar la barra de progreso, llamamos a start con la siguiente configuración:

1. Comienza desde un ancho del 0%.
2. Usa una gran tensión y ajusta la fricción para que la barra de progreso comience rápido y se ralentice rápidamente al 10%. Nota que usamos clamp: true para evitar que la barra de progreso sobrepase o oscile.
3. Progresa al 15% con una duración de 5 segundos. Es una etapa de búfer para que la animación sea más natural.
4. Progresa al 100% con una mayor tensión y fricción para que la barra de progreso avance con un movimiento de resorte lento (GitHub usa una longitud aleatoria de pasos aquí, pero personalmente prefiero un movimiento suave).

Cuando la página se carga, llamamos a end para "interceptar" la animación y hacer que la barra de progreso alcance el 100% y desaparezca rápidamente.

Actualizar en la transición de página#

Remix proporciona un hook useNavigation para rastrear el estado de transición de la página. Podemos usarlo para iniciar y terminar la barra de progreso. Aquí está el código:

Siéntete libre de personalizar el estilo de la barra de progreso para que coincida con el diseño de tu sitio web y ajustar los parámetros de animación según tu preferencia. Siempre y cuando sigas el estilo de suavización "Fast Power", puedes lograr el mismo objetivo.

Conclusión#

La interacción humano-computadora es realmente un campo interesante. Incluso los pequeños detalles como la barra de progreso de carga pueden afectar significativamente la experiencia del usuario. En Logto, no solo nos preocupamos por la infraestructura técnica y las implementaciones, sino también por la experiencia de usuario y el diseño. Creemos que también son partes importantes de una plataforma amigable para desarrolladores.