A propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant comme rédactrice indépendante. Elle est spécialisée dans l'artisanat marketing, web…
Plus à propos
Suzanne
Scacca

Étant donné que de plus en plus de trafic Web provient d'utilisateurs mobiles, nos sites Web doivent être les mieux placés pour les servir. La chose la plus simple à faire serait de supprimer le contenu inutile du site. Cependant, ce n'est pas toujours la meilleure solution. Dans cet article, Suzanne Scacca propose quelques façons de transformer un contenu essentiel en graphiques pour économiser de l'espace, créer une interface utilisateur plus engageante et préserver l'intégrité globale de votre contenu sur mobile.

Il peut être difficile de prioriser l'expérience mobile quand cela ressemble souvent à un compromis. N'incluez pas autant de texte. Supprimez certaines de vos images. Éloignez-vous des fonctionnalités qui gênent le visiteur mobile. C'est un peu comme un parent qui vous dit: "Sortez et passez un bon moment, mais ne faites pas X, Y ou Z!"

Ce n'est pas nécessairement qu'un visiteur mobile a besoin d'une page plus courte, moins de texte ou moins d'images pour consommer plus facilement du contenu sur un smartphone. Ils ont juste besoin du contenu que vous leur donnez pour ne pas ressentir autant de travail.

Si vous examinez de plus près vos pages, vous constaterez peut-être qu'une partie du contenu écrit peut être convertie en visualisations de données. Donc, aujourd'hui, nous allons examiner certaines choses que vous pouvez faire pour commencer à convertir davantage de votre contenu en graphiques et à améliorer l'expérience des visiteurs mobiles dans le processus.

Outils de données quantitatives

De nombreux concepteurs UX ont quelque peu peur des données, estimant qu'elles nécessitent une connaissance approfondie des statistiques et des mathématiques. Bien que cela puisse être vrai pour la science des données avancée, ce n'est pas le cas pour l'analyse des données de recherche fondamentale requise par la plupart des concepteurs UX. En savoir plus →

1. Allez au-delà des formats de visualisation de données traditionnels

Lorsque vous pensez à afficher des données sous forme graphique, que pensez-vous? Probablement des graphiques et des tableaux comme celui-ci:

Visual.ly infographic: statistiques sur les emplois de concepteur Web et de développeur Web
Un instantané d'une infographie de Visual.ly qui affiche les statistiques de travail des concepteurs Web et des développeurs Web. (Source de l'image: Visual.ly) (Grand aperçu)

Cette capture d'écran provient d'une infographie Visual.ly comparant les concepteurs Web et les développeurs. Cet élément particulier traite des données statistiques liées aux emplois, il est donc logique qu'elles soient traduites en graphiques à barres et en graphiques à courbes.

En tant qu'écrivain, je suis un grand fan de ce type de visualisation de données, car avoir à écrire des statistiques peut être un gros problème. Comme je sais qu'il y a une différence significative entre les points de données, mais je ne peux utiliser des polices et des puces en gras que tant de fois avant que les lecteurs ne commencent à chercher la prochaine nouvelle chose intéressante sur laquelle se concentrer.

Lorsque des ensembles de données solides sont conçus plutôt qu'écrits, les lecteurs sont moins susceptibles de sauter et de manquer involontairement des informations critiques. Mais ce ne sont pas seulement les données qui peuvent être visualisées. Prenez cet autre segment de l'infographie, par exemple:

Visual.ly infographic: concepteur web vs développeur web cerveau droit vs gauche
Un instantané d'une infographie de Visual.ly qui montre la pensée du concepteur Web contre le développeur Web à droite et à gauche. (Source de l'image: Visual.ly) (Grand aperçu)

Cela pourrait avoir été écrit sous forme de paragraphe (par exemple, «_En général, les concepteurs de sites Web sont des penseurs du cerveau droit, tirant parti de l'intuition, de la créativité, du bla bla bla… _»). Il aurait également pu être affiché sous forme de tableau:

Concepteur WebDéveloppeur web
Hémisphère cérébralDroiteLa gauche
Entraîné parIntuitionLogique
ApprocheLa créativitéPensée linéaire
ForceImaginationTechnique

Bien que cela aurait peut-être été plus facile à lire qu'un mur de texte, il n'est pas aussi intéressant que le graphique ci-dessus.

Afin d'identifier différents types de données qui méritent d'être transformées en graphiques, il faudra que les concepteurs Web réfléchissent en dehors des sentiers battus. Je vous recommande de commencer par vous familiariser avec les différents types de visualisations de données qui existent. Vous pouvez utiliser la bibliothèque de l'Université Duke pour cela. Il a une page entière qui montre comment différents types d'informations peuvent être traduits en graphiques, comme cet exemple de nuage de points:

Bibliothèque de l'Université Duke - exemple de visualisation du diagramme de dispersion
La bibliothèque de l'Université Duke fournit un exemple de visualisation d'un nuage de points. (Source de l'image: Duke University Library) (Grand aperçu)

Le Pudding a pris ce concept de base de la cartographie des points de données au fil du temps et l'a transformé en quelque chose d'unique dans son article «Colorism in High Fashion».

Ceci est un graphique qui représente le spectre des tons de peau qui ont été représentés sur la couverture de Vogue:

Le graphique «Colorism in High Fashion» de Pudding - tendances des tons de peau
Le Pudding décrit les tendances dans les tons de peau des modèles de couverture Vogue dans son article «Colorism in High Fashion». (Source de l'image: The Pudding) (Grand aperçu)

C'est une façon beaucoup plus efficace et accrocheuse de relayer cette information que de dire à un écrivain: «Au-delà des 200 numéros du magazine, 75% des modèles de couverture de Vogue tendent davantage vers des tons chair plus clairs».

Cela dit, ce graphique à lui seul n'est pas un nuage de points car il ne représente que la quantité et les tendances. Cependant, le défilement le transforme finalement en un nuage de points:

Le graphique «Colorism in High Fashion» de Pudding - graphique de l'intrigue des tons de peau
Le pudding utilise un nuage de points pour montrer comment les tons de peau du modèle de couverture Vogue ont changé au fil du temps. (Source de l'image: The Pudding) (Grand aperçu)

Remarquez comment chacun des orbes a été retiré sur une chronologie, représentant les visages des modèles sur les couvertures de magazines. Ce n'est pas la manière traditionnelle d'utiliser un diagramme de dispersion, mais, dans ce cas, cela fonctionne très bien. Et, encore une fois, il fait un travail beaucoup plus efficace pour faire passer le message sur mobile qu'un mur de texte.

Pendant que vous cherchez des moyens de le faire dans votre propre travail, affinez les éléments suivants:

  • Donnée statistique,
  • Listes à puces courtes,
  • Sujets très complexes,
  • Explicateurs pas à pas,
  • Résumés de page ou de sujet.

Ceux-ci présentent les meilleures opportunités pour transformer des données ou des sujets essentiels en visualisations.

2. Concevez vos visualisations de données pour qu'elles soient filtrables

Bien sûr, vous ne voulez pas en faire trop. Dans votre mission de préserver le message de votre site Web sur mobile, vous ne voulez pas créer autant de graphiques que cela compromet la vitesse des pages ou qu'ils commencent à se sentir accablants.

Une solution à la surcharge de visualisation des données consiste à créer un graphique unique, mais à utiliser des filtres pour contrôler les ensembles de données affichés. Non seulement cela vous permet de fournir une tonne d'informations visuelles dans un espace plus restreint, mais cela peut également devenir un avantage concurrentiel. Permettez-moi de vous montrer un exemple.

La raison pour laquelle un CDN est utile est qu'il rapproche géographiquement votre site Web de votre public cible. Si le CDN n'a pas la portée pour le faire, cela ne vaut pas la peine. C’est pourquoi, parmi toutes les considérations que les gens doivent prendre en considération pour trouver un prestataire, ils doivent regarder où se trouvent réellement leurs points de présence.

Voici comment Google Cloud affiche ces informations pour son réseau de diffusion de contenu:

Emplacements PoP Google Cloud CDN
Google Cloud utilise une carte statique pour afficher ses emplacements CDN PoP aux utilisateurs potentiels. (Source de l'image: Google Cloud) (Grand aperçu)

C'est un excellent graphique car il montre où se trouvent ses emplacements de cache et l'étendue d'une zone couverte par le réseau. Cependant, c'est une image statique, donc ce que vous voyez est ce que vous obtenez. Google doit utiliser le reste de la page pour répertorier toutes les grandes villes où il est présent sur CDN:

Mise en cache CDN Google Cloud - liste des villes
Google Cloud publie une liste de tous ses emplacements de cache CDN dans le monde. (Source de l'image: Google Cloud) (Grand aperçu)

Mais c'est de cela que je parle. Cette liste doit faire partie de la visualisation.

Akamai, un concurrent de Google Cloud CDN, a conçu sa carte de réseau multimédia de cette façon:

Carte du réseau de diffusion multimédia d'Akamai - Emplacements des supports et de stockage
La carte du réseau de distribution de médias d'Akamai montre tous ses médias et ses points de stockage. (Source de l'image: Akamai) (Grand aperçu)

Sur cette carte, vous pouvez voir le réseau de diffusion multimédia d'Akamai (en orange) et ses emplacements de stockage et de stockage (en rose).

Les utilisateurs potentiels intéressés à approfondir les données peuvent utiliser les filtres en haut de la page. Par exemple, voici à quoi ressemble la carte lorsque quelqu'un recherche dans la région Asie:

Carte du réseau de distribution des médias d'Akamai - Région Asie
Carte du réseau de diffusion de médias d'Akamai avec un accent sur la région Asie. (Source de l'image: Akamai) (Grand aperçu)

Et c'est ce qu'ils voient lorsqu'ils choisissent de voir le réseau de stockage d'Akamai par rapport à ses concurrents:

Carte du réseau de distribution de médias Akamai - Stockage en Asie vs concurrents
La carte du réseau de distribution de médias d'Akamai est conçue pour afficher le réseau de stockage asiatique d'Akamai par rapport à ses concurrents. (Source de l'image: Akamai) (Grand aperçu)

Non seulement cette conception de visualisation des données permet aux visiteurs d'examiner de près les données les plus pertinentes pour eux, mais elle facilite également leur processus de prise de décision.

Cette approche est vraiment utile si vous souhaitez transformer un tas de données en visualisation de données sans pour autant avoir à submerger la page avec elle. Et avec ce modèle particulier de filtrage, vous pouvez éviter à vos visiteurs d'avoir à pincer pour zoomer et dézoomer sur le graphique. Ils peuvent personnaliser la vue par eux-mêmes et accéder facilement aux bits les plus pertinents.

3. Rendez vos visualisations de données interactives

Une autre chose que vous pouvez faire pour regrouper une tonne d'informations dans un seul graphique est de rendre vos visualisations de données interactives. Non seulement cela désencombrera votre interface utilisateur mobile, mais cela incitera vos visiteurs à faire une pause et à prendre vraiment le temps de comprendre les informations qui leur sont affichées.

Ceci est un post récent d'Emojipedia. L'article partage les résultats d'une étude qu'ils ont menée sur l'utilisation des emoji pendant le coronavirus. C'est une lecture fantastique et pleine de visualisations de données comme celle-ci:

Article emojipedia - Tendances des emoji coronavirus
Un article d'Emojipedia sur l'utilisation des emoji de coronavirus comprend des visualisations de données partout. (Source de l'image: Emojipedia) (Grand aperçu)

Le design est certainement attrayant, mais il n'est pas facile de voir tous les détails dans le graphique sur mobile. C'est là que l'interactivité serait utile.

En rendant chacune des barres du graphique cliquable, les utilisateurs pourraient obtenir plus d'informations sur les emoji, voir clairement les augmentations en pourcentage, etc.

Quelque chose que je ne vous ai pas montré dans le dernier point est que la carte Akamai CDN est interactive:

Carte interactive du réseau de diffusion multimédia d'Akamai - Emplacements à Osaka, Japon
La carte du réseau de diffusion multimédia d'Akamai est interactive. (Source de l'image: Akamai) (Grand aperçu)

C'est l'approche exacte que je suggérerais pour le graphique à barres Emojipedia. En transformant chaque point de données en un élément cliquable, les utilisateurs n'ont pas à lutter pour obtenir toutes les informations dont ils ont besoin, ni à les submerger de trop de données dans un même graphique.

Ce qui est bien avec l'interactivité, c'est que vous pouvez également l'appliquer à un large éventail de visualisations de données.

Voici un exemple de graphique à bulles d'Information Is Beautiful:

L'information est belle - Graphique à bulles des violations de données mondiales les plus graves
Un graphique d'Information Is Beautiful qui illustre les violations de données les plus graves dans le monde sous forme de graphique à bulles. (Source de l'image: l'information est belle) (Grand aperçu)

Lorsque les visiteurs cliquent sur l'une des bulles, plus d'informations sont révélées sur la faille de sécurité:

L'information est belle - Zoom sur les failles de sécurité et les pertes de données
Un graphique d'Information Is Beautiful avec des informations sur une faille de sécurité Zoom importante et une perte de données. (Source de l'image: l'information est belle) (Grand aperçu)

L'un des grands avantages de la priorisation de l'expérience mobile est qu'elle nous permet de trouver des solutions créatives à la conception minimale. Et les interactions sont un très bon moyen de s'en sortir car l'interface utilisateur reste claire et facile à naviguer, mais à l'intérieur se trouvent de petites pépites juteuses à découvrir.

La visualisation des données est-elle la clé d'une meilleure expérience mobile?

Il y a beaucoup de choses que nous pouvons faire pour améliorer l'expérience de l'utilisateur mobile. Si vous n'avez pas considéré la visualisation des données comme faisant partie de cette stratégie, ce serait le bon moment car elle vous permet de:

  • Condensez l'espace et le temps nécessaires pour faire passer votre message,
  • Concevez vos pages pour qu'elles soient plus visuellement attrayantes,
  • Préservez la pleine intégrité de votre copie pour les visiteurs mobiles et de bureau.

Bien sûr, cela ne signifie pas que vous devez cesser de chercher des moyens de réduire le contenu sur mobile. S'il n'est pas nécessaire ou n'ajoute pas de valeur, il devrait disparaître. Ce qui reste peut ensuite être évalué pour une cure de jouvence de visualisation des données.

Smashing Editorial(rail)