12 najlepszych praktyk ulepszania projektu e-commerce dla użytkowników z daltonizmem

Niektóre z najważniejszych funkcji witryny eCommerce obejmują łatwy w obsłudze proces realizacji transakcji, różnorodne opcje wysyłki oraz przyjazny dla użytkownika projekt i interfejs. Ogólnie rzecz biorąc, te funkcje sprawiają, że zakupy online są łatwiejsze i przyjemniejsze dla klientów. Ale w tym artykule zamierzamy zbadać ślepotę barw w handlu elektronicznym i jak zaprojektować przyjazną dla daltonistów witrynę eCommerce.

Kolory mogą sprawić, że Twoja witryna będzie bardziej dynamiczna i atrakcyjna dla użytkowników. Jednak niewłaściwe używanie kolorów w funkcjonalnych aspektach witryny (takich jak przyciski, linki i wezwania do działania) może utrudnić użytkownikom cierpiącym na ślepotę barw.

Dlatego zaprojektowanie witryny pod kątem niedoboru widzenia kolorów ułatwia odwiedzającym uzyskanie jak najlepszych wrażeń.

Stworzenie witryny tak, aby była dostępna dla osób dla ślepoty barw, nie oznacza, że ​​unikasz łączenia kolorów. Ważne jest, aby zwracać większą uwagę na to, w jaki sposób używasz kolorów do prezentowania różnych elementów witryny.

Wiedząc, czym jest ślepota barw

W przeciwieństwie do tego, co sugeruje termin, większość osób z niedoborem kolorów lub ślepotą nadal widzi pigmentację. Ale zamiast widzieć brak koloru, trudno im rozszyfrować określone kolory.

Oto trzy podstawowe typy ślepoty barw i jej podkategorie:

1. Ślepota na kolor czerwono-zielony;

Jest to najczęstszy typ, w którym osoba myli czerwień z zielenią. Ma różne podtypy:

Powtórzonego Prawa: Zielony, który wygląda na czerwony
Protanomalia: Czerwony, który wygląda na zielony
Protanopia lub Deuteranopia: nie można odróżnić czerwieni od zieleni

2. Niebiesko-żółty kolor ślepota

Ten typ jest najmniej powszechny. Osoba często myli kolor niebieski z żółtym:

Podtypy obejmują:

Tritanomalia: nie można odróżnić żółtego i czerwonego, niebieskiego i zielonego
Tritanopia: Nie można odróżnić żółtego od różowego, fioletowego od czerwonego, niebieskiego od zielonego

3. Monochromatyczność

Jest to najrzadszy typ, w którym osoba nie widziała żadnych kolorów.

Zagadnienia projektowe dla osób nierozróżniających kolorów

Nie ma zbyt wielu technologii wspomagających dla osób niewidomych, takich jak osoby niewidome lub niedowidzące. Oznacza to, że od samego początku procesu projektowania musisz zwracać uwagę na kombinacje kolorów.

Istnieją dwa główne czynniki, które sprawiają, że Twoja witryna jest idealna dla osób nierozróżniających kolorów — kontrast kolorów i poleganie tylko na kolorze w celu przekazania znaczeń.

Projektowanie stron internetowych dla ślepoty barw

Stworzenie witryny e-commerce przeznaczonej dla osób ze ślepotą barw zwykle wymaga przemyślenia i intencji. Oto kilka pomocnych wskazówek, jak zaprojektować witrynę, mając to na uwadze

1. Używaj wyraźnych etykiet i symboli

Przejrzyste etykietowanie to jedna z najlepszych praktyk, które pozwalają kierować każdego użytkownika przez ścieżkę klienta. Jest to szczególnie pomocne dla osób z niedoborem koloru.

Etykiety pomagają rozróżnić informacje zwykle przekazywane za pomocą koloru. Dotyczy to wizualizacji danych, takich jak wykresy lub po prostu prowadzenia użytkowników na stronie internetowej. Należy również zadać sobie pytanie, czy użytkownik może znaleźć drogę do Twojej witryny bez podpowiedzi kolorystycznych.

Z punktu widzenia handlu elektronicznego ważne jest również, aby oznaczać produkty przy użyciu jasnych, opisowych informacji.

2. Rozważ minimalistyczny design

Minimalizm jest teraz w projektowaniu stron internetowych i nic nie wskazuje na to, że zwalnia. Chociaż wypełnienie każdej strony przyciągającymi wzrok elementami może być kuszące, używanie zbyt wielu z nich może zdezorientować użytkowników.

W ten sam sposób zmniejsza również ogólne wrażenia użytkownika. Korzystanie z minimalistycznego designu nadal jest modne, ponieważ jest już wypróbowane i przetestowane.

Dodatkowo, w przypadku dostępności kolorów, minimalizm zmniejsza prawdopodobieństwo, że użytkownicy będą mieli trudności z poruszaniem się po Twojej witrynie.

Chociaż minimalizm często nie jest wymogiem dostępności, nadal jest niezbędną opcją dla wielu użytkowników. Co więcej, ponieważ w minimalistycznym projekcie strony internetowej jest tylko kilka kolorów, użytkownicy z niedoborami kolorów szybko zrozumieją przeznaczenie każdej strony internetowej.

Jeśli masz ograniczoną paletę kolorów, upewnij się, że kolory, których używasz, dobrze kontrastują. Jednym z klasycznych wyborów jest użycie czerni i bieli. Jednak nie musisz czuć się ograniczony, używając tylko tych dwóch kolorów.

Ponieważ osoby nierozróżniające kolorów mają trudności z rozróżnianiem kolorów czerwonego, niebieskiego i zielonego, lepiej jest unikać pracy z tymi kolorami i zamiast tego używać alternatyw.

3. Zastosuj wzory i tekstury, aby pokazać kontrast

Innym świetnym sposobem na zaktualizowanie projektu wizualnego bez zbytniego polegania na palecie kolorów jest użycie wzorów i tekstur.

Działają one stosunkowo dobrze w przypadkach, w których kolory pozwalają użytkownikom odróżnić pewne informacje, na przykład w postaci wykresu lub wykresu. Umieszczenie wzorów lub elementów tekstur pomoże wyróżnić te elementy.

4. Unikaj instrukcji dotyczących kolorów

Jeśli projektujesz formularze, unikaj oznaczania wymaganych pól tylko kolorowym tekstem, ponieważ pola te mogą wyglądać identycznie jak u osoby ze ślepotą barw.

Lepszą alternatywą jest napisanie odnośnika tekstowego bezpośrednio na etykiecie formularza. Dodatkową zaletą jest to, że czyni to również bardzo czytelnym przez czytnik ekranu dla osób z poważnymi wadami wzroku.

5. Podkreśl linki

Wielokrotnie używamy koloru czcionki lub grubości czcionki do oznaczenia linków. Chociaż osoba z niedoborem koloru może odróżnić tekst zakotwiczenia od zwykłego tekstu, nie jest to idealne rozwiązanie ze względu na niski współczynnik kontrastu.

Na przykład osoba monochromatyczna nie byłaby w stanie odróżnić tekstu od tekstu kotwicy. Dlatego muszą najechać kursorem na tekst, aby sprawdzić, czy ich kursor zmieni się we wskaźnik.

Dlatego dobrym pomysłem jest dodanie podkreślenia do linków tekstowych. Dzięki temu łatwo odróżnić zwykły tekst od tekstu zakotwiczenia.

6. Unikaj niektórych kombinacji kolorów

Ponieważ ślepota barw może mieć różny wpływ na poszczególne osoby, unikanie pewnych odcieni kolorów nie wystarczy.

Musisz wiedzieć, że niektóre kombinacje kolorów nie są idealne dla daltonistów. Dzieje się tak dlatego, że zwykle mają niski współczynnik kontrastu lub są trudne do całkowitego odróżnienia.

Oto lista różnych kombinacji kolorów, których należy unikać w jak największym stopniu:

• Zielony i czerwony
• Zielony i niebieski
• Zielony i czarny
• Zielony i brązowy
• Zielony i szary
• Niebieski i szary
• Jasnozielony i żółty
• Niebieski i fioletowy

7. Zastanów się ponownie nad przyciskami CTA

Jeśli odwiedzający Twoją witrynę są ślepi na kolory, musisz wiedzieć, że kontrast między kolorami jest tak samo ważny jak same kolory.

Tak więc, jeśli użytkownicy nie mogą znaleźć Twojego wezwania do działania, trudno będzie im ruszyć z klientem. W ten sposób ucierpią również Twoje współczynniki konwersji.

Na szczęście możesz użyć więcej niż jednego koloru, aby Twoje wezwanie do działania wyróżniało się na tle pozostałych tekstów i obrazów.

8. Unikaj używania projektów o niskim kontraście

Ważny jest bardzo skuteczny kontrast. Ma to na celu zapewnienie czytelności treści i linków dla czytelników.

Konstrukcja o niskim kontraście oznacza, że ​​klienci mogą mieć trudności z odczytaniem informacji o Twojej witrynie. Jeśli prowadzisz sklep e-commerce, osoby nierozróżniające kolorów mogą nie znaleźć szczegółów produktu, a nawet miejsca, w którym link ma przesunąć się przy zakupie. To z czasem może przełożyć się na utratę konwersji i ostatecznie sprzedaż.

Minimalny współczynnik kontrastu kolorów na poziomie podwójnego A dla obrazów i tekstów powinien wynosić od 4,5 do 1.

9. Zmiana jasności, nasycenia, odcienia

Podobnie jak zmiana kontrastu, zmiana jasności, nasycenia i odcieni kolorów pozwala projektantom pokazać definicję. Pozwala również użytkownikom końcowym rozróżniać różne elementy bez konieczności używania mnóstwa kolorów.

Nawet przy użyciu jednego koloru zmiana odcienia, jasności i nasycenia pozwala stworzyć wyróżniający się kontrast między próbkami tego samego koloru.

Pozwala to na uwzględnienie kolorów w projektach, tak jakbyś za każdym razem dodawał coś nowego do miksu, bez uszczerbku dla estetyki. Użytkownicy Colorblind mogą postrzegać każdy kolor jako inną część Twojego projektu.

10. Użyj grubszych linii

Osoby z łagodną ślepotą barw widzą kolor, jeśli istnieje „masa”. Dlatego mniej niż dobra cienka linia koloru nie będzie dla nich odpowiednia. Więc zamiast tego poszedłbyś z teksturą.

Zwłaszcza w infografikach lub mapach tekstura może pomóc w rozróżnieniu wielu obiektów.

11. Wykorzystaj kolory i symbole

Kolor nie powinien być tylko podstawowym środkiem przekazu informacji użytkownikom daltonistów. W rzeczywistości, zgodnie z sekcją 508, strona internetowa powinna być zaprojektowana w taki sposób, aby wszystkie informacje przekazywane w kolorze były również dostępne bez koloru.

Kolory nie powinny być jedynym środkiem przekazu, jeśli chcesz przekazać wiadomość. Na przykład ślepota barw może wpływać na zdolność osoby do rozróżniania często występujących czerwonych komunikatów o błędach, takich jak „ostrzeżenie” lub „uważaj”.

Dlatego możesz chcieć dodać elementy symboliczne do tekstu oznaczonego kolorami, aby pomóc dotrzeć do szerokiego grona odbiorców lub przyciągnąć ich uwagę. Komunikaty o błędach dołączane do pól formularzy na Facebooku są doskonałym przykładem tej techniki.

12. Przetestuj to!

Mnóstwo dostępnych narzędzi stymuluje różne rodzaje ślepoty barw. Warto więc sprawdzić swój projekt, aby zobaczyć potencjalne problemy z przodu. Musisz także przeprowadzić ostateczną kontrolę przed rozpoczęciem transmisji na żywo. Dzięki temu wszystko pójdzie gładko.

Jak VOCSO może pomóc?

Szukasz usług projektowania i tworzenia stron internetowych, które zapewniają doskonałe wrażenia użytkownika osobom niewidomym na kolory? Jesteśmy firmą zajmującą się projektowaniem witryn eCommerce, która tworzy przyjazne dla daltonistów strony internetowe, które najlepiej sprawdzają się w przypadku osób z daltonizmem. Dostępnych jest wiele narzędzi i technik, które uwzględniają sposób, w jaki osoby z daltonizmem łatwo uzyskują dostęp do Twojej witryny. Kilka prostych zmian w projekcie witryny może mieć ogromne znaczenie dla kogoś, kto używa koloru do przekazywania informacji. Zawsze pamiętamy o tych rozważaniach podczas projektowania Twoich stron internetowych. Używamy wizualizacji przyjaznych dla daltonistów na stronach internetowych, które działają dobrze dla osób z daltonizmem.

Do Ciebie

W dzisiejszych czasach powinieneś zaprojektować swoją witrynę pod kątem dostępności. Dzieje się tak, ponieważ ludzie z różnych środowisk używają internetu do wykonywania nawet najprostszych zadań.

Zintegrowanie tych elementów z Twoją witryną i stworzenie wysoce dostępnego projektu strony internetowej jest kluczem do połączenia się z obecną bazą klientów i stworzenia z nimi poczucia zaufania.

Dlatego skorzystaj z tych praktycznych, inkluzywnych technik, aby poprawić ogólne wrażenia użytkownika, aby pomóc Twojej firmie skalować się w czasie. Powodzenia!