Niedostępny wariant produktu: Jak błędy w architekturze informacji na karcie produktu wykluczają klientów i łamią EAA?
Natalia Kozanecka
Wyobraź sobie sytuację: klient wchodzi do Twojego e-sklepu, znajduje idealne buty, klika w link i trafia na kartę produktu. Jest zdecydowany na zakup. Chce tylko wybrać czerwony kolor i rozmiar 39. Klika na jedno z kolorowych kółek, próbuje rozwinąć listę z rozmiarami i… w tym momencie proces zakupu zostaje przerwany. Nie dlatego, że klient się rozmyślił. Po prostu mechanizm wyboru wariantu okazał się dla niego cyfrową ścianą nie do przebicia.
Większość audytów dostępności skupia się na stronie głównej, koszyku czy procesie płatności. Tymczasem serce e-commerce – karta produktu, a w szczególności moduł wyboru wariantów (tzw. swatches lub listy rozwijane) – to miejsca, w których najczęściej dochodzi do tzw. regresu dostępności i bezpośredniego niestosowania się przepisów Europejskiego Aktu o Dostępności (EAA).
Wizualna pułapka, czyli kiedy design wyklucza
Współczesne trendy w UX/UI dążą do maksymalnego uproszczenia formy. Zamiast napisów „Kolor: czarny”, projektanci wolą umieszczać estetyczne, minimalistyczne kółka wypełnione odpowiednią barwą. Dla użytkownika pełnosprawnego, korzystającego z myszki, to rozwiązanie intuicyjne. Dla osoby niewidomej, słabowidzącej, z ograniczeniami motorycznymi lub korzystającej wyłącznie z klawiatury, to technologiczny koszmar.
Jeśli kółko z kolorem nie posiada w kodzie odpowiedniej etykiety tekstowej (tzw. aria-label lub ukrytego tekstu dla czytnika ekranu), program odczytujący stronę zakomunikuje użytkownikowi jedynie: „Przycisk, niezdefiniowany”. Klient dowiaduje się, że może coś kliknąć, ale nie ma pojęcia, czy wybiera kolor czarny, neonowy róż, czy wersję limitowaną.
Kolejnym problemem są źle zaprojektowane listy rozwijane (tzw. selecty). Jeśli menu wyboru rozmiaru zostało ostylowane niestandardowym skryptem JavaScript w taki sposób, że nie da się do niego „dotrzeć” za pomocą klawisza Tab, klient sterujący komputerem bez użycia myszki nigdy nie sfinalizuje zakupu.
„Diabeł tkwi w szczegółach architektury informacji. Często spotykamy sklepy, które wydały tysiące złotych na audyty, a ich karty produktów nadal generują gigantyczny współczynnik odrzuceń w grupach osób starszych czy niedowidzących. Wystarczy, że system informujący o braku dostępności danego rozmiaru operuje wyłącznie kolorem – np. poszarzeniem kafelka. Osoba z daltonizmem lub korzystająca z syntezatora mowy w ogóle nie otrzyma informacji, że dany rozmiar jest wyprzedany, dopóki nie spróbuje dodać go do koszyka i nie zobaczy błędu systemu. To gigantyczna frustracja” – zauważa ekspert ds. dostępności cyfrowej Concordia Design.
EAA to nie sugestia – to standard techniczny
Przełom, jaki przyniósł Europejski Akt o Dostępności, polega na przesunięciu dyskusji z obszaru „warto być inkluzywnym” do strefy „musisz spełniać konkretne kryteria techniczne”. Karta produktu w e-commerce podlega pod te rygory w sposób bezwzględny. Elementy interaktywne służące do konfiguracji towaru muszą być w pełni responsywne, czytelne i operowalne dla każdego.
Zgodnie z wytycznymi WCAG, które stanowią fundament EAA, każdy komponent karty produktu musi spełniać cztery podstawowe zasady: postrzegalności, funkcjonalności, zrozumiałości i solidności (odporności). Zły kontrast tekstu z rozmiarem na tle kafelka, brak wyraźnego zaznaczenia aktywnego elementu (tzw. focus) czy skomplikowane menu wyboru to bezpośrednie naruszenie prawa.
„Większość właścicieli e-commerce zapomina, że dostępność cyfrowa to w gruncie rzeczy po prostu najwyższa jakość UX. Poprawnie zaprojektowana karta produktu, z czytelną architekturą informacji i jasnymi wariantami, podnosi konwersję u każdego klienta, nie tylko u osób z niepełnosprawnościami. Osoba starsza, kupująca na ekranie smartfona w pełnym słońcu, doceni odpowiednio duże kafelki i wyraźne napisy dokładnie tak samo, jak osoba niedowidząca. EAA wymusza na nas porzucenie egoistycznego podejścia do projektowania” – podkreśla trener w projekcie „Dostępna Firma”.
Jak zamienić błędy wariantów w zysk?
Naprawa błędów w architekturze informacji na karcie produktu nie wymaga burzenia całego sklepu i budowania go od nowa. To kwestia wdrożenia odpowiednich mikro-standardów w zespole produktowym:
- Zawsze łącz kolor z tekstem: Każdy kafelek kolorystyczny musi mieć przypisaną nazwę tekstową dostępną dla czytników.
- Zadbaj o widoczny focus: Klient poruszający się po wariantach za pomocą klawiatury musi wyraźnie widzieć, na którym rozmiarze aktualnie się znajduje.
- Jasne statusy dostępności: Informacja o braku magazynowym wariantu musi być przekazywana wieloma kanałami (tekst, ikona, kod), a nie tylko zmianą odcienia grafiki.
Zbuduj kompetencje wewnątrz firmy za 0 zł
Zarządzanie asortymentem i pilnowanie dostępności kart produktowych to proces ciągły. Zamiast co miesiąc płacić zewnętrznym agencjom za audyty i poprawki, znacznie bezpieczniej i efektywniej jest wyedukować własny zespół – od Product Ownerów, przez grafików i programistów, aż po Content Managerów wprowadzających opisy produktów.
Idealną okazją do zdobycia tej wiedzy jest bezpłatne, finansowane ze środków Unii Europejskiej szkolenie „Dostępna Firma”, realizowane przez Concordia Design.
W ramach programu szkoleniowego dedykowanego branży e-commerce:
- Dowiesz się, jak w praktyce projektować karty produktów i moduły wariantów zgodnie z EAA.
- Nauczysz swój zespół deweloperski, jak pisać kod wolny od barier cyfrowych (standardy WCAG).
- Otrzymasz gotowe checki i narzędzia do samodzielnej, szybkiej weryfikacji komponentów UI.
Nie pozwól, aby drobne błędy w konfiguracji produktów odcinały Twój e-commerce od lojalnych klientów i narażały firmę na ryzyko prawne. Zadbaj o to, by ścieżka zakupowa była dostępna od pierwszego do ostatniego kliknięcia. Zainwestuj w wiedzę zespołu, która przełoży się na wyższą konwersję. Zgłoś swój zespół już teraz: https://www.dyrektywa-eaa.pl/dyrektywaeaa/
