Suggestions pratiques pour améliorer l'utilisabilité des pages de destination avec animation à partir de diapositives

Une bonne animation fonctionnelle rend une page de destination non seulement plus attrayante, mais également plus utilisable. Une fois correctement effectuée, l’animation peut transformer une page de destination d’une séquence de sections en une expérience mémorable soigneusement chorégraphiée. Meet Slides un cadre qui vous aidera à utiliser l'animation pour communiquer clairement.

(Il s'agit d'un message sponsorisé.) Pendant longtemps, l'animation d'interface utilisateur a été une réflexion après coup pour les concepteurs. Même de nos jours, de nombreux concepteurs pensent que l’animation est un plaisir, mais n’améliore pas nécessairement la convivialité. Si vous partagez ce point de vue, cet article est pour vous. Je vais expliquer en quoi l'animation peut améliorer l'expérience utilisateur des pages de destination et fournir les meilleurs exemples d'animation créés à l'aide du cadre Diapositives.

Le cadre Diapositives est un outil facile à utiliser. pour créer des sites Web. Cela permet à quiconque de créer une page de destination élégante en quelques minutes. Il vous suffit de choisir un modèle approprié dans la liste des diapositives prédéfinies.

L’animation Four Ways prend en charge l’utilisation des pages de destination

La conception des pages de renvoi est plus que juste présentation visuelle; c’est une question d’interaction. Les détails de la conception des interactions font une différence fondamentale sur les sites Web modernes. Et les effets animés peuvent renforcer les interactions. Pour améliorer la convivialité d'une page de destination, une animation doit être un élément fonctionnel, pas seulement une décoration. Il devrait servir un objectif fonctionnel clair. Vous trouverez ci-dessous quelques moyens courants par lesquels l'animation peut améliorer la convivialité.

1. Créer un récit

Chaque concepteur est un conteur. Lorsque nous créons un site Web, nous racontons une histoire à nos visiteurs. Et il est possible de raconter une histoire beaucoup plus attrayante en utilisant l'animation.

L'animation peut aider à donner vie au contenu. Un bon exemple d'une telle animation peut être trouvé sur Ikonet . L’animation permet aux utilisateurs d’interagir au fur et à mesure qu’ils parcourent la page et découvrent l’entreprise.

L’animation peut également être utilisée pour attirer l’attention du visiteur sur quelque chose qu’il doit remarquer et sur lequel il faut agir. Par exemple, si vous avez une section de texte importante ou un appel à l'action, les faire glisser (au lieu de simplement les afficher) peut aider les visiteurs à comprendre où ils doivent se concentrer. Jetez un coup d'œil à l'exemple Preston Zeller ci-dessous. La façon dont les éléments apparaissent sur les pages amène l’utilisateur à se concentrer sur ces zones. L'avantage de cette animation est qu'elle attire l'attention sur des informations importantes sans la perturber.

2. Fournir des commentaires

L'interaction homme-machine repose sur deux principes fondamentaux: la saisie de l'utilisateur et la rétroaction du système. Tous les objets interactifs doivent réagir aux entrées de l'utilisateur en générant un retour visuel ou audio approprié.

Vous pouvez voir ci-dessous l'effet Custom Checkbox créé à l'aide du cadre Slides. L'animation de rebondissement subtile que l'utilisateur voit lorsqu'elle modifie l'état de la bascule renforce le sentiment d'interactivité.

Avec les diapositives, vous pouvez créer de belles animations de survol et inciter les utilisateurs à interagir avec des objets. Jetez un coup d'œil à Berry Visual . Lorsque vous passez la souris sur «Envoyer un message» ou sur le menu hamburger dans le coin supérieur droit, un bel effet animé apparaît. Cela donne l'impression que ces éléments sont interactifs.

Buf Antwerp est un autre excellent exemple de la manière dont les commentaires animés en survol peuvent améliorer l'expérience de l'utilisateur. Lorsque les visiteurs survolent une tuile, une incrustation semi-transparente apparaît et le texte fournit des informations supplémentaires sur l'élément.

3. Créer des relations

Les moments de changement constituent un endroit idéal pour ajouter une animation à une page de destination. Trop souvent, les moments de changement sont brusques & mdahs; Par exemple, lorsque les utilisateurs cliquent sur un lien, un nouvel écran apparaît soudainement. Comme les changements soudains sont difficiles à traiter pour les utilisateurs, ils entraînent généralement une perte de contexte – le cerveau doit alors scanner la nouvelle page pour comprendre comment le nouveau contexte est connecté au précédent.

Considérez cet exemple d'abrupt. changement:

Comparez cela à l'exemple suivant, dans lequel une transition animée fluide guide l'utilisateur vers les différentes parties de l'écran:

Il est clair que dans le deuxième exemple, l’animation empêche les changements brusques – elle comble le vide et relie deux étapes. En conséquence, les visiteurs comprennent que les deux étapes vont de pair. Ce principe s'applique également lorsque vous avez une relation parent-enfant entre deux objets:

Cela s'applique également lorsque vous créez une transition entre les étapes. Les transitions en douceur entre les diapositives de l'exemple ci-dessous créent une impression de séquence, plutôt que des parties distinctes de la page.

4. Rendre les tâches ennuyeuses amusantes

Il peut être difficile d'imaginer comment introduire des éléments ludiques dans des expériences quotidiennes. Mais en ajoutant un peu de surprise là où c'est le plus inattendu, nous pouvons transformer une interaction familière en une chose inattendue et donc mémorable.

Lorsque vous visitez L'exposition de la salle 3D de Tympan elle ressemble à une autre. site de la galerie que vous avez déjà visité. Mais votre impression du site Web change immédiatement lorsque vous interagissez avec une page. Lorsque vous déplacez le curseur, la page se déplace et cet effet crée une impression d'espace 3D. Ce sentiment est renforcé lorsque vous passez d'une page à une autre. il semble que vous voyagiez d’une pièce à l’autre dans un espace 3D.

Parlons maintenant de quelque chose de beaucoup plus familier que les effets 3D: les formulaires Web. Qui aime remplir des formulaires? Probablement personne. Néanmoins, remplir des formulaires est l’une des tâches les plus courantes sur le Web. Et il est possible de transformer cette activité ennuyeuse en un exercice amusant. Jetez un coup d’œil Le personnage de Yeti de Darin Senneff, qui est utilisé sous une forme. Lorsque l'utilisateur commence à saisir son mot de passe, la mascotte se couvre les yeux. Un tel effet animé procure beaucoup de joie lorsque vous le voyez pour la première fois.

Enfin, il est possible de rendre l'expérience de défilement non seulement plus intéressante visuellement, mais aussi utile pour les lecteurs. Ci-dessous se trouve Storytelling Map un voyage interactif dans lequel un chemin le long d'une carte est animé en fonction du contenu défilant sur la page. L'idée associe le texte, les éléments visuels et les emplacements. les visiteurs lisent l'information et la voient dans le contexte de la carte).

Six bonnes pratiques pour l'animation de pages de renvoi

Identifier les lieux où l'animation est utile ne représente que la moitié de l'histoire. Les concepteurs doivent également implémenter correctement l'animation. Dans cette section, nous allons apprendre à animer comme un pro.

1. Ne pas animer plusieurs éléments à la fois

Lorsque quelques objets sont animés simultanément, les utilisateurs sont distraits. Parce que le cerveau et les yeux humains sont câblés pour prêter attention aux objets en mouvement, la concentration de l’utilisateur sautera d’un élément à l’autre et le cerveau aura besoin de plus de temps pour comprendre ce qui vient de se passer (surtout si le mouvement se produit très rapidement). Il est donc important de planifier correctement les animations.

Il est essentiel de comprendre le concept de chorégraphie de transition : la séquence coordonnée de mouvements qui maintient l’attention du visiteur lorsque l’interface change. Minimiser le nombre d'éléments qui se déplacent indépendamment; seules quelques choses devraient se produire en même temps (généralement pas plus de deux ou trois). Ainsi, si vous souhaitez déplacer plus de trois objets, regroupez certains objets et transformez-les en une seule unité, plutôt que de les animer indépendamment.

Les diapositives offrent un excellent avantage aux concepteurs de sites Web: cela les empêche d’utiliser excessivement le mouvement dans leur conception. Chaque effet animé disponible dans les diapositives a été soigneusement conçu pour diffuser le contenu de la meilleure façon possible.

2. L’animation ne doit pas entrer en conflit avec la personnalité de la page de destination

Chaque fois que vous ajoutez une animation à un dessin, vous introduisez de la personnalité. Cette personnalité dépend en grande partie de l'effet d'animation que vous choisissez d'utiliser.

Lorsque des personnes interagissent avec un produit, elles ont certaines attentes. Imaginez concevoir une page de destination pour un service bancaire et décider d’utiliser une animation qui rebondit pour présenter un formulaire qui collecte les informations personnelles de l’utilisateur. De nombreux utilisateurs hésiteront à fournir leurs coordonnées car la forme en conflit avec leurs attentes.

Le cadre Diapositives vous permet de choisir parmi 10 styles animés, tels que Stack, Zen, Film, Cartes et Zoom. Expérimentez avec différents effets et choisissez ce qui vous convient le mieux.

3. Regarder l'heure

Lorsqu'il s'agit de concevoir une animation, le timing est essentiel. Le timing de votre animation peut faire la différence entre une bonne et une mauvaise interaction. Lorsque vous travaillez sur une animation, vous passerez généralement le tiers de votre temps à trouver les bons effets animés et les deux tiers restants à trouver le bon timing pour que l’animation soit fluide.

En règle générale, veillez à ce que l’animation soit brève. L'animation ne doit jamais gêner l'utilisateur dans l'exécution d'une tâche, car même l'animation la plus magnifiquement exécutée serait vraiment ennuyeuse si elle ralentissait les utilisateurs. La vitesse optimale pour une animation d'interface utilisateur est comprise entre 200 et 500 millisecondes . Une animation dont la durée est inférieure à 1 seconde est considérée comme instantanée, tandis qu'une animation de plus de 5 secondes peut transmettre un sentiment de retard.

Lorsqu'il est question de créer un effet animé, un paramètre a une incidence directe sur son animation. perçue: assouplissement ou fonction de chronométrage en termes CSS. L'accélération aide les concepteurs à rendre le mouvement plus naturel.

Le cadre Diapositives permet aux concepteurs Web de personnaliser l'accélération. Vous trouverez des mesures d’atténuation ainsi que d’autres effets dans la section «Paramètres des effets».

4. Pensez à l'accessibilité

L'animation est une arme à double tranchant. Cela peut améliorer la convivialité pour un groupe d'utilisateurs, tout en causant des problèmes pour un autre groupe. La version iOS 7 d’Apple en est un exemple récent. iOS 7 était plein d'effets animés et peu de temps après sa sortie, les utilisateurs d'iPhone ont signalé que les transitions animées leur donnaient l'impression d'être pris de vertige .

Votre responsabilité en tant que concepteur est de réfléchir à la façon dont les personnes atteintes de troubles visuels va interagir avec votre conception. Consultez les Directives de la WCAG en matière d’animation et assurez-vous que votre conception s’aligne avec elles. Suivre si un utilisateur veut minimiser la quantité d'animation ou de mouvement. Une fonction spéciale du média CSS, " préfère les mouvements réduits ", détecte si l'utilisateur a demandé que le système minimise la quantité d'animation ou de mouvement utilisée. Quand il est réglé sur "réduire", il est préférable de minimiser la quantité de mouvement et d'animation (par exemple, en supprimant tout mouvement non essentiel).

En outre, effectuez des tests d'utilisabilité pour vérifier que les utilisateurs auront toutes les capacités, y compris les personnes ayant des troubles visuels n'auront aucun problème à interagir avec votre dessin.

5. Prototypez et testez vos décisions de conception

Il est amusant de jouer avec une animation. C’est facile d’exagérer et de créer un design qui submerge les utilisateurs avec trop de mouvement. Malheureusement, il n’ya pas de solution miracle pour une excellente animation; Il est difficile d’établir des critères clairs pour déterminer ce qui est «juste assez». Soyez prêt à consacrer du temps à prototyper, tester et optimiser les effets animés.

Voici quelques conseils utiles à prendre en compte lors des tests:

• Testez différents matériels.
  De nombreux facteurs matériels peuvent affecter considérablement les performances de l'animation: écran taille, densité de l'écran, performances du processeur graphique, pour n'en nommer que quelques-uns. Par conséquent, un utilisateur sur un écran haute définition peut avoir une expérience complètement différente de celle d'un utilisateur sur un écran plus ancien. Tenez compte de ces facteurs lors de la conception d'une animation pour éviter les goulots d'étranglement liés aux performances. Ne blâmez pas le matériel lent; optimisez votre animation pour qu'elle fonctionne parfaitement sur tout type d'appareils.
• Test sur mobile
  La plupart des sites Web sont construits et testés sur un ordinateur de bureau; l'expérience mobile et les performances d'animation sont souvent traitées comme une réflexion après coup. L'absence de test sur mobile pourrait poser de nombreux problèmes aux utilisateurs de mobiles, car certaines techniques d'animation fonctionnent bien sur les ordinateurs de bureau mais pas aussi bien sur les mobiles. Pour éviter toute expérience négative, confirmez que votre conception fonctionne correctement sur les ordinateurs de bureau et les appareils mobiles. Testez votre mobile tôt et souvent.
• Regardez l'animation à une vitesse lente.
  Il peut être difficile de remarquer les problèmes lorsqu'une animation (en particulier une complexe) tourne à pleine vitesse. Lorsque vous ralentissez l'animation (par exemple, à un dixième de la vitesse), de tels problèmes deviennent évidents. Vous pouvez également enregistrer des vidéos au ralenti de vos animations et les montrer à d'autres personnes pour obtenir d'autres perspectives.

Le cadre Diapositives vous permet de créer un prototype interactif haute fidélité en quelques minutes. Vous pouvez utiliser un éditeur WYSIWYG pour créer des effets animés, publier le dessin et voir son fonctionnement sur les ordinateurs de bureau et les appareils mobiles.

6. L’animation ne doit pas être une réflexion après coup

Il ya une raison pour laquelle tant de concepteurs pensent que l’animation est une fonctionnalité inutile qui surcharge l’interface utilisateur et la rend plus compliquée. Dans la plupart des cas, c’est le cas lorsque les concepteurs introduisent l’animation à la fin du processus de conception, en tant que rouge à lèvres pour le design – en d’autres termes, l’animation pour l’animation. Un mouvement aléatoire, sans aucune utilité, ne profitera pas beaucoup aux visiteurs et peut facilement distraire et gêner.

Pour créer une animation significative, prenez le temps, au début du projet, de réfléchir aux zones dans lesquelles l’animation irait naturellement. Ce n'est qu'ainsi que l'animation sera naturelle pour le flux d'utilisateurs.

Conclusion

Une bonne animation fonctionnelle rend une page de destination non seulement plus attrayante, mais également plus utilisable. Une fois correctement effectuée, l’animation peut transformer une page de destination d’une séquence de sections en une expérience mémorable soigneusement chorégraphiée. Le cadre Slides aide les concepteurs Web à utiliser l'animation pour communiquer de manière claire.

(ms, ra, al, yk, il)