Concevoir l'Octoverse de GitHub : une étude de cas de visualisation de données

L'année dernière, j'ai collaboré avec GitHub pour concevoir le rapport State of the Octovere 2021. Octovere de GitHub analyse les données du monde réel de millions de développeurs et de référentiels afin de présenter les informations de l'année sur l'industrie du développement logiciel. Le rapport 2021 couvre trois grandes tendances : améliorer les performances et le bien-être en développant du code, en créant de la documentation et en soutenant les communautés de manière plus intelligente et plus durable.

En tant que liaison créative du projet, mon travail consistait à aider l'équipe GitHub à rendre le rapport riche en données facile à comprendre. À l'aide de la visualisation de données, j'ai conçu plus de 20 tableaux, cartes et graphiques pour aider les lecteurs à démêler les informations collectées par les data scientists de GitHub.

Dans cette étude de cas de visualisation de données, j'explique mon processus de conception, présente le site Web que j'ai aidé à créer pour l'Octoverse de GitHub et partage les principaux enseignements du projet.

Concevoir des expériences numériques engageantes avec la visualisation de données

State of the Octoverse 2021 est un rapport tentaculaire, avec des données collectées auprès de plus de 73 millions de développeurs GitHub et de plus de 61 millions de nouveaux référentiels. C'est aussi la première fois qu'une enquête sur les données démographiques des répondants est incluse. Donner un sens aux données a nécessité un effort de conception considérable.

Notre modeste équipe, qui comprenait le développeur Jose Luis Garrido et le chef de projet Miquel Lopez, a été chargée de synthétiser cette immense quantité d'informations pour les lecteurs. Malgré un démarrage retardé et d'autres projets simultanés, nous avons livré.

Lancer le processus de conception

La première étape de mon processus de conception de visualisation de données a été la découverte. Les scientifiques des données de GitHub ont collecté et analysé les informations des développeurs et des référentiels via des fichiers Excel, des présentations PowerPoint et d'autres ensembles de données.

Avec ces informations, ainsi que les premières esquisses de visualisation de données de GitHub et un document de contexte de 60 pages, j'ai commencé à réfléchir à la meilleure façon d'illustrer chaque ensemble de données. Ensuite, j'ai commencé à concevoir chaque graphique, carte et diagramme pour un engagement maximal de l'utilisateur et une expérience utilisateur intuitive.

Choisir votre graphique

Il y a trois points clés pour choisir une visualisation de données efficace :

1. Identifiez le but du graphique

Les données peuvent être représentées de nombreuses manières : graphiques à barres, graphiques linéaires, cartes thermiques, graphiques en cascade, etc. Chaque graphique a un but, et il est important d'utiliser le bon pour s'assurer qu'un message clair et précis est transmis.

Par exemple, si vous souhaitez présenter la différence entre deux quantités, utilisez un graphique à barres. Si vous souhaitez afficher une tendance dans le temps, utilisez un graphique linéaire.

2. Tenez compte de l'utilisateur final

Vous devez également être conscient de la capacité de vos utilisateurs à lire et à analyser les données. La plupart d'entre nous connaissent les graphiques à secteurs, à barres et linéaires. On les voit partout, et on sait les lire.

D'un autre côté, moins de personnes savent lire les boîtes à moustaches, qui sont utilisées dans de nombreuses publications de recherche pour résumer plusieurs variables de données dans un seul graphique.

Si vous présentez aux utilisateurs des visualisations inconnues, ils auront du mal à interpréter les données.

3. Concevoir avec clarté

La visualisation des données est-elle claire et concise, ou y a-t-il trop de bruit ? Les graphiques à barres peuvent être un excellent moyen d'afficher des données, mais pas s'il y a 100 barres avec des étiquettes individuelles. De même, les streamgraphs sont beaux et fonctionnels, mais uniquement lorsqu'il existe un modèle de données clair. Parfois, moins c'est plus.

Concevoir des visualisations de données parfaites

Tout au long du rapport 2021 sur l'état de l'Octoverse, vous trouverez une variété de visualisations de données qui ont été soigneusement composées conformément à l'aperçu des données correspondant.

La carte des papillons

Sur la page Vue d'ensemble, j'avais besoin de concevoir une infographie pour deux ensembles de données, montrant où les répondants travaillaient avant la pandémie et après. GitHub m'a fourni deux graphiques circulaires qui cartographiaient chacun quatre points de données : colocalisés, hybrides, entièrement distants et non applicables. Cependant, les graphiques circulaires ne sont pas particulièrement efficaces pour comparer deux ensembles de données.

Au lieu de cela, j'ai opté pour une carte papillon. Les graphiques papillon tracent les données sous la forme de deux barres horizontales côte à côte, ressemblant à des ailes de papillon. Ces graphiques montrent clairement la différence entre deux groupes partageant les mêmes paramètres et facilitent grandement la comparaison de deux ensembles de données.

Le graphique en relief

Une autre visualisation efficace des données est le graphique en relief. Nous avons utilisé ce tableau pour présenter les informations sur les langages de programmation informatique les plus populaires utilisés par les développeurs au cours des huit dernières années. Les graphiques en relief sont parfaits pour afficher les changements de classement sur une période de temps, et ils sont devenus un incontournable du rapport Octovere.

La carte arborescente

J'avais besoin d'illustrer les différents secteurs auxquels les répondants contribuent au code. La décision finale a été prise entre les diagrammes circulaires et les treemaps.

Les camemberts sont utiles lorsque vous avez trois ou quatre secteurs et que les quantités sont clairement différentes. Cependant, nos cerveaux ne traitent pas bien les angles, donc quand il y a un camembert avec beaucoup de coins de taille similaire, les gens ont du mal à déchiffrer lequel est le plus grand.

En revanche, les treemaps permettent aux utilisateurs de comparer facilement les segments les uns aux autres, ainsi qu'à l'ensemble. Les plus grands rectangles sont placés en haut à gauche, suivis de rectangles de plus en plus petits. Il est plus facile de comparer des lignes droites que de comparer des coins ou des angles.

Le cartogramme

Enfin, j'avais besoin d'illustrer la répartition géographique des organisations utilisant GitHub en 2021 par région ou pays. Pour cela, j'ai utilisé un cartogramme de population. Les cartogrammes sont des cartes dans lesquelles la géométrie est déformée pour s'adapter à une caractéristique économique, sociale, politique ou environnementale particulière.

Dans cette visualisation de données, la taille des carrés indique la taille de la population. De plus, la saturation de la couleur du carré indique combien d'organisations dans cette zone utilisent GitHub.

Conception de site Web réactif pour Octovere 2021 de GitHub

En plus de concevoir des visualisations de données, j'ai également aidé l'équipe GitHub à produire un site Web pour Octovere 2021. Ce site était une plaque tournante permettant aux utilisateurs de lire, d'explorer et d'interagir avec les informations sur les données du rapport.

Pour encourager l'engagement des utilisateurs, nous avons opté pour un site Web entièrement réactif qui adapterait le rendu du site à des fenêtres de différentes tailles. GitHub nous a demandé d'accorder une attention particulière à la version de bureau après avoir constaté que les appareils plus grands entraînaient la majorité des visites d'Octoverse.

Lors de la conception du site responsive, j'ai suivi ces bonnes pratiques :

• Composer du texte avec des polices de caractères adaptées aux ordinateurs de bureau et aux mobiles. Cela comprenait le choix des tailles de police, des polices de caractères, de la longueur et de la hauteur de ligne optimales, et l'affinement de l'apparence du texte à différents points d'arrêt.
• Disposer les éléments visuels sur chaque page pour favoriser le défilement.
• Concevoir une barre de navigation supérieure conviviale qui adapte sa disposition à la taille de la fenêtre.

Parce que j'ai conçu le site Web avec différents appareils à l'esprit dès le départ, la plupart des graphiques s'affichent bien sur toutes les tailles d'écran. Je n'avais qu'à faire des ajustements mineurs pour une visibilité optimale, comme le dendrogramme circulaire à la fin de la section "Communautés durables".

Organisation de l'architecture de l'information

J'ai exploré différentes options pour l'architecture de l'information du site Web. Je ne voulais pas submerger les utilisateurs avec trop d'informations, mais je ne voulais pas non plus que le site soit dispersé ou difficile à naviguer.

Dans cet esprit, j'ai commencé par concevoir un site Web à défilement long, avec tout le contenu sur la même page. Lorsque cela est devenu visuellement écrasant, j'ai essayé de placer chaque graphique sur une page distincte. Pour faciliter la navigation, j'ai ajouté un menu de navigation latéral à chaque page avec une table des matières, similaire à ce que vous pourriez trouver dans un livre. La conception finale du site Web Octovere se compose de pages Web distinctes pour les trois principales tendances, ainsi que d'une page d'accueil qui sert de résumé des données les plus importantes.

Après avoir décidé de l'architecture de l'information, je suis passé à la conception de la structure du contenu du site, du flux de navigation, des images et des graphiques. J'ai créé des wireframes pour cartographier le contenu et montrer les chemins entre les différentes pages.

Rendre le site Web interactif

L'indicateur de progression du défilement

Pour satisfaire la demande de GitHub pour un site Web attrayant et dynamique, nous avons ajouté des éléments interactifs. Par exemple, sous la barre de navigation supérieure, j'ai conçu un indicateur de progression de défilement afin que les visiteurs puissent savoir où ils se trouvaient sur le site. Au fur et à mesure que les lecteurs font défiler une page, la barre de l'indicateur évolue progressivement et chaque page a une couleur de remplissage différente pour la barre : gris, violet, bleu ou vert.

En-têtes animés, images et visualisation des données

Pour éviter que le site Web ne paraisse plat, nous avons décidé d'animer les en-têtes de section. J'ai créé les illustrations et le développeur de notre équipe les a animées. Nous avons également animé l'image du héros pour la page d'accueil et chaque sous-section, ainsi que leurs cartes de chapitre correspondantes au bas de chaque page Web.

Nous avons également rendu interactifs certains des graphiques de visualisation de données statiques. Par exemple, lorsque vous faites défiler une ligne dans le graphique en relief, la ligne s'épaissit pour mettre en évidence le point de données correspondant. Il s'agit d'une animation simple mais efficace qui permet aux visiteurs du site d'interagir avec les données et de comparer rapidement les langues.

Création de visualisations de données et de conceptions numériques réussies pour GitHub : apprentissages clés

Les données ne sont utiles que si vous pouvez leur donner un sens, et le processus de conception de contenu riche en données que les utilisateurs peuvent facilement déchiffrer est un défi. Néanmoins, cette collaboration avec GitHub a élargi mes connaissances en conception de visualisation de données. Voici les principaux points à retenir de cette étude de cas de visualisation de données :

• Connaître la marque : Connaître les principales directives de style d'une marque, telles que son utilisation du type, de la couleur et des images, accélère le processus de conception, car cela permet aux concepteurs de passer au processus de création. J'ai eu la chance d'en savoir beaucoup sur la marque GitHub avant la collaboration, et j'ai pu utiliser ces connaissances pour éclairer mes conceptions.
• Choisissez les bons types de visualisations de données : il est essentiel de sélectionner la bonne visualisation pour représenter un point de données. Une représentation incorrecte peut prêter à confusion ou véhiculer un message erroné.
• Utilisez les couleurs à bon escient : la bonne combinaison de couleurs guidera l'œil du lecteur et attirera l'attention sur un point de données particulier.
• Restez curieux : Lorsque vous essayez de raconter une histoire de données convaincante, vous êtes inévitablement confronté à des problèmes de conception complexes, il est donc important d'être ouvert à des solutions inhabituelles et à un apprentissage continu.