3 façons d'améliorer l'expérience de l'application mobile avec l'animation

Lorsqu'elles sont bien faites, les animations peuvent ajouter beaucoup de valeur à l'expérience utilisateur – en leur servant de guide, de pom-pom girl et d'animateur. Voici quelques conseils sur la façon d'améliorer les animations des applications mobiles (et certaines choses à éviter).

Il y a tellement de raisons de créer des animations, aussi subtiles ou manifestes soient-elles, dans une application mobile. Il peut:

• Rendre les écrans de transition plus tolérables pour s'asseoir
• Donner vie à un logo, une mascotte ou un autre élément de marque
• Ajouter du mouvement à des éléments autrement statiques, comme les boutons, les barres de progression et la navigation
• Attirer l'attention aux éléments secondaires avec lesquels vous espérez que les visiteurs interagiront
• Fournir des commentaires après qu'une action souhaitable ou indésirable a été prise
• Offrez un processus d'intégration détaillé qui garantit que les utilisateurs interagissent avec lui de la bonne manière
• Célébrez vos utilisateurs ' progresse et gagne au fur et à mesure qu'ils avancent dans l'expérience

Gardez simplement à l'esprit que l'animation doit toujours avoir un but. Cela ne devrait pas être ce que les utilisateurs attendent le plus à l'intérieur de l'application. Ce devrait être la chose qui capte leur attention pendant un peu plus longtemps, puis les pousse à aller plus loin dans l'application.

Dans l'article suivant, nous allons examiner quelques moyens d'améliorer l'engagement et la rétention des applications mobiles. avec le bon type d'animation.

Comment améliorer l'expérience de l'application mobile avec l'animation

En ce qui concerne l'aspect technique de la création d'animations pour votre application mobile, je vais laisser Telerik vous aider.

Pour ce qui est de décider comment et quand vous allez les utiliser, cependant, regardons sur certaines applications qui semblent avoir tout compris:

Astuce 1: Donnez vie à votre marque

S'il y a un moment dans l'application mobile où il est normal de faire attendre les utilisateurs pour qu'un écran se charge, c'est allumé l'écran de démarrage d'introduction. Évidemment, vous ne voulez pas qu'ils attendent trop longtemps, mais ce n'est pas une mauvaise idée de leur donner quelques secondes pour se familiariser avec votre image de marque.

Cela dit, le logo de votre marque ne suffira pas à les impressionner ou pour retenir leur attention. C'est pourquoi c'est l'occasion idéale d'introduire des animations dans votre application.

Regardons la différence entre un écran de démarrage non animé et un écran animé.

Voici l'écran de démarrage du Asana Rebel application de fitness:

Cet écran de démarrage est complètement statique. Les utilisateurs doivent s'asseoir et regarder le logo pendant cinq secondes avant que l'écran ne passe rapidement à une introduction.

Maintenant, comparons cela avec l'un de ses concurrents: Aaptiv .

Non seulement cet écran de démarrage ne dure qu'environ trois secondes, mais il présente magnifiquement les utilisateurs à Aaptiv avec des couleurs vibrantes qui s'installent lentement pour remplir le logo.

Si vous souhaitez établir une connexion mémorable avec vos utilisateurs, animer votre image de marque sur l'écran de démarrage est un excellent endroit pour le faire. Et si cela a du sens, pensez à animer d'autres éléments de marque en cours de route.

Duolingo par exemple, utilise une mascotte animée pour garder les utilisateurs engagés. C'est la première introduction qu'ils obtiennent à la chouette Duolingo:

Cette application regorge d'animations (principalement pour des raisons de gamification), mais ce sont les animations de hibou qui aident les utilisateurs à former un attachement émotionnel à l'application car c'est à la fois leur guide et leur pom-pom girl:

Dans cet exemple particulier, la chouette Duolingo encourage les utilisateurs à travailler plus difficile car il relève son propre défi de soulever des poids.

Bien qu'il soit formidable d'avoir une animation qui peut masquer le temps d'attente initial d'une application, la diffusion de cette image de marque animée dans toute l'application peut également encourager plus d'engagement lorsque cela est nécessaire. [19659033] Astuce 2: N'attirez pas l'attention sur les transitions d'écran si vous n'êtes pas obligé de le faire

Lorsque vous masquez un écran de chargement, vous voulez évidemment que l'animation donne l'impression que le temps d'attente est nul.

Cela dit, juste parce que vous pouvez utiliser l'animation pour voler hily cacher un écran qui fait la queue ne signifie pas qu'il est toujours nécessaire.

Un bon moyen de savoir si cela vaut la peine d'ajouter une animation à vos transitions est de savoir comment il est facile de percevoir l'animation.

Selon le modèle de processeur humain le temps de mouvement oculaire moyen est de 230 ms. Alors que les yeux de certaines personnes réagissent plus rapidement que cela (70 ms est le bas de gamme), il y en a qui mettent beaucoup plus de temps à remarquer le changement sur une page (jusqu'à 700 ms).

Si vous essayez de remplir un espace qui est plus proche de 70 ms, cela ne vaut probablement pas la peine d'inclure une animation. Permettez-moi de vous montrer un exemple.

Voici l'application mobile Food Network Kitchen :

Remarquez comment, entre les pages de recettes de poulet et de yaourt, l'icône du hamburger commence à se séparer. Cependant, entre les pages de recettes de yaourt et d'asperges, l'icône n'est qu'une icône.

Cette animation est incohérente entre les pages. Parfois, vous pouvez voir tous les composants du hamburger se séparer. D'autres fois, il s'agit simplement d'une icône rouge aléatoire.

Dans ce cas, cela semble simplement un gaspillage de ressources serveur. Les utilisateurs n'ayant pas à attendre très longtemps d'une page à l'autre, l'icône animée pourrait tout aussi bien être supprimée.

À présent, les sites de voyage, en revanche, ont un problème avec des temps d'attente plus longs. Les utilisateurs en sont venus à s'y attendre, il est donc généralement admis qu'ils devront attendre.

Cela dit, plutôt que d'afficher un écran ou une barre de chargement ennuyeux, vous pouvez rendre cette transition plus excitante à regarder, comme dans l'exemple de CheapOair :

Les utilisateurs de CheapOair ne le font pas. doivent s'asseoir à travers un écran de transition sans vie pendant qu'ils attendent que les options de vol correspondantes apparaissent. L'application les déplace immédiatement vers la page des vols, avec une barre de progression de l'avion animée pour les tenir compagnie pendant qu'ils attendent que tout se charge complètement.

Si vous voulez faire attendre les utilisateurs pour la page suivante ou pour que les résultats de recherche

Astuce 3: Attirez l'attention sur des éléments supplémentaires précieux

L'une des raisons pour lesquelles nous utilisons l'animation est d'attirer l'attention sur les éléments avec lesquels les utilisateurs doivent interagir. Mais c'est comme le disait l'oncle Ben de Spider-Man:

via GIPHY

Si vous demandez aux utilisateurs de suspendre ce qu'ils font et «regardez par ici», il vaut mieux leur être utile – et pas seulement quelque chose dont vous (ou le propriétaire de l'application) bénéficiez.

Les applications de rencontres et de jeux ont tendance à être les plus coupables d'utiliser des animations intéressées. Pas tout le temps, mais une partie du temps quand même.

Prenez Bumble par exemple:

L'application comporte des gestes innovants et magnifiquement exécutés . Cela dit, voyez-vous ce bouton bleu rebondissant en bas à droite de l'écran? Dans la zone du pouce?

Ce bouton animé ne sert à rien à l'utilisateur de décider s'il veut correspondre avec l'autre utilisateur à l'écran. Au lieu de cela, c'est une distraction – et je parie que l'on clique souvent accidentellement – qui essaie de pousser les utilisateurs à dépenser de l'argent sur l'application par ailleurs gratuite.

Si vous voulez que vos utilisateurs soient satisfaits, assurez-vous d'attirer l'attention sur des éléments supplémentaires qui améliorent l'expérience et ne mettent pas seulement plus d'argent dans votre poche.

Par exemple, voici l'application Daily Themed Crossword Puzzle :

C'est l'écran que les nouveaux utilisateurs voient lorsqu'ils ouvrent l'application. Les options sont simples:

• Se connecter avec Facebook
• Continuer en tant qu'invité

Mais si les utilisateurs se connectent avec Facebook, ils ont l'avantage supplémentaire de pouvoir jouer aux côtés de leurs amis et pour économiser leur progression de jeu. C'est pourquoi l'option du bouton Facebook est animée. C'est l'option la plus intéressante des deux.

Vous pouvez également animer des boutons secondaires dans votre application de la même manière que Epicurious :

Lorsqu'un utilisateur entre dans l'une des pages de recette, il voit l'image de couverture, le titre et le début de la recette. Lorsqu'ils commencent à se déplacer vers le bas de la page, cependant, trois boutons utiles (mais secondaires) s'affichent doucement.

Les deux premiers sortent du dessous de l'image de couverture et restent en haut de la page («Enregistrer» et « Partager"). Le troisième est le bouton des ingrédients qui apparaît dans le coin inférieur droit de la page, ce qui permet aux utilisateurs d'obtenir rapidement la liste des ingrédients pour créer la recette.

Parce que c'est si délicatement fait, ces boutons peuvent ne pas faites-vous remarquer tout de suite. Cependant, ils sont là et à portée de main pour quiconque souhaite les utiliser.

Récapitulation

Conclusion? L'animation peut faire de grandes choses pour l'engagement des applications et la fidélisation des utilisateurs. Cependant, si cette animation ne sert à rien, elle aura très probablement l'effet inverse.

Lorsque vous envisagez une animation pour votre application mobile, pensez vraiment à:

Ce qu'elle ajoute à l'expérience utilisateur et…

Ce que cela pourrait éventuellement retirer de l'expérience.

Si les avantages l'emportent sur les inconvénients (comme des temps de chargement plus lents, une perception négative de la marque, une UI gaspillée, etc.), essayez-le!