Na komputerze wszystko działa. Spróbuj kupić jedną ręką

01 / MOBILE / UX SKLEPU

Zmieszczenie strony na ekranie nie kończy projektu

Responsywność oznacza, że układ dostosowuje się do szerokości ekranu. Wygoda mobilna wymaga jeszcze sprawdzenia sposobu działania. Na telefonie korzystamy z dotyku, mamy mniej miejsca, często przerywamy zadanie i wracamy do niego po chwili. Interfejs powinien radzić sobie z taką sytuacją.

Dobrym ćwiczeniem jest przejście ścieżki jedną ręką, siedząc spokojnie i bez pomagania sobie komputerem. To praktyczny sposób na zauważenie niewygodnych elementów, a nie pełne badanie wszystkich sposobów korzystania. Sprawdź także większy rozmiar tekstu i obsługę z użyciem funkcji dostępności.

Nie oceniaj tylko strony głównej. Zacznij od kategorii, otwórz produkt, zmień wariant i przejdź do zamówienia. Jeśli ruch z reklamy kieruje wprost na kartę, to właśnie tam rozpoczyna się doświadczenie klienta.

02 / MOBILE / UX SKLEPU

Wybór produktu musi działać bez najeżdżania myszą

Informacja dostępna wyłącznie po najechaniu kursorem nie ma takiego samego odpowiednika na ekranie dotykowym. Dotyczy to opisów ikon, rozwijanych opcji i podglądów. Istotne informacje powinny być widoczne albo otwierać się przez jasno opisane działanie.

Warianty produktu potrzebują czytelnego stanu wyboru. Po dotknięciu rozmiaru klient ma wiedzieć, co zaznaczył i czy ten wariant jest dostępny. Jeżeli opcja zmienia cenę lub termin, aktualizacja powinna być zauważalna. Mała kropka koloru bez podpisu bywa niewystarczająca.

Filtry muszą dać się wygodnie otworzyć, zastosować i usunąć. Po powrocie z produktu dobrze zachować kontekst przeglądania. Utrata wybranych filtrów lub przeniesienie na początek długiej listy zmusza do ponownego wykonania pracy.

Zdjęcia również wymagają kontroli. Możliwość powiększenia ma pomóc ocenić szczegół, a nie zamknąć klienta w widoku bez czytelnego powrotu. Przetestuj gesty i przyciski na rzeczywistym urządzeniu, nie tylko w zwężonym oknie przeglądarki.

03 / MOBILE / UX SKLEPU

Klawiatura zmienia połowę ekranu

Formularz, który wygląda krótko przed rozpoczęciem wpisywania, po otwarciu klawiatury może stać się trudny w obsłudze. Ważne są właściwe typy pól, autouzupełnianie i etykiety pozostające widoczne po wprowadzeniu tekstu. Użytkownik powinien wiedzieć, co właśnie poprawia.

Dla telefonu przydatna jest klawiatura ułatwiająca wpisanie numeru, a dla e-maila — dostęp do odpowiednich znaków. Nie narzucaj jednak formatu sprzecznego z obsługiwanymi krajami. Numer zagraniczny i inny zapis adresu mogą wymagać elastyczności.

Baymard w przewodniku po finalizacji zamówienia omawia m.in. znaczenie właściwej klawiatury oraz czytelnego zakupu bez konta. To drobne decyzje interfejsu, które składają się na wygodę całego formularza.

04 / MOBILE / UX SKLEPU

Stałe elementy nie mogą zasłaniać działania

Przycisk kontaktu, pasek promocji, komunikat o cookies i przyklejone podsumowanie koszyka mogą być przydatne osobno. Razem potrafią zająć znaczną część małego ekranu. Dlatego testuj je w stanie, który zobaczy nowy klient, a nie wyłącznie po zamknięciu wszystkich komunikatów.

Sprawdź, czy da się dotrzeć do przycisku kontynuacji po otwarciu klawiatury. Zobacz, co dzieje się po powiększeniu tekstu. Upewnij się, że okno wyboru dostawy nie blokuje przewijania w sposób, który uniemożliwia zatwierdzenie.

Nie każdy problem rozwiązuje zmniejszenie fontu. Czasem trzeba ograniczyć treść stałego paska, zmienić moment jego pojawienia się albo zrezygnować z jednego elementu. Priorytetem na etapie płatności jest wykonanie zamówienia, nie prezentacja wszystkich komunikatów marketingowych.

05 / MOBILE / UX SKLEPU

Test kończy się po powrocie z płatności

Klient może przejść do aplikacji banku lub zewnętrznego operatora, a następnie wrócić do sklepu. Trzeba sprawdzić, co widzi po sukcesie, anulowaniu i błędzie. Samo otwarcie bramki płatniczej nie potwierdza poprawnego działania całego procesu.

Próby wykonuj w środowisku testowym lub zgodnie z uzgodnioną procedurą, żeby nie tworzyć przypadkowych zamówień. Obejmij nimi dostępne metody płatności i dostawy, szczególnie najczęściej wybierane. Zwróć uwagę, czy zamówienie nie powiela się po ponownym dotknięciu przycisku.

Listę usterek zapisuj precyzyjnie: model urządzenia, przeglądarka, miejsce i działanie. „Nie działa na telefonie” jest trudne do naprawienia. „Po zmianie dostawy klawiatura zasłania przycisk i nie mogę przewinąć” daje punkt wyjścia.

W mobilnym sklepie jakość często kryje się właśnie w takich szczegółach. Klient nie musi ich zauważać. Wystarczy, że może spokojnie wybrać produkt, zapłacić i otrzymać jasne potwierdzenie.