Dostępny wykres w aplikacji: jak przekazać wynik także bez odczytywania koloru

Na wykresie miesięcznych zamówień dwie linie biegną blisko siebie. Zielona pokazuje zamówienia przyjęte, czerwona - zrealizowane. Legenda wygląda porządnie, ale osoba, która nie rozróżnia tych barw, musi zgadywać, która linia prowadzi do którego wyniku. Jeśli wykres działa tylko po najechaniu myszą, równie trudne zadanie czeka użytkownika klawiatury.

Dostępny wykres w aplikacji pozwala odczytać znaczenie danych na różne sposoby. Pomagają w tym czytelne nazwy, podpisy, zróżnicowane kształty lub linie, opis oraz tabela z tymi samymi wartościami. Sposób prezentacji trzeba dobrać do pytania, na które wykres odpowiada. Jeden ogólny tekst alternatywny nie wyjaśni całej interaktywnej analizy.

Poniższy przykład jest fikcyjny. Jeśli planujesz dashboard, wyślij brief z opisem odbiorców, decyzji i przykładem danych, które mają zobaczyć. Do pierwszej rozmowy wystarczy zestaw wymyślonych wartości, bez danych klientów i informacji poufnych.

Zacznij od pytania, nie od rodzaju wykresu

Wyobraźmy sobie zespół obsługujący zamówienia. Kierowniczka chce sprawdzić, czy liczba spraw czekających na realizację rośnie z miesiąca na miesiąc. Pracownik działu potrzebuje natomiast przejść od danego okresu do listy zleceń. Ten sam zestaw danych może wspierać obie osoby, ale nie każda potrzebuje identycznego widoku.

Przed narysowaniem linii ustalcie, co oznaczają przyjęte i zrealizowane zamówienia oraz jak przypisuje się je do miesiąca. Czy liczy się datę wpłynięcia, czy zakończenia? Czy korekta wcześniejszego wpisu zmienia wynik poprzedniego okresu? Te pytania dotyczą także osób, które korzystają z tabeli. Dostępny interfejs nie naprawi niejasnej definicji wskaźnika.

W artykule o definicjach wskaźników na dashboardzie pokazujemy, jak uzgodnić znaczenie liczby. Dopiero potem można ocenić, czy wykres rzeczywiście pokazuje to, czego potrzebuje odbiorca. Osobno ustalcie jednostkę, zakres dat i sposób oznaczenia brakującej wartości.

Zapiszcie też zadanie testowe: „porównaj liczbę zamówień przyjętych i zrealizowanych w maju”. Użytkownik powinien znaleźć wartości bez znajomości nazwy biblioteki wykresów. Jeśli odpowiedź wymaga otwarcia szczegółów, droga do nich musi być zrozumiała również poza samym rysunkiem.

Nie każ kolorem wykonywać całej pracy

Kolor może pomagać w odróżnieniu serii, lecz informacja nie powinna zależeć wyłącznie od niego. Przy liniach można zastosować inne rodzaje kreski, znaczniki punktów oraz nazwy umieszczone blisko danych. Na wykresie słupkowym przydają się podpisy kategorii i wartości. Dobór rozwiązania zależy od liczby serii oraz rozmiaru widoku.

Wróćmy do zamówień. Linię przyjętych można przedstawić jako ciągłą z okrągłymi punktami, a zrealizowanych jako przerywaną z kwadratowymi. Legenda wyjaśnia oba oznaczenia, a tabela podaje dokładne wartości. Taki przykład nie jest gotowym wzorem dla każdego wykresu: przy gęstych danych znaczniki mogą się nakładać i wymagać innego układu.

Zadbajcie o widoczność linii, tekstu i elementów sterowania na tle. Samo wybranie dwóch odmiennych odcieni nie wystarczy, jeśli jedna seria znika na jasnej siatce lub po nałożeniu na drugą. Warto obejrzeć wykres w skali szarości, przy powiększeniu oraz na mniejszym ekranie. To pomocne próby, ale nie zastępują oceny właściwych kryteriów dostępności.

Jeżeli wykres zawiera próg alarmowy, pokażcie także jego nazwę i wartość. Czerwona strefa bez podpisu nie wyjaśnia, czy problem dotyczy opóźnienia, błędu pomiaru czy przekroczenia uzgodnionego poziomu. Dla użytkownika ważne jest znaczenie granicy, nie sam fakt, że ktoś nadał jej wyrazisty kolor.

Daj czytelny opis i dostęp do liczb

Wykres powinien mieć tytuł, który mówi, co przedstawia. „Wyniki” wymaga zgadywania. „Zamówienia przyjęte i zrealizowane według miesiąca” wskazuje miarę oraz sposób podziału. Obok podajcie zakres dat, jednostkę i informację o filtrach wpływających na wynik. Osoba, która otworzy widok po zmianie okresu, musi wiedzieć, czego dotyczą liczby.

Krótki opis może wskazywać rodzaj wykresu i najważniejszą obserwację, na przykład: „Wykres liniowy porównuje zamówienia przyjęte i zrealizowane w kolejnych miesiącach”. Jeśli potrzebne są dokładne wartości, opis powinien prowadzić do dostępnej tabeli. Nie dopisujcie wniosku o przyczynie wzrostu tylko dlatego, że linia idzie w górę.

Wskazówki W3C dotyczące złożonych obrazów pokazują połączenie krótkiej identyfikacji grafiki z obszerniejszym tekstowym odpowiednikiem informacji. W przypadku interaktywnego komponentu trzeba dodatkowo sprawdzić działanie jego kontrolek i zmian stanu. Sama obecność atrybutu alt przy obrazie nie rozstrzyga jakości całego wykresu.

W tabeli nazwijcie kolumny i wiersze tak, aby dało się powiązać wartość z okresem i serią. Przykładowe wiersze mogą zawierać maj, liczbę przyjętych oraz liczbę zrealizowanych zamówień. Puste pole, zero i brak danych to różne sytuacje. Ustalcie ich zapis przed przygotowaniem widoku, zamiast przedstawiać wszystkie jako zero.

Jeśli wykres porównuje kilka jednostek lub oddziałów, tabela powinna pokazać te same filtry. Odpowiednik danych, który zatrzymał się na poprzednim okresie, nie pomaga zweryfikować aktualnego wyniku. W artykule o źródłach danych w integracji opisujemy, jak ustalić odpowiedzialność za informacje używane w różnych widokach.

Tabela i wykres nie zawsze muszą zajmować tyle samo miejsca na ekranie. Można umieścić odnośnik do tabeli tuż przy tytule i pozwolić ją rozwinąć, pod warunkiem że sterowanie ma zrozumiałą nazwę i działa z klawiatury. Po otwarciu czytelnik powinien wiedzieć, że tabela odpowiada bieżącemu zestawowi filtrów. Wydruk lub eksport mogą być wygodne, ale wymagają własnego sprawdzenia nazw kolumn i jednostek.

Zaprojektuj obsługę bez myszy

Filtr okresu, wybór oddziału i przycisk otwierający szczegóły muszą mieć zrozumiałe nazwy. Sprawdźcie, czy można do nich dotrzeć klawiaturą, rozpoznać aktualne zaznaczenie i wykonać działanie. Widoczny znacznik położenia, zwany fokusem, pomaga ustalić, który element jest obecnie obsługiwany.

Nie każdy punkt wykresu musi automatycznie stać się osobnym przystankiem klawiatury. Przy kilkuset punktach oznaczałoby to bardzo długą drogę do następnej części strony. Zespół powinien dobrać model interakcji do zadania, opisać sterowanie i zapewnić drogę do tych samych informacji, na przykład przez tabelę albo listę wyników.

Jeśli wybór punktu otwiera szczegóły, użytkownik powinien wiedzieć, jaki okres wybrał i co zmieniło się na ekranie. Po zamknięciu szczegółów potrzebuje sensownego miejsca powrotu. Te zachowania trzeba sprawdzić w rzeczywistym komponencie, również z technologią wspomagającą, a nie jedynie na statycznym projekcie.

Podobne pytania o nazwy kontrolek i informację zwrotną pojawiają się w dostępnym formularzu firmowym. Wykres dodaje do tego zależność między filtrem, danymi i wybranym punktem. Zmiana jednej wartości nie powinna pozostawiać odbiorcy z informacją o poprzednim wyborze.

W przypadku widoku reagującego na zaznaczenie sprawdźcie także komunikaty o zmianie. Jeśli użytkownik wybierze czerwiec, a poniżej pojawi się szczegół, sposób poinformowania o nowej treści powinien pasować do zastosowanej technologii. Nie każdą zmianę trzeba ogłaszać jako pilny alert. Nadmiar powiadomień może zagłuszyć informację, której użytkownik właśnie szuka. Projekt i zachowanie sprawdźcie z osobami korzystającymi z czytnika ekranu.

Powiąż wykres z dalszym działaniem

W dashboardzie operacyjnym liczba bywa początkiem pracy. Kierowniczka widzi więcej niezrealizowanych zamówień i chce sprawdzić, które sprawy wymagają decyzji. Link lub przycisk powinien jasno opisywać cel, na przykład „Pokaż zamówienia oczekujące w maju”, zamiast ogólnego „Więcej”. Kontekst wybranego okresu musi pozostać czytelny po przejściu.

Przed otwarciem listy sprawdźcie uprawnienia. Osoba może mieć dostęp do zbiorczego wskaźnika, ale nie do danych wszystkich klientów. Brak uprawnień nie powinien prowadzić do pustego ekranu udającego brak zamówień. Potrzebny jest komunikat wyjaśniający ograniczenie oraz, jeśli organizacja przewiduje taką drogę, sposób zwrócenia się o dostęp.

W artykule o przejściu od wskaźnika do sprawy pokazujemy, jak zachować kontekst pracy. Przy wykresie trzeba dodatkowo sprawdzić, czy do listy prowadzi również ścieżka dostępna dla osoby korzystającej z klawiatury lub tabeli.

Jeśli dane dopiero się ładują albo nie udało się ich pobrać, nazwijcie ten stan. Wykres bez słupków może oznaczać zerowy wynik, pusty zakres albo awarię połączenia. Każda z tych sytuacji wymaga innej decyzji. Informacja o czasie ostatniej aktualizacji pomaga rozpoznać, czy widok nadal odpowiada potrzebie użytkownika.

Czasem lista spraw zawiera wartości inne niż wskaźnik, ponieważ użytkownik nie ma dostępu do wszystkich rekordów albo dane pochodzą z różnych momentów aktualizacji. Widok powinien wyjaśniać zakres. Jeżeli suma obejmuje całą firmę, a lista pokazuje jeden oddział, nazwijcie oba poziomy i nie przedstawiajcie listy jako pełnego rozwinięcia wyniku. Przy odświeżaniu danych zachowajcie wybrany okres albo jasno pokażcie, że został zmieniony.

Sprawdź wykres na rzeczywistym zadaniu

Poproście kilka osób o wykonanie tych samych zadań na próbnych danych. Niech znajdą wartość dla konkretnego miesiąca, porównają obie serie i przejdą do listy spraw. Obserwujcie, gdzie potrzebują dodatkowej wskazówki. Ustalcie wcześniej, co oznacza poprawne wykonanie zadania i jakie dane powinny pojawić się w wyniku.

W próbach uwzględnijcie różne sposoby korzystania z interfejsu, w tym klawiaturę, powiększenie i czytnik ekranu. Dobór uczestników oraz technologii powinien wynikać z odbiorców aplikacji. Jedna udana próba nie dowodzi, że każda kombinacja urządzenia i przeglądarki działa poprawnie, ale potrafi ujawnić problem niewidoczny na zrzucie ekranu.

Osobno porównajcie wartości na wykresie i w tabeli po zmianie filtra. Sprawdźcie brak danych dla jednego miesiąca, długą nazwę kategorii, bardzo zbliżone serie i pojedynczy punkt poza zwykłym zakresem. Nie chodzi o dekoracyjne przypadki. Każdy z nich może zmienić czytelność albo sposób interpretacji wyniku.

W teście prototypu z pracownikami opisujemy, jak przygotować zadanie bez podpowiadania kolejnych kliknięć. Wynik zapiszcie jako konkretny problem: która osoba, przy jakiej czynności, nie mogła odczytać jakiej informacji. Taki zapis łatwiej sprawdzić po poprawce niż ogólne „wykres jest mało dostępny”.

Przed odbiorem uzgodnijcie także sposób testowania aktualizacji. Nowa seria, inny zakres dat lub zmiana biblioteki może wpłynąć na etykiety i interakcję, choć wcześniejszy widok działał prawidłowo. Scenariusze warto dołączyć do kryteriów odbioru aplikacji i wracać do nich po zmianach w komponencie.

Nie ukrywajcie tabeli tylko dlatego, że wykres zajmuje mniej miejsca. Jeśli danych jest dużo, zaprojektujcie sposób przechodzenia po stronach lub filtrowania i sprawdźcie, czy nadal można ustalić zakres wyniku. Eksport pliku może być przydatnym dodatkiem, ale użytkownik nie powinien być zmuszony do pobierania danych, aby poznać podstawową informację widoczną na stronie.

Na koniec porównajcie obie drogi na tym samym pytaniu. Czy osoba korzystająca z wykresu i osoba korzystająca z tabeli otrzymają informację o tym samym miesiącu, jednostce i zestawie zamówień? Jeżeli nie, zacznijcie od wyjaśnienia różnicy. W dashboardach i analityce dostępność dotyczy nie tylko sposobu pokazania liczby, ale także możliwości zrozumienia jej i wykorzystania w pracy.