Top 10 najczęstszych błędów użyteczności, które znajdujemy podczas audytów UX

W 2022 roku Google przeprowadziło spore badanie – bo na 13,5 tysiącach kupujących z 14 krajów – na temat tego, jak użytkownicy e-sklepów korzystają z wyszukiwarek. Spośród wszystkich badanych aż 53% przyznało, że jeśli nie są w stanie znaleźć przy ich pomocy produktu, który ich interesuje – zazwyczaj opuszczają sklep.

Mimo to, cały czas wiele stron e-commerce ma z tym problem:

• ich wyszukiwarki nie radzą sobie z obsługą literówek i synonimów;
• nie indeksują opisów produktów albo ich parametrów, a wyłącznie nazwy;
• bazują na bardzo prostych systemach filtrów, które już przy wyborze 2-3 cech wyświetlają „brak wyników”, a do tego wymagają przeładowania całej strony po każdej zmianie parametrów.

Raport Baymard Institute z ubiegłego roku, o których wspomnieliśmy na samym wstępie, daje też kilka innych ciekawych wniosków. Na przykład, że 19% kupujących zdarza się porzucić pełen koszyk, ponieważ proces checkoutu w sklepie jest zbyt skomplikowany lub wymaga założenia konta.

Dobrze zaprojektowany checkout da się zamknąć w maks. 10-12 polach formularza – często nawet mniej i to umieszczając je na jednej karcie. Tymczasem jest wiele sklepów, które bardzo utrudniają finalizację transakcji i rozciągają ścieżkę na 3-4 etapy, każdy z osobnym formularzem; nic dziwnego, że część klientów z niej wypada.

Analizując UX checkoutu w sklepie, zawsze sprawdzamy, co dzieje się, gdy użytkownik popełni błąd – powiedzmy, wpisze numer telefonu w złym formacie.

Powinno być tak, że po wypełnieniu danego pola formularza wyświetli się obok niego komunikat o błędzie, w stylu, „Numer telefonu musi zawierać numer kierunkowy, np. +48 dla Polski”. Samo pole często jest dodatkowo podświetlone na czerwono, aby klient na pewno nie przegapił błędu – i to zadziała w każdym sklepie.

Jednak podczas audytów napotykamy czasem projekty, w których:

• albo w ogóle brakuje walidacji formularzy w czasie rzeczywistym – informacja o błędzie wyświetla się dopiero po kliknięciu przycisku „Zamów", przez co użytkownik musi przejść przez formularz jeszcze raz;
• albo walidacja jest wręcz zbyt nachalna; pole zostaje oznaczone jako błędne jeszcze w trakcie wpisywania, zanim użytkownik zdąży je wypełnić.

Kolejny problem jest z kolei bardziej typowy dla platform sprzedażowych B2B, bo właśnie tam częściej znajdziemy rozbudowane konfiguratory produktów albo tabele ze specyfikacją na kilkadziesiąt wierszy.

Cały czas panuje przekonanie, że hurtowe zamówienia składa się raczej przy biurku, na dużym ekranie, więc optymalizacja takich serwisów pod urządzenia mobilne nie jest aż takim priorytetem. Tyle że to błąd, bo przedsiębiorcy też bardzo chętnie analizują swoje opcje na smartfonach, nawet jeśli transakcję dopinają już przy komputerze. Nie można więc im zaprezentować np. tabeli do porównywania produktów, która jest przycięta do połowy i nie da się jej przewijać w poziomie – o responsywność na platformach B2B trzeba dbać tak samo, jak na każdej innej stronie.

Decyzję zakupową klienci na ogół podejmują na karcie produktu, bo dopiero tam dysponują wszystkimi informacjami, które są im potrzebne, aby ją podjąć. I tu jest kolejny problem – w niektórych sklepach tych informacji po prostu brakuje. Może tu chodzić o:

• zbyt małą liczbę zdjęć produktu (albo zbyt słabej jakości!);
• opis, który sprowadza się do sloganów skopiowanych od producenta;
• słabo przygotowaną, wybrakowaną specyfikację;
• brak opinii od klientów.

Skąd biorą się te niedociągnięcia? Często stąd, że sklepy nie mają żadnego systemu do zarządzania informacjami o produktach; z naszej strony zawsze doradzamy integrację sklepu z platformą PIM, wtedy zarządzanie katalogiem jest o wiele łatwiejsze.

Na ekranie smartfona o wiele trudniej niż na desktopach jest tak zaprojektować interfejs, aby jednocześnie zmieścić na nim wszystkie informacje, buttony itd. ale też nie przytłoczyć użytkownika.

Przy okazji audytów UX bardzo często wychodzi na przykład, że interaktywne elementy są za małe albo umieszczone zbyt blisko siebie, przez co użytkownicy mają problem… aby trafić palcem w ten prawidłowy – to zjawisko ma nawet swoją nazwę, fat-finger error. Poważnym błędem jest też brak hierarchii wizualnej, gdy elementy strony nie wyróżniają się na tle reszty i nie widać, które z nich są najważniejsze na ścieżce zakupowej. Jeśli, powiedzmy, przyciski „Dodaj do koszyka” i „Dodaj do listy życzeń” mają dokładnie ten sam kolor, to też jest to rzecz do poprawy.

Kolejnym problemem – który zresztą pojawia się nawet w największych sklepach – jest brak jasnych komunikatów o błędach.

Niektóre strony nie radzą sobie z tym wcale i wyświetlają użytkownikowi domyślne komunikaty w stylu „Wystąpił wyjątek podczas przetwarzania żądania. Kod błędu: PAYMENT_DECLINED_05.". W takiej sytuacji klient nie rozumie, co oznacza kod błędu, nie wie, czy problem leży po jego stronie czy po stronie sklepu, i nie wie, co ma zrobić… więc najczęściej opuszcza witrynę.

Można trafić też na komunikaty typu „Coś poszło nie tak. :(" – na pewno brzmią przyjaźniej, ale nadal nie sugerują użytkownikowi żadnego konkretnego rozwiązania.

Na szczęście trudno teraz znaleźć stronę sklepu, na której w ogóle nie ma systemu filtrów (pomijając mniejsze sklepy z kilkoma-kilkunastoma produktami), co nie znaczy, że zawsze są dobrze wdrożone. Poprawki będą konieczne, jeśli:

• użytkownik nie może wybrać kilku wartości (np. dwóch-trzech różnych kolorów) dla jednego filtra;
• brakuje informacji o liczbie produktów dostępnych dla danej kombinacji filtrów;
• nie ma możliwości usunięcia pojedynczego filtra bez resetowania całej kombinacji;
• system w żaden sposób nie zapobiega sytuacji, w której użytkownik nie widzi na ekranie żadnych pasujących ofert – w dobrze zaprojektowanym systemie filtrowania fasetowego te wartości, które w połączeniu z już wybranymi kryteriami zwróciłyby zero wyników, powinny być blokowane i oznaczane szarym kolorem, ewentualnie ukrywane.

Wyobraź sobie klienta, który doskonale wie, co chce kupić – trafia na kartę produktu i od razu próbuje kliknąć „Dodaj do koszyka”... ale wtedy cały interfejs przesuwa się w dół, bo dopiero po kilku sekundach, na samej górze ekranu pojawia się baner promocyjny; trafia więc na przycisk „Dodaj do listy życzeń".

Takie przesunięcia układu interfejsu najczęściej pojawiają się, gdy elementy strony nie mają odpowiednio zdefiniowanych wymiarów w kodzie, przez co przeglądarka nie wie, ile miejsca na nie „zarezerwować” podczas renderowania witryny. Przy projektowaniu ta kwestia czasem jest odkładana na bok jako mniej ważna niż, powiedzmy, optymalizacja pod kątem wydajności, jednak warto się jej przyjrzeć – zwłaszcza że stabilność interfejsu jest też jednym z trzech wskaźników Core Web Vitals, istotnych dla SEO strony.

Zostając przy karcie produktu – jak powiedzieliśmy, powinna odpowiadać na wszystkie pytania klienta, które mogą się pojawić przed zakupem. A jednym z najważniejszych bez wątpienia jest to o warunki dostawy: jakie są opcje, ile kosztuje każda z nich oraz jak długo będzie trzeba czekać na paczkę.

W niektórych sklepach te informacje umieszczone są dopiero pod koniec checkoutu, gdy kupujący staje już przed wyborem formy dostawy; z perspektywy UX to najgorsza możliwa opcja.