Przejdź do treści
AENEIA SIGNAL
Design / Signal

Wykres w kolorach marki: najpierw daj odczytać dane

Jak połączyć wykresy z językiem marki bez gubienia danych? Ustal role kolorów, skalę, podpisy i czytelny odpowiednik treści na stronie.

Ilustracja: obserwatorium z widokiem na górski krajobraz o świcie
W tym artykule

Cztery tygodnie pracy, cztery słupki i cztery kolory z księgi marki. Pierwszy jest bordowy, drugi złoty, trzeci granatowy, czwarty jasnoszary. Odbiorca szuka legendy: czy złoty oznacza najlepszy wynik, a szary tydzień bez danych? Tymczasem autor po prostu chciał wykorzystać całą paletę. Wykres opowiedział dodatkową historię, której w arkuszu nie było.

Przyjmijmy fikcyjny raport pracowni: w kolejnych tygodniach zarezerwowano 18, 26, 22 i 30 godzin pracy. Strona ma pomóc ocenić zarezerwowany czas oraz przygotować rozmowę o terminie nowego zlecenia. Marka powinna być rozpoznawalna, lecz najpierw człowiek musi odczytać, co porównuje. Dopiero potem może docenić elegancję bordo.

Projekt wykresu zaczyna się od uzgodnienia miary, zakresu i pytania. Kolor, krój pisma oraz sposób rysowania linii dopasujesz do tych ustaleń. Ten tekst dotyczy prezentacji danych na stronie i w materiałach marki. Poprawność wartości oraz definicję zarezerwowanej godziny musi wcześniej potwierdzić osoba odpowiedzialna za raport.

Co dokładnie ma odczytać odbiorca?

W naszym przykładzie to nie są godziny już wykonanej pracy ani liczba zamówień. To rezerwacje według określonego stanu. Tytuł „Obciążenie pracowni” pozostawia tę różnicę w domyśle. „Zarezerwowane godziny pracy w kolejnych tygodniach” daje konkretny początek. W objaśnieniu podaj, którego stanowiska lub zespołu dotyczy wykres i kiedy przygotowano zestawienie.

Jeśli człowiek chce sprawdzić, w którym tygodniu rezerwacji jest najwięcej, proste słupki mogą wystarczyć. Gdy ma odczytać konkretną wartość dla konkretnego terminu, równie przydatne bywa krótkie zestawienie liczb. Nie zamieniaj każdej tabeli w obraz tylko dlatego, że sekcja strony nosi nazwę „Wyniki”. Wybór formy powinien odpowiadać zadaniu.

Zachowaj naturalną kolejność tygodni. Ułożenie słupków od najwyższego do najniższego ułatwiłoby wyłonienie maksimum, ale ukryłoby przebieg kalendarza. Odbiorca pyta przecież o termin, więc chce wiedzieć, co następuje po czym. Jeśli dodatkowo wyróżniasz wybrany tydzień, podpisz go datami, zamiast używać etykiety „ostatni”. Po zapisaniu obrazu na komputerze to słowo szybko traci punkt odniesienia.

Oddziel obserwację od obietnicy. Z faktu, że w tygodniu zapisano 18 godzin, nie wynika automatycznie możliwość przyjęcia każdego nowego zamówienia. Mogą istnieć inne ograniczenia, których ten wykres nie obejmuje. W podpisie powiedz, do czego służy raport, i wskaż właściwy kolejny krok. Nie projektuj przycisku „Zarezerwuj wolne miejsce” wyłącznie na podstawie niskiego słupka, jeśli dane tego nie potwierdzają.

Ustal, czy pokazujesz stan o danej godzinie, wynik zamkniętego okresu czy materiał planistyczny. Rezerwacje mogą się zmienić, więc nazwa okresu i chwila aktualizacji pełnią różne funkcje. Nie zastępuj jednej drugą. Odbiorca powinien wiedzieć zarówno, jakiego tygodnia dotyczy wartość, jak i kiedy ostatnio ją sprawdzono.

Jeśli zamiast liczby godzin pokazujesz wykorzystanie dostępnej puli, nazwij również tę podstawę. Taka sama rezerwacja może oznaczać inne obciążenie w tygodniu z mniejszą dostępnością zespołu. Nie podmieniaj więc osi z godzin na procenty bez zmiany tytułu i objaśnienia miary. Gdy do wykresu dodajesz linię dostępności, wyjaśnij, czy jest stała, czy dotyczy każdego tygodnia osobno. Osoba odpowiedzialna za raport powinna zatwierdzić tę definicję przed wyborem formy graficznej. Odbiorca ma porównać właściwe wielkości, a nie samodzielnie odtwarzać plan czasu pracy.

Każdy kolor powinien mieć zadanie

Jeżeli wszystkie cztery słupki oznaczają tę samą miarę w kolejnych tygodniach, możesz narysować je jednym kolorem. Dodatkową barwę zachowaj na wskazanie, które ma sens w zadaniu, na przykład wybranego przez odbiorcę terminu. Wtedy kolor odpowiada konkretnej relacji, a nie kolejności pól w firmowym wzorniku.

Government Analysis Function w poradniku o kolorach zaleca używanie barw do pokazania użytecznych różnic w danych i zachowanie tego samego koloru dla tej samej zmiennej w serii wykresów. Nie każda kategoria potrzebuje osobnego koloru.

Przełóż to na własne reguły marki. Bordo może wyróżniać analizowany tydzień, a spokojniejszy kolor pokazywać pozostałe. Niech przy tym to samo bordo na kolejnym wykresie nie zmienia bez wyjaśnienia znaczenia na „praca wykonana”. Osoba przechodząca między sekcjami nie powinna za każdym razem uczyć się od nowa całego słownika.

Zastanów się również, czy akcent marki nie przypomina alarmu. Jeśli czerwone oznaczenie w innych częściach serwisu sygnalizuje problem, czerwony słupek może zostać tak odczytany. Rozwiązaniem nie musi być zmiana tożsamości marki. Można użyć innego sposobu wyróżnienia, podpisać wybrany element albo zostawić firmowy akcent w tytule i obramowaniu sekcji.

Złoty kolor dobrze widoczny na ciemnej okładce nie musi działać w cienkiej linii na białej stronie. Sprawdź rzeczywiste zestawienie: znak danych, tło, grubość i podpis. Paleta wykresu może potrzebować odcienia przygotowanego do tej funkcji. Nazwij jego rolę i przekaż zasadę wraz z tokenami projektowymi marki, aby kolejny autor nie wybierał przypadkowej próbki.

Nie używaj przezroczystości jako jedynego sposobu oznaczenia danych mniej pewnych. Po zmniejszeniu wykresu taki fragment może po prostu zniknąć. Jeżeli wartości są planowane albo niepełne, dodaj wyraźny podpis i rozpoznawalny sposób przedstawienia tego stanu. Odbiorca ma poznać status danych, a nie oceniać, czy monitor wyświetla nieco jaśniejsze bordo.

Dojrzała badaczka testuje czerwony elastyczny materiał rękawicą z porcelanowymi końcówkami.
Fotografia koncepcyjna AeneiaMateriał, który pamięta użycie

Wykres musi zachować sens bez rozpoznania barwy

Dwie serie przedstawione tylko kolorem wymagają ciągłego zerkania do legendy. Jeśli pokazujesz rezerwacje i wykonanie, podpisz je bezpośrednio tam, gdzie da się je czytelnie rozdzielić. Przy liniach możesz dodatkowo zastosować różny wzór, a przy punktach rozpoznawalne znaczniki. Wybierz rozwiązanie pasujące do gęstości danych i sprawdź je po zmniejszeniu.

W3C w objaśnieniu kryterium 1.4.1 wyjaśnia, że kolor nie może być jedynym wizualnym sposobem przekazywania informacji. Dodatkowa widoczna wskazówka może przyjąć postać tekstu lub kształtu. To kryterium dotyczy rozpoznania znaczenia, nie całego odbioru dostępności wykresu.

Zapis „bordowy słupek pokazuje…” zastąp nazwą miary lub okresu. Ten sam podpis powinien działać w wydruku, w rozmowie i przy odczycie bez obrazu. Jeżeli w treści porównujesz tydzień od 9 do 15 listopada z następnym, nazwij oba okresy. Po przesunięciu elementów na telefonie określenie „ten po lewej” może przestać wystarczać.

Przy naszym krótkim raporcie obok wykresu można podać cztery wartości i ich zakres. Krótki opis wyjaśni, że największą liczbę zarezerwowanych godzin pokazuje czwarty tydzień. Nie ograniczaj opisu do „wykres obciążenia”. Jeśli celem jest odczyt dokładnych liczb, udostępnij je w uporządkowanej treści, z jednostką i datami. Dłuższe zestawienie wymaga osobnej decyzji o organizacji; pomaga w niej tekst o tabelach porównawczych na telefonie.

Wersja tekstowa i wykres muszą pochodzić z tego samego stanu danych. Po korekcie jednej wartości popraw oba miejsca. Inaczej strona poda dwie odpowiedzi zależnie od sposobu czytania. Tak samo potraktuj plik do pobrania, jeśli go oferujesz: podpisz zakres i nie zostawiaj starego eksportu obok świeżego wykresu.

Skala i brak wartości też należą do języka wizualnego

Dla prostego porównania godzin pokaż skalę pozwalającą uczciwie ocenić długości słupków. Zmiana początku osi może zmienić wizualny rozmiar różnicy. Jeśli stosujesz szczególny zakres albo inną postać wykresu, objaśnij wybór i oceń, czy pasuje do pytania odbiorcy. Dekoracyjny skrót nie powinien zamieniać kilku godzin w pozorną przepaść.

Przy słupkach z naszego przykładu ustal punkt odniesienia od zera i zachowaj jednakowe szerokości. Ozdobne zakończenie nie może utrudniać wskazania, gdzie kończy się wartość. Jeśli marka używa miękkich kształtów, sprawdź je na małych i dużych liczbach, zanim wpiszesz zaokrąglenie do wzorca. Szczególnie oceń elementy blisko zera: nie powinny otrzymywać minimalnej dekoracyjnej wysokości sugerującej istniejącą rezerwację. Styl da się zachować także w nagłówku i otoczeniu wykresu, bez poprawiania samych danych.

W zestawie porównywanych wykresów uzgodnij wspólną skalę albo wyraźnie pokaż jej zmianę. Dwa słupki o tej samej wysokości na sąsiednich kartach nie powinny sugerować tej samej wartości, gdy osie mają zupełnie inne zakresy. Jeżeli celem jest oddzielne pokazanie przebiegu dwóch miar, nazwij to zadanie, zamiast liczyć na samodzielne odkrycie różnicy przez odbiorcę.

Brak danych nie oznacza zera. Gdy nie znamy rezerwacji dla trzeciego tygodnia, nie rysuj zwykłego słupka o zerowej wysokości. Oznacz brak oraz jego zakres. Nie łącz też fragmentów tak, by nieobserwowany okres wyglądał jak zmierzona zmiana. Sposób sprawdzania podobnych odczytów rozwija tekst o tym, jak AI czyta osie, skale i brakujące punkty. Projektant powinien najpierw usunąć pułapkę, którą później miałby rozpoznawać czytelnik.

W raporcie z możliwością filtrowania pokaż wybór przy samym wyniku. Po przejściu z całej pracowni do jednego stanowiska zmienia się zakres zestawienia; jeśli zmienia się także miara, pokaż to osobno. Zapisany zrzut powinien zawierać dość informacji, by dało się go zrozumieć bez pamiętania poprzednich kliknięć. Nie pozwól, żeby podpis nadal mówił o całym zespole, gdy wykres obejmuje jedno stanowisko.

Zaprojektuj osobne komunikaty dla wczytywania, braku pasujących danych i błędu pobrania. Pusty obszar wykresu nie wyjaśnia, który z tych stanów wystąpił. Po zmianie filtra nie pokazuj starych słupków pod nowym tytułem tak, jakby wynik już się odświeżył. Zostaw wybór odbiorcy przy komunikacie i daj właściwą możliwość dalszego działania: zmianę ograniczenia albo ponowienie próby. To część tego samego wzorca prezentacji, który obejmuje kolory i podpisy, bo wpływa na znaczenie odczytywanego wyniku.

Reguły sprawdź na gotowej stronie, a nie tylko w programie graficznym. Na telefonie mogą zniknąć jednostki, podzielić się daty albo zderzyć podpisy punktów. Jeśli szczegół pokazuje się dopiero po najechaniu myszą, uzgodnij równoważny sposób dotarcia do niego dotykiem i klawiaturą. Zmniejszenie obrazu nie jest pełnym projektem mniejszego widoku.

Oceń także wersję na ciemnym tle. Skopiowanie tych samych barw może zmienić ich relacje z tłem oraz czytelność podpisów. Próbę osadź w szerszych kryteriach trybu ciemnego strony firmowej. Nie trzeba przy tym zmieniać znaczenia serii między trybami: rezerwacje pozostają rezerwacjami, nawet jeśli ich odcień wymaga dopasowania.

Do odbioru przygotuj dwa pytania o gotowy wykres: ile godzin zapisano w wybranym tygodniu i czego te dane nie potwierdzają. Poproś osobę o wskazanie podstawy odpowiedzi. Błąd odczytu może ujawnić zbyt odległą legendę, nieczytelną jednostkę lub niejednoznaczny tytuł. Nie zakładaj z góry, że wystarczy mocniejszy kolor.

Zasady przekaż także autorom firmowych prezentacji. Powinni otrzymać przykład z opisanymi rolami podpisów, a nie samą listę kodów barw. W ramach projektowania strony i materiałów Aeneia Design ustal, które wykresy stanowią wzorzec i jak sprawdza się ich aktualizację. Gdy odbiorca odczyta 30 godzin, rozpozna właściwy tydzień i zrozumie zakres tej liczby, wykres może spokojnie wyglądać jak twoja marka. Nie musi przy okazji używać wszystkich jej kolorów.

Aeneia / Redakcja Aeneia

Tekst redakcyjny. Linki do źródeł znajdziesz w treści.

Źródła sprawdzone: .

O Aeneia
Aeneia / Initium

Od wiedzy do decyzji

Opowiedz nam, co chcesz uporządkować. Ustalimy, od czego zacząć.

Przejdź do kontaktu