4 astuces pour accélérer le chargement
Quelle que soit la qualité de la conception de votre interface utilisateur, à un moment ou à un autre, les utilisateurs devront attendre que quelque chose se charge.
Le temps de chargement pourrait nuire à l'expérience globale. Faire en sorte que les utilisateurs attendent trop longtemps pour que votre application se charge peut rendre les utilisateurs impatients. Si les utilisateurs ont ce sentiment, ils abandonneront votre site et partiront ailleurs. Heureusement, il y a quelques choses que vous pouvez faire pour accélérer le sens du temps de vos utilisateurs et leur donner l'impression que votre contenu se charge plus rapidement que lui.
1. Ne jamais faire attendre les utilisateurs sans leur donner de commentaires
Si la connexion de l'utilisateur est lente, un site peut mettre du temps à remplir le contenu à l'écran. Le temps d'attente d'un utilisateur commence au moment où il lance une action, et dans le pire des cas, lorsqu'il ne dispose d'aucun indicateur indiquant que le site l'a reçu.
Lorsque votre site ne parvient pas à informer les utilisateurs qu'il a besoin d'un certain temps pour mener à bien une action, les utilisateurs pensent souvent qu'il n'a pas reçu la demande, et ils réessayent. Beaucoup de robinets supplémentaires ont résulté du manque de retour. Pour rendre les gens heureux, nous devons donner une indication que quelque chose se passe, offrir un retour visuel.
2. Évitez les indicateurs de progrès statiques
Les indicateurs de progression statiques sont ceux qui ont une image ou un texte immobile, tels que "Chargement en cours ..." ou "Veuillez patienter ..." pour indiquer que la demande a été reçue. Bien que les commentaires soient meilleurs que rien, les indicateurs statiques sont mauvais. Les utilisateurs ne disposent d'aucun indicateur indiquant que le contenu est en cours de chargement. Ils ne sont donc pas sûrs que le processus soit réellement bloqué.
3. Utiliser des indicateurs de chargement animés
Des études psychologiques sur le temps d'attente montrent que l'attention de l'utilisateur commence à changer après une seconde d'attente sans aucun retour. Afin de réduire l'incertitude d'un utilisateur, utilisez un indicateur de progression pour toute action qui prend plus de temps que cela. (Remarque: l'utilisation de l'animation n'est pas recommandée pour tout ce qui prend moins d'une seconde à charger, car les utilisateurs peuvent être anxieux à propos de ce qui a simplement clignoté sur l'écran).
Chargement en rotation infini pour des opérations raisonnablement rapides
La forme la plus simple des indicateurs animés est un indicateur de chargement. Ce type de retour visuel indique simplement que l'utilisateur doit attendre, mais ne dit pas combien de temps il doit attendre. En règle générale, vous devez utiliser ce type d'indicateur de progression pour les actions rapides (2 à 10 secondes).
Une série de lignes grises rayonnant depuis un point central est une approche standard.
Les spinners de chargement sont souvent utilisés conjointement avec un geste d'activation. Il sert d'intermédiaire entre deux états de l'interface utilisateur et aide les utilisateurs à comprendre ce qui se passe lorsque l'écran change.
Application Apple Mail pour iOS
Animation réalisée en pourcentage pour des opérations de longue durée
Les spinners de chargement ne sont pas le bon moyen d'indiquer un chargement de longue durée. Il est beaucoup plus supportable d’attendre quelque chose si nous savons quand cela arrivera. C'est pourquoi, pour des opérations durables, vous devez indiquer clairement à vos utilisateurs combien de temps ils doivent attendre. En règle générale, vous devez utiliser une animation effectuée en pourcentage pour les processus plus longs qui prennent 10 secondes ou plus.
Crédit d'image: Behance
Sinon, vous pouvez fournir une estimation générale du temps pour l'opération. N'essayez pas d'être exact, un simple "Cela peut prendre une minute" peut être suffisant pour informer l'utilisateur et l'encourager à attendre.
Installation de la mise à jour du logiciel sous Mac OS X
4. Modifier la perception du temps de l'utilisateur
La rapidité de chargement de votre contenu est dans l'esprit de l'utilisateur. Lorsque vous essayez de créer une expérience utilisateur plus rapide, vous pouvez réduire le temps perçu plutôt que le temps réel. Pour ce faire, vous pouvez remplir les temps d'attente à l'aide de contenu, d'animations ou d'actions que l'utilisateur peut effectuer.
Barres de progression
Une barre de progression permet aux utilisateurs de déterminer à quelle vitesse l'action est en cours de traitement. La façon dont votre barre de progression se déplace affecte la façon dont elle perçoit le temps de chargement. Afin de rendre une barre de progression plus rapide pour les utilisateurs, vous pouvez utiliser des techniques simples:
- La barre de progression ne doit jamais s'arrêter, sinon les utilisateurs penseront que le site a gelé. Le pire cas est celui où la barre de progression approche les 99% et s'arrête brusquement. La plupart des utilisateurs seront frustrés par ce comportement.
- Vous pouvez dissimuler de petits retards dans votre barre de progression en le déplaçant instantanément et de manière stable.
- Déplacez la barre de progression lentement au début et accélérez-la vers la fin pour donner aux utilisateurs une idée rapide du délai d'exécution.
Crédit d'image: Dribbble
Écrans squelettes
Le temps d'attente est un bon moment pour les écrans squelettes (également appelés conteneurs d'informations temporaires). Un écran squelette est essentiellement une version vierge d’une page dans laquelle les informations sont progressivement chargées. Il fournit une alternative aux indicateurs animés traditionnels. Plutôt que de montrer un widget abstrait, les écrans squelettes créent une anticipation de ce qui va arriver et permettent aux utilisateurs de se concentrer sur les progrès plutôt que sur les temps d'attente.
Les images squelettiques se chargent rapidement car il s’agit d’une petite image souvent composée de formes simples. Ces techniques peuvent être utilisées encore plus loin dans les applications mobiles car le modèle squelette peut être stocké localement avec les données de l'application. L'application Facebook pour iOS montre aux utilisateurs des blocs et des lignes grises représentant les images et le texte au fur et à mesure du chargement de l'application. Une fois le chargement terminé, les images et le texte apparaissent à la place des conteneurs temporaires. Ce n'est pas plus rapide que d'avoir un écran de chargement avec un spinner, mais dans l'esprit de l'utilisateur, c'est comme si c'était.
Opérations de fond
Une autre astuce que vous pouvez utiliser est celle des opérations en arrière-plan. Les actions regroupées dans des opérations d'arrière-plan présentent deux avantages: elles sont invisibles pour l'utilisateur et se produisent avant que l'utilisateur ne les demande. Donner aux utilisateurs d’autres éléments sur lesquels se concentrer lorsqu’un processus se déroule en arrière-plan. Un bon exemple est le téléchargement de photos sur Instagram. Dès que l'utilisateur choisit une image à partager, il commence à télécharger. L'application invite les utilisateurs à ajouter un titre et des balises pendant le téléchargement de l'image en arrière-plan. Au moment où les utilisateurs seront prêts à appuyer sur un bouton «Partager», le téléchargement sera terminé et il sera possible de partager leur image instantanément .
Chargement d'image progressif
Comme les applications et les sites modernes chargent de plus en plus d'images, il est bon de penser à leur processus de chargement, car cela affecte les performances et l'expérience utilisateur. En utilisant un effet de flou, vous pouvez créer un effet de chargement d'image progressif.
Un bon exemple est Medium, qui brouille la couverture post-image ainsi que les images dans le contenu de l'article jusqu'à ce que l'image soit complètement chargée. Tout d'abord, il charge une petite image floue (vignette) puis effectue une transition vers la grande image. Les miniatures sont très petites (quelques kilo-octets seulement), ce qui, combiné à l’effet flou, permet un meilleur emplacement que la couleur unie, sans sacrifier la charge utile.
Medium utilise le flou pour créer un effet de chargement d'image progressif
Distraction visuelle
Vous devriez toujours essayer de rendre l'attente plus agréable si vous ne pouvez pas raccourcir la ligne. Pour que les gens ne s'ennuient pas en attendant que quelque chose se produise, offrez-leur une certaine distraction. Les animations fines peuvent distraire vos visiteurs et leur faire ignorer les longs temps de chargement.
Écran de démarrage animé. Crédit d'image: Ramotion (Dribbble)
Crédit d'image: Vimeo