Cyfrowa ściana na karcie produktu. Jak błędy w UX i architekturze informacji łamią EAA i po cichu ucinają Twoją konwersję?

Wyobraź sobie idealny scenariusz e-commerce: klient wchodzi do Twojego e-sklepu, trafia na kartę wymarzonego produktu i jest w 100% zdecydowany na zakup. Wybiera kolor, chce zaznaczyć odpowiedni rozmiar i… w tym momencie proces gwałtownie się urywa.

Klient wcale się nie rozmyślił. Po prostu Twój mechanizm wyboru wariantów (tzw. swatches) stał się dla niego cyfrową ścianą nie do przebicia.

Gdy menedżerowie i właściciele sklepów myślą o audytach dostępności i optymalizacji e-commerce, najczęściej biorą pod lupę stronę główną, koszyk albo samą bramkę płatności. Tymczasem prawdziwe serce sprzedaży – czyli karta produktu, a w szczególności selektory wariantów (kolorowe kółka czy rozwijane listy) – to miejsca, gdzie najczęściej dochodzi do tzw. regresu dostępności. To właśnie tam najłatwiej nieświadomie zafundować użytkownikom cyfrowe wykluczenie i… złamać przepisy Europejskiego Aktu o Dostępności (EAA).

Pułapka ślepego minimalizmu – gdy design walczy z użytecznością

Współczesne trendy UI/UX dążą do maksymalnego uproszczenia formy. Zamiast tradycyjnych, „ciężkich” napisów typu „Kolor: czarny”, projektanci wolą umieszczać na stronie estetyczne, minimalistyczne kółka wypełnione barwą. Dla pełnosprawnego użytkownika, który sprawnie klika myszką, to rozwiązanie jest w pełni intuicyjne. Jednak dla osoby niewidomej, słabowidzącej, z ograniczeniami motorycznymi lub takiej, która nawiguje po sieci wyłącznie za pomocą klawiatury, taki układ staje się technologicznym koszmarem.

Jeśli kolorowy kafelek nie posiada w kodzie odpowiedniej etykiety tekstowej (np. znacznika aria-label lub tekstu ukrytego dla czytników ekranu), program syntezujący mowę przeczyta użytkownikowi jedynie suchy komunikat: „Przycisk, niezdefiniowany”. Klient dostaje sygnał, że może w coś kliknąć, ale nie ma pojęcia, czy wybiera klasyczną czerń, neonowy róż, czy wersję limitowaną.

Kolejną miną technologiczną są niestandardowe listy rozwijane rozmiarów (tzw. selecty), ostylowane skomplikowanymi skryptami JavaScript. Jeśli do takiego menu nie da się „dotrzeć” i rozwinąć go za pomocą klawisza Tab, klient sterujący komputerem bez użycia myszki zostanie bezpowrotnie odcięty od możliwości zakupu.

Głos eksperta: „Diabeł tkwi w szczegółach architektury informacji. Często spotykamy e-sklepy, które zainwestowały tysiące złotych w audyty, a ich karty produktów nadal generują gigantyczny współczynnik odrzuceń wśród seniorów czy osób niedowidzących. Wystarczy, że system informujący o braku 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 produkt jest wyprzedany, dopóki nie spróbuje dodać go do koszyka i nie zobaczy błędu. To rodzi gigantyczną frustrację i natychmiastowe opuszczenie sklepu” – zauważają eksperci ds. dostępności cyfrowej z Concordia Design.

EAA to nie przyjacielska sugestia. To twardy standard techniczny

Europejski Akt o Dostępności (EAA) przynosi fundamentalną zmianę na rynku: przenosi dyskusję z poziomu „warto być inkluzywnym” do strefy „musisz spełniać konkretne kryteria prawne i techniczne”. Karta produktu podlega tym rygorom w sposób bezwzględny. Każdy interaktywny element służący do konfiguracji towaru musi być w pełni czytelny i operowalny dla każdego użytkownika.

Zgodnie z wytycznymi WCAG, które stanowią prawny i techniczny fundament EAA, każdy komponent witryny musi spełniać cztery żelazne zasady:

Postrzegalności,
Funkcjonalności,
Zrozumiałości,
Solidności (odporności).

Zły kontrast tekstu na tle kafelka, brak wyraźnego oznaczenia aktywnego elementu (tzw. focus) podczas poruszania się klawiaturą czy przekombinowane menu wyboru to bezpośrednie i kosztowne naruszenie prawa.

Warto jednak spojrzeć na to z perspektywy biznesowej: dostępność cyfrowa to w gruncie rzeczy po prostu najwyższa forma UX. Poprawnie zaprojektowana karta produktu podnosi konwersję u każdego klienta, nie tylko u osób z niepełnosprawnościami. Senior kupujący na ekranie smartfona w pełnym słońcu doceni duże kafelki i wyraźne napisy dokładnie tak samo, jak osoba niedowidząca. EAA zwyczajnie wymusza na biznesie porzucenie egoistycznego podejścia do projektowania na rzecz rozwiązań, które zarabiają lepiej.

Jak przekuć błędy wariantów w realny zysk?

Naprawa błędów w architekturze informacji nie wymaga burzenia całego sklepu i pisania platformy od nowa. To kwestia wdrożenia w zespole produktowym prostych mikro-standardów:

Zawsze łącz kolor z tekstem: Każdy kafelek kolorystyczny musi posiadać jasną nazwę tekstową dostępną dla czytników ekranu.
Zadbaj o widoczny focus: Klient poruszający się po wariantach za pomocą klawiatury musi wyraźnie widzieć, na którym polu aktualnie się znajduje (obwódka elementu).
Stosuj jasne, wielokanałowe statusy dostępności: Informacja o braku magazynowym nie może opierać się tylko na zmianie odcienia grafiki. Musi być przekazywana równolegle tekstem, ikoną oraz odpowiednim kodem.

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 błędów, znacznie bezpieczniej i efektywniej jest wyedukować własny zespół – od Product Ownerów i grafików, po programistów i Content Managerów wprowadzających opisy.

Idealną okazją do zdobycia tej unikalnej wiedzy jest bezpłatne, finansowane ze środków Unii Europejskiej szkolenie „Dostępna Firma”, realizowane przez Concordia Design.

W ramach programu dedykowanego branży e-commerce:

Dowiesz się, jak w praktyce projektować karty produktów i moduły wariantów w 100% zgodnie z EAA.
Nauczysz swój zespół deweloperski, jak pisać kod wolny od barier cyfrowych (standardy WCAG).
Otrzymasz gotowe narzędzia i checklisty do samodzielnej, błyskawicznej 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ższy ROI.

Zgłoś swój zespół już teraz: https://www.dyrektywa-eaa.pl/dyrektywaeaa/