Najlepsze przykłady wizualizacji danych i projekty pulpitów nawigacyjnych

Opublikowany: 2022-03-11

Wizualizacja danych i projektowanie pulpitu nawigacyjnego są zarówno sztuką, jak i nauką, a ich tworzenie nie jest tak łatwe, jak mogłoby się wydawać. W jaki sposób najlepsi projektanci UX i projektanci wizualni ilustrują złożone informacje bez dezorientowania użytkowników?

Trzy sposoby: lepsze zrozumienie zasad UX stojących za dobrym projektem pulpitu nawigacyjnego, zastosowanie doskonałości graficznej i praktyka.

Projekt dashboardu UX jest zgodny z określonymi zasadami i najlepszymi praktykami. Z drugiej strony doskonałość graficzna wymaga dokładniejszego zbadania.

Najlepsze praktyki w zakresie wizualizacji danych i projektowania pulpitów nawigacyjnych
Najlepsze praktyki w zakresie wizualizacji danych i projektowania pulpitów nawigacyjnych zapewniają użytkownikom skuteczny i interesujący sposób na lepsze wyświetlanie i rozumienie złożonych pomysłów. (Ramocja)

Doskonałość graficzna jest zdefiniowana jako:

  • Dobrze zaprojektowana i wydajna prezentacja ciekawych danych.
  • Złożone pomysły przekazywane z wydajnością, przejrzystością i precyzją.
  • Zapewnienie widzowi jak największej liczby pomysłów, które wymagają najmniej czasu na małej przestrzeni i zużywają najmniej atramentu.
  • Mówienie prawdy o danych.

Doskonałym źródłem lepszego zrozumienia doskonałości graficznej jest praca Edwarda Tufte. Jest uważany za „Leonarda da Vinci danych” i ma wiele opublikowanych prac, książek i wykładów. David McCandless, który założył, że informacja jest piękna, witryna internetowa, która reprezentuje najlepsze wizualizacje danych i doskonałość graficzną, jest kolejnym doskonałym źródłem informacji.

Zasady wzorowego projektowania UX i doskonałości graficznej dotyczą zarówno projektowania dashboardów, jak i wizualizacji danych. Oto niektóre z najlepszych przykładów wizualizacji danych i projektowania pulpitów nawigacyjnych.

Najlepsze wizualizacje danych

Marzec 1812 Napoleona

Wizualizacja Minarda przedstawiająca marsz Napoleona w 1812 r. jest uważana za jeden z „najlepszych rysunków statystycznych, jakie kiedykolwiek stworzono”: Stworzenie wizualizacji z taką ilością informacji, jaką zrobił Minard, byłoby niemożliwe, gdyby nie zastosowanie doskonałości graficznej.

Ta pojedyncza wizualizacja pokazuje liczbę żołnierzy Napoleona według lokalizacji, temperaturę odczuwaną przez żołnierzy oraz drogę, jaką żołnierze przebyli do iz Moskwy.

Przykład najlepszych praktyk wizualizacji danych
Marsz Napoleona 1812 jest jedną z najwspanialszych wizualizacji Charlesa Minarda z 1861 roku, pokazującą tysiące punktów danych przy użyciu doskonałej grafiki.

Mapa cholery Johna Snowa

Grafika Johna Snowa z 1854 r. przedstawiająca lokalizację 13 studni publicznych w Londynie i 578 zgonów na cholerę za pomocą ułożonych w stos słupków prostopadłych do ich lokalizacji: jest łatwy do zrozumienia, ujawnia prawdę w danych i dostarcza użytkownikowi wszystkich informacji potrzebnych do narysowania właściwego wniosek dotyczący zgonów na cholerę.

Wizualne wyświetlanie danych za pomocą ułożonych w stos słupków i prostej mapy
Wizualizacja danych Johna Snowa jest jednym z najlepszych przykładów opowiadania historii z wieloma punktami danych i utrzymywania jej zarówno angażującej, jak i zrozumiałej.

Historia muzyki rockowej

Przedstawiająca tylko ułamek całej wizualizacji danych, poniższa grafika przedstawia część ponad 30 stylów muzycznych ponad 700 artystów w okresie od 1955 do 1978.

Nie tylko reprezentuje artystów i style, ale pokazuje wpływy, wielkość sprzedaży płyt, kategorie stylistyczne oraz miejsce ich zakończenia lub kontynuacji. Osiągnięcie tego rodzaju graficznej doskonałości to nie lada wyczyn.

Zaletą wizualizacji danych jest pomoc w wyświetlaniu bardzo złożonych informacji.
Jedną z zalet wizualizacji danych jest wyświetlanie bardzo złożonych informacji w sposób, który jest zarówno zrozumiały, jak i korzystny.

Gdzie populacja Europy rośnie i maleje

Wizualizacja najlepszych danych pokazująca, jak radzić sobie z ogromną ilością danych w nieskomplikowany, dobrze zaprojektowany i zgodny z prawdą sposób. Wersja interaktywna zawiera również filtry, które pozwalają na jeszcze większą eksplorację danych, takich jak wskaźniki urodzeń.

Najlepszy przykład wizualizacji danych przedstawiający tysiące punktów danych na nieskomplikowanej grafice
Wizualizacja danych pokazująca doskonałość graficzną z tysiącami złożonych punktów danych.

Codzienne rutyny kultowych sławnych osób

Ta wizualizacja danych jest nie tylko interesująca, ale jest klasycznym przykładem doskonałości graficznej. Na jednej grafice możemy zobaczyć szczegółowe przedstawienie codziennych nawyków, rytuałów, zajęć i priorytetów kultowych sławnych osób.

Korzystając z prostego wykresu oznaczonego kolorami, ta wizualizacja jest łatwa do zrozumienia, prosta, efektywna, a przede wszystkim informacyjna.

Projekt pulpitu wizualizacji danych wyświetlający wiele punktów danych
Wizualizacja danych pokazująca wiele punktów danych bez przytłaczania użytkownika. (Podio)

Grafika języków świata

Ta klasyczna wizualizacja danych przedstawia liczbę języków istniejących na planecie, w których się nimi mówi i kto nimi posługuje się w różnych częściach świata.

Bez wysokiego poziomu doskonałości graficznej trudno byłoby pokazać tak wiele danych w tak elegancki sposób, który jest jednocześnie pouczający i łatwy do zrozumienia.

Jedną z technik wizualizacji danych jest wykorzystanie grafik przedstawiających dane.
Kultowa wizualizacja danych przedstawiająca tysiące punktów danych w elegancki i łatwy do zrozumienia sposób.

Najlepsze projekty desek rozdzielczych

Aby pulpit nawigacyjny można było uznać za lepszy, musi spełniać zestaw określonych kryteriów UX:

  • Jasne i spójne konwencje nazewnictwa
  • Priorytetyzacja przepływu i układu danych
  • Marginesy są odpowiednie dla czytelności
  • Dane nie są ani ukryte, ani przeciążone
  • Zrozumiałe i łatwe do odczytania

Poszukiwani projektanci UX z siedzibą w USA na pełny etat

Pulpit nawigacyjny KPI w marketingu

Poniższy przykład jest doskonałym przykładem łatwego zrozumienia złożonych informacji biznesowych. Powściągliwa kolorystyka jest przyjemna, a użycie oddzielnych kart jest przyjemne dla oczu.

Jednym z powodów, dla których ten pulpit nawigacyjny jest doskonały, jest jego stosunek danych do atramentu. Dane i przestrzeń wzajemnie się uzupełniają. Zamiast wypełniać ekran większą liczbą wykresów, używane są osobne karty z małymi zakładkami. Jest to genialny sposób na zachowanie dostępności krytycznych informacji (tj. nieukrywanie ich), jednocześnie dając użytkownikowi łatwy i pouczający sposób przeglądania ich na własnych warunkach.

Najlepszą praktyką projektowania pulpitu nawigacyjnego jest użycie koloru w celu zwiększenia znaczenia informacji.
Rzadkie kolory i pokazywanie informacji istotnych dla użytkownika to zasady dobrego projektowania deski rozdzielczej. (Artem Sokołow)

Deska rozdzielcza w paski

Pulpit nawigacyjny Stripe jest doskonałym przykładem najlepszych praktyk projektowania pulpitu nawigacyjnego. Jest prosty, odpowiada na najbardziej istotne pytania użytkowników i ma prawie idealne marginesy na każdej karcie.

Pulpit użytkownika, który pokazuje świetne wizualne wyświetlanie danych
Pulpit nawigacyjny Stripe pokazuje wspaniały wizualny sposób wyświetlania danych w sposób, który użytkownicy mogą łatwo i szybko zobaczyć i zrozumieć. (Michael Villar)

Pulpit telemedyczny

Analityka telemedyczna znana jest z dostarczania wielu surowych danych. Zorganizowanie tych danych w sensowny i informacyjny pulpit nawigacyjny może być wyzwaniem. W tym przykładzie zastosowano najlepsze praktyki UX projektowania pulpitu nawigacyjnego. Marginesy są podwojone, informacje są prezentowane wraz z pytaniami i odpowiedziami, a dane nie są ukrywane.

Najlepsze praktyki projektowania pulpitów nawigacyjnych z dobrze rozplanowanymi silosami informacji i dobrym przepływem informacji
Ten projekt pulpitu nawigacyjnego jest zgodny z najlepszymi praktykami wizualizacji danych dźwiękowych: duże marginesy, zrównoważony układ i dobry kontrast kolorów, które przyczyniają się do efektywnej interpretacji danych.

Tablica rozdzielcza zapasów

Zapasy mogą być trudne do konceptualizacji na jednym pulpicie nawigacyjnym ze względu na liczbę punktów danych konkurujących o miejsce. Ten przykładowy projekt deski rozdzielczej pozwolił uzyskać przejrzysty, minimalistyczny wygląd ze wszystkimi istotnymi informacjami z przodu i na środku.

Przykładowy projekt pulpitu nawigacyjnego przedstawiający po prostu złożone informacje
Pulpit nawigacyjny, który pokazuje wiele punktów danych i złożonych informacji w uproszczony, ale informacyjny sposób. (biały na biały cyfrowy)

Panel odbiorców w sieci Web

Google Analytics świetnie sobie radzi z pulpitami nawigacyjnymi; jednak osiągnięcie określonego celu może wymagać wielu dostosowań. Ten pulpit nawigacyjny przeniósł analitykę na nowy poziom, oferując widok, który jest prosty, łatwy do zrozumienia, łatwy do odczytania i pomocny, bez zwiększania obciążenia poznawczego.

Zastosowany UX projektu deski rozdzielczej z uwzględnieniem czytelności i zrozumienia danych
Przykładowy projekt pulpitu nawigacyjnego pokazujący analitykę internetową w przemyślany sposób, dostosowany do tego, co użytkownicy chcą widzieć najbardziej.

Pulpit zarządzania dokumentacją

Zarządzanie dokumentami jest trudne, ale utrzymanie ich w porządku i łatwej nawigacji może być jeszcze trudniejsze. Doskonałym rozwiązaniem jest ten pulpit nawigacyjny, który sprawia, że ​​wszystko jest proste, zrozumiałe i zaskakująco oszczędne.

Nawet przy minimalistycznym podejściu ten doskonały przykład projektu pulpitu nawigacyjnego zapewnia użytkownikowi wszystko, czego potrzebuje, aby zarówno zrozumieć, jak i poruszać się po systemie dokumentów.

Doskonały przykład projektu dashboardu dla systemu zarządzania dokumentami
Przykład świetnego projektu dashboardu z minimalistycznym podejściem do złożonego systemu dokumentów. (Jan Przegrany)

Aplikacja pogody do siewu roślin – mobilny pulpit nawigacyjny

Ten mobilny pulpit nawigacyjny ma charakter informacyjny i jest łatwy do zrozumienia. Okruszki ułatwiają nawigację, a ikony z popularnymi opisami językowymi pomagają w tworzeniu świetnego projektu UX.

Mobilne wizualne wyświetlanie danych
Aplikacja pogodowa do siewu roślin, która przedstawia mobilny pulpit nawigacyjny, który nie jest zaśmiecony „śmieciami z wykresów”. (Tomasz Zych)

Pulpit nawigacyjny karty kredytowej — pulpit mobilny

Podobnie jak bankowość, pulpity nawigacyjne kart kredytowych są znane ze złego UX, zwłaszcza na urządzeniu mobilnym. Ten mobilny projekt deski rozdzielczej zwraca się w nowym kierunku. Informacje są nie tylko dobrze zorganizowane, ale zrozumiałe i bogate w funkcje, ale nie przytłaczają.

Najlepsze praktyki w zakresie projektowania mobilnego pulpitu nawigacyjnego
Pulpity nawigacyjne kart kredytowych i bankowości są złożone, chyba że zasady UX są stosowane wraz z najlepszymi praktykami wizualizacji danych. (Raj Lala)

Doskonała wizualizacja danych i projektowanie pulpitów nawigacyjnych wymagają doskonałości graficznej oraz zrozumienia i stosowania zasad projektowania pulpitów nawigacyjnych. Stosowane zgodnie, użytkownicy będą czerpać korzyści z wizualizacji danych, które mają charakter informacyjny i pulpitów nawigacyjnych, które zapewniają wysoką jakość obsługi.

• • •

Dalsza lektura na blogu Toptal Design:

  • Projekt pulpitu nawigacyjnego — rozważania i najlepsze praktyki
  • Wizualizacja danych – najlepsze praktyki i podstawy
  • Zainspiruj się tymi wizualizacjami danych
  • Ulepsz swoje statystyki dzięki tym inspiracjom do projektowania pulpitów nawigacyjnych