Comment créer des animations de chargement personnalisées pour réduire les taux de rebond

Connue à l'origine sous le nom de throbber, une animation de chargement est utilisée pour indiquer la progression de la collecte de données ou du rendu de l'interface. Alors que vous pouviez autrefois utiliser une barre de progression terne pour l'indiquer, ces jours sont révolus.

Aujourd'hui, une animation bien conçue utilisant CSS, jQuery ou de simples GIF animés est l'occasion d'animer vos interfaces et de donner de la personnalité à votre produit.

Des animations réfléchies peuvent divertir vos utilisateurs pendant qu'ils attendent le chargement de votre contenu. Une bonne animation de chargement aide à gérer les attentes et améliore l'expérience utilisateur en maintenant l'intérêt.

Dans ce didacticiel, nous utiliserons Sketch pour créer des formes de base et Principle pour créer rapidement des animations de chargement personnalisées simples. (Ces deux applications sont pour Mac.) Vous apprendrez à créer les animations de chargement colorées utilisées par Trello, Flickr, Slack, etc.

Allons-y.

Animation de chargement lâche

Sur Sketch, tracez quatre carrés arrondis avec des côtés de 50 pixels ou un rayon de 100 pixels chacun. Ils devraient ressembler à des cercles parfaits, mais nous utilisons des carrés aux coins arrondis pour créer l'effet d'étirement des lignes dans l'animation.

Placez les quatre formes de manière à créer un carré imaginaire avec 150 pixels d'espace entre chaque côté. Appliquez quatre couleurs différentes (#35BA90 vert, #69CADD bleu, #EBA900 jaune et #E20661 rose).

Importez les formes dans Principle, regroupez-les et cliquez sur "Créer un composant" pour imbriquer le groupe.

Entrez dans le groupe imbriqué et faites pivoter le plan de travail de 15 degrés. Sélectionnez ensuite chaque cercle individuel et faites-le pivoter à sa position d'origine (15 degrés en arrière). Cela crée l'effet d'étirement en ligne droite.

Appliquez un déclencheur "Auto" au plan de travail, puis étirez chaque rectangle arrondi sur le côté opposé du plan de travail sur une longueur de 295 pixels. Donnez une opacité de 75% à chaque forme sur les deux plans de travail.

Appliquez un autre déclencheur "Auto" au deuxième plan de travail. Sur le nouveau plan de travail, réduisez chaque ligne à sa largeur d'origine de 50 pixels, mais du côté opposé à sa position d'origine.

Liez le dernier plan de travail au premier avec un déclencheur "Auto". Cliquez sur le bouton "Retour au parent" pour prévisualiser le résultat final.

Conseil : Lorsque vous accédez à "Retour au parent", vous pouvez faire pivoter le groupe principal de -30 degrés pour ressembler davantage à Slack. En outre, vous pouvez modifier le rythme de l'animation dans le panneau "Animer" et appliquer un effet "Ease Both" pour lisser les transitions.

Animation de chargement Trello

À l'aide de Sketch, tracez un carré bleu de 100 pixels. Dessinez un rectangle blanc de 60 pixels de large sur 140 pixels de haut. Alignez-le avec le coin supérieur gauche du carré précédent avec une marge supérieure et gauche de 30 pixels. Dupliquez ce rectangle blanc, alignez-le à droite du carré avec une marge droite de 30 pixels et réduisez sa hauteur à 70 pixels.

Importez le plan de travail dans Principle et appliquez le déclencheur "Auto" pour créer une nouvelle image clé. Sur le nouveau plan de travail, inversez les hauteurs des rectangles blancs (faites le rectangle de gauche à 70px de haut et le rectangle de droite à 140px). Appliquez un effet "Ease-Both" dans le panneau "Animate" pour lisser la transition.

Cercle roulant

Tracez un cercle sur Sketch. Appliquez une bordure de 10 px avec les valeurs "Dash" et "Gap" et aucun remplissage. Utilisez une couleur "Dégradé angulaire" pour la bordure qui accentuera l'effet de rotation que vous créerez plus tard.

Ouvrez un nouveau fichier de principe et utilisez le bouton "Importer" pour transférer le cercle de Sketch. Appliquez deux déclencheurs "Auto" à la suite.

Pour créer l'effet de rotation, sélectionnez le cercle dans le plan de travail central et modifiez sa valeur "Angle" à 360 degrés. Sélectionnez ensuite le troisième cercle et donnez-lui un nom différent (c'est-à-dire "copier") dans le panneau de gauche. Cela simulera la rotation infinie.

Enfin, reliez le troisième plan de travail au premier avec un autre déclencheur "Auto". Appliquez une transition "Linéaire" à la chronologie entre les plans de travail 1 et 2. Vérifiez l'animation que vous venez de créer dans la fenêtre d'aperçu.

Flickr Chargement de l'animation

Tracez un cercle bleu et un cercle rose côte à côte. Importez-les dans Principle et appliquez un déclencheur "Auto" pour créer un nouveau plan de travail.

Inversez les positions des cercles et appliquez un nouveau déclencheur "Auto" pour créer un troisième plan de travail. Sur ce nouveau plan de travail, inversez l'ordre du calque des cercles sur le panneau de gauche.

Appliquez un troisième déclencheur "Auto" pour créer un quatrième plan de travail. Sur ce dernier plan de travail, inversez à nouveau la position des cercles et appliquez un dernier déclencheur "Auto" du dernier plan de travail au premier.

Type de chargement

Créez un nouveau projet sur Principle et, à l'aide de l'outil Texte, écrivez « CHARGEMENT ». Alignez le texte à gauche et centrez-le verticalement dans le plan de travail.

Appliquez un déclencheur "Auto" cinq fois de suite. Faites en sorte que le cinquième déclencheur de la dernière boucle de plan de travail revienne au plan de travail initial.

En partant du plan de travail initial et en vous déplaçant vers la droite, modifiez le texte sur chaque plan de travail pour ajouter respectivement zéro, un, deux, trois, deux et un points à côté du texte "LOADING" d'origine. La progression des plans de travail devrait ressembler à ceci :

CHARGEMENT CHARGEMENT. CHARGEMENT.. CHARGEMENT… CHARGEMENT.. CHARGEMENT.

Vous pouvez maintenant prévisualiser l'animation que vous venez de créer.

Points pulsés

Tracez un point de 60 pixels. Copiez et collez un autre point et placez-le 60px à droite. Assurez-vous que les deux points, y compris l'espace de 60 pixels, sont parfaitement centrés dans votre plan de travail.

Appliquez un déclencheur "Auto" quatre fois de suite.

Sur le deuxième plan de travail, réduisez le deuxième point à 30 pixels.

Sur le troisième plan de travail, réduisez le deuxième point à 0px et le premier à 30px.

Sur le quatrième plan de travail, redimensionnez le deuxième point à 30 px et réduisez le premier point à 0 px.

Sur le cinquième plan de travail, réduisez le premier point à 30 pixels et reliez le plan de travail au premier tableau avec un déclencheur "Auto".

Points roulants

Placez cinq points dans l'arrangement que vous trouveriez sur un dé à six faces. Importez le plan de travail dans Principle et centrez-le.

Appliquez un déclencheur "Auto" sur le plan de travail.

Sur le nouveau plan de travail, faites pivoter le groupe de points de 360 ​​degrés.

Reliez le deuxième plan de travail au premier avec un déclencheur "Auto".

Cercle pulsé

Commencez avec un cercle de 50 pixels aligné au centre dans un cercle de 150 pixels qui a une bordure de 5 pixels mais pas de remplissage.

Appliquez un déclencheur "Auto" trois fois de suite.

Sur le premier plan de travail, réduisez le cercle de la ligne à 50 pixels et le cercle intérieur à 10 pixels.

Sur le troisième plan de travail, redimensionnez le cercle de lignes jusqu'à 200 pixels et donnez-lui une opacité de 0 %. Redimensionnez le cercle intérieur jusqu'à 150 pixels et donnez-lui une opacité de 50 %.

Sur le dernier plan de travail, redimensionnez le cercle intérieur jusqu'à 200 pixels et donnez-lui une opacité de 0 %. Réduisez le cercle de la ligne à 50 pixels et donnez-lui une opacité de 25 %.

Appliquez un déclencheur "Auto" au dernier plan de travail. Réduisez le cercle intérieur à 10 pixels avec une opacité de 50 %.

Liez le dernier plan de travail au premier avec un déclencheur "Auto".

Points de saut

Alignez trois cercles parfaits de 50 pixels de hauteur avec un espacement de 50 pixels entre eux.

Appliquez un déclencheur "Auto". Sur le deuxième plan de travail, déplacez le premier cercle de 50 pixels vers le haut.

Appliquez un déclencheur "Auto" à la deuxième carte. Sur le troisième plan de travail, sélectionnez les deux premiers cercles et déplacez-les de 50 px vers le haut. Les trois cercles doivent se trouver dans une ligne diagonale.

Appliquez un déclencheur "Auto" à la troisième carte. Sur le quatrième plan de travail, déplacez le premier cercle vers le bas de 50 pixels. Sélectionnez les deux derniers cercles et déplacez-les de 50 px vers le haut.

Appliquez un déclencheur "Auto" sur la quatrième carte. Sur le cinquième plan de travail, déplacez les deux premiers cercles de 50 pixels vers le bas. Sélectionnez le dernier cercle et déplacez-le de 50 px vers le haut.

Appliquez un déclencheur "Auto" sur la cinquième planche. Sur le sixième plan de travail, déplacez les deux derniers cercles vers le bas de 50 pixels.

Enfin, revenez au tout premier plan de travail, déplacez le premier point de 50 pixels vers le haut et liez le dernier plan de travail au premier avec un déclencheur "Auto". Vous pouvez prévisualiser le résultat final.

Chargeur classique

Tracez un cercle dans Sketch et donnez-lui une bordure grise de 20 pixels sans remplissage.

Collez une copie du même cercle dessus et changez le remplissage de la copie en une couleur différente. Pour cet exemple, nous utiliserons le bleu.

Tracez un carré chevauchant un quart du cercle bleu. Déplacez le calque rectangle sous le calque cercle et appliquez "Masque" au calque rectangle.

Passez au principe et importez l'illustration Sketch avec le bouton "Importer".

Appliquez un déclencheur "Auto" au premier plan de travail et faites pivoter le cercle bleu de 360 ​​degrés.

Appliquez un deuxième déclencheur "Auto" au deuxième plan de travail. Renommez le troisième calque de cercle généré en "copier" et reliez-le au premier plan de travail avec un déclencheur "Auto".

Conclusion

Une fois que vous vous êtes entraîné à créer quelques-unes de ces animations de chargement éprouvées, vous devriez avoir confiance en vos capacités à créer une animation unique pour vos propres applications en utilisant les compétences acquises ici.

Avec un peu d'imagination et les outils pratiques trouvés dans Sketch and Principle, vous pouvez créer une animation de chargement unique qui correspond à la conception de votre application en quelques minutes. Vos utilisateurs apprécieront l'aspect professionnel et l'indicateur amical que votre application travaille dur.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques