Octoverse von GitHub entwerfen: Eine Fallstudie zur Datenvisualisierung

Letztes Jahr habe ich mit GitHub zusammengearbeitet, um den State of the Octoverse-Bericht 2021 zu entwerfen. Octoverse von GitHub analysiert reale Daten von Millionen von Entwicklern und Repositories, um die Erkenntnisse der Softwareentwicklungsbranche des Jahres zu präsentieren. Der Bericht 2021 behandelt drei Haupttrends: Verbesserung der Leistung und des Wohlbefindens durch die Entwicklung von Code, die Erstellung von Dokumentation und die Unterstützung von Communities auf intelligentere und nachhaltigere Weise.

Als kreative Verbindungsperson des Projekts war es meine Aufgabe, das GitHub-Team dabei zu unterstützen, den datenintensiven Bericht leicht verständlich zu machen. Mithilfe von Datenvisualisierung habe ich mehr als 20 Diagramme, Karten und Grafiken entworfen, um den Lesern zu helfen, die Informationen zu enträtseln, die GitHub-Datenwissenschaftler gesammelt haben.

In dieser Fallstudie zur Datenvisualisierung erkläre ich meinen Designprozess, stelle die Website vor, an deren Erstellung ich für Octoverse von GitHub mitgewirkt habe, und teile wichtige Erkenntnisse aus dem Projekt.

Gestalten ansprechender digitaler Erlebnisse mit Datenvisualisierung

State of the Octoverse 2021 ist ein umfangreicher Bericht mit Daten, die von über 73 Millionen GitHub-Entwicklern und mehr als 61 Millionen neuen Repositories gesammelt wurden. Es ist auch das erste Mal, dass eine Umfrage zu demografischen Daten der Befragten aufgenommen wurde. Um die Daten zu verstehen, war ein umfangreicher Designaufwand erforderlich.

Unser bescheidenes Team, zu dem der Entwickler Jose Luis Garrido und der Projektmanager Miquel Lopez gehörten, wurde damit beauftragt, diese immense Menge an Informationen für die Leser zusammenzufassen. Trotz verspätetem Start und anderen Parallelprojekten haben wir geliefert.

Starten des Designprozesses

Die erste Phase meines Designprozesses für die Datenvisualisierung war die Entdeckung. Die Datenwissenschaftler von GitHub sammelten und analysierten Informationen von Entwicklern und Repositories über Excel-Dateien, PowerPoint-Präsentationen und andere Datensätze.

Mit diesen Informationen, zusammen mit GitHubs anfänglichen Skizzen zur Datenvisualisierung und einem 60-seitigen Kontextdokument, begann ich darüber nachzudenken, wie ich jeden Datensatz am besten veranschaulichen könnte. Dann habe ich mich daran gemacht, jedes Diagramm, jede Karte und jedes Diagramm so zu gestalten, dass maximales Benutzerengagement und eine intuitive Benutzererfahrung erzielt werden.

Auswählen Ihres Diagramms

Es gibt drei wichtige Punkte bei der Auswahl einer effektiven Datenvisualisierung:

1. Identifizieren Sie den Zweck des Diagramms

Daten können auf vielfältige Weise dargestellt werden – Balkendiagramme, Liniendiagramme, Heatmaps, Wasserfalldiagramme und mehr. Jedes Diagramm dient einem Zweck, und es ist wichtig, das richtige zu verwenden, um sicherzustellen, dass eine klare und genaue Botschaft übermittelt wird.

Wenn Sie beispielsweise die Differenz zwischen zwei Größen darstellen möchten, verwenden Sie ein Balkendiagramm. Wenn Sie einen Trend über die Zeit anzeigen möchten, verwenden Sie ein Liniendiagramm.

2. Betrachten Sie den Endbenutzer

Sie müssen sich auch der Fähigkeit Ihrer Benutzer bewusst sein, Daten zu lesen und zu analysieren. Die meisten von uns sind mit Torten-, Balken- und Liniendiagrammen vertraut. Wir sehen sie überall, und wir wissen, wie man sie liest.

Andererseits wissen weniger Menschen, wie man Boxplots liest, die in vielen Forschungspublikationen verwendet werden, um mehrere Datenvariablen in einem Diagramm zusammenzufassen.

Wenn Sie Benutzern ungewohnte Visualisierungen präsentieren, wird es ihnen schwer fallen, die Daten zu interpretieren.

3. Design mit Klarheit

Ist die Datenvisualisierung klar und prägnant oder gibt es zu viel Rauschen? Balkendiagramme können eine großartige Möglichkeit sein, Daten anzuzeigen, aber nicht, wenn es 100 Balken mit individuellen Beschriftungen gibt. Ebenso sind Streamgraphs schön und funktional, aber nur, wenn es ein klares Datenmuster gibt. Manchmal ist weniger mehr.

Perfekte Datenvisualisierungen entwerfen

Im gesamten State of the Octoverse-Bericht 2021 finden Sie eine Vielzahl von Datenvisualisierungen, die sorgfältig in Übereinstimmung mit den entsprechenden Datenerkenntnissen zusammengestellt wurden.

Die Schmetterlingskarte

Auf der Übersichtsseite musste ich eine Infografik für zwei Datensätze entwerfen – die zeigen, wo die Befragten vor und nach der Pandemie gearbeitet haben. GitHub stellte mir zwei Tortendiagramme zur Verfügung, die jeweils vier Datenpunkte abbildeten: zusammengestellt, hybrid, vollständig entfernt und nicht zutreffend. Kreisdiagramme sind jedoch nicht besonders effektiv, wenn zwei Datensätze verglichen werden.

Stattdessen habe ich mich für ein Schmetterlingsdiagramm entschieden. Schmetterlingsdiagramme stellen die Daten als zwei horizontale Balken nebeneinander dar, die Schmetterlingsflügeln ähneln. Diese Diagramme zeigen deutlich den Unterschied zwischen zwei Gruppen mit denselben Parametern und machen den Vergleich zweier Datensätze viel einfacher.

Das Bump-Diagramm

Eine weitere effektive Datenvisualisierung ist das Bump-Diagramm. Wir haben dieses Diagramm verwendet, um die Informationen zu den beliebtesten Computerprogrammiersprachen zu präsentieren, die von Entwicklern in den letzten acht Jahren verwendet wurden. Bump-Charts eignen sich hervorragend zum Anzeigen von Rangänderungen über einen bestimmten Zeitraum und sind zu einem festen Bestandteil des Octoverse-Berichts geworden.

Die Baumkarte

Ich musste die verschiedenen Sektoren veranschaulichen, zu denen die Befragten Code beitragen. Die endgültige Entscheidung fiel auf Tortendiagramme im Vergleich zu Baumkarten.

Tortendiagramme sind nützlich, wenn Sie drei oder vier Sektoren haben und die Mengen deutlich unterschiedlich sind. Unser Gehirn verarbeitet Winkel jedoch nicht gut. Wenn es also ein Tortendiagramm mit vielen Keilen ähnlicher Größe gibt, fällt es den Menschen schwer zu entziffern, welches größer ist.

Im Gegensatz dazu ermöglichen Treemaps Benutzern, Segmente einfach miteinander sowie mit dem Ganzen zu vergleichen. Die größten Rechtecke werden oben links platziert, gefolgt von zunehmend kleineren Rechtecken. Es ist einfacher, gerade Linien zu vergleichen als Keile oder Winkel.

Das Kartogramm

Schließlich musste ich die geografische Verteilung von Organisationen, die GitHub im Jahr 2021 nutzen, nach Region oder Land veranschaulichen. Dazu habe ich ein Bevölkerungskartogramm verwendet. Kartogramme sind Karten, in denen die Geometrie verzerrt ist, um ein bestimmtes wirtschaftliches, soziales, politisches oder ökologisches Merkmal aufzunehmen.

In dieser Datenvisualisierung gibt die Größe der Quadrate die Populationsgröße an. Darüber hinaus zeigt die Sättigung der Farbe des Quadrats an, wie viele Organisationen in diesem Bereich GitHub verwenden.

Responsives Website-Design für GitHubs Octoverse 2021

Neben dem Entwerfen von Datenvisualisierungen half ich dem GitHub-Team auch bei der Erstellung einer Website für Octoverse 2021. Diese Website war ein Knotenpunkt für Benutzer, um die Datenerkenntnisse des Berichts zu lesen, zu erkunden und mit ihnen zu interagieren.

Um die Benutzerinteraktion zu fördern, entschieden wir uns für eine vollständig reaktionsschnelle Website, die das Rendering der Website an unterschiedlich große Darstellungsbereiche anpasst. GitHub hat uns gebeten, der Desktop-Version besondere Aufmerksamkeit zu schenken, nachdem festgestellt wurde, dass größere Geräte die Mehrheit der Octoverse-Besuche auslösten.

Beim Entwerfen der responsiven Website habe ich diese Best Practices befolgt:

• Verfassen von Text mit Desktop-freundlichen und mobilfreundlichen Schriftarten. Dazu gehörte die Auswahl optimaler Schriftgrößen, Schriftarten sowie Zeilenlänge und -höhe und die Verfeinerung, wie der Text an verschiedenen Haltepunkten aussieht.
• Anordnen der visuellen Elemente auf jeder Seite, um das Scrollen zu fördern.
• Entwerfen einer benutzerfreundlichen oberen Navigationsleiste, die ihr Layout an die Größe des Ansichtsfensters anpasst.

Da ich die Website von Anfang an für verschiedene Geräte konzipiert habe, wurden die meisten Diagramme auf allen Bildschirmgrößen gut gerendert. Ich musste nur geringfügige Anpassungen für eine optimale Sichtbarkeit vornehmen, wie zum Beispiel das kreisförmige Dendrogramm am Ende des Abschnitts „Nachhaltige Gemeinschaften“.

Organisation der Informationsarchitektur

Ich untersuchte verschiedene Optionen für die Informationsarchitektur der Website. Ich wollte die Benutzer nicht mit zu vielen Informationen überfordern, aber ich wollte auch nicht, dass die Seite verstreut oder schwer zu navigieren ist.

Vor diesem Hintergrund habe ich mit dem Entwerfen einer Long-Scrolling-Website mit allen Inhalten auf derselben Seite begonnen. Als das visuell überwältigend wurde, habe ich versucht, jedes Diagramm auf einer separaten Seite zu platzieren. Um die Navigation zu erleichtern, habe ich jeder Seite ein seitliches Navigationsmenü mit einem Inhaltsverzeichnis hinzugefügt, ähnlich wie Sie es in einem Buch finden. Das endgültige Design der Octoverse-Website besteht aus separaten Webseiten für die drei Haupttrends sowie einer Homepage, die als Zusammenfassung der wichtigsten Daten dient.

Nachdem ich mich für die Informationsarchitektur entschieden hatte, machte ich mich daran, die Inhaltsstruktur, den Navigationsfluss, die Bilder und Grafiken der Website zu entwerfen. Ich habe Wireframes erstellt, um den Inhalt abzubilden und Pfade zwischen verschiedenen Seiten anzuzeigen.

Website interaktiv gestalten

Die Scroll-Fortschrittsanzeige

Um GitHubs Wunsch nach einer ansprechenden, dynamischen Website zu erfüllen, haben wir interaktive Elemente hinzugefügt. Zum Beispiel habe ich unter der oberen Navigationsleiste eine Scroll-Fortschrittsanzeige entworfen, damit Besucher verfolgen können, wo sie sich auf der Website befinden. Wenn Leser eine Seite nach unten scrollen, wird die Anzeigeleiste schrittweise skaliert, und jede Seite hat eine andere Füllfarbe für die Leiste: grau, violett, blau oder grün.

Animierte Header, Bilder und Datenvisualisierung

Damit die Website nicht flach aussieht, haben wir uns entschieden, die Abschnittsüberschriften zu animieren. Ich habe die Illustrationen erstellt und der Entwickler unseres Teams hat sie animiert. Wir haben auch das Heldenbild für die Homepage und jeden Unterabschnitt sowie die entsprechenden Kapitelkarten unten auf jeder Webseite animiert.

Wir haben auch einige der statischen Datenvisualisierungsdiagramme interaktiv gemacht. Wenn Sie beispielsweise über eine Linie im Bump-Diagramm scrollen, wird die Linie dicker, um den entsprechenden Datenpunkt hervorzuheben. Es handelt sich um eine einfache, aber effektive Animation, mit der Website-Besucher mit den Daten interagieren und Sprachen schnell vergleichen können.

Erstellen erfolgreicher Datenvisualisierungen und digitaler Designs für GitHub: Key Learnings

Daten sind nur dann nützlich, wenn Sie sie verstehen können, und der Prozess des Entwerfens von datenlastigen Inhalten, die Benutzer leicht entschlüsseln können, ist eine Herausforderung. Nichtsdestotrotz hat diese Zusammenarbeit mit GitHub mein Wissen im Design von Datenvisualisierungen erweitert. Hier sind die wichtigsten Erkenntnisse aus dieser Fallstudie zur Datenvisualisierung:

• Kennen Sie die Marke: Wenn Sie mit den zentralen Stilrichtlinien einer Marke vertraut sind – wie z. B. die Verwendung von Schrift, Farbe und Bildern –, wird der Designprozess beschleunigt, da Designer die Freiheit haben, sich dem kreativen Prozess zu widmen. Ich hatte das Glück, dass ich vor der Zusammenarbeit viel über die Marke GitHub wusste, und ich konnte dieses Wissen für meine Designs nutzen.
• Wählen Sie die richtigen Arten von Datenvisualisierungen: Die Auswahl der richtigen Visualisierung zur Darstellung eines Datenpunkts ist von entscheidender Bedeutung. Eine falsche Darstellung kann Verwirrung stiften oder die falsche Botschaft übermitteln.
• Verwenden Sie Farbe mit Bedacht: Die richtige Farbkombination wird das Auge des Lesers lenken und die Aufmerksamkeit auf einen bestimmten Datenpunkt lenken.
• Bleiben Sie neugierig: Wenn Sie versuchen, eine überzeugende Datengeschichte zu erzählen, werden Sie zwangsläufig auf komplexe Designprobleme stoßen, daher ist es wichtig, ungewöhnlichen Lösungen und kontinuierlichem Lernen gegenüber aufgeschlossen zu sein.