Progettare l'Octoverse di GitHub: un caso di studio sulla visualizzazione dei dati

L'anno scorso ho collaborato con GitHub per progettare il rapporto 2021 State of the Octoverse. Octoverse di GitHub analizza i dati del mondo reale provenienti da milioni di sviluppatori e repository per presentare le intuizioni del settore dello sviluppo software dell'anno. Il rapporto 2021 copre tre tendenze principali: migliorare le prestazioni e il benessere sviluppando codice, creando documentazione e supportando le comunità in modo più intelligente e sostenibile.

In qualità di collegamento creativo del progetto, il mio compito era assistere il team di GitHub nel rendere facile la comprensione del report ricco di dati. Utilizzando la visualizzazione dei dati, ho progettato oltre 20 grafici, mappe e grafici per aiutare i lettori a svelare le informazioni raccolte dai data scientist di GitHub.

In questo case study sulla visualizzazione dei dati, spiego il mio processo di progettazione, mostro il sito Web che ho contribuito a creare per Octoverse di GitHub e condivido gli insegnamenti chiave del progetto.

Progettare esperienze digitali coinvolgenti con la visualizzazione dei dati

State of the Octoverse 2021 è un rapporto tentacolare, con dati raccolti da oltre 73 milioni di sviluppatori GitHub e oltre 61 milioni di nuovi repository. È anche la prima volta che viene incluso un sondaggio sui dati demografici degli intervistati. Dare un senso ai dati ha richiesto un ampio sforzo di progettazione.

Il nostro modesto team, che includeva lo sviluppatore Jose Luis Garrido e il project manager Miquel Lopez, è stato incaricato di sintetizzare questa immensa quantità di informazioni per i lettori. Nonostante un avvio ritardato e altri progetti simultanei, abbiamo consegnato.

Avvio del processo di progettazione

La prima fase del mio processo di progettazione della visualizzazione dei dati è stata la scoperta. I data scientist di GitHub hanno raccolto e analizzato informazioni da sviluppatori e repository tramite file Excel, presentazioni PowerPoint e altri set di dati.

Con queste informazioni, insieme agli schizzi di visualizzazione dei dati iniziali di GitHub e a un documento contestuale di 60 pagine, ho iniziato a pensare al modo migliore per illustrare ogni set di dati. Quindi, ho iniziato a progettare ogni grafico, mappa e diagramma per il massimo coinvolgimento dell'utente e un'esperienza utente intuitiva.

Scegli il tuo grafico

Ci sono tre punti chiave per scegliere una visualizzazione dei dati efficace:

1. Identificare lo scopo del grafico

I dati possono essere rappresentati in numerosi modi: grafici a barre, grafici a linee, mappe di calore, grafici a cascata e altro ancora. Ogni grafico ha uno scopo ed è importante utilizzare quello giusto per garantire che venga trasmesso un messaggio chiaro e accurato.

Ad esempio, se vuoi presentare la differenza tra due quantità, usa un grafico a barre. Se vuoi mostrare una tendenza nel tempo, usa un grafico a linee.

2. Considera l'utente finale

Devi anche essere consapevole della capacità dei tuoi utenti di leggere e analizzare i dati. La maggior parte di noi ha familiarità con i grafici a torta, a barre e a linee. Li vediamo ovunque e sappiamo come leggerli.

D'altra parte, meno persone sanno leggere i box plot, che vengono utilizzati in molte pubblicazioni di ricerca per riassumere più variabili di dati in un grafico.

Se presenti agli utenti visualizzazioni sconosciute, avranno difficoltà a interpretare i dati.

3. Progetta con chiarezza

La visualizzazione dei dati è chiara e concisa o c'è troppo rumore? I grafici a barre possono essere un ottimo modo per visualizzare i dati, ma non se sono presenti 100 barre con singole etichette. Allo stesso modo, gli streamgraph sono belli e funzionali, ma solo quando c'è un modello di dati chiaro. A volte meno è di più.

Progettazione di visualizzazioni di dati perfette

In tutto il rapporto 2021 Stato dell'Octoverse, troverai una varietà di visualizzazioni di dati che sono state accuratamente composte in conformità con le informazioni sui dati corrispondenti.

Il grafico delle farfalle

Nella pagina Panoramica, dovevo progettare un'infografica per due set di dati, che mostrasse dove lavoravano gli intervistati prima e dopo la pandemia. GitHub mi ha fornito due grafici a torta ognuno dei quali ha mappato quattro punti dati: collocato, ibrido, completamente remoto e non applicabile. Tuttavia, i grafici a torta non sono particolarmente efficaci quando si confrontano due insiemi di dati.

Invece, ho optato per un grafico a farfalla. I grafici a farfalla tracciano i dati come due barre orizzontali affiancate, simili alle ali di una farfalla. Questi grafici mostrano chiaramente la differenza tra due gruppi che condividono gli stessi parametri e rendono molto più semplice il confronto di due serie di dati.

Il grafico a urto

Un'altra visualizzazione dei dati efficace è il bump chart. Abbiamo utilizzato questo grafico per presentare le informazioni sui linguaggi di programmazione per computer più popolari utilizzati dagli sviluppatori negli ultimi otto anni. I grafici ad urto sono ottimi per visualizzare i cambiamenti nella classifica in un periodo di tempo e sono diventati un punto fermo nel rapporto Octoverse.

La mappa ad albero

Avevo bisogno di illustrare i diversi settori a cui gli intervistati contribuiscono con il codice. La decisione finale è scesa ai grafici a torta rispetto alle mappe ad albero.

I grafici a torta sono utili quando hai tre o quattro settori e quando le quantità sono chiaramente diverse. Tuttavia, il nostro cervello non elabora bene gli angoli, quindi quando c'è un grafico a torta con molti cunei di dimensioni simili, le persone hanno difficoltà a decifrare quale è più grande.

Al contrario, le mappe ad albero consentono agli utenti di confrontare facilmente i segmenti tra loro, oltre che con l'intero. I rettangoli più grandi sono posti in alto a sinistra, seguiti da rettangoli progressivamente più piccoli. È più facile confrontare le linee rette che confrontare i cunei o gli angoli.

Il Cartogramma

Infine, dovevo illustrare la distribuzione geografica delle organizzazioni che utilizzano GitHub nel 2021 per regione o paese. Per questo, ho usato un cartogramma della popolazione. I cartogrammi sono mappe in cui la geometria è distorta per adattarsi a una particolare caratteristica economica, sociale, politica o ambientale.

In questa visualizzazione dei dati, la dimensione dei quadrati indica la dimensione della popolazione. Inoltre, la saturazione del colore del quadrato indica quante organizzazioni in quell'area stanno usando GitHub.

Design del sito web reattivo per Octoverse 2021 di GitHub

Oltre a progettare visualizzazioni di dati, ho anche aiutato il team di GitHub a produrre un sito Web per Octoverse 2021. Questo sito era un hub in cui gli utenti potevano leggere, esplorare e interagire con le informazioni dettagliate sui dati del report.

Per incoraggiare il coinvolgimento degli utenti, abbiamo optato per un sito Web completamente reattivo che adattasse il rendering del sito a viewport di dimensioni diverse. GitHub ci ha chiesto di prestare particolare attenzione alla versione desktop dopo aver scoperto che i dispositivi più grandi hanno guidato la maggior parte delle visite di Octoverse.

Durante la progettazione del sito responsive, ho seguito queste best practice:

• Composizione di testo con caratteri tipografici ottimizzati per desktop e dispositivi mobili. Ciò includeva la scelta di dimensioni dei caratteri, caratteri tipografici e lunghezza e altezza della linea ottimali e perfezionamento dell'aspetto del testo in diversi punti di interruzione.
• Disporre gli elementi visivi su ogni pagina per incoraggiare lo scorrimento.
• Progettazione di una barra di navigazione superiore di facile utilizzo che ne adatti il ​​layout alle dimensioni della finestra.

Poiché ho progettato il sito Web pensando a dispositivi diversi sin dall'inizio, la maggior parte dei grafici è stata visualizzata bene su schermi di tutte le dimensioni. Avevo solo bisogno di apportare piccole modifiche per una visibilità ottimale, come il dendrogramma circolare alla fine della sezione "Comunità sostenibili".

Organizzare l'architettura dell'informazione

Ho esplorato diverse opzioni per l'architettura delle informazioni del sito web. Non volevo sovraccaricare gli utenti con troppe informazioni, ma non volevo nemmeno che il sito fosse sparpagliato o difficile da navigare.

Con questo in mente, ho iniziato progettando un sito web a scorrimento lungo, con tutti i contenuti sulla stessa pagina. Quando è diventato visivamente travolgente, ho provato a posizionare ogni grafico su una pagina separata. Per facilitare la navigazione, ho aggiunto un menu di navigazione laterale a ciascuna pagina con un sommario, simile a quello che potresti trovare in un libro. Il design finale sul sito web di Octoverse consiste in pagine web separate per le tre tendenze principali, oltre a una home page che funge da riepilogo dei dati più importanti.

Dopo aver deciso l'architettura delle informazioni, sono passato alla progettazione della struttura dei contenuti, del flusso di navigazione, delle immagini e della grafica del sito. Ho creato wireframe per mappare il contenuto e mostrare i percorsi tra le diverse pagine.

Rendere il sito web interattivo

L'indicatore di avanzamento scorrimento

Per soddisfare la richiesta di GitHub di un sito web dinamico e coinvolgente, abbiamo aggiunto elementi interattivi. Ad esempio, sotto la barra di navigazione in alto, ho progettato un indicatore di avanzamento dello scorrimento in modo che i visitatori potessero tenere traccia di dove si trovavano sul sito. Mentre i lettori scorrono una pagina verso il basso, la barra dell'indicatore si ridimensiona in modo incrementale e ogni pagina ha un colore di riempimento diverso per la barra: grigio, viola, blu o verde.

Visualizzazione animata di intestazioni, immagini e dati

Per evitare che il sito web appaia piatto, abbiamo deciso di animare le intestazioni delle sezioni. Ho creato le illustrazioni e lo sviluppatore del nostro team le ha animate. Abbiamo anche animato l'immagine dell'eroe per la home page e ogni sottosezione e le schede dei capitoli corrispondenti nella parte inferiore di ogni pagina web.

Abbiamo anche reso interattivi alcuni dei grafici di visualizzazione dei dati statici. Ad esempio, mentre scorri una linea nel grafico a rilievo, la linea si ispessisce per enfatizzare il punto dati corrispondente. È un'animazione semplice ma efficace che consente ai visitatori del sito di interagire con i dati e confrontare rapidamente le lingue.

Creazione di visualizzazioni di dati di successo e design digitali per GitHub: Key Learnings

I dati sono utili solo se riesci a dar loro un senso e il processo di progettazione di contenuti ricchi di dati che gli utenti possono facilmente decifrare è impegnativo. Tuttavia, questa collaborazione con GitHub ha ampliato le mie conoscenze nella progettazione della visualizzazione dei dati. Ecco i risultati più importanti di questo case study sulla visualizzazione dei dati:

• Conoscere il marchio: conoscere le linee guida di stile di base di un marchio, come l'uso del tipo, del colore e delle immagini, accelera il processo di progettazione perché consente ai designer di passare al processo creativo. Sono stato fortunato a sapere molto sul marchio GitHub prima della collaborazione e sono stato in grado di utilizzare questa conoscenza per informare i miei progetti.
• Scegli i tipi giusti di visualizzazioni dei dati: è essenziale selezionare la visualizzazione corretta per rappresentare un punto dati. Una rappresentazione errata può creare confusione o trasmettere il messaggio sbagliato.
• Usa il colore con saggezza: la giusta combinazione di colori guiderà l'occhio del lettore e attirerà l'attenzione su un particolare punto dati.
• Mantieni la curiosità: quando stai cercando di raccontare una storia di dati avvincente, sei destinato a incontrare problemi di progettazione complessi, quindi è importante essere aperti a soluzioni non comuni e all'apprendimento continuo.