Społeczeństwo starzeje się, a klient 60+ to osoba z dużym kapitałem zakupowym na rynku. Ma czas, pieniądze i smartfon, który coraz lepiej obsługuje. Ponadto, na ich koncie znajdują się często spłacone już kredyty, ich dzieci są „wyprowadzone” i nie muszą już odkładać na emeryturę. GUS szacuje, że w Polsce żyje ponad 10 milionów osób powyżej sześćdziesiątego roku życia. Według prognoz Eurostat do 2035 roku, co trzeci obywatel Unii Europejskiej będzie po sześćdziesiątce.
Dostępność to nie jest niszowy trend czy łatwy do obejścia wymóg prawny, to realna przewaga konkurencyjna i szansa na pozyskanie lojalnego klienta. Wszystko ku temu zmierza. Nawet smartfony stają się coraz większe i łatwiejsze w użyciu. Niestety, UX współczesnego e-commerce staje się dla dojrzałego wzroku i motoryki barierą nie do przejścia. Ignorując naturalne, biologiczne zmiany związane z wiekiem naszych klientów, codziennie po cichu sabotujemy własny współczynnik konwersji.
Dzieje się tak poniekąd trochę dlatego, że większość sklepów online jest projektowana pod siebie, a nie klientów. Projektanci UX zwykle pracują na dużym monitorze z ekranem retina, a testujemy na tym, na czym pracujemy, czyli na laptopach, zapominając nawet o urządzeniach mobilnych, których popularność wciąż rośnie.
Co utrudnia e-zakupy seniorom?
Wyróżniłabym trzy główne bariery, na które natrafiają seniorzy w sklepach online:
- Bariery wizualne, które wynikają z naturalnego spadku ostrości wzroku, pogorszenia percepcji głębi oraz utraty wrażliwości na kontrast wraz z wiekiem. Powodują, że treści w szarym kolorze i małe elementy zlewają się w nieczytelną plamę.
- Bariery mobilne wiążące się z mniejszą precyzją dotyku oraz drżeniem dłoni u starszych użytkowników. Zakupy na małym ekranie smartfona stają się wyzwaniem, np. przez zbyt ciasno upakowane linki i miniaturowe przyciski.
- Bariery poznawcze dotyczące naturalnego spowolnienia procesów przetwarzania danych oraz szybszego zmęczenia pamięci krótkotrwałej. Objawiają się poczuciem chaosu i dezorientacji, gdy na ekranie, np. pojawiają się na agresywne komunikaty i wyskakujące okienka.
Bariery te da się łatwo wyeliminować i zapewnić łatwiejszy dostęp do zakupów, a tym samym wzrostu konwersji, zwiększając dostępność platformy dla seniorów. Zmiany te pomogą nie tylko im, skorzysta więcej osób, które mimo młodszego wieku, borykają się z chorobami psychicznymi, są neuroatypowe lub złamały rękę i ich precyzja ruchów jest dużo słabsza.
Optymalizacja wizualna interfejsu
Dojrzały mózg potrzebuje znacznie więcej światła i wyraźniejszych punktów odniesienia, aby prawidłowo zinterpretować to, co widzi na ekranie. Stąd też nowoczesne trendy w web designie (minimalizm, delikatne szarości, cienkie kroje pism i subtelne linie) stoją w sprzeczności z naturalnymi potrzebami starszych oczu. Monotonna kolorystycznie strona może zlewać się w nieczytelną plamę, uniemożliwiając odnalezienie kluczowych informacji o produkcie czy cenie. Co prawda, coraz częściej spotykam się ze stronami z opcją przełączenia na tryb ciemny, jednak to wciąż ciekawostka, a nie standard.
Jak te bariery wyeliminować?
1. Stosuj się do wytycznych WCAG w kwestii koloru, czyli utrzymywania minimalnego kontrastu między tekstem i ważnymi informacjami:
- dla powiększonego tekstu (18pt/24px lub pogrubione 14pt/18.66px) i elementów nietekstowych (np. ikony) wymagany kontrast to 3:1,
- dla zwykłego tekstu (wszystko poniżej tekstu powiększonego) wymagany kontrast to 4,5:1,
- kontrast można sprawdzić za pomocą np. color contrast checker czy WAVE Evaluation Tool.
2. W typografii wykorzystuj relatywne jednostki rem zamiast sztywnych px w CSS.
3. Unikaj umieszczania kluczowych informacji (np. kodów rabatowych, warunków promocji) bezpośrednio na grafikach.
4. Wybieraj dostępne rodzaje fontów, które nie mają zawijasów lub podobnych liter.
5. Nie blokuj powiększania widoku, tekstu lub korzystania z aplikacji w orientacji poziomej.
6. Dziel tekst krótkie akapity z wyraźnymi nagłówkami, co ułatwi skanowanie strony.
7. Gdy chcesz wyróżnić jakąś ważną informację, np. komunikat o błędzie, nie polegaj wyłącznie na kolorze, ponieważ widzenie barw z wiekiem się pogarsza.
8. Co jakiś czas i po większych wdrożeniach, testuj stronę również na małych ekranach.
Zdjęcia: Niesiada.pl (niewystarczający kontrast i tekst na zdjęciu, które bardzo utrudniają odczytanie informacji)
Usprawnienia dla interakcji dotykowych
O projektowaniu pod urządzenia mobilne (Mobile-First) mówi się od dawna. Jednak w pogoni za trendami i chęcią zmieszczenia jak największej liczby funkcjonalności na małym ekranie, obsługa smartfona przez osoby starsze, staje się coraz bardziej utrudniona. Z wiekiem spada precyzja ruchów dłoni, pojawiają się drżenia mięśniowe, elastyczność stawów jest mniejsza. Obsługa urządzenia mobilnego może zacząć przypominać grę zręcznościową, co więcej, grę nie do przejścia. Powoduje to frustrację, zniechęcenie i rezygnację z dalszego przeglądania lub po prostu porzucenie zakupów. Dla klienta 60+ to jasny sygnał: ten sklep nie jest dla Ciebie.
Zdjęcia: Sklep biogo.pl (bardzo mała odległość między opcjami wyboru metody dostawy czy przyciskami)
Jak te bariery wyeliminować?
- Projektuj wystarczająco duże obszary klikalne, jak np. interaktywne ikony, checkboxy do odhaczenia czy liczniki do zmiany liczby produktów. Dla komfortu dojrzałych rąk warto dążyć do rekomendacji od Apple i Google: minimum 44 x 44, a nawet 48 x 48 pikseli.
- Elementy, które wizualnie muszą pozostać niewielkie, powiększaj poprzez marginesy wewnętrzne, które nie rozsuną między sobą komponentów interfejsu, a jedynie zwiększą strefę klikalną.
- Projektuj pod kciuk, czyli najistotniejsze przyciski akcji (np. „Kup teraz”, „Przejdź do płatności”) umieszczaj tam, gdzie kciuk naturalnie sięgnie, gdy użytkownik trzyma smartfon jedną dłonią.
- Pozwól na obsługę strony klawiaturą, gdyż w pewnym wieku precyzyjne ruchy myszką stają się bardzo utrudnione.
- Dbaj, aby pola formularzy były duże i czytelne, co pozwoli łatwo w nie trafić.
- Testuj obsługę smartfona jedną ręką, sprawdzając, czy elementy sterujące są łatwo osiągalne.
Upraszczanie nawigacji i komunikacji
Mamy tu do czynienia z tym, jak ludzki mózg przetwarza informacje. Jest to obszar często ignorowany, gdyż jest dość trudny do zmierzenia i określenia zakresu potrzebnych zmian. Niestety, wraz z wiekiem szybkość procesów kognitywnych może ulec naturalnemu spowolnieniu, trudniej też utrzymać koncentrację w środowisku pełnym dystraktorów.
Tymczasem wiele sklepów internetowych przypomina hałaśliwy jarmark. Wyskakujące okienka z zachętą zapisu na newsletter, liczniki odliczające czas do końca promocji, wyskakujące komunikaty: „3 osoby oglądają teraz ten produkt”, chatboty witające klienta na dole ekranu. Klient może mieć poczucie zagubienia i dezorientacji. Dodatkowo, gdy po opuszczeniu strony, senior dostaje mail z informacją z przekazem: „wiemy, że u nas byłeś i wrzuciłeś produkt X do koszyka”, może wywołać jeszcze większy niepokój i poczucie bycia podglądanym.
Zdjęcia: Sklep Pani Torbalska i liczne dystraktory na stronie sklepu
Trudności te możesz wyeliminować poprzez:
- stosowanie prostego języka,
- tworzenie jasnych i konkretnych instrukcji (najlepiej z obrazkami wizualizującymi poszczególne kroki),
- unikanie żargonu, specjalistycznego języka rozumianego przez wąską grupę odbiorców,
- wszelkie procesy, jak np. wysłanie formularza kontaktowego, powinny być maksymalnie uproszczone,
- podzielenie dłuższych procesów, jak np. finalizowanie zakupów (zamiast długich jednostronnicowych formularzy z ogromną liczbą pól do wypełnienia, podziel proces na logiczne, liniowe etapy: koszyk -> dane dostawy -> metoda dostawy i płatności -> podsumowanie),
- rezygnacja z presji czasowej poprzez migające i stresujące liczniki,
- projektowanie wyraźnych i pomocnych komunikatów błędów (informacja, że „pole jest wymagane” nie mówi co to za błąd i jak go naprawić), zupełnie inaczej jest z informacją: „Wpisz kod pocztowy w formacie 00-000” (klient wie, jaki błąd popełnił i jak poprawnie wypełnić pole).
Iluzja dostępności, czyli nakładki
Na rynku promowane są tzw. nakładki dostępnościowe (accessibility overlays) lub nakładki ułatwiające dostępność – automatyczne widżety i wtyczki oparte na sztucznej inteligencji, które obiecują „zgodność z WCAG w 24 godziny” za pomocą prostego kodu.
Niestety, nie rozwiązują one barier, zazwyczaj tylko je maskują, a niekiedy wręcz potęgują. Te automatyczne skrypty radzą sobie z zaledwie częścią problemów – i to nie zawsze poprawnie.
Dlaczego dodawanie nakładek do kodu nie jest dobrym pomysłem?
- Wchodzą w konflikt z technologiami asystującymi i często blokują lub zaburzają działanie tych działających w miarę poprawnie stron.
- Tworzą barierę dla osób z ograniczeniami motorycznymi i poznawczymi, a taki widget to dodatkowy kolejny element interfejsu, który trzeba odnaleźć i uruchomić.
- Nie chronią przed odpowiedzialnością prawną.
- Spowalniają ładowanie strony przez dodatkowe skrypty JS renderowane w locie i obciążają przeglądarkę, co na słabszych smartfonach wydłuża czas ładowania i zniechęca do e-zakupów.
- Dają fałszywe poczucie bezpieczeństwa, a wiele sklepów kusi się na takie rozwiązanie, bo klient zostaje uśpiony obietnicą „automatycznej zgodności”.
Dostępność nie jest „nowym trendem” lub chwilową modą. To tak naprawdę powrót do zasad dobrego UX’u. Eliminując różne bariery, nie tylko ułatwiasz zakupy pokoleniu 60+, ale robisz też przysługę swojemu biznesowi. Interfejs przyjazny dla seniora to interfejs, w którym zakupy zrobi szybciej i chętniej każdy inny użytkownik: zmęczony pracownik korporacji, matka trzymająca płaczące dziecko czy młody człowiek stojący w pełnym słońcu na przystanku. Inkluzywny design to najbardziej opłacalna strategia optymalizacji współczynnika konwersji (CRO), jaką możesz wdrożyć.