Pourquoi la barre de progression de chargement de GitHub a l'air bien et comment la construire

Introduction#

Lorsque tu navigues vers une nouvelle page sur GitHub (ou également sur ce site), tu verras une barre de progression de chargement en haut de la page. L'animation de la barre est fluide et semble naturelle. Je discuterai de l'expérience utilisateur sous-jacente et construirai une barre similaire en React.

Dans ce tutoriel, je vais utiliser Remix comme framework React. Cependant, tu peux utiliser n'importe quel autre framework ou bibliothèque React tant qu'il prend en charge le suivi de l'état de transition de page.

Expérience utilisateur#

Tu as peut-être remarqué que la progression du chargement n'est pas linéaire. Elle commence rapidement et ralentit rapidement, puis progresse par petites étapes. Une fois que la page est chargée, la barre de progression atteint rapidement 100 % et disparaît.

Si tu vérifies l'onglet réseau dans les outils de développement du navigateur, tu verras que la barre de progression n'est pas directement liée à la requête réseau, mais ressemble plutôt à un effet visuel.

Ce design est intentionnel et un truc psychologique pour faire sentir à l'utilisateur que la page se charge plus rapidement. Comparons cela avec une barre de progression linéaire et un spinner traditionnel :

Comme tu peux le voir, la barre de progression linéaire semble un peu lente, tandis que le spinner ne donne aucun retour d'information sur la progression. La barre de progression de GitHub donne à l'utilisateur un sentiment de progression et rend l'expérience de chargement plus agréable.

Mais pourquoi ?#

Dans l'interaction homme-machine, il existe un concept appelé performance perçue. Cela concerne la rapidité avec laquelle l'utilisateur ressent que le système est rapide, pas la rapidité réelle du système.

Pour les mouvements linéaires, ils peuvent souvent sembler abrupts et mécaniques, ce qui peut être plus fatigant mentalement à suivre (plus de charge cognitive). Les mouvements plus naturels, comme l'assouplissement et le ressort, peuvent sembler plus prévisibles et plus faciles à traiter.

Des études ont montré que des transitions plus fluides peuvent réduire la charge cognitive chez les utilisateurs, rendant les interfaces plus conviviales. Cela aide à faire en sorte que le système semble plus réactif.

De plus, Harrison et al. (2007) ont découvert que les utilisateurs perçoivent la barre de progression comme étant plus rapide lorsqu'elle suit la fonction d'assouplissement "Puissance Rapide", qui est très similaire à la barre de progression de GitHub.

On peut en conclure que la clé pour que la barre de progression semble plus rapide est de "démarrer rapidement, ralentir, puis accélérer de manière exponentielle".

Construction de la barre de progression#

Construisons maintenant une barre de progression similaire en React. Nous utiliserons Remix et son hook useNavigation pour suivre l'état de transition de la page. Si tu utilises d'autres frameworks React, tu peux utiliser des APIs similaires pour obtenir le même effet.

Disposer l'animation#

Pour rendre cela encore plus naturel, nous allons utiliser l'animation en ressort de react-spring pour animer la barre de progression (cette bibliothèque est déjà un bon exemple de la manière dont les animations basées sur la physique peuvent améliorer l'expérience utilisateur). Nous pouvons diviser l'animation en trois étapes :

1. Commencer rapidement et ralentir rapidement
2. Progresser lentement et régulièrement
3. Atteindre 100 % et disparaître

Avec les APIs impératives de react-spring, nous pouvons facilement obtenir cet effet. Voici le code :

Décomposons le code :

Nous avons une référence de ressort api pour contrôler l'animation. Lorsque nous devons démarrer la barre de progression, nous appelons start avec la configuration suivante :

1. Commencer à partir d'une largeur de 0 %.
2. Utiliser une forte tension et ajuster finement la friction pour faire démarrer la barre de progression rapidement et ralentir rapidement jusqu'à 10 %. Note que nous utilisons clamp: true pour éviter que la barre de progression ne dépasse la limite ou ne oscille.
3. Progresser jusqu'à 15 % avec une durée de 5 secondes. C'est une étape tampon pour rendre l'animation plus naturelle.
4. Progresser jusqu'à 100 % avec une tension et une friction plus élevées pour permettre à la barre de progression d'avancer avec un mouvement de ressort lent (GitHub utilise ici une longueur aléatoire d'étapes, mais je préfère personnellement un mouvement fluide).

Lorsque la page est chargée, nous appelons end pour "intercepter" l'animation et faire en sorte que la barre de progression atteigne 100 % et disparaisse rapidement.

Mettre à jour lors de la transition de page#

Remix fournit un hook useNavigation pour suivre l'état de transition de la page. Nous pouvons l'utiliser pour démarrer et terminer la barre de progression. Voici le code :

N'hésite pas à personnaliser le style de la barre de progression pour correspondre au design de ton site web et à ajuster les paramètres d'animation pour correspondre à tes préférences. Tant que tu suis le style d'assouplissement "Puissance Rapide", tu peux atteindre le même objectif.

Conclusion#

L'interaction homme-machine est vraiment un domaine intéressant. Même des détails mineurs comme la barre de progression de chargement peuvent avoir un impact significatif sur l'expérience utilisateur. Chez Logto, nous nous soucions non seulement de l'infrastructure technique et des implémentations, mais aussi de l'expérience utilisateur et du design. Nous croyons qu'ils sont également des éléments importants d'une plateforme conviviale pour les développeurs.