kolor odgrywa integralną rolę w projektowaniu interfejsu użytkownika. Dobrze wykonane rozwiązanie poprawia wrażenia użytkownika, wpływa na decyzje zakupowe i odzwierciedla głos marki.
jak zaprojektować efektywne, dostępne i estetyczne interfejsy dla użytkowników daltonistów?
podczas gdy nauka za daltonizm jest dość złożona, istotą jest to, że osoby niewidome mają trudności z widzeniem koloru wyraźnie lub rozróżniania niektórych kolorów., Mając to na uwadze, w tym artykule podzielimy się kilkoma wskazówkami na temat tego, jak możesz poprawić dostępność witryny i doświadczenia, jakie zapewnia ona osobom niewidomym.
daltonizm w cyfrowym świecie
według badań około 1 na 12 mężczyzn (i 1 na 200 kobiet) jest daltonistą. Chociaż osoby niewidome mogą widzieć rzeczy tak wyraźnie, jak wszyscy inni, nie są w stanie w pełni dostrzec czerwonego, zielonego lub niebieskiego światła. Istnieją różne rodzaje daltonizm; deuteranopia i protanopia daltonizm są najbardziej powszechne.,
osoby z czerwono-zieloną ślepotą barw (deuteranopia) mają trudności z odróżnieniem czerwieni od zieleni. Podobnie, do osób z czerwoną ślepotą barw (protanopia), wszystkie czerwone kolory wyglądają nudne.
oznacza to z punktu widzenia projektowania, że poleganie na Kolorze pod względem czytelności i przystępności sprawiłoby, że Twoja strona byłaby trudna w użyciu dla kogoś, kto jest daltonistą.
Możesz użyć symulatora ślepoty kolorów Coblis, aby zobaczyć, jak wygląda Twoja strona dla użytkowników niewidomych kolorów.,
7 sposobów poprawy dostępności kolorów dla osób niewidomych
elementy projektu i techniki poprawiające dostępność kolorów dla osób niewidomych są ogólnie uważane za dobre praktyki projektowe. Chociaż możesz pomyśleć, że estetyka Twojej witryny może ucierpieć, jeśli zaprojektujesz ją pod kątem dostępności, z pewnością tak nie jest.
tutaj przyjrzymy się niektórym ze sposobów projektowania bardziej dostępnego interfejsu użytkownika, mając na uwadze użytkowników niewidomych kolorów.
#1: Użyj wzorków i tekstur
różnice kolorów są niezwykle ważne przy wizualizacji danych, np.,, wykresy i wykresy kołowe. Wybór kolorów o niskim współczynniku kontrastu może utrudnić interpretację wykresu użytkownikom niewidomym.
oto, co powinieneś zrobić:
- użyj wzorków i tekstur, aby ułatwić użytkownikom rozróżnianie różnych segmentów.
- Dodaj etykiety tekstowe do segmentów, aby były jeszcze łatwiejsze do zrozumienia.
przyjrzyjmy się, jak osoba niewidoma z tritanopią może zobaczyć niebiesko-zielony wykres słupkowy w porównaniu z tym, jak zobaczy ten sam Wykres z wzorami i teksturami.,
oto, jak wyglądałoby oznaczanie każdego segmentu zamiast używania wzorców:
#2: używaj kolorów i symboli
nie powinieneś polegać wyłącznie na kolorze, aby komunikować błędy lub przekazywać informacje za pośrednictwem interfejsu użytkownika.
przyjrzyjmy się np. formularzowi rejestracyjnemu Facebook ' a., Jeśli formularz polegał tylko na kolorze, aby poinformować użytkowników, że popełnili błąd w danym polu, może to wyglądać mniej więcej tak dla użytkownika z czerwoną ślepą (protanopia):
oto spojrzenie na Formularz rejestracyjny Facebook z symbolami i komunikatami o błędach:
używając ikon i symboli w formularzach, aby poinformować użytkownika o tym to, że popełnili błąd, poprawia dostępność i pomaga im szybciej poprawić swój błąd.
#3: Użyj etykiet tekstowych
dodawanie etykiet tekstowych do filtrów kolorów i próbek poprawia dostępność dla użytkowników niewidomych kolorów., W zależności od rodzaju daltonizmu, użytkownicy mogą mieć trudności z rozróżnieniem różnych kolorów (lub odcieni) bez pewnego rodzaju tekstu opisowego.
na przykład, bez opisowej etykiety tekstowej na Amazon, użytkownicy niewidomych kolorów nie byliby w stanie odróżnić czerwonej koszuli od pomarańczowej lub zielonej.
dodawanie etykiet tekstowych do filtrów kolorów poprawia dostępność również dla osób z normalnym widzeniem. Na przykład białe, prawie białe i jasnoszare są często trudne do odróżnienia na monitorach.,
#4: podkreślenie linków
często używamy koloru czcionki lub wagi czcionki do oznaczania linków. Chociaż może być możliwe, aby ktoś z deuteranomaly, protanopia lub tritanopia odróżnić tekst kotwicy od zwykłego tekstu, z pewnością nie jest to idealne ze względu na niski współczynnik kontrastu.
ktoś z monochromatyką nie byłby w stanie odróżnić tekstu od anchor text w ogóle i musiałby najechać kursorem na tekst, aby zobaczyć, czy jego kursor zmienia się w wskaźnik.
z tego powodu dobrym pomysłem jest dodanie podkreślenia do linków tekstowych., Ułatwia to natychmiastowe rozróżnienie zwykłego tekstu i tekstu zakotwiczenia. Oto przykład ze strony Engadget:
#5: kombinacje kolorów, aby uniknąć
niektóre kombinacje kolorów nie są idealne dla użytkowników niewidomych, ponieważ mają niski współczynnik kontrastu lub ponieważ są trudne do rozróżnienia.,
poniżej znajduje się lista kombinacji kolorów, których należy unikać w projektach interfejsu, o ile to możliwe:
- zielono-czerwony
- zielono-niebieski
- zielono-brązowy
- Zielono-czarny
- niebiesko-szary
- jasnozielono-żółty
- niebiesko-fioletowy
oto co zielono-czerwone i niebiesko-fioletowe kombinacje kolorów wyglądałyby jak dla użytkownika z protanopią:
#6: wyróżnij podstawowe przyciski
wiele razy projektanci polegają na kolorze, aby wyróżnić podstawowe przyciski., Problem polega na tym, że kolor, którego używasz, może być trudny do dostrzeżenia przez użytkowników daltonistów.
oto, co powinieneś zrobić zamiast tego:
- Zwiększ rozmiar głównego przycisku.
- Wypróbuj różne kombinacje lokacji.
- zwiększa kontrast między przyciskami podstawowymi i drugorzędnymi.
- używaj obramowań, ikon lub wagi czcionek do rozróżniania przycisków podstawowych i drugorzędnych.
na przykład rozmiar i kolor podkreślają główny przycisk.,
i Firebox prezentują swój główny przycisk w prawym dolnym rogu, a dodatkowy przycisk w lewym górnym rogu.
#7: Oznacz wymagane pola formularza
użytkownicy niewidomych kolorów mogą mieć trudności z rozróżnieniem pól wymaganych i opcjonalnych, jeśli używasz tylko koloru do oznaczania wymaganych pól w formularzach.
zamiast tego możesz:
- zaznaczyć wymagane pola gwiazdką (*).
- etykiety pól ze słowem wymagane lub opcjonalne.
- Usuń opcjonalne pola z formularzy.,
podsumowanie
Projektowanie interfejsu użytkownika dla użytkowników niewidomych kolorów pomoże Ci poprawić dostępność witryny również dla użytkowników z normalnym widzeniem. Chociaż nie ma uniwersalnego rozwiązania, jeśli chodzi o dostępność stron internetowych, oto kilka wskazówek, o których powinieneś pamiętać:
- użyj wzorków i tekstur, aby pokazać kontrast na wykresach i wykresach.
- używaj kolorów i symboli do przekazywania komunikatów o błędach.
- Dodaj etykiety tekstowe do filtrów kolorów i próbek.
- podkreślaj linki, aby odróżnić zwykły tekst od tekstu zakotwiczonego.,
- Unikaj używania słabych kombinacji kolorów, takich jak zielono-czerwony i niebiesko-fioletowy.
- Użyj rozmiaru, umiejscowienia lub wagi czcionek, aby wyróżnić podstawowe przyciski.
- zaznacz wymagane pola formularza symbolem (np. gwiazdką) lub oznacz je etykietą.