Projektowanie Octoverse na GitHubie: studium przypadku wizualizacji danych

W zeszłym roku współpracowałem z GitHub, aby zaprojektować raport o stanie Octoverse 2021. Octoverse firmy GitHub analizuje dane ze świata rzeczywistego pochodzące od milionów programistów i repozytoriów, aby zaprezentować tegoroczne spostrzeżenia dotyczące branży programistycznej. Raport 2021 obejmuje trzy główne trendy: poprawę wydajności i dobrego samopoczucia poprzez opracowywanie kodu, tworzenie dokumentacji i wspieranie społeczności w inteligentniejszy i bardziej zrównoważony sposób.

Jako kreatywny łącznik projektu, moim zadaniem było pomóc zespołowi GitHub w uczynieniu raportu z dużą ilością danych łatwym do zrozumienia. Korzystając z wizualizacji danych, zaprojektowałem ponad 20 wykresów, map i wykresów, aby pomóc czytelnikom w rozwikłaniu informacji zebranych przez analityków danych GitHub.

W tym studium przypadku wizualizacji danych wyjaśniam mój proces projektowania, przedstawiam stronę internetową, którą pomogłem stworzyć dla Octoverse na GitHub i dzielę się kluczowymi informacjami z projektu.

Projektowanie angażujących doświadczeń cyfrowych za pomocą wizualizacji danych

State of the Octoverse 2021 to obszerny raport zawierający dane zebrane od ponad 73 milionów programistów GitHub i ponad 61 milionów nowych repozytoriów. Po raz pierwszy uwzględniono również ankietę dotyczącą demografii respondentów. Zrozumienie danych wymagało dużego wysiłku projektowego.

Nasz skromny zespół, w skład którego wchodzili programista Jose Luis Garrido i kierownik projektu Miquel Lopez, miał za zadanie zsyntetyzować tę ogromną ilość informacji dla czytelników. Pomimo opóźnionego startu i innych równoczesnych projektów, zrealizowaliśmy.

Rozpoczęcie procesu projektowania

Pierwszym etapem mojego procesu projektowania wizualizacji danych było odkrycie. Analitycy danych GitHub zbierali i analizowali informacje od programistów i repozytoriów za pomocą plików Excel, prezentacji PowerPoint i innych zestawów danych.

Dzięki tym informacjom, wraz z wstępnymi szkicami wizualizacji danych GitHub i 60-stronicowym dokumentem kontekstowym, zacząłem zastanawiać się, jak najlepiej zilustrować każdy zestaw danych. Następnie zabrałem się za zaprojektowanie każdego wykresu, mapy i diagramu w celu maksymalnego zaangażowania użytkownika i intuicyjnego doświadczenia użytkownika.

Wybór wykresu

Istnieją trzy kluczowe punkty wyboru skutecznej wizualizacji danych:

1. Określ cel wykresu

Dane mogą być reprezentowane na wiele sposobów – na wykresach słupkowych, wykresach liniowych, mapach termicznych, wykresach kaskadowych i nie tylko. Każdy wykres służy celowi i ważne jest, aby użyć właściwego, aby zapewnić jasny i dokładny przekaz.

Na przykład, jeśli chcesz przedstawić różnicę między dwiema wielkościami, użyj wykresu słupkowego. Jeśli chcesz pokazać trend w czasie, użyj wykresu liniowego.

2. Rozważ użytkownika końcowego

Musisz także mieć świadomość, że użytkownicy potrafią czytać i analizować dane. Większość z nas zna wykresy kołowe, słupkowe i liniowe. Widzimy je wszędzie i wiemy, jak je czytać.

Z drugiej strony mniej osób umie czytać wykresy pudełkowe, które są wykorzystywane w wielu publikacjach badawczych do podsumowania wielu zmiennych danych na jednym wykresie.

Jeśli przedstawisz użytkownikom nieznane wizualizacje, będzie im trudno zinterpretować dane.

3. Projektuj z jasnością

Czy wizualizacja danych jest przejrzysta i zwięzła, czy też jest za dużo szumu? Wykresy słupkowe mogą być świetnym sposobem wyświetlania danych, ale nie w przypadku 100 słupków z indywidualnymi etykietami. Podobnie wykresy strumieniowe są piękne i funkcjonalne, ale tylko wtedy, gdy istnieje wyraźny wzorzec danych. Czasami mniej znaczy więcej.

Projektowanie doskonałych wizualizacji danych

W raporcie Stan Octoverse z 2021 r. znajdziesz różnorodne wizualizacje danych, które zostały starannie skomponowane zgodnie z odpowiednimi wglądami w dane.

Wykres Motyli

Na stronie Przegląd musiałem zaprojektować infografikę dla dwóch zestawów danych — pokazującą, gdzie respondenci pracowali przed pandemią i po niej. GitHub dostarczył mi dwa wykresy kołowe, z których każdy przedstawiał cztery punkty danych: skolokowane, hybrydowe, w pełni zdalne i nie mające zastosowania. Jednak wykresy kołowe nie są szczególnie skuteczne przy porównywaniu dwóch zestawów danych.

Zamiast tego zdecydowałem się na wykres motylkowy. Wykresy motylkowe przedstawiają dane jako dwa poziome słupki obok siebie, przypominające skrzydła motyla. Wykresy te wyraźnie pokazują różnicę między dwiema grupami o tych samych parametrach i znacznie ułatwiają porównywanie dwóch zestawów danych.

Wykres wypukłości

Inną skuteczną wizualizacją danych jest wykres wypukłości. Wykorzystaliśmy ten wykres, aby przedstawić informacje na temat najpopularniejszych języków programowania komputerów używanych przez programistów w ciągu ostatnich ośmiu lat. Wykresy wypukłości świetnie nadają się do przedstawiania zmian rang na przestrzeni czasu i stały się podstawą w raporcie Octoverse.

Mapa drzewa

Musiałem zilustrować różne sektory, do których respondenci wnoszą kod. Ostateczna decyzja sprowadzała się do wykresów kołowych i map drzew.

Wykresy kołowe są przydatne, gdy masz trzy lub cztery sektory, a ich ilości są wyraźnie różne. Jednak nasze mózgi nie przetwarzają dobrze kątów, więc kiedy istnieje wykres kołowy z dużą ilością klinów o podobnej wielkości, ludzie mają trudności z rozszyfrowaniem, który jest większy.

Natomiast mapy drzewa pozwalają użytkownikom na łatwe porównywanie segmentów ze sobą, a także z całością. Największe prostokąty są umieszczane w lewym górnym rogu, po których następują stopniowo mniejsze prostokąty. Łatwiej jest porównywać linie proste niż porównywać kliny lub kąty.

Kartogram

Na koniec musiałem zilustrować rozkład geograficzny organizacji korzystających z GitHub w 2021 roku według regionu lub kraju. W tym celu użyłem kartogramu populacyjnego. Kartogramy to mapy, w których geometria jest zniekształcona w celu dostosowania do określonej cechy ekonomicznej, społecznej, politycznej lub środowiskowej.

W tej wizualizacji danych wielkość kwadratów wskazuje wielkość populacji. Dodatkowo nasycenie koloru kwadratu wskazuje, ile organizacji w tym obszarze korzysta z GitHub.

Responsywny projekt strony internetowej dla GitHub Octoverse 2021

Oprócz projektowania wizualizacji danych pomogłem także zespołowi GitHub w stworzeniu witryny internetowej dla Octoverse 2021. Ta witryna była miejscem, w którym użytkownicy mogli czytać, eksplorować i wchodzić w interakcje z danymi zawartymi w raporcie.

Aby zachęcić użytkowników do zaangażowania, zdecydowaliśmy się na w pełni responsywną witrynę internetową, która dostosuje renderowanie witryny do różnych rozmiarów rzutni. GitHub poprosił nas o zwrócenie szczególnej uwagi na wersję na komputery stacjonarne po stwierdzeniu, że większe urządzenia były przyczyną większości odwiedzin Octoverse.

Projektując responsywną witrynę, kierowałem się tymi najlepszymi praktykami:

• Tworzenie tekstu przy użyciu krojów pisma przyjaznych komputerom i urządzeniom mobilnym. Obejmowało to wybór optymalnych rozmiarów czcionek, krojów pisma oraz długości i wysokości linii, a także dopracowanie wyglądu tekstu w różnych punktach przerwania.
• Rozmieszczenie elementów wizualnych na każdej stronie, aby zachęcić do przewijania.
• Zaprojektowanie przyjaznego dla użytkownika górnego paska nawigacyjnego, który dostosowuje swój układ do rozmiaru rzutni.

Ponieważ od początku projektowałem stronę z myślą o różnych urządzeniach, większość wykresów renderowała się dobrze na wszystkich rozmiarach ekranu. Musiałem tylko wprowadzić drobne poprawki, aby uzyskać optymalną widoczność, na przykład okrągły dendrogram na końcu sekcji „Zrównoważone społeczności”.

Organizowanie architektury informacji

Zbadałem różne opcje architektury informacji na stronie. Nie chciałem przytłaczać użytkowników zbyt dużą ilością informacji, ale nie chciałem też, aby strona była rozproszona lub trudna w nawigacji.

Mając to na uwadze, zacząłem od zaprojektowania długiej przewijanej strony internetowej, z całą zawartością na tej samej stronie. Kiedy stało się to wizualnie przytłaczające, spróbowałem umieścić każdy wykres na osobnej stronie. Aby pomóc w nawigacji, dodałem boczne menu nawigacyjne do każdej strony ze spisem treści, podobnym do tego, który można znaleźć w książce. Ostateczny projekt witryny Octoverse składa się z oddzielnych stron internetowych dla trzech głównych trendów oraz strony głównej, która służy jako podsumowanie najważniejszych danych.

Po podjęciu decyzji o architekturze informacji przeszedłem do projektowania struktury treści witryny, przepływu nawigacji, obrazów i grafik. Stworzyłem makiety do mapowania treści i pokazywania ścieżek między różnymi stronami.

Tworzenie interaktywnej strony internetowej

Wskaźnik postępu przewijania

Aby spełnić prośbę GitHuba o angażującą, dynamiczną stronę internetową, dodaliśmy elementy interaktywne. Na przykład pod górnym paskiem nawigacyjnym zaprojektowałem wskaźnik postępu przewijania, aby odwiedzający mogli śledzić, gdzie byli w witrynie. Gdy czytelnicy przewijają stronę w dół, pasek wskaźnika jest stopniowo skalowany, a każda strona ma inny kolor wypełnienia paska: szary, fioletowy, niebieski lub zielony.

Animowane nagłówki, obrazy i wizualizacja danych

Aby strona nie wyglądała płasko, zdecydowaliśmy się animować nagłówki sekcji. Stworzyłem ilustracje, a programista naszego zespołu je animował. Animowaliśmy również obraz bohatera na stronie głównej i każdej podsekcji oraz odpowiadające im karty rozdziałów na dole każdej strony internetowej.

Stworzyliśmy również interaktywne wykresy wizualizacji danych statycznych. Na przykład podczas przewijania linii na wykresie wypukłym linia ta pogrubia się, aby podkreślić odpowiedni punkt danych. Jest to prosta, ale skuteczna animacja, która umożliwia odwiedzającym witrynę interakcję z danymi i szybkie porównywanie języków.

Tworzenie udanych wizualizacji danych i projektów cyfrowych dla GitHub: Kluczowe wnioski

Dane są przydatne tylko wtedy, gdy potrafisz je zrozumieć, a proces projektowania treści z dużą ilością danych, które użytkownicy mogą łatwo odszyfrować, jest trudny. Niemniej jednak ta współpraca z GitHub poszerzyła moją wiedzę w zakresie projektowania wizualizacji danych. Oto najważniejsze wnioski z tego studium przypadku wizualizacji danych:

• Poznaj markę: zapoznanie się z podstawowymi wytycznymi dotyczącymi stylu marki — takimi jak użycie czcionki, koloru i obrazów — przyspiesza proces projektowania, ponieważ pozwala projektantom przejść do procesu twórczego. Miałem szczęście, że dużo wiedziałem o marce GitHub przed współpracą i mogłem wykorzystać tę wiedzę do tworzenia swoich projektów.
• Wybierz odpowiednie typy wizualizacji danych: wybór odpowiedniej wizualizacji reprezentującej punkt danych jest niezbędny. Nieprawidłowa reprezentacja może spowodować zamieszanie lub przekazać niewłaściwą wiadomość.
• Używaj kolorów mądrze: właściwa kombinacja kolorów pokieruje wzrokiem czytelnika i zwróci uwagę na konkretny punkt danych.
• Zachowaj ciekawość: gdy próbujesz opowiedzieć przekonującą historię danych, na pewno napotkasz złożone problemy projektowe, dlatego ważne jest, aby być otwartym na nietypowe rozwiązania i ciągłe uczenie się.