Strona główna » Wzorce projektowe

Interaktywność wykresów: 10 rozwiązań

22 lutego 2012 napisała Ewa [ Brak odpowiedzi ] Drukuj wpis

Wykresy służą prezentacji wzorów i trendów, a także do wykazania odstępstw od nich. Główną ich zaletą jest to, że pozwalają ogarnąć większą porcję informacji. Dobry wykres to taki, który można odczytać i zrozumieć już  na pierwszy rzut oka. Zaprojektowanie go nie jest wbrew pozorom prostym zadaniem, ale tematem na niejedną książkę – zainteresowanych odsyłam do Stephena Fewa, Noah Iliinsky’ego oraz klasyka Edwarda Tufte.

Komputery nakładają na wykresy dodatkową warstwę: warstwę interakcji. Interaktywność wykresów zwiększa ich wartość jako narzędzia prezentacji danych, udostępniając użytkownikowi możliwości dostosowania wykresu do własnych potrzeb oraz pogłębienia informacji, które niesie.

Interaktywne wykresy dają duże możliwości, ale też są bardziej złożone. W większości przypadków, gdy chcemy tylko zaprezentować dane, nie ma sensu sięgać po interaktywne wykresy, bo to tylko niepotrzebnie skomplikuje interfejs. Interaktywne wykresy znajdą za to zastosowanie wszędzie tam, gdzie użytkownik będzie chciał na podstawie danych wnioskować, czyli między innymi w:

  • dashboardach, czyli raportach zestawiających najważniejsze informacje, służących podejmowaniu decyzji,
  • raportach online, np. serwisach korporacyjnych raportów rocznych,
  • aplikacjach umożliwiających analizę danych, np. business intelligence.

 

Podstawowe interakcje w wykresach

 

1. Pokazanie/ukrycie szczegółowych danych

Aby zachować przejrzystość wykresu ograniczamy prezentację wartości liczbowych odpowiadających poszczególnym jego punktom. Nie oznacza to, że nie możemy ich wcale pokazać. Dane te można wyświetlić na życzenie użytkownika, np. po najechaniu kursorem myszki na punkt wykresu. Ważne jest, aby chmurka (tooltip) z detalami danych:

  • pojawiała się w bezpośrednim sąsiedztwie odpowiadającego jej elementu wykresu,
  • uwidoczniła się bezzwłocznie po najechaniu kursorem na punkt,
  • nie zasłaniała ważnych danych wykresu,
  • dała się łatwo i szybko zamknąć.

Ponadto, punkt wykresu odpowiadający chmurce powinien być:

  • odpowiednio duży lub mieć dodatkową klikalną przestrzeń wokół siebie tak, aby użytkownik nie musiał celować kursorem w 1×1 px,
  • oznaczony jako aktywny, gdy chmurka jest widoczna.

 

Szczegółowe wartości punktu wykresu widoczne po najechaniu na niego kursorem myszy (http://www.highcharts.com/demo/)

Szczegółowe wartości punktu wykresu widoczne po najechaniu na niego kursorem myszy (http://code.google.com/apis/chart/interactive/docs/gallery/bubblechart.html)

Szczegółowe wartości punktu wykresu widoczne po najechaniu na niego kursorem myszy (http://bimeanalytics.com/showcase/)


 

2. Porównanie

Jedną z podstawowych funkcji wykresu jest porównanie danych. W tym celu możemy, analogicznie jak w poprzednim punkcie,  pokazać użytkowikowi jednocześnie kilka powiązanych ze sobą wartości.

Jednoczesne pokazanie powiązanych na wykresie wartości (http://www.amcharts.com/javascript/line-chart-with-multiple-value-axes/)

Jednoczesne pokazanie powiązanych na wykresie wartości (https://www.google.com/analytics)

Jednoczesne pokazanie powiązanych na wykresie wartości (http://www.highcharts.com/demo/line-ajax)

 

3. Sortowanie

Uporządkowane, posortowane wartości pozwalają na rangowanie danych. To, z kolei, ułatwia porównywanie ich między sobą.

Można wyróżnić dwa sposoby sortowania wykresu:

  1. Sortowanie odbywa się w tabeli powiązanej z wykresem, na wykresie bezpośrednio widać jego efekty.
  2. Sortowanie aktywujemy bezpośrednio z wykresu.

Sortowanie danych w tabeli przekłada się na ich kolejność na wykresie (http://code.google.com/apis/chart/interactive/docs/gallery/controls.html)

Lista rozwijana przy osi wykresu pozwala na wybór kolejności sortowania danych (http://code.google.com/apis/ajax/playground/?type=visualization#motion_chart)


 

4. Dodawanie/usuwanie zmiennych

Użytkownik może chcieć włączać lub wyłączać pewne dane z analizy w zależności od tego, co w danym momencie jest dla niego ważne i interesujące. Wykres powinien dostosowywać się do tak zmienionego zakresu danych. Ważne jest, aby użytkownik widział lub mógł łatwo dotrzeć do dostępnych zmiennych, także tych w danym momencie nieaktywnych.

Dodawanie/usuwanie serii danych z wykresu za pomocą checkboxów poza jego obszarem (http://people.iola.dk/olau/flot/examples/turning-series.html)

Legenda wykresu służy do pokazywania/ukrywania serii danych (http://www.amcharts.com/javascript/stacked-bar-chart/)

 

5. Filtrowanie

Filtrowanie pozwala zawęzić dane do podzbioru, który interesuje użytkownika, poprzez usunięcie z widoku wszelkich, zbędnych w danej chwili, elementów. Przykładowym rozwiązaniem pozwalającym na szybkie i przejrzyste filtrowanie wg wartości liczbowych jest tzw. suwak (slider). W celu zawężenia zawartości wykresu do kategorii wykorzystuje się drop-down (rozwijaną listę) bądź radio buttony (checkboxy, gdy umożliwiamy filtrowanie do kilku kategorii jednocześnie).

Przykład suwaka jako filtra danych liczbowych na wykresie (http://code.google.com/apis/ajax/playground/?type=visualization#numberrangefilter_control)

Wykorzystanie drop-downa do filtrowania kategorii danych wykresu (http://code.google.com/apis/ajax/playground/?type=visualization#categoryfilter_control)

 

6. Wyróżnienie

W niektórych sytuacjach chcemy podkreślić część informacji, ale zachować przy tym jej kontekst. Wówczas, zamiast odfiltrowywać dane,  lepiej posłużyć się kontrastem między wyróżnianą informacją, a  resztą wykresu stanowiącą jej tło. Dzięki temu użytkownik może skupić się na fragmencie danych bez tracenia całości z oczu.

Wykres konkret + kontekst (http://mbostock.github.com/protovis/ex/zoom.html)

Wykres konkret + kontekst (http://www.highcharts.com/demo/dynamic-master-detail)

 

7. Pogłębienie

Pogłębienie umożliwia dotarcie do szczegółowych danych krok po kroku. Zazwyczaj taki proces składa się z hierarchicznie ułożonych, indywidualnych widoków wykresów i pod-wykresów. Charakterystyczną cechą tej interakcji jest fakt, że schodząc na coraz bardziej szczegółowy poziom danych tracimy z oczu kontekst – przestaje on być dla nas ważny w danym momencie analizy.

Kliknięcie w słupek MSIE na wykresie otwiera nowy wykres prezentujący szczegółowe dane z MSIE (http://www.highcharts.com/demo/column-drilldown)

Kliknięcie w obszar wykresu mapy drzewa (treemap) otwiera nowy wykres prezentujący szczegółowe dane elementu (http://code.google.com/apis/ajax/playground/?type=visualization#tree_map)

 

8. Nawigowanie

Gdy wykres zawiera wiele treści trudno jest ją ogarnąć jednym spojrzeniem, warto umożliwić użytkownikowi nawigowanie po tak dużym zbiorze danych. W tym celu wykres można wyposażyć w funkcję przybliżania/oddalania zawartości (zooming) oraz przesuwania się po jej płaszczyźnie (panning). Kluczową kwestią jest zapewnienie użytkownikowi nie tylko łatwego sposobu przybliżania widoku wykresu, ale także jego oddalania oraz powrotu do domyślnego widoku.

 

Przybliżenie widoku wykresu (http://people.iola.dk/olau/flot/examples/zooming.html)

Przybliżenie widoku wykresu (http://www.highcharts.com/demo/combo-dual-axes)

Przesuwanie płaszczyzny wykresu (http://people.iola.dk/olau/flot/examples/navigate.html)

 

9. Dynamiczny wykres

Do prezentacji świeżych, aktualnych i często zmieniających się danych można zastosować animację czasu rzeczywistego. Przykładem danych, dla których takie przedstawienie będzie korzystne, są kursy akcji na giełdzie.

Ilustracje wykresów dynamicznych w akcji:

http://www.highcharts.com/demo/dynamic-update

http://people.iola.dk/olau/flot/examples/realtime.html

Analogiczną interakcję można zastosować do odtworzenia animacji danych historycznych. Dzięki temu będzie można obserwować dynamikę i kształt zmian w czasie:

http://code.google.com/apis/ajax/playground/?type=visualization#motion_chart
 

10. Zmiana typu wykresu

Zazwyczaj jeden wykres nie wystarczy do ukazania wszystkich informacji skrywających się w danych, dlatego niekiedy usprawiedliwione jest udostępnienie użytkownikowi możliwości zmiany typu wykresu. Dzięki temu będzie mieć on większą wolność w analizie danych i nowe perspektywy wnioskowania z nich.

Zmiana typu wykresu poprzez zakładki (http://code.google.com/apis/ajax/playground/?type=visualization#motion_chart_time_formats)

Edytor wykresu od Google (http://code.google.com/apis/ajax/playground/?type=visualization#chart_editor)

 

Podsumowanie

Powyższa lista nie wyczerpuje tematu interaktywności wykresów, a jedynie zaznacza podstawowe rozwiązania, które umożliwiają nie tylko graficzne, ale też interaktywne przedstawienie danych. Zanim jednak sięgniemy po którykolwiek ze sposobów „ożywienia” wykresów, odpowiedzmy sobie szczerze na pytanie, czy rzeczywiście jest to w danej sytuacji konieczne, aby nie wpaść w pułapkę przerostu formy nad treścią.

 

Autorka

Ewa Sobula

www: http://www.linkedin.com/pub/ewa-sobula/30/407/694
UX designer w Sabre Airline Solutions. Umiejętności badawcze i analityczne rozwijała na socjologii, by lepiej rozumieć użytkowników. Równolegle uczyła się tworzenia serwisów internetowych, by poznać technologiczne możliwości i ograniczenia. Teraz z przyjemnością łączy te kompetencje projektując i badając serwisy. Czytaj więcej
Tagi: , , , , ,