Proiectarea Octoverse lui GitHub: un studiu de caz pentru vizualizarea datelor

Anul trecut am colaborat cu GitHub pentru a proiecta raportul 2021 State of the Octoverse. Octoverse de la GitHub analizează datele din lumea reală de la milioane de dezvoltatori și depozite pentru a prezenta perspectivele anului în industria de dezvoltare de software. Raportul din 2021 acoperă trei tendințe majore: îmbunătățirea performanței și a bunăstării prin dezvoltarea codului, crearea de documentație și sprijinirea comunităților într-un mod mai inteligent și mai durabil.

În calitate de legătură creativă a proiectului, treaba mea era să ajut echipa GitHub să facă raportul bogat în date ușor de înțeles. Folosind vizualizarea datelor, am proiectat peste 20 de diagrame, hărți și grafice pentru a ajuta cititorii să dezlege informațiile colectate de oamenii de știință de date GitHub.

În acest studiu de caz de vizualizare a datelor, explic procesul meu de proiectare, prezint site-ul web pe care l-am ajutat să îl creez pentru Octoverse din GitHub și împărtășesc învățăturile cheie din proiect.

Proiectarea experiențelor digitale captivante cu vizualizarea datelor

State of the Octoverse 2021 este un raport extins, cu date colectate de la peste 73 de milioane de dezvoltatori GitHub și peste 61 de milioane de depozite noi. Este, de asemenea, prima dată când a fost inclus un sondaj privind demografia respondenților. Înțelegerea datelor a necesitat un efort extins de proiectare.

Echipa noastră modestă, care a inclus dezvoltatorul Jose Luis Garrido și managerul de proiect Miquel Lopez, a fost însărcinată să sintetizeze această cantitate imensă de informații pentru cititori. În ciuda unui început întârziat și a altor proiecte simultane, am livrat.

Demararea procesului de proiectare

Prima etapă a procesului meu de proiectare a vizualizării datelor a fost descoperirea. Oamenii de știință de date de la GitHub au colectat și analizat informații de la dezvoltatori și depozite prin fișiere Excel, prezentări PowerPoint și alte seturi de date.

Cu aceste informații, împreună cu schițele inițiale de vizualizare a datelor din GitHub și un document de context de 60 de pagini, am început să mă gândesc la cel mai bun mod de a ilustra fiecare set de date. Apoi, m-am apucat de a proiecta fiecare diagramă, hartă și diagramă pentru o implicare maximă a utilizatorului și o experiență intuitivă a utilizatorului.

Alegerea graficului dvs

Există trei puncte cheie pentru a alege o vizualizare eficientă a datelor:

1. Identificați scopul diagramei

Datele pot fi reprezentate în numeroase moduri: diagrame cu bare, grafice cu linii, hărți termice, diagrame în cascadă și multe altele. Fiecare diagramă are un scop și este important să o folosiți pe cea potrivită pentru a vă asigura că este transmis un mesaj clar și precis.

De exemplu, dacă doriți să prezentați diferența dintre două cantități, utilizați o diagramă cu bare. Dacă doriți să afișați o tendință în timp, utilizați un grafic cu linii.

2. Luați în considerare utilizatorul final

De asemenea, trebuie să fii conștient de capacitatea utilizatorilor tăi de a citi și analiza datele. Cei mai mulți dintre noi sunt familiarizați cu diagramele cu plăci, cu bare și cu linii. Le vedem peste tot și știm să le citim.

Pe de altă parte, mai puțini oameni știu să citească diagramele cu casete, care sunt folosite în multe publicații de cercetare pentru a rezuma mai multe variabile de date într-o singură diagramă.

Dacă prezentați utilizatorilor vizualizări necunoscute, le va fi greu să interpreteze datele.

3. Design cu claritate

Vizualizarea datelor este clară și concisă sau există prea mult zgomot? Diagramele cu bare pot fi o modalitate excelentă de a afișa date, dar nu și dacă există 100 de bare cu etichete individuale. De asemenea, streamgraph-urile sunt frumoase și funcționale, dar numai atunci când există un model de date clar. Uneori mai puțin înseamnă mai mult.

Proiectarea vizualizărilor perfecte de date

Pe parcursul raportului State of the Octoverse din 2021, veți găsi o varietate de vizualizări de date care au fost compuse cu atenție în conformitate cu informațiile corespunzătoare ale datelor.

Graficul Fluturelui

Pe pagina Prezentare generală, trebuia să creez un infografic pentru două seturi de date – care să arate unde lucrau respondenții înainte și după pandemie. GitHub mi-a oferit două diagrame circulare care au reprezentat fiecare patru puncte de date: colocate, hibride, complet la distanță și neaplicabile. Cu toate acestea, diagramele circulare nu sunt deosebit de eficiente atunci când se compară două seturi de date.

În schimb, am optat pentru o diagramă fluture. Diagramele fluture prezintă datele ca două bare orizontale una lângă alta, asemănătoare cu aripi de fluture. Aceste diagrame arată clar diferența dintre două grupuri care împărtășesc aceiași parametri și fac compararea a două seturi de date mult mai ușoară.

Bump Chart

O altă vizualizare eficientă a datelor este diagrama cu denivelări. Am folosit această diagramă pentru a prezenta informațiile despre cele mai populare limbaje de programare utilizate de dezvoltatori în ultimii opt ani. Diagramele cu denivelări sunt excelente pentru afișarea schimbărilor de rang de-a lungul unei perioade de timp și au devenit un element de bază în raportul Octoverse.

Harta copacului

Aveam nevoie să ilustrez diferitele sectoare la care respondenții contribuie la cod. Decizia finală s-a rezumat la diagrame circulare versus hărți arbore.

Diagramele circulare sunt utile atunci când aveți trei sau patru sectoare și când cantitățile sunt clar diferite. Cu toate acestea, creierul nostru nu procesează bine unghiurile, așa că atunci când există o diagramă circulară cu o mulțime de pene de dimensiuni similare, oamenilor le este greu să descifreze care este mai mare.

În schimb, hărțile arborescente permit utilizatorilor să compare cu ușurință segmentele între ele, precum și cu întregul. Cele mai mari dreptunghiuri sunt plasate în stânga sus, urmate de dreptunghiuri progresiv mai mici. Este mai ușor să compari linii drepte decât să compari pene sau unghiuri.

Cartograma

În cele din urmă, trebuia să ilustrez distribuția geografică a organizațiilor care folosesc GitHub în 2021 pe regiune sau țară. Pentru aceasta, am folosit o cartogramă a populației. Cartogramele sunt hărți în care geometria este distorsionată pentru a se adapta unei anumite caracteristici economice, sociale, politice sau de mediu.

În această vizualizare a datelor, dimensiunea pătratelor indică dimensiunea populației. În plus, saturația culorii pătratului indică câte organizații din acea zonă folosesc GitHub.

Design de site web receptiv pentru Octoverse 2021 al lui GitHub

Pe lângă proiectarea vizualizărilor de date, am ajutat și echipa GitHub să producă un site web pentru Octoverse 2021. Acest site a fost un hub pentru ca utilizatorii să citească, să exploreze și să interacționeze cu informațiile despre date ale raportului.

Pentru a încuraja implicarea utilizatorilor, am optat pentru un site web complet receptiv, care să adapteze redarea site-ului la ferestre de vizualizare de diferite dimensiuni. GitHub ne-a cerut să acordăm o atenție deosebită versiunii desktop după ce am constatat că dispozitivele mai mari au condus majoritatea vizitelor Octoverse.

Când am proiectat site-ul receptiv, am urmat aceste bune practici:

• Compunerea textului cu fonturi de tip desktop și mobile. Aceasta a inclus alegerea dimensiunilor optime de font, a fonturilor, a lungimii și înălțimii liniilor și a rafina modul în care arată textul la diferite puncte de întrerupere.
• Dispunerea elementelor vizuale pe fiecare pagină pentru a încuraja derularea.
• Proiectarea unei bare de navigare superioară ușor de utilizat, care își adaptează aspectul la dimensiunea ferestrei de vizualizare.

Deoarece am proiectat site-ul web cu diferite dispozitive în minte încă de la început, cele mai multe diagrame au fost redate bine pe toate dimensiunile de ecran. Am avut nevoie doar să fac ajustări minore pentru o vizibilitate optimă, cum ar fi dendrograma circulară de la sfârșitul secțiunii „Comunități durabile”.

Organizarea arhitecturii informaționale

Am explorat diferite opțiuni pentru arhitectura informațională a site-ului. Nu am vrut să copleșesc utilizatorii cu prea multe informații, dar nici nu am vrut ca site-ul să fie împrăștiat sau dificil de navigat.

Având în vedere acest lucru, am început prin a proiecta un site web cu derulare lungă, cu tot conținutul pe aceeași pagină. Când asta a devenit copleșitor din punct de vedere vizual, am încercat să plasez fiecare diagramă pe o pagină separată. Pentru a ajuta la navigare, am adăugat un meniu de navigare lateral la fiecare pagină cu un cuprins, similar cu ceea ce ați putea găsi într-o carte. Designul final de pe site-ul web Octoverse constă din pagini web separate pentru cele trei tendințe principale, plus o pagină de pornire care servește ca un rezumat al celor mai importante date.

După ce am decis asupra arhitecturii informaționale, am trecut la proiectarea structurii de conținut a site-ului, a fluxului de navigare, a imaginilor și a graficii. Am creat wireframes pentru a mapa conținutul și pentru a afișa căile între diferite pagini.

Realizarea site-ului web interactiv

Indicatorul de progres al derulării

Pentru a satisface cererea GitHub pentru un site web captivant și dinamic, am adăugat elemente interactive. De exemplu, sub bara de navigare de sus, am proiectat un indicator de progres de defilare, astfel încât vizitatorii să poată urmări unde se află pe site. Pe măsură ce cititorii derulează în jos pe o pagină, bara indicator se scalează treptat și fiecare pagină are o culoare de umplere diferită pentru bară: gri, violet, albastru sau verde.

Antete animate, imagini și vizualizare a datelor

Pentru ca site-ul web să nu arate neted, am decis să animem anteturile secțiunilor. Am creat ilustrațiile și dezvoltatorul echipei noastre le-a animat. De asemenea, am animat imaginea eroului pentru pagina de pornire și fiecare subsecțiune, precum și cardurile de capitol corespunzătoare din partea de jos a fiecărei pagini web.

Am făcut, de asemenea, unele dintre diagramele de vizualizare a datelor statice interactive. De exemplu, pe măsură ce derulați peste o linie din diagrama cu denivelări, linia se îngroașă pentru a sublinia punctul de date corespunzător. Este o animație simplă, dar eficientă, care permite vizitatorilor site-ului să interacționeze cu datele și să compare rapid limbile.

Crearea de vizualizări de date și designuri digitale de succes pentru GitHub: învățături cheie

Datele sunt utile doar dacă le puteți înțelege, iar procesul de proiectare a conținutului bogat în date, pe care utilizatorii îl pot descifra cu ușurință, este o provocare. Cu toate acestea, această colaborare cu GitHub mi-a extins cunoștințele în proiectarea de vizualizare a datelor. Iată cele mai importante concluzii din acest studiu de caz de vizualizare a datelor:

• Cunoașteți marca: a fi familiarizat cu liniile directoare de stil de bază ale unei mărci, cum ar fi utilizarea tipului, culorii și imaginilor, accelerează procesul de proiectare, deoarece îi eliberează pe designeri să treacă la procesul creativ. Am fost norocos că știam multe despre marca GitHub înainte de colaborare și am putut folosi aceste cunoștințe pentru a-mi informa design-urile.
• Alegeți tipurile potrivite de vizualizări de date: Selectarea vizualizării corecte pentru a reprezenta un punct de date este esențială. O reprezentare incorectă poate provoca confuzie sau transmite un mesaj greșit.
• Utilizați culoarea cu înțelepciune: combinația corectă de culori va ghida privirea cititorului și va atrage atenția asupra unui anumit punct de date.
• Rămâneți curios: atunci când încercați să spuneți o poveste de date convingătoare, sunteți obligat să întâmpinați probleme complexe de proiectare, așa că este important să fiți deschis la soluții neobișnuite și la învățare continuă.