Wykres, którym można sterować. Nie zgub zakresu ani wybranego punktu

Palec przesuwa stronę, choć miał wskazać środę. Po chwili udaje się dotknąć punktu, ale podpis zasłania liczbę. W hipotetycznym panelu galerii sztuki wykres ma pomóc odczytać odwiedziny z konkretnego dnia. Na telefonie wymaga jednak zręczności, której nie przewidziano w opisie stanowiska opiekunki galerii.

Interaktywny wykres potrzebuje projektu czynności: wyboru okresu, wskazania punktu, odczytania jego znaczenia i powrotu do wcześniejszego widoku. Sama możliwość powiększenia obrazu nie wystarcza. Odbiorca powinien rozumieć, jak zmienił zakres i gdzie znajdują się dane potrzebne do odpowiedzi.

Zacznij od dwóch zadań, nie od gestów

Iga, wymyślona opiekunka galerii, chce porównać dwa tygodnie, a następnie odczytać odwiedziny w wybraną środę. Pierwsze zadanie dotyczy zakresu, drugie konkretnego punktu. Ich połączenie w jeden gest na polu wykresu może utrudnić rozpoznanie skutku. Użytkownik nie powinien zgadywać, czy przesunął okres, wybrał datę, czy tylko przewinął stronę.

Przy projekcie zapisz, jakie pytania uzasadniają interakcję. Jeśli Iga potrzebuje jedynie liczby z jednego dnia, lista dat z wartościami może być wygodniejsza niż bardzo gęsta linia. Jeśli szuka wzorca tygodniowego, wykres pomaga zobaczyć relacje. Można udostępnić oba sposoby odczytu, zachowując ten sam zbiór i znaczenie danych.

W3C WAI w materiale dla projektantów złożonych grafik uwzględnia ustalenie ich obsługi myszą, klawiaturą, dotykiem i głosem oraz dostępu do równoważnych opisów. To część pracy nad doświadczeniem użytkownika. Nie sprowadza się do przekazania wykonawcy obrazka i dopisku „dodać dostępność”.

Wygląd osi, podpisów i kolorów nadal powinien być czytelny, ale zasady wykresów w języku marki nie wyjaśnią same, co dzieje się po kliknięciu. Do wzorca komponentu dołącz stany przed wyborem i po nim oraz zachowanie przy zmianie zakresu. Taki zapis pozwala ocenić działanie, a nie tylko zgodność dwóch nieruchomych ekranów.

Wybrany okres musi być widoczny także po kliknięciu

Przyciski „Tydzień” i „Miesiąc” wymagają określenia, jakiego momentu dotyczą. Bieżący tydzień kalendarzowy różni się od ostatnich siedmiu dni. Miesiąc może być zakończony albo trwający. Nad wynikiem pokaż konkretny zakres i uzgodnij, czy jego granice są włączone. Iga powinna wiedzieć, czy porównuje pełne tygodnie, czy tydzień z trzema dniami obserwacji.

Jeżeli zakres można ustawić przez przeciągnięcie, zapewnij też wygodną drogę przez kontrolki. Mogą to być pola dat lub gotowe okresy odpowiadające zadaniu. Nie każ użytkownikowi trafiać w wąski uchwyt, aby przesunąć początek dokładnie o jeden dzień. Alternatywa powinna pozwalać uzyskać potrzebny zakres, nie tylko pokazać ogólną informację o wykresie.

W projekcie określ moment zastosowania zmiany. Przy dwóch polach dat można poczekać na potwierdzenie, zamiast wykonywać nowe pobranie po każdej wpisanej cyfrze. Jeśli aktualizacja następuje automatycznie, użytkownik powinien rozpoznać jej wynik i pozostać w przewidywalnym miejscu. Nie zmieniaj wybranego początku podczas poprawiania końca bez widocznej przyczyny.

Zakres bez wyników to odrębny stan. Komunikat może wskazywać, że dla wybranych dni nie ma obserwacji, i pozwalać wrócić do dostępnego okresu. Nie przesuwaj dat po cichu do najbliższego miejsca z danymi. W przeciwnym razie Iga może otrzymać czytelny wykres, który odpowiada na inne pytanie niż to, które właśnie zadała.

Czas danych także należy do kontekstu. Jeśli zakres obejmuje dzisiejszy dzień, suma może być jeszcze niepełna. Informacja o aktualności danych w panelu powinna towarzyszyć wynikowi i jego podsumowaniu. Nowy zakres nie oznacza automatycznie nowego pobrania wszystkich obserwacji, a nowy odczyt nie zamyka trwającego dnia.

Przy porównaniu dwóch okresów utrzymaj czytelne oznaczenie obu. Napis „poprzednio” nie wystarczy po zapisaniu obrazu lub udostępnieniu widoku. Zdefiniuj, co znaczy porównanie: odpowiadające dni tygodnia, te same daty innego miesiąca czy dwa ręcznie wybrane przedziały. Projektant powinien otrzymać tę regułę przed wyborem animacji przejścia.

Punkt potrzebuje tożsamości, nie tylko koloru

Szczegół powinien wskazywać serię, datę, wartość i jednostkę. „Środa: 18” nie wystarczy, jeśli na wykresie są odwiedziny wystawy i udział w warsztatach. Rozpoznanie punktu nie może zależeć wyłącznie od barwy linii. Podpis mówi, do której wielkości należy liczba, także wtedy, gdy serie przecinają się w tym samym miejscu. Jeśli w środę obie mają wartość 18, szczegół może pokazać obie nazwane pozycje. Gdy wybierana jest tylko jedna, odbiorca powinien móc przejść do drugiej bez polowania na sąsiedni piksel. Reguła wyboru najbliższego punktu wymaga próby na rzeczywiście gęstym fragmencie, bo wygodna demonstracja z trzema kropkami niewiele mówi o całym sezonie.

Oznacz osobno punkt pod wskaźnikiem i punkt wybrany do dalszego odczytu. Pierwszy może zmieniać się podczas przesuwania myszy. Drugi powinien pozostać rozpoznawalny, jeśli Iga chce przejść do objaśnienia albo skopiować informację. Jeśli podpowiedź znika przy próbie najechania na jej tekst, interakcja nie pozwala dokończyć zadania.

Na telefonie zwykłe dotknięcie może otworzyć trwały szczegół pod wykresem lub w przewidzianym panelu. Użytkownik powinien rozumieć, jak go zamknąć i wrócić do wykresu. Jeśli szczegół otwiera osobne okno, po zamknięciu fokus — wskazanie elementu odbierającego działania klawiatury — powinien wrócić do punktu lub kontrolki, z której je otwarto. Gdy ten punkt zniknął po zmianie zakresu, projekt musi wskazywać inne logiczne miejsce powrotu, na przykład początek wykresu z aktualnym opisem okresu. Wyświetlenie drobnego okienka dokładnie pod palcem utrudnia odczyt. Nie zakładaj też, że podwójne stuknięcie lub dłuższe przytrzymanie będzie oczywistą instrukcją dla każdej osoby.

Klawiatura potrzebuje przewidywalnego wejścia, przemieszczania się między wartościami i wyjścia. Fokus powinien być widoczny i nie znikać pod podpisem. Przy wielu punktach określ sposób poruszania się tak, aby człowiek nie musiał przechodzić przez cały rok jednym długim szeregiem naciśnięć klawisza Tab.

Highcharts opisuje moduł dostępności dodający nawigację klawiaturą po punktach, menu i pozostałych kontrolkach wykresu. Jest to możliwość konkretnej biblioteki. Odbiór własnego komponentu wymaga właściwej konfiguracji i rzeczywistej próby; obecność nazwy modułu w projekcie nie potwierdza całej drogi od wyboru okresu do odczytu środy.

Dla czytnika ekranowego potrzebne jest zrozumiałe wprowadzenie: co pokazuje wykres, jaki okres wybrano i jak można dotrzeć do szczegółów. Czytnik przekazuje zawartość między innymi głosem. Odczyt pojedynczego punktu bez nazwy serii i jednostki może dawać liczbę, której nie da się użyć. Opis powinien zachowywać te same rozróżnienia co widoczny szczegół.

Dokumentacja zaawansowanej konfiguracji Highcharts opisuje opisy punktów i serii, a przy dużych zbiorach — ograniczenie domyślnego udostępniania poszczególnych punktów czytnikom. Nie należy więc zakładać identycznego odczytu małej i dużej serii. Dla własnego wykresu trzeba ustalić, które informacje i czynności użytkownik ma otrzymać przy rzeczywistej liczbie danych.

W projekcie interakcji Aeneia Design można rozpisać te zachowania wraz z treścią szczegółów i widokiem na mniejszym ekranie. Wymagania wynikają z zadania Igi: wybrać właściwą środę i odczytać odwiedziny tej samej serii każdą z przewidzianych dróg. Nie musimy projektować innego znaczenia danych dla każdego urządzenia.

Powiększenie i ukrycie serii zmieniają warunki odczytu

Po zawężeniu okresu określ, czy oś wartości zachowuje skalę, czy dopasowuje ją do widocznych danych. Oba zachowania wymagają czytelnego pokazania zakresu. Jeśli punkt tej samej serii leży teraz znacznie wyżej w polu wykresu, Iga powinna rozumieć, czy wzrosła liczba, czy zmienił się sposób przedstawienia. Wybrany fragment nie powinien przypadkiem sugerować całorocznego trendu.

Jeśli wykres łączy wiele obserwacji w jeden punkt, szczegół musi mówić, co ten punkt oznacza. Średnia dzienna w tygodniu nie jest liczbą odwiedzin konkretnej środy. Przed wyborem formy uzgodnij agregację, czyli sposób łączenia obserwacji. Po powiększeniu dane mogą stać się bardziej szczegółowe, ale użytkownik powinien rozpoznać zmianę: z tygodniowej średniej przeszedł do wartości dla poszczególnych dni. Sam napis „dokładniej” nie wyjaśnia, dlaczego liczba przy tej samej okolicy osi jest teraz inna.

Ukrycie jednej serii przez legendę również jest czynnością. Pokaż stan jej widoczności i drogę przywrócenia. Jeżeli wszystkie serie zostały ukryte, nie prezentuj pustego pola jako braku danych. Wartość istnieje, tylko użytkownik wyłączył jej widok. Komunikat i dostępna czynność powinny odpowiadać tej przyczynie.

Dane alternatywne, na przykład tabela, muszą pozostawać zgodne z wybranym zakresem i serią. Jeśli wykres pokazuje tydzień, a tabela cały rok, wyjaśnij różnicę albo zsynchronizuj widoki. Sama obecność tabeli nie odtwarza automatycznie wszystkich interakcji. Potrzebna jest wygodna droga do odpowiedzi na to samo pytanie, także gdy odbiorca nie korzysta z linii na ekranie.

Przy ocenie odczytu wykresów przez AI sprawdza się między innymi osie, serie i brakujące punkty. Człowiek sterujący wykresem także potrzebuje tej podstawy. Właściwa liczba może zostać źle zrozumiana, jeśli po interakcji pozostał dawny podpis lub ukryto informację o niepełnym okresie.

Powrót ma przywracać konkretny stan

Przycisk „Pokaż cały okres” nie powinien bez wyjaśnienia usuwać wszystkich filtrów. Iga może chcieć rozszerzyć czas, nadal oglądając tę samą wystawę. Jeśli potrzebne są dwa różne działania, nazwij je osobno. Reset zakresu i powrót do początkowej konfiguracji to inne obietnice.

Po zmianie okresu wybrana środa może znaleźć się poza widokiem. Zdecyduj, czy usuwasz wybór z czytelnym komunikatem, czy zachowujesz go jako informację poza bieżącym zakresem. Nie przenoś zaznaczenia na inny punkt tylko dlatego, że zajmuje podobne miejsce. Punkt powinien mieć tożsamość opartą na właściwej dacie i serii, a nie na numerze widocznej pozycji.

Podobnej reguły potrzebuje aktualizacja danych. Jeśli wartość dla środy się zmieniła, szczegół musi odpowiadać nowemu stanowi albo wyraźnie pokazywać zachowaną wersję. Po powrocie z innej zakładki użytkownik powinien rozpoznać okres, serię i wybór, na których pracował. Przypadkowe odtworzenie samego powiększenia bez filtrów może pokazać inny zbiór w znajomym kadrze.

Przy eksporcie danych ustal, czy pobierany materiał dotyczy aktualnego zakresu, czy całego źródła. Przy obrazie dołącz widoczne daty i nazwy serii. Zrzut nie zachowa ukrytych objaśnień i nie pozwoli później przesunąć punktu. Informacja potrzebna do jego interpretacji powinna podróżować razem z nim.

Przed odbiorem dostępności strony przejdź konkretne zadanie każdym uzgodnionym sposobem. W projekcie galerii będzie nim wybór tygodnia, odczyt środy i powrót do pełnego okresu bez utraty wystawy. Zapisz, gdzie osoba straciła kontekst albo nie mogła wykonać czynności. Nie kończ na tym, że potrafiła otworzyć wykres.

Na odbiór przygotuj dwa okresy z różnymi wartościami oraz dzień, w którym obie serie się przecinają. Iga ma odczytać właściwą liczbę, zmienić zakres i wrócić do porównania. Jeżeli po tej drodze nadal potrafi powiedzieć, jaki dzień i serię ogląda, interakcja zachowała sens danych. Sama płynność przesuwania linii tego nie rozstrzyga.