Améliorez l’expérience utilisateur sur vos applications mobiles grâce aux animations

Notre expérience et notre impression vis-à-vis d’un produit dépendent d’une association de différents facteurs. Parmi ces facteurs, l’interaction joue un rôle majeur. De fait, les petits détails du design et des animations qui concernent les interactions influencent fortement l’accueil des applications mobiles modernes par les utilisateurs. C’est pourquoi la conception de l’interface utilisateur et de l’expérience utilisateur d’une application doit désormais s’attarder sur l’intégration d’animations.

Comme le souligne ZURB Foundation, « nous ne créons plus seulement des écrans statiques. Nous créons la façon dont l’utilisateur va utiliser ces écrans pour vraiment voir du contenu. »

Dans une interface, une animation bien conçue et testée permet de générer des interactions rapides et simples. Dans cet article, nous nous intéresserons au rôle des animations dans la conception de l’interface utilisateur d’une application mobile moderne, ainsi qu’à leurs fonctions et leur convivialité.

Comment les animations peuvent-elles améliorer l’expérience des utilisateurs sur une application mobile ?

Les animations ont un rôle bien particulier au sein d’une interface. Elles font partie des principaux outils qui permettent de générer de bonnes interactions. Nous pouvons dire que sans animation, il n’y a pas d’interaction. L’être humain est une créature avant tout visuelle, ce qui veut dire que l’on peut renforcer la puissance d’une image, qui vaut celle de milliers de mots, avec une animation.

Les animations permettent de réactiver le processus d’interaction. Elles sont d’ailleurs particulièrement intéressantes pour les applications mobiles, qui sont développées pour un petit écran et doivent fournir une interface informative et fonctionnelle.

Les deux principaux types d’animations

Dans les interfaces utilisateur modernes, nous trouvons généralement deux types d’animations :

1. Les animations fonctionnelles
2. Les animations agréables

Une animation fonctionnelle est une animation subtile intégrée au design de l’interface utilisateur. L’objectif d’une animation fonctionnelle est d’aider l’utilisateur à mieux comprendre ce qu’il voit et à utiliser une application efficacement.

Une animation agréable vise les émotions de l’utilisateur. L’objectif de ce second type d’animations est de divertir l’utilisateur et d’afficher les valeurs d’une marque dans un produit.

Nous allons maintenant parler plus en détail de chaque type d’animations.

1. Les animations fonctionnelles

Une animation fonctionnelle dit aux utilisateurs comment fonctionne l’application. Elle permet de :

• Créer des transitions cohérentes,
• Donner une indication visuelle,
• Montrer le statut du système,
• Fournir des instructions pour découvrir l’application.

Voyons ces points plus en détail.

A. Créer des transitions cohérentes

Une transition entre deux écrans doit être claire, fluide et simple. Une bonne transition permet à l’utilisateur de comprendre clairement où focaliser son attention.

Orientation spatiale

Les interfaces utilisateur reposent souvent sur l’idée de l’affichage de plusieurs images statiques, chacune indiquant un nouvel état du système. Par défaut, les changements d’état dans ce type d’interfaces utilisateur impliquent des transitions abruptes, qui peuvent les rendre difficiles à suivre.

En sciences cognitives, lorsqu’un changement est si brusque que les utilisateurs ne remarquent pas les nouvelles informations, nous parlons de cécité au changement. Avec autant d’interactions complexes et les innombrables possibilités dans les applications mobiles, les utilisateurs peuvent facilement perdre le fil. Si le visuel de l’interface utilisateur change trop brusquement, les utilisateurs peuvent perdre la compréhension de l’interface.

Une animation fonctionnelle permet donc de combler ces déficits de compréhension. Les transitions animées font office d’intermédiaires entre les différents états de l’interface utilisateur.

Les designers peuvent utiliser une animation pour faire naviguer les utilisateurs d’un écran à un autre en douceur, et leur présenter les changements des éléments qui s’affichent à l’écran.

Agrandissement (de parent à enfant)

La plupart des transitions sont hiérarchiques par nature. Les transitions par agrandissement permettent de passer d’une vue globale à une vue détaillée.

Ce type d’interactions est courant dans les listes, galeries d’images, calendriers et sélecteurs d’éléments. Concrètement, cela signifie que lorsqu’un utilisateur sélectionne un élément, il a immédiatement une vue rapprochée de sa sélection. Une animation pour cette interaction permet de garder le contexte. Ainsi, lorsque l’élément s’agrandit, le changement de visuel indique un changement du centre d’attention, de l’élément parent à l’élément enfant.

Changement de fonction

Les designers sont parfois contraints de créer un bouton d’action qui change de fonction selon le contexte. Étant donné la petite taille des écrans mobiles, certaines icônes remplissent souvent deux fonctions dans la conception d’une application. L’exemple le plus courant est probablement l’alternance entre les boutons « Play »/« Stop » et « Menu latéral »/« Retour ».

Dans l’exemple ci-dessous, l’animation montre comment un élément change lorsqu’un utilisateur interagit avec lui. L’icône de menu latéral se transforme en flèche de retour en arrière. Cela indique que les deux actions sont liées, et que l’une ne peut pas exister sans l’autre.

B. Donner une indication visuelle

Toute interface utilisateur a besoin d’indications visuelles. Elles donnent aux utilisateurs une sensation de contrôle. Pour un utilisateur, le contrôle désigne la connaissance et la compréhension du contexte de navigation dans l’application à un moment donné.

Renforcer la sensation d’interaction physique

Cette section concerne la sensibilité de l’interface utilisateur. En matière de conception, une interface utilisateur sensible désigne une interface qui réagit aux actions de l’utilisateur à tout moment. Un logiciel à usage humain doit être aussi sensible que les êtres humains qui l’utilisent.

Dans le monde physique, les boutons, les télécommandes et les autres objets réagissent quand nous interagissons avec eux. Les utilisateurs attendent le même niveau de sensibilité avec les commandes d’une interface utilisateur.

Les éléments d’une interface utilisateur, comme les boutons, doivent donc avoir l’air palpables, même s’ils sont derrière un écran. Pour cela, des signes visuels de mouvement doivent montrer instantanément la réception de l’action pour donner l’impression à l’utilisateur qu’il s’agit d’une action physique.

Montrer le résultat d’une action

Les indications visuelles sont aussi utiles pour informer les utilisateurs du résultat d’une action. Une animation peut permettre de confirmer les actions d’un utilisateur.

Dans l’exemple ci-dessous, nous voyons que lorsqu’un utilisateur clique sur « Submit », un spinner (un indicateur de chargement circulaire) apparaît brièvement avant que l’application ne montre le succès de l’action. Ensuite, une coche animée indique aux utilisateurs que leur demande a été traitée avec succès.

C. Montrer le statut du système

Il y a toujours des processus en cours en arrière-plan de votre application (par exemple des données en cours de chargement en provenance du serveur, des calculs, etc.). Ces opérations prennent toujours un certain temps.

Pensez à dire à votre utilisateur que l’application n’a pas buggé en indiquant le statut de sa demande. Des indications visuelles de progrès donnent aux utilisateurs une sensation de contrôle sur l’application.

Indicateurs de chargement

Les temps de chargement sont inévitables pour la plupart des produits numériques. Mais si nous ne pouvons pas raccourcir ces temps d’attente, nous pouvons certainement les rendre plus agréables. Même si une animation ne règlera pas le problème, elle peut aider l’utilisateur à patienter.

Une bonne animation, sous la forme d’une maquette fonctionnelle comme dans l’exemple ci-dessous (à gauche), peut être préférable à un simple indicateur de chargement circulaire (à droite), qui ne fait que rappeler à l’utilisateur qu’il est en train d’attendre.

Actualisation de contenu

Une animation bien connue dans cette catégorie est le « glisser vers le bas pour rafraîchir ». Cette animation permet d’actualiser des contenus sur un appareil mobile. Ces animations doivent correspondre au design global de l’application. Si l’application a un design minimaliste, l’animation doit l’être également.

Notification

Si une interface est très chargée, vous avez peut-être intérêt à attirer l’attention de l’utilisateur sur un élément en particulier. Le mouvement, par nature, est ce qui attire le plus l’attention dans une interface utilisateur. Aucun texte, aucune image ne peut rivaliser avec le mouvement. Les designers d’application doivent donc exploiter cette propriété pour attirer le regard de l’utilisateur.

D. Fournir des instructions pour découvrir l’application

Une animation peut aussi guider l’utilisateur et lui apprendre à interagir avec l’interface d’une application.

Première utilisation

La découverte d’une application requiert une expérience utilisateur irréprochable. Certaines applications sont complexes, et si vous ne voulez pas frustrer vos utilisateurs, vous devez expliquer le fonctionnement de votre application dès le début.

Une bonne animation lors de la première ouverture de l’application influencera grandement la façon dont les primo-utilisateurs interagiront avec l’application. Cela permet de montrer comment fonctionne une application de façon beaucoup plus interactive qu’avec un texte ou un tutoriel vidéo.

Indices visuels

Les meilleures interfaces utilisateur ne se reposent jamais sur la logique personnelle des utilisateurs pour découvrir leur fonctionnement. Les animations fonctionnelles peuvent servir d’indications, de guides, ou d’indices visuels qui aident les utilisateurs à comprendre comment interagir avec l’interface d’une application. Les indices visuels sont particulièrement importants lorsqu’une application possède un mode de navigation très spécifique.

Dans l’exemple ci-dessous, vous voyez qu’une simple animation permet de montrer comment fonctionnent certains éléments.

2. Les animations agréables

Beaucoup pensent que l’expérience utilisateur concerne seulement la convivialité (la façon dont une application fonctionne), mais en réalité, l’expérience utilisateur va bien au-delà. Elle concerne avant tout les émotions des utilisateurs.

« Agréable » est un mot que nous entendons et employons généralement pour décrire des moments que l’on apprécie avec nos produits. Ce mot désigne tout ce qui nous fait aimer un produit. C’est donc une question centrale de la conception d’une application. Et une animation peut rendre l’expérience d’un utilisateur vraiment agréable, voire inoubliable.

Voyons comment une animation peut contribuer à créer des expériences agréables sur des applications mobiles.

A. Pour afficher la nouveauté

Avec autant de bonnes pratiques pour le design d’applications mobiles, tout commence à avoir un air de déjà-vu. Mais quand tout se ressemble, les animations peuvent faire une grande différence, car les utilisateurs remarquent les détails. Ce sont ces détails qui rendent votre application intéressante. Ce sont ces petites choses qui rendront votre design unique et permettront de créer des expériences vraiment inoubliables.

B. Pour récompenser l’utilisateur

Les émotions des utilisateurs peuvent jouer un rôle déterminant dans les interactions avec l’interface utilisateur, à condition d’y accorder suffisamment d’importance. Comme le dit Aarron Walter dans son livre Designing for Emotion, « la personnalité est une force mystérieuse qui nous pousse vers certaines personnes et nous tient à l’écart d’autres. »

Dans votre interface utilisateur, créez une expérience pour faire sentir à l’utilisateur qu’il interagit avec un être humain, et non avec une machine. Récompensez les utilisateurs avec une animation lorsqu’ils accomplissent des objectifs personnels. Par exemple, lorsqu’un utilisateur ouvre son dernier e-mail non lu, « offrez-lui » une animation pour créer une interaction plus profonde avec votre application.

Une récompense constitue une vraie interaction émotionnelle, c’est-à-dire un stimulus émotionnel positif qui crée un sentiment d’interaction chez l’utilisateur. Les personnes pardonnent les problèmes de l’application si vous les récompensez avec des émotions positives.

C. Pour donner une personnalité et de l’humanité à votre application

La personnalité est indispensable pour créer des expériences inoubliables. C’est la personnalité qui aide à renforcer la notoriété d’une marque. Lorsqu’il y a connexion personnelle, il y a connexion émotionnelle. Les utilisateurs seront amenés à aimer la marque si des animations subtiles leur permettent de voir les personnes — de vraies personnes — qui se cachent derrière l’application. Les interfaces capables de générer des émotions efficacement ne font pas que créer une grande base de fans, elles créent une armée d’ambassadeurs fidèles de la marque.

Une animation peut aussi aider les utilisateurs à exprimer différentes humeurs.

D. Pour divertir les utilisateurs

Les animations peuvent aussi inviter les utilisateurs à interagir avec une application. Cela peut rendre certaines interactions courantes plus agréables. L’élaboration d’animations très détaillées peut ravir et surprendre l’utilisateur, et permet de montrer tout le savoir-faire des designers, et donc de la marque. Les bonnes animations font sentir que l’expérience a été pensée par des professionnels et que rien n’a été laissé au hasard.

Avant d’intégrer des animations dans votre application N’intégrez pas d’animations sans raison.

Une animation est efficace si elle est bien conçue. Mais surtout, elle doit toujours être utilisée à bon escient. Avant d’intégrer une animation à votre application, demandez-vous si elle a du sens, et si elle ne va pas détourner l’utilisateur de la raison pour laquelle il a ouvert votre application. Souvenez-vous que les meilleures animations sont celles qui semblent naturelles et n’attirent pas trop l’attention sur elles-mêmes.

Vous pouvez facilement tester votre animation. Michael Villar suggère la méthode de test suivante : « Si vous désactivez des animations, la navigation doit manquer de fluidité. Si ce n’est pas le cas, ça veut dire que ces animations sont superflues. »

Pensez à long terme

Votre contenu d’interaction doit être simple et prévu pour une utilisation à répétition. Posez-vous les bonnes questions : « Cette animation deviendra-t-elle ennuyeuse après la 100e utilisation ? Est-elle universellement compréhensible et discrète ? »

Bien conçue, une animation influence fortement l’expérience utilisateur sur une application. Un produit numérique peut passer de l’état de l'enchaînement d’écrans statiques à celui d’ensemble d’expériences dynamiques organisé avec soin incitant les utilisateurs à revenir sur l’application.

---

Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.

Texte original par Nick Babich. Traduction par Nicolas Bruno.