Projekt interfejsu użytkownika dla daltonistów

Osoby daltonistne stanowią znaczną część populacji – dokładnie około 1 na 12 mężczyzn i 1 na 200 kobiet. Jednak użytkownicy nierozróżniający kolorów są często pomijanymi odbiorcami w projektowaniu interfejsu użytkownika.

Wielu myli ślepotę barw z widzeniem w czerni i bieli i chociaż jest to jeden typ, istnieją mniej rzadkie i mniej ekstremalne wersje.

Większość ludzi jest trójchromatyczna, co oznacza, że ​​postrzegają kolor jako kombinację trzech kolorów: zielonego, czerwonego i niebieskiego. Różne rodzaje ślepoty barw lub zaburzenia widzenia barw (CVD) wynikają z niemożności wyraźnego postrzegania jednego lub więcej z tych kolorów. Najczęstsze typy CVD to ślepota na czerwono-zielone kolory, w której trudno odróżnić kolor czerwony od zielonego, oraz ślepota na kolor czerwony, gdzie czerwone kolory wydają się matowe.

Uważamy, że każdy powinien mieć sprawiedliwy i równy dostęp do Internetu, dlatego ważne jest, aby projektanci UI projektowali z myślą o użytkownikach nierozróżniających kolorów. Ustawa o Amerykanach niepełnosprawnych (ADA) wymaga nawet, aby niektóre organizacje spełniały wytyczne WCAG 2.0 Level AA.

Zapewnienie zgodności witryny z ADA nie jest trudne, ale oznacza rozważenie dostępności kolorów. Poza konsekwencjami prawnymi projektowanie dla użytkowników nierozróżniających kolorów ma kluczowe znaczenie dla oferowanego przez Ciebie doświadczenia użytkownika.

Dlaczego projektowanie dla ślepoty barw ma znaczenie

Teoria kolorów odgrywa dużą rolę w projektowaniu interfejsu użytkownika, ponieważ kolor ma moc wpływania na decyzje zakupowe użytkownika, reakcję emocjonalną i ogólne wrażenia użytkownika. Zastanów się, jak ważny dla firmy jest wybór odpowiednich kolorów marki. Teraz wyobraź sobie, że ponad 8% ludzi nie może przeczytać Twojego logo lub strony internetowej z powodu wybranych przez Ciebie kolorów. To dużo straconych okazji.

Ponieważ użytkownicy z daltonizmem nie mogą odróżnić niektórych kolorów, projektanci nie mogą polegać wyłącznie na kolorze, jeśli chodzi o czytelność lub emocjonalny wpływ projektu. Kiedy używasz koloru, musisz wziąć pod uwagę, w jaki sposób użytkownicy wchodzą z nim w interakcję i stworzyć interaktywny projekt, który przemówi do grupy docelowej – w tym członków nierozróżniających kolorów. Zadaniem projektanta jest być empatycznym wobec problemów użytkowników, aby mogli im zapobiegać i rozwiązywać je.

Obecnie istnieją narzędzia takie jak Visolve, które mogą dostosować wyświetlacze komputerowe do pewnych rodzajów daltonizmu, ale nie wszystkie osoby nierozróżniające kolorów używają tych narzędzi – nawet nie wszyscy daltoniści wiedzą, że są daltonistami.

Należy pamiętać, że Twoja witryna nie jest jedynym miejscem, w którym należy wziąć pod uwagę dostępność kolorów. Nawet Twoje media społecznościowe mogą być dostępne dla osób niewidomych i niedowidzących.

Terminologia dotycząca kolorów, którą należy znać

Zanim przejdziemy do sprawdzonych metod projektowania interfejsu użytkownika dla użytkowników nierozróżniających kolorów, dobrze jest zapoznać się z podstawami koloru dla tych, którzy nie są ekspertami od projektowania. Przy wyborze schematu kolorów należy wziąć pod uwagę cztery główne elementy:

Odcień: Jest to synonim „koloru” i jest określany przez długość fali widmowej koloru.

Nasycenie: Nazywane również nasyceniem, określa intensywność lub czystość koloru, określane przez ilość obecnej szarości. Im mniej szarości, tym jaśniejszy kolor.

Lekkość: Jasność zależy od ilości bieli lub czerni dodanej do koloru, tworząc odpowiednio odcienie i odcienie.

Temperatura: określa, jak ciepło lub chłodno postrzegasz kolor. Monitor komputerowy może wpływać na postrzeganą temperaturę koloru.

Jak projektować dla daltonistów

Projektowanie z myślą o ślepocie barw nie oznacza zmniejszania atrakcyjności produktu; oznacza to jedynie przestrzeganie pewnych najlepszych praktyk podczas procesu projektowania. Wdrożenie dobrych zasad projektowania UX i UI poprawi tylko użyteczność Twojej witryny na dłuższą metę.

Nie definiuj samym kolorem

Projektując dla daltonistów, nie możesz polegać wyłącznie na kolorze w jakiejkolwiek wiadomości.

Takie postępowanie jest częstym błędem w wizualizacji danych, ponieważ wykresy, wykresy i mapy są często oznaczane kolorami. Powszechne są również formularze rezerwacji, które pokazują dostępne terminy spotkań lub dostępne miejsca na koncercie za pomocą kodowania kolorami. Inne przykłady obejmują oznaczanie wymaganych lub pominiętych pól formularza poprzez obrysowanie ich kolorem lub wskazanie błędów kolorem.

Powinieneś unikać przekazywania krytycznych informacji za pomocą kolorowego tekstu i obrazów lub przynajmniej podawać te informacje w inny przystępny sposób.

Zrozum kontrast i wybór kolorów

Dla daltonistów kontrast między kolorami jest często ważniejszy niż sam kolor. Koncentracja na kontraście jest korzystna dla projektantów, ponieważ różne rodzaje ślepoty barw powodują, że po prostu unikanie określonego koloru jest nieefektywne. Aby poprawić współczynnik kontrastu w palecie przyjaznej dla daltonistów, rozjaśnij jasne kolory i przyciemnij ciemne.

Oto kilka innych sposobów na poprawę widoczności projektu:

• Podkreśl różnicę między kolorem pierwszego planu a kolorem tła
• Nie wybieraj odcieni obok siebie na kole kolorów, chyba że istnieje duża różnica w jasności
• Unikaj używania kolorów o podobnej jasności, niezależnie od odcienia czy nasycenia
• Zwiększ nasycenie odcieni w użyciu

Mając to na uwadze, nadal istnieją kombinacje kolorów, które mogą stanowić większe wyzwanie dla różnych typów użytkowników daltonistów. Twoja paleta przyjazna dla daltonistów powinna odejść od tych kombinacji kolorów, gdy współczynnik kontrastu nie jest znaczący:

• czerwone i zielone
• Zielony i niebieski
• Zielony i brązowy
• Zielony i szary
• Zielony i czarny
• Niebieski i szary
• Niebieski i fioletowy
• Żółty i jasnozielony

Implementuj wzory i tekstury

Jednym ze sposobów aktualizacji projektów wizualnych dla użytkowników nierozróżniających kolorów bez polegania na samej palecie kolorów jest użycie wzorów i tekstur. Działa to dobrze w przypadkach, w których kolor zwykle pomaga odróżnić informacje, na przykład na wykresie lub wykresie. Dodanie elementów wzoru lub tekstury pomoże wyróżnić elementy.

Używaj symboli i oznacz wszystko

Przejrzyste etykietowanie to najlepsza praktyka, jeśli chodzi o kierowanie każdego użytkownika przez ścieżkę klienta, w tym tych, którzy są ślepi na kolory. Etykiety mogą pomóc odróżnić informacje zwykle przekazywane za pomocą koloru. Dotyczy to wizualizacji danych, takich jak wykresy, lub prowadzenia użytkowników na stronie internetowej. Zadaj sobie pytanie, czy użytkownik może odnaleźć drogę bez podanych przez Ciebie podpowiedzi kolorystycznych.

Z punktu widzenia e-commerce powinieneś również oznaczyć swoje produkty jasnymi, opisowymi informacjami. Nie polegaj na zdjęciach produktów, aby opowiedzieć całą historię; oznaczyć kolor produktu.

Przemyśl swoje przyciski CTA

Wezwanie do działania (CTA) jest integralną częścią interaktywnego projektowania. Jeśli użytkownik nie może go znaleźć lub go nie rozumie, nie zrobi postępów w podróży, a Ty nie osiągniesz celów. Musisz zwrócić uwagę na swoje wezwanie do działania, a wielu projektantów polega w tym celu na kolorze.

Dobry projekt interfejsu użytkownika implementuje kolor, ale wykorzystuje również jedną lub więcej z tych innych wyróżniających się technik dla przycisków CTA:

• Rozmiar
• Umieszczenie
• Mocny kontrast
• Granice ważone
• Czcionki ważone
• Ikony symboliczne
• Efekty najechania

Techniki te działają zarówno na daltonistach, jak i na niedaltonistnych użytkownikach i można ich używać do innych elementów strony, na które chcesz zwrócić uwagę.

Podkreśl te linki

Jeśli czytasz dowolnego bloga, w tym również tego, zauważysz, że linki są podświetlone, aby powiadomić użytkowników o ich obecności. Najczęstszym sposobem podkreślenia linku jest kolor. W tym celu użyj koloru niebieskiego, ponieważ większość osób z wadą widzenia kolorów może go zobaczyć.

To dla użytkowników z achromatopsją lub monochromatycznością, choć rzadsze formy ślepoty barw, to podkreślenie koloru nie wystarczy. W przypadku tych osób kolorowe linki są wyszarzone i nie można ich odróżnić od innych tekstów. Możesz szybko rozwiązać ten problem, podkreślając tekst kotwicy.

Rozważ minimalizm

Minimalizm nie jest nowy. Estetyka jest trendy od dziesięcioleci, przebijając się przez architekturę, sztukę, dekorację wnętrz i oczywiście design.

A teraz minimalizm odgrywa rolę w dostępności kolorów, ponieważ im mniej kolorów, tym mniejsza szansa na zamieszanie. Jest również atrakcyjny stylistycznie i mniej rozpraszający, co czyni go dobrym wyborem dla wszystkich odbiorców.

Nie musisz przestrzegać minimalistycznego projektu, aby być dostępnym, ale to jedna z dróg, która działa.

Użyj symulatora ślepoty barw

Ponieważ społeczność projektantów pracuje nad przystępnym doświadczeniem użytkownika, pojawiło się wiele wspaniałych narzędzi, które mogą pomóc. Na przykład symulatory daltonistów pozwalają projektantom zobaczyć swoje projekty tak, jak zrobiłby to użytkownik daltonistów. Jeden z takich symulatorów, Oracle, jest dostępny dla systemów Mac, Windows i Linux. Użyj symulatora dla ślepoty barw, aby przetestować swoją pracę w całym procesie projektowania i zrozumieć, w jaki sposób użytkownicy wchodzą w interakcję z Twoimi wyborami.

Decydując się na paletę kolorów na początkowych etapach, sugerujemy skorzystanie z narzędzia do wybierania kolorów, które ocenia Twoje wybory zgodnie z wytycznymi AA. Ten kontroler kontrastu może określić współczynnik kontrastu, a ten dostępny generator kolorów sugeruje kombinacje kolorów, które działają lepiej.

Uczyń swoją witrynę dostępną

Projektowanie z myślą o ślepocie barw zapewnia, że ​​Twoja witryna zapewnia użytkownikom wrażenia, z których mogą korzystać wszyscy odbiorcy. Dla nich oznacza to markę, na której mogą polegać; dla Ciebie oznacza to udane konwersje. W zależności od wielkości Twojej firmy może to również oznaczać przestrzeganie prawa. Niezależnie od tego jest to część budowania sprawiedliwego i równego środowiska online.

Dostępność kolorów to tylko jeden z elementów budowania przyjaznej strony internetowej. Koniecznie sprawdź nasz przewodnik dotyczący udostępniania treści dla społeczności niesłyszących i HOH.