La visualisation des données peutelle améliorer l'expérience Web mobile?

Il peut être difficile de hiérarchiser l'expérience mobile lorsqu'elle est souvent ressemble à 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 des images pour consommer plus facilement du contenu sur un smartphone. Ils ont juste besoin du contenu que vous leur donnez pour ne pas avoir l'impression de travailler autant.

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 les expériences des visiteurs mobiles dans le processus.

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

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

Cette capture d'écran provient d'une infographie Visual.ly comparant les concepteurs et les développeurs Web. Cet élément particulier traite des données statistiques liées à l'emploi, il est donc logique qu'elles soient traduites sous forme de graphiques à barres et de 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 en gras et des puces que tant de fois avant que les lecteurs ne commencent à chercher la prochaine nouvelle chose intéressante à se concentrer.

Lorsque des ensembles de données solides sont conçus plutôt que écrites, 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:

Cela aurait pu être écrit comme un paragraphe (par exemple, «_En général, les concepteurs de sites Web sont de bons penseurs du cerveau, exploitant intuition, créativité, bla bla bla… _ ”). Il aurait également pu être affiché sous forme de tableau:

Bien que cela aurait peut-être été plus facile à lire qu'un mur de texte, ce 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:

Le Pudding a pris ce concept de base de cartographie des points de données au fil du temps et en a fait quelque chose 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 :

Ceci est une façon beaucoup plus efficace et accrocheuse de relayer cette information que de faire dire à un écrivain: «Plus plus de 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 en fait finalement un nuage de points:

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.

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

• Données statistiques,
• Listes à puces courtes,
• Thèmes très complexes,
• Explicateurs pas à pas,
• Résumés de pages ou de sujets.

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 seul graphique, mais utilisez 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 faire lorsqu'ils trouvent un fournisseur, ils doivent regarder où se trouvent réellement leurs points de présence.

C'est ainsi que Google Cloud affiche ces informations pour la livraison de son contenu réseau:

Il s'agit d'un grand 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 a une présence CDN:

Mais c'est de cela que je parle. Cette liste devrait 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:

Akamai ) ( Grand aperçu )

Sur cette carte, vous pouvez voir le réseau de distribution de médias d'Akamai (en orange) et ses emplacements de stockage et de médias (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 effectue une recherche dans la région Asie:

Et voici ce qu'ils voient lorsqu'ils choisissent de visualiser le réseau de stockage d'Akamai contre ses concurrents:

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 aide à leur décision

Cette approche est vraiment utile si vous voulez transformer un tas de données en visualisation de données sans que doive submerger la page avec. 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. Rendre 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 montrées.

Ceci est un article récent de 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 remplie de visualisations de données comme celle-ci:

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 gens pouvaient obtenir plus d'informations sur les emoji, voir les pourcentages augmenter clairement, etc.

Quelque chose que je n'ai pas fait le dernier point est que la carte Akamai CDN est interactive:

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 à se battre pour obtenir toutes les informations dont ils ont besoin ni à les submerger avec trop de données dans un seul graphique.

Ce qui est bien avec l'interactivité, c'est que vous

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

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'un des grands avantages de la hiérarchisation de l'expérience mobile est qu'elle nous permet de trouver des solutions créatives pour concevoir de manière minimale. Et les interactions sont un très bon moyen d'y parvenir 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? [19659002] 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 cela vous permet de:

• Condenser l'espace et le temps nécessaires pour faire passer votre message,
• Concevez vos pages pour être plus attrayant visuellement,
• Préservez l'intégralité de votre copie pour les visiteurs mobiles et de bureau.

Cela, bien sûr, 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 un relooking de visualisation de données.

(ra, il)