fbpx

Ślepota barw a projektowanie dla użyteczności

W wielu sytuacjach musimy polegać wyłącznie na kolorach. Czy to podczas prowadzenia auta i sprawdzanie, czy możemy przejeżdżać przez skrzyżowanie, czy też korzystając z map i schematów. Według danych statystycznych, w Stanach Zjednoczonych przeszło 8% mężczyzn i 0.5% kobiet cierpi na jakąkolwiek formę ślepoty barw. Przekładając to na sytuacje życiowe, oznaczać to może, że w przeciętej grupie składającej się z 10 kobiet i 10 mężczyzn, co najmniej jedna osoba będzie miała problem z prawidłowym rozróżnianiem barw. 

Porównanie percepcji koła kolorów przez osoby z różnymi rodzajami ślepoty barw.

W przytoczonych na początku sygnalizatorach ulicznych, z problemem złego widzenia kolorów poradzono sobie w sposób genialny, pomimo swojej prostoty. Każdy otóż przecież wie, że czerwone światło znajduje się na górze sygnalizatora, przez co zawsze wiadomo, że przy zapalonej górnej komorze, wjazd na skrzyżowanie jest wysoce nierekomendowanym posunięciem. To też rozwiązanie ma inne plusy – w przypadku zbicia wszystkich kolorowych szkiełek sygnalizatora, również osoby prawidłowo rozróżniające kolory nie będą miały żadnego kłopoty z prawidłową percepcją stanu sygnalizacji.

Warto zacząć od samego koloru

Kolor nigdy nie rozwiąże wszystkich problemów samodzielnie. Może być on doskonałym uatrakcyjnieniem wyglądu interfejsu, ale dopiero po rozważnym i świadomym dokonaniu wyboru przez projektanta co do doboru palety kolorystycznej, kolor może stanowić element, dzięki wpłynie pozytywnie na przyjazność korzystania z produktu cyfrowego.

Statycznie, osoby cierpiące na umiarkowane formy ślepoty barw są w stanie zidentyfikować dokładnie 5 kredek ze standardowego pudełka składającego się z 24 sztuk. Jeżeli spojrzymy na osoby z protanopią, a więc te, które nie są w stanie zobaczyć kolor czerwony, interfejsy oparte na tym właśnie kolorze stają się niemożliwe do używania. Ikony i właściwe opisy są tutaj niezwykle pomocne.

Oczywiście, dodawania kolejnych elementów do interfejsu może spowodować chaos i bałagan. Dlatego też, już od początku procesu projektowego warto zbudować paletę kolorystyczną w ten sposób, żeby była ona maksymalnie dostępna dla użytkowników z różnymi formami niepełnosprawności narządu wzroku. Na ten przykład, popularny komunikator Slack, oferuje użytkownikom specjalne motywy, które zmieniają wszystkie kolory interfejsu użytkownika na te przyjazne osobom ze ślepotą barw.

Interfejs Slacka pozwala na wybranie kolorystyki przyjaznej dla osób ze ślepotą barw.

Podobną funkcjonalność oferuje również Asana. Dzięki zastosowaniu mapowaniu kolorów, czyli procesu przekształcania kolorów za pomocą algorytmu – w tym przypadku tych, niedostępnych dla użytkowników ze ślepotą barw, na te, które są oni w stanie zobaczyć – interfejs został dostosowany w celu zmaksymalizowania jego dostępności. Było to szczególnie ważne ze względu na to, jak wielką rolę odgrywają kolory i ich właściwe postrzeganie przez użytkowników.

Oryginalna i dostosowana do ślepoty barw paleta kolorów w interfejsie Asany.

Nie sam kolor zdobi komunikat

W wielu produktach cyfrowych spotykamy się z komunikatami, oznaczeniami treści i inną informacją zwrotną. Często w przypadku komunikatów o błędach przyjmują one kolory, które są wspólne na poszczególnych stronach i powszechnie wykorzystywane. Zielony kolor zwykle oznacza powodzenie operacji, pomarańczowy lub zółty oznacza ostrzeżenie, a czerwony odpowiada za wyświetlanie błędów. Zwłaszcza w przypadku produktów, dla użytkowników których ważne jest sprawne działanie i jasne pokazywanie statusu, takie rozwiązanie może być nieskuteczne w przypadku użytkoników cierpiących na ślepotę barw.

Dodane ikony wzmacniają i ujednoznaczniają znaczenie komunikatu. Źródło

Prostym, i jakże skutecznym, rozwiązaniem tej bolączki może być dodanie do każdego komunikatu ikony, która będzie dodatkowym indykatorem treści. Możnaby zapytać się – w zasadzie w jakim celu chcemy to wdrażać, przecież tekst i tak mówi wyraźnie o tym, czy proces się zakończył powodzeniem czy nie. Odpowiedź jest równie prosta i trywialna – dzięki zastosowaniu ikony wyróżniamy komunikat i zaoszczędzamy na czasie, który byłby potrzebny na przeczytanie przez użytkownika tekstu oraz jego zrozumienie. Ikony takie jak, kolokwialnie mówiąc, “iks”, “ptaszek”, czy znak ostrzegawczy skuteczniej obrazują główną treść komunikatu.

Jak nie kolorem, to wzorem

Zamiast polegać wyłącznie na kolorach, w celu zróżnicowania poszczególnych danych, elementów czy zbiorów, warto uciec się do wykorzystania wzorów. Dzięki takiemu rozwiązaniu unikniemy kłopotów związanych z problematycznym doborem palety kolorystycznej, która zapewniałaby wystarczającą czytelność dla chorych na ślepotę barw. Również w zastosowniach, w których pewność dokonanego wyboru ma kluczowe znaczenia dla użytkownika, zastosowanie dodatkowych oznaczeń wizualnych może znacząco podnieśc komfort użytkowania tych narzędzi i produktów.

Jednym z narzędzi, które wprowadziło jako opcję użycia dodatkowych wzorów w połączeniu z kolorami jest Trello, wirtualna tablica kanban.

Color blind mode w Trello.

Innym doskonałym, niecyfrowym, przykładem użycia dodatkowych wzorów w celu ułatwienia osobom niedowidzącym i posiadającym wady rozpoznawania kolorów jest mapa londyńskiego metra (PDF).

Ta sama mapa jest również dostępna w wersji czarno-białej (PDF). Jak widać, zamiast kolorów zostały zastosowane różne wzory w celu zróżnicowania poszczególnych lini. Również dzięki istnieniu takiej wersji, możliwy jest wydruk mapy przez osoby nieposiadające kolorowej drukarki, dzięki czemu taka mapa spełnia potrzeby nie tylko osób niepełnosprawnych, jak również tych z ograniczonym dostępem do urządzeń drukujących.

Wysoki kontrast tak przygotowanej czarno-białej mapy pomaga w jej prawidłowym odbiorze nie tylko ludziom cierpiącym na ślepotę barw, jak również osobom posiadającym inne dysfukcje narządu wzroku.

Oczywiście, zamiast dwóch różnych wersji mogłaby istnieć jedna, łącząca obie poprzednio omawiane. Dzięki temu standardowa wersja mapy stałaby się bardziej dostępna i przez to bardziej uniwersalna.

Detale, które mają znaczenie

Primary buttons

Często przyciski, które traktowane są jako domyślna akcja lub call-to-action, wyróżnione są za pomocą innego koloru. W przypadku, kiedy wszystkie, lub większość przycisków jest kolorowa, może powodować to konfuzję osób ze ślepotą barw.

Zamiast tego warto rozważyć wyróżnienie takich przycisków za pomocą rozmiaru, umieszczenia, wagi pisma, kontastu, ikony i wszystkiego, co może być pomocne – oczywiście w granicach wytyczonych przez guidline’y brandowe. 

Linki

Linki powinny być łatwe do znalezenia przez użytkowników bez polegania na kolorze.

Aby znaleźć link, użytkownicy skanować tekst kursorem myszy, czekając na zmianę kursora na wskaźnik. Inaczej wygląda to w przypadku telefonów komórkowych sprawa wygląda zgoła inaczej – użytkownicy dotykają poszczególnych słów czy elementów interfejsu w nadziei, że wywołają daną funkcjonalność.

Łącza powyżej z ikonami są łatwiejsze do zobaczenia. W przypadku, kiedy ich użycie byłoby niemożliwe, jak np. linki w ciągłym tekście, dobrym pomysłem jest dodanie podkreślenia, które uwupukli te słowa, za którymi kryją się linki do innych stron.

Wybór oparty na kolorach

Gdy przychodzi do wyboru nowej części odzieży ważneym jej aspektem jej kolor. Sklepy on-line, często zapominają, iż nie można polegać na samym obrazku produktu w danym kolorze lub ikonce oznaczającej kolor. Bez dodatkowego opisu niemożliwe jest rozróżnienie wielu dostępnych opcji.

Wyjściem z tego impasu jest dodanie etykiety tekstowej obok każdego koloru z opisem danego koloru. Rozwiązania takie jak pojawiający się opis po najechaniu kursorem na dany element tracą rację bytu na telefonie komórkowym.

Dodatkowym plusem takiego rozwiązania jest także ułatwienie korzystania ze sklepu osobom, dla których kolor granatowy i czarny są trudne do rozróżnienia, lub korzystają z ekranów o niskiej jakości.

Narzędzia pomocne w procesie projektowym

Obecnie na rynku istnieje killka darmowych narzędzi, których można użyć w trakcie projektowania produktów w celu upewnienia się, że będzie one przyjazne osobom ze ślepotą barw.

Sim Daltonism pozwala na podgląd w czasie rzeczywistym sposobu widzenia obarczonego ślepotą barw.

Pierwszym narzędziem dostępnym dla iOS i MacOS, które pozwala symulować różne rodzaje ślepoty barw jest Sim Daltonism. Obie wersje działają w czasie rzeczywistym. Wersja na telefony komórkowe współpracuje z wbudowanym aparatem, natomiast ta przeznaczona na komputery tworzy swego rodzaju filtr, który możemy zaaplikowaniać na konkretną część ekranu.

W przypadku, kiedy sprawdzić chcemy konkretny plik graficzny warto użyć narzędzia online o nazwie Colblindor.

Również w programie Adobe Photoshop jest wbudowana funkcja, która pozwala zobaczyć płótno oczami osoby cierpiącej na ślepotę barw. W tym calu należy wybrać w menu Widok→ Ustawienie próby → Ślepota barw — protanopia/Ślepota barw — daltonizm. W wersji angielskiej View → Proof Setup → Color Blindness —  Protanopia-type/Color Blindness — Deuteranopia-type. Po wybraniu tej opcji możemy włączać i wyłączać pogląd używajac skrótów ⌘+Y na Macu i Ctrl+Y on a PC.

Umiejscowienie opcji w Adobe Photoshop.

Gdyby podane wcześniej narzędzia okazały się wciąż niewystarczajace, istnieją także odpowiedni wtyczki do przeglądarek internetowych, takie jak na przykład NoCoffee dla Google Chrome.

Leave a Comment.