Najlepsze praktyki w zakresie projektowania wizualizacji

Zaprowadzanie porządku w aplikacjach

Przeładowanie aplikacji informacjami utrudnia znalezienie ważnych rzeczy. Współczesne interfejsy użytkownika odznaczają się większą przejrzystością, prostotą i bardziej płaską strukturą. Uproszczone wzornictwo subtelnie naprowadza użytkownika i pozwala mu się skupić.

Mniej oznacza więcej

Użytkownicy często próbują wprowadzić jak najwięcej informacji do aplikacji. Wykresy liniowe z kilkoma miarami mogą być mylące i trudne do interpretowania. Aby temu zaradzić, należy utworzyć kilka mniejszych wizualizacji i rozmieścić informacje na stronie. Takie rozwiązanie ułatwia też użytkownikowi porównywanie wizualizacji obok siebie. Można również korzystać z alternatywnych wymiarów i miar, które pozwolą użytkownikowi szybko przełączać miary bez przytłaczania wizualizacji nadmiarem informacji. Więcej informacji zawiera temat Zmiana danych wizualizacji.

Estetykę i funkcjonalność aplikacji można poprawić na różne sposoby. W zależności od odbiorcy docelowego i rodzaju wyróżnianych danych sposób zaprojektowania wizualizacji może istotnie wpływać na interpretację danych.

Poznaj ograniczenia

Odbiorcy wizualizacji mogą korzystać z ekranów o ograniczonej wielkości lub rozdzielczości. Aplikacja Qlik Sense pozwala eliminować niektóre z tych ograniczeń, wykorzystując projektowanie responsywne. Jeśli jednak ilość miejsca lub rozdzielczość jest zbyt ograniczona, wówczas konieczne są pewne modyfikacje dotyczące projektu. Mogą one obejmować między innymi:

• Podzbiór danych wyświetlany na wykresach słupkowych i wykresach liniowych. Gdy liczba wartości wymiaru przekroczy szerokość wizualizacji, wówczas wyświetlany jest wykres miniaturowy z paskiem przewijania.
• Zwinięte menu przeznaczone do wybierania filtrów danych. Jeśli liczba wartości wymiaru przekracza ilość miejsca dostępną w panelu filtru, wówczas menu jest zwinięte. W celu otwarcia nowego panelu odbiorca aplikacji musi kliknąć nazwę wymiaru w tytułu panelu filtrowania. Następnie może dokonać wyborów w nowym panelu. Dodatkowo, gdy ilość miejsca jest ograniczona, nazwy wymiarów mogą być wyświetlane jako wielokropki w tytułach na panelu filtrowania. W celu wyświetlenia nazwy panelu filtrowania odbiorca aplikacji musi klikać wielokropki.
• Obcięte nazwy w legendach wykresów. Nazwy, które są za długie i nie mieszczą się w miejscach dostępnych dla wymiarów i miar, są obcinane. Na końcu obciętej nazwy dodawane są wielokropki. W celu pokazania całej nazwy użytkownik aplikacji może umieścić wskaźnik myszy nad obciętą nazwą.
• Usunięcie legend, etykiet i tytułów.

Aby radzić sobie z niektórymi z tych problemów, odbiorcy aplikacji mogą rozszerzać wizualizacje. Zalecamy jednak testowanie aplikacji na urządzeniach, na których te aplikacje mogą być używane. Można również korzystać z różnych narzędzi do testowania, takich jak tryb projektowania responsywnego w przeglądarce Firefox (Ctrl + Shift + M). W razie potrzeby można również przenosić wizualizacje do nowych arkuszy, zmniejszać ilość danych pokazywanych w wizualizacjach itp.

Ułatwienia dostępu do kolorów

W przypadku osób z zaburzeniami widzenia kolorów gama stosowanych kolorów musi być węższa. Takie osoby mogą interpretować wizualizację niezgodnie z oczekiwaniami.

Dla niektórych ludzi kolory czerwony i zielony są widoczne jako żółty i brązowy. Jest to najczęstsza forma zaburzenia rozpoznawania barw. Warto o tym wspomnieć, ponieważ kolor czerwony często jest wykorzystywany w wizualizacjach danych — szczególnie w finansach — do przekazywania informacji negatywnych.

Oznaczenie wskaźnika KPI kolorem czerwonym lub zielonym może być zatem dezorientujące. Aby wizualizacje były bardziej czytelne dla wspomnianych osób, można jako wskaźników użyć kształtów z kolorami. Na przykład można użyć czerwonego pustego okręgu w celu oznaczenia wartości negatywnych, zielonego wypełnionego okręgu w celu oznaczenia wartości pozytywnych i dodać trójkąt jako znak ostrzegawczy, który pojawia się tylko w przypadku, gdy status wskaźnika KPI jest na nieakceptowalnym poziomie.

Linie, słupki i wycinki kół mogą być trudne do rozróżnienia dla osób nierozróżniających kolorów.

Więcej informacji zawiera temat Zmiana wyglądu wizualizacji.

Rozmieszczenie filtrów i ikon

Filtry i ikony stanowią kluczową część wizualizacji danych, ale ich właściwe rozmieszczenie i sortowanie może być trudne. Bazując na kilku ugruntowanych zasadach projektowania, często można przewidzieć miejsce, od którego użytkownik zacznie czytać tekst.

Umiejscowienie po lewej stronie

Kilka popularnych witryn internetowych wykorzystuje filtry i kafelki nawigacyjne znajdujące się po lewej stronie. Jest to związane z tym, że w wielu językach tekst jest czytany od lewej do prawej. Dlatego użytkownicy tych języków najczęściej spoglądają na lewy stronę ekranu. Użytkownicy, którzy przeglądają zawartość, przeważnie patrzą na lewą stronę ekranu. Im dalej w prawo przesunięte są obiekty, tym rzadziej będą na nie spoglądać użytkownicy. Jeśli wszystkie filtry i ikony są ułożone w stosie pionowym po lewej stronie, mają równą wagę.

Z kolei w przypadku języków czytanych od prawej do lewej obowiązuje odwrotna orientacja ekranu. Należy o tym pamiętać, jeśli tworzone aplikacje będą tłumaczone na te języki.

Umiejscowienie u góry

Innym często stosowanym rozwiązaniem jest umieszczenie ikon i filtrów wzdłuż górnej krawędzi aplikacji. W takim przypadku filtry i ikony nie znajdują się po lewej stronie, dzięki czemu pozostaje więcej miejsca na większe wizualizacje z rozbudowanymi strukturami menu. Gdy filtry i ikony znajdują się nad wizualizacją, są traktowane jako obiekty odseparowane od zawartości znajdującej się poniżej. Dzięki temu odbiorca wie, że najważniejsze są filtry lub ikony. Jeśli wszystkie filtry i ikony znajdują się u góry i są rozmieszczone obok siebie, wówczas odbiorca przypisuje największe znaczenie obiektowi, który znajduje się skrajnie po lewej.

Więcej informacji zawiera temat Structuring an app using sheets.

Hierarchia informacji

Czasami wymagane jest, aby czytelnik traktował niektóre wizualizacje jako ważniejsze od innych. W celu zaprezentowania hierarchii informacji wystarczy skorzystać z kilku kluczowych sprawdzonych praktyk projektowych. Można na przykład użyć różnych rozmiarów, aby wyróżnić niektóre wizualizacje. Informacja o większym rozmiarze jest traktowana jako ważniejsza, a zwiększając rozmiar czcionki lub wykresu, można wskazać odbiorcy przekaz, z którym powinien zapoznać się najpierw.

Umiejscowienie na stronie również odgrywa istotną rolę w tworzeniu hierarchii informacji. Informacje u góry strony są odbierane jako ważniejsze niż widoczne u dołu, ponieważ odbiorca zapoznaje się z nimi na początku. Informacje na pierwszej stronie są traktowane jako ważniejsze niż informacje na ostatniej stronie.

Dodawanie kontekstu do wskaźników KPI

Wskaźniki KPI to idealne rozwiązanie do komunikowania ważnych idei w aplikacji. Wartości wskaźników KPI nie udostępniają jednak żadnego kontekstu dotyczącego liczb ani obliczeń w tle. Zielona lampka obok wskaźnika KPI nie informuje odbiorcy o tym, czy cel został osiągnięty z trudnością, czy z dużym zapasem.

Aby osadzić wskaźniki KPI w odpowiednim kontekście, należy podać mniejszą czcionką dodatkowe informacje obok wartości danego wskaźnika. Można na przykład porównać bieżącą wartość wskaźnika KPI z jego wartością za poprzedni rok. W celu przekazania informacji o bieżącym trendzie można także dodać niewielki wykres słupkowy bez osi i wartości.

Unikaj pułapek wizualizacji danych

Żeby wizualizacja danych przynosiła maksymalne korzyści, trzeba wystrzegać się typowych błędów projektowych. Oto najczęstsze źródła błędów:

Nadużywanie kolorów

Nie przesadzaj z kolorami. Pamiętaj, że użycie niewłaściwego koloru w nieodpowiednim miejscu może wręcz przeszkadzać zamiast pomagać. Dodatkowo ten sam kolor może mieć różne znaczenia w różnych częściach świata.

Nieprawidłowe stosowanie wykresów kołowych

Unikaj porównywania dwóch wykresów kołowych jeden obok drugiego. Uważaj, by nie wciskać zbyt wielu informacji do jednego wykresu.

Bałagan wizualny

Nadmiar informacji jest wrogiem czytelności. Używaj maksymalnie dziewięciu wskaźników KPI i usuwaj wszelkie zbędne elementy wizualne.

Przewaga formy nad treścią

W przypadku wizualizacji piękna niekonieczne oznacza skuteczna. Pamiętaj, by zawsze kierować się sprawdzonymi praktykami projektowymi.

Zła jakość danych

Wszelkie problemy z danymi trzeba zauważyć i skorygować przed rozpoczęciem prezentacji. Nie pozwól, by Twoja wizualizacja była oceniana na podstawie złej jakości danych.