Life in Motion : Un guide pour animer des visualisations de données mobiles

De nos jours, avec la technologie entraînant la collecte et la production de quantités massives de données, il est relativement facile de mettre la main sur des informations pouvant guider vos décisions quotidiennes. Les applications mobiles s'appuient sur la fréquence cardiaque et d'autres données biométriques pour suivre les objectifs de santé et d'exercice. Ils fournissent des données en temps réel sur les investissements, les dépenses personnelles et la budgétisation. Ils peuvent même aider les parents à évaluer les habitudes d'alimentation et de sommeil de leurs nouveau-nés.

Pour saisir le volume considérable de données disponibles, ne cherchez pas plus loin que les rapports annuels du designer Nicholas Felton construits à partir de ses propres données personnelles. Avec autant d'informations à portée de main, le plus difficile est de comprendre.

C'est là que l'animation peut aider. L'animation des données les rend plus compréhensibles, attrayantes et utiles, en particulier sur les petits écrans des appareils mobiles. Avec l'animation, les chiffres deviennent plus faciles à digérer et les tendances, les modèles et les récits autrement négligés deviennent apparents. L'interactivité en temps réel avec ces visuels favorise l'engagement et permet aux utilisateurs d'explorer les données plus en profondeur.

Dans le même temps, une animation excessive ou erronée peut aller à l'encontre de son objectif, obscurcissant plutôt qu'éclairant les idées. Lors de l'animation de visualisations de données mobiles, les concepteurs doivent utiliser les principes de motion design et éviter les pièges courants.

Les avantages de l'animation de visualisations de données mobiles

L'animation n'est pas un simple embellissement des visualisations de données. Le mouvement offre une myriade d'avantages, et il doit être appliqué dans le but d'atteindre un résultat spécifique.

Aider les utilisateurs à percevoir les tendances et les changements est un avantage clé de l'utilisation du mouvement dans les visualisations de données. Le regretté universitaire Hans Rosling est connu pour une animation dans laquelle il a tracé des données sur la durée de vie et les revenus pour montrer les changements en matière de santé et de richesse pour des dizaines de pays au fil des décennies. C'est une animation captivante qui clarifie les tendances au fil du temps et contrecarre les perceptions courantes sur le développement mondial.

La recherche suggère que l'animation de graphiques statiques peut améliorer la perception graphique et accroître l'intérêt du spectateur. Au lieu d'afficher un graphique en une seule fois, par exemple, les éléments peuvent entrer à des vitesses variables afin de ne pas submerger le spectateur avec trop d'informations. Les mouvements "aident à montrer ou à améliorer la hiérarchie visuelle des éléments, ou l'orientation des axes et la façon dont les données sont affichées", explique Tetiana Donska, designer UI/UX basée à Londres dans le réseau Toptal.

L'animation aide également les concepteurs à utiliser efficacement les écrans des appareils mobiles. "Le mouvement dans les visualisations de données aide à créer une prise de conscience des transitions entre différents états et fournit plus d'informations sans encombrer l'expérience utilisateur", déclare Donska. L'interactivité en temps réel peut en outre maintenir une interface propre, car les utilisateurs peuvent explorer les données à l'aide de gestes tels que toucher, faire glisser, faire défiler et zoomer. Par exemple, les utilisateurs peuvent faire glisser un doigt le long d'un axe pour révéler différentes valeurs ou appuyer pour dévoiler des chiffres.

L'intégration de mises à jour en temps réel dans des visualisations de données animées peut les rendre encore plus attrayantes pour les utilisateurs. Olajide Akinpelu, un concepteur Toptal UI/UX basé au Nigéria, affirme que voir la mise à jour des données sous nos yeux facilite la cognition humaine. Un utilisateur actualisant des données statiques aura plus de mal à détecter les changements ; le mouvement en temps réel les aide à identifier les informations qu'ils pourraient autrement manquer.

Bien sûr, rendre les transitions et les mouvements naturels sans distraire l'utilisateur est plus facile à dire qu'à faire.

Techniques d'animation et de visualisation de données pour mobile

La visualisation des données ne se limite pas aux ensembles de données complexes représentés par des tableaux et des graphiques traditionnels. Même un bouton "J'aime" qui correspond au sentiment de l'utilisateur sur une application sociale est un moyen de visualiser les données.

Quelle que soit la complexité, un ensemble commun de principes et de techniques entre en jeu lors de l'animation de visualisations de données. Les quatre techniques sur lesquelles nous nous concentrons dans cet article : changement de valeur ; assouplissement, décalage et retard ; parentalité ; et le zoom - visent à imprégner le mouvement dans l'environnement UX du naturel du mouvement dans le monde réel, conformément aux attentes innées des utilisateurs et au sens de la continuité et de la narration. L'objectif, après tout, est d'aider les utilisateurs à comprendre les données abstraites, pas seulement de les engager ou de les ravir.

Changement de valeur

Lors de l'affichage des changements de valeur avec animation, au lieu d'afficher un nombre statique, un compteur numérique augmente ou une barre monte avant d'atterrir sur un chiffre final. Cela peut être un moyen puissant de transmettre le progrès ou la croissance, ou son absence. Cela signifie également que les données sont sujettes à modification et, dans certains cas, l'animation de valeurs indique une interactivité.

Les visualisations de changement de valeur sont répandues dans le paysage mobile, y compris dans les applications de fitness, d'éducation et de finance. Dans une application d'apprentissage des langues, par exemple, une barre peut monter progressivement jusqu'à arriver à un score final à un test. Le changement de valeur montre des progrès et peut donner à l'utilisateur un sentiment d'accomplissement, l'encourageant à poursuivre un parcours d'apprentissage.

L'application d'un changement de valeur aux lignes d'un graphique est une autre façon de démontrer les changements au fil du temps. Dans un graphique à barres montrant le produit intérieur brut (PIB) de différents pays, par exemple, le mouvement peut révéler les trajectoires des économies nationales les unes par rapport aux autres. Ces visuels sont appelés courses de graphiques à barres.

Accélération, décalage et retard

Dans le monde physique, un objet ne peut pas passer instantanément de zéro à 20 mph. Dans le monde numérique, cependant, vous pouvez créer un mouvement sans accélération ni décélération. Mais cela ne signifie pas que vous devriez. Pour l'œil humain, un tel mouvement ne semble pas naturel, c'est pourquoi il est avantageux de donner aux éléments graphiques des vitesses d'entrée et de sortie naturelles, appelées accélération.

Décaler l'introduction de différents éléments d'interface utilisateur et retarder leur vitesse peut en outre signaler aux utilisateurs que des variables distinctes sont affichées, et cela peut aider à établir une hiérarchie entre eux. Dans une application de trading d'actions, par exemple, la valeur des actions d'un utilisateur peut apparaître en premier, suivie de celles des indices généraux. Le décalage et le retard permettent aux utilisateurs de comprendre plus facilement les chiffres et les graphiques que s'ils étaient présentés tous en même temps.

Parentalité

Le parentage crée des relations entre les composants de l'interface utilisateur. Lorsqu'une propriété (telle que la position, l'échelle ou la couleur) de l'élément parent change, une propriété de l'élément enfant change. Par exemple, sur un graphique en courbes, si un point sur une ligne est le parent, lorsque l'utilisateur fait glisser le point, il peut voir la valeur (l'objet enfant) changer.

La parentalité est un moyen efficace d'augmenter l'interactivité et de créer une hiérarchie.

Zoom

Le zoom permet aux utilisateurs de passer facilement d'une vue à vol d'oiseau des données à une vue plus granulaire. Cela peut être une technique utile lors de la présentation de grands ensembles de données, le type qui peut généralement être visualisé sur un ordinateur de bureau. Une application de suivi des actions, par exemple, peut charger une vue hebdomadaire des prix d'une action donnée et permettre aux utilisateurs d'effectuer un zoom avant ou arrière pour révéler des données quotidiennes ou annuelles.

L'une des formes les plus courantes de visualisation de données est les cartes, qui sont largement utilisées dans les applications de fitness, de vélo en libre-service et de covoiturage. Le zoom est un outil essentiel dans ce contexte puisque les limites de l'écran mobile réduisent considérablement ce qui peut être présenté en un seul visuel.

Les pièges du motion design à éviter

Edward Tufte, l'homme crédité d'avoir littéralement écrit le livre sur la visualisation moderne des données, avait une maxime simple : « Avant tout, montrez les données.

Concentrez-vous sur la transmission d'informations. Les attributs tels que la couleur, la forme et le mouvement ne doivent être utilisés que pour améliorer la compréhension des données. Les éléments visuels superflus - ou "chart junk" comme Tufte l'appelait - nuisent à cet objectif.

Sur mobile, où les utilisateurs d'écran peuvent être sujets à la distraction, trop de pièces mobiles dans une visualisation de données peuvent être écrasantes.

"Avec le mobile, vous avez déjà un petit facteur de forme qui demande de l'attention", explique le designer vétéran Darrell Estabrook, qui a rejoint le réseau de Toptal en 2019. Pour tout flux de travail mobile, sans étapes bien conçues et discrètes, "l'utilisateur tourne mal".

Estabrook ajoute : « Pour toute visualisation de données, vous devez demander quelles informations donnez-vous à l'utilisateur afin qu'il puisse prendre la prochaine décision… appuyer sur un bouton ou écrire un e-mail ou creuser plus profondément. Que devez-vous faire pour leur fournir ces [informations] ? »

Vous pouvez concevoir des visualisations de données mobiles ciblées et efficaces en évitant ces pièges :

Des visuels gourmands en ressources qui n'ajoutent pas beaucoup de valeur

Le rendu du mouvement dans les visuels peut être gourmand en ressources sur le back-end et pourrait avoir un impact négatif sur les performances et l'expérience utilisateur sur le front-end. Les grands ensembles de données ou les données qui nécessitent un codage étendu augmentent ce risque. Avant de consacrer des ressources à la création de tels visuels, les équipes de conception et les clients doivent être clairs sur le résultat souhaité, et que cela en vaudra la peine.

Animation flashy ou superflue

Les visualisations de données animées doivent soutenir l'objectif d'une application. Une application d'apprentissage des langues peut utiliser le mouvement pour souligner les progrès des utilisateurs, tandis qu'une application d'investissement peut subtilement mettre en évidence des données exploitables. Quelle que soit la nature de l'application, cependant, dans la plupart des cas, les concepteurs doivent éviter les animations flashy, telles que la chute de confettis ou de feux d'artifice. Non seulement ils risquent de gamifier les visuels, ce qui pourrait conduire à un engagement malsain avec une application, mais ils peuvent également obscurcir ou exagérer ce que les données véhiculent réellement.

Visuels trop interactifs

Travailler avec des données nécessite un certain degré de précision, et les utilisateurs auront besoin d'une bonne partie de l'écran de leur smartphone (7 à 10 mm est généralement considéré comme une bonne pratique) pour exécuter avec succès des gestes. Trop d'interactivité pourrait s'avérer fastidieuse et frustrante. Il est avantageux de prioriser une action à la fois.

Style incohérent

Les visualisations de données doivent s'intégrer au style général et aux fonctionnalités d'une application, ce qu'Apple appelle l'intégrité esthétique dans ses directives sur l'interface humaine.

Selon Akinpelu, le concepteur UX/UI basé au Nigéria, le maintien de la cohérence stylistique « dans le type de transition que vous utilisez, le type d'animation, le mélange de couleurs » aide les utilisateurs à naviguer dans les ensembles de données.

Suivre le rythme de l'augmentation des données

Les données font désormais partie intégrante de nos vies, du travail à l'école en passant par la santé et la finance. Avec des smartphones de plus en plus sophistiqués et la diffusion de la connectivité 5G, le volume de données et le potentiel de leur application ne manqueront pas de croître également.

L'animation peut être un outil important pour aider les gens à comprendre toutes ces informations. Motion permet aux utilisateurs de comprendre plus facilement les métriques clés, les tendances et les relations. Comme pour toute fonctionnalité UX, cependant, l'animation peut être surutilisée ou mal utilisée, ce qui pourrait finalement rendre les données moins compréhensibles. En utilisant les principes et techniques de motion design, les concepteurs peuvent créer des visualisations animées de données mobiles attrayantes et perspicaces.

Lectures complémentaires sur le blog Toptal Design

• Convaincant et émouvant : un guide des principes de motion design
• L'impact croissant de l'industrie du motion design
• Enchantez les utilisateurs avec ces meilleures pratiques de conception d'applications mobiles