Jak zadbać o User Experience (UX) w m-commerce? Najnowsze rekomendacje

Przeczytaj także: Ile traci e-commerce na niedostosowaniu witryn do smartfonów?

Wyniki 2-giej edycji badania Google Polska i e-point pokazują, że dla polskich przedsiębiorców sprzedaż przez kanał mobilny jest bardzo istotna i chętnie go usprawniają, ale nadal pojawia się wiele obszarów, w których można osiągnąć lepsze rezultaty i tym samym nie stracić cennych okazji do sprzedaży, szczególnie w kontekście zapowiadanej recesji.

M-commerce to już znaczący kawałek każdego cyfrowego handlu. To wyraźnie widać w liczbach i dynamice wzrostu tego segmentu. W 2011 roku smartfony odpowiadały za 6% globalnego ruch w sieci. W 2022 roku to 6% urosło do ponad 55%. Takiego wzrostu nie można ignorować, tym bardziej że prowadzi do wniosku, iż w dzisiejszych czasach więcej osób posiada urządzenia mobilne niż komputery stacjonarne.

Zmiany globalne widać również w danych Google. Już w kilka lat temu analitycy firmy zauważyli, że smartfony wyprzedzają desktop w e-commerce. W 2021 roku było dwa razy więcej zapytań ze smartfonów roku niż z desktopów. Z najnowszych danych firmy Google wynika, że w 2022 roku polscy internauci korzystali z wyszukiwarki Google 2,5 raza częściej na smartfonach niż na tradycyjnych komputerach. To znajduje odzwierciedlenie w strukturze ruchu na witrynach e-commerce, gdzie w niektórych branżach udział mobilnych internautów sięga aż 80%!

Konkurencja na tym rynku rośnie z kwartału na kwartał i tylko najlepiej przygotowani będą mogli mówić o sukcesie. Dlatego powstał projekt w którym firmy Google oraz e-point SA szukały odpowiedzi na pytanie o to, jak usprawnić polski m-commerce, aby był jeszcze bardziej szybki i przyjazny mobilnym internautom. To już druga edycja tego projektu, która objęła audytem 25 mobilnych witryn firm pod kątem usprawnienia procesu sprzedaży i szybkości działania sklepów mobilnych.

Pierwsza edycja projektu cieszyła się dużym zainteresowaniem branży. Dlatego zdecydowaliśmy się na kontynuację tego programu w ramach programu Google Retail Growth. Dzięki przeprowadzonym audytom mogliśmy pokierować przedsiębiorców w stronę jak najlepszego wykorzystania potencjału tkwiącego w m-commerce tak, aby dostosować ich sklepy do zwyczajów mobilnych internautów i możliwości ich urządzeń, w celu zwiększenia prawdopodobieństwa zakupu - mówi Piotr Kowalski, Senior Analytical Consultant w Google Polska.

Właściciele firm i managerzy e-commerce dobrze wiedzą, jak trudno jest pozyskać klienta. Wkładają wiele wysiłku w zarządzanie płatnym ruchem czy kampaniami reklamowymi. Nieustannie zachęcają użytkownika do odwiedzenia naszego serwisu licząc, że proces ten zwiększy konwersję. Tymczasem często zdarza się, że powolny serwis mobilny, w dodatku o kiepsko zaprojektowanym interfejsie podczas przeglądania na małym ekranie telefonu potrafi skutecznie zniechęcić do zakupów.

Liczne raporty potwierdzają, że m-commerce ma olbrzymie znaczenie w całym portfolio działań firm w obszarze e-commerce. Dlatego wyniki badania, którego celem jest poznanie przestrzenii do poprawy polskiego m-commerce, to duża wartość dla przedsiębiorców, którzy chcą odpowiednio skalować swój biznes. Z naszej perspektywy duże znaczenie mają kwestie techniczne, które usprawniają działanie wersji mobilnej sklepów i tworzą odpowiedni poziom doświadczenia użytkownika, pod kątem szybkości działania sklepu. Warto zwrócić szczególną uwagę zarówno na aspekt projektowania serwisów jak i wyboru odpowiednich technologii, w przypadku gdy zauważalny jest spadek liczby klientów w tym kanale - mówi Piotr Różycki z e-point SA.

Metodologia badania i kluczowe wnioski

W analizie badania mobilnego User Experience zastosowano 58 punktów kontrolnych, które były podstawą do analiz ścieżek użytkownika według dwóch scenariuszy. Badanie pod kątem szybkości działania stron mobilnych obejmowało analizę wskaźników szybkości Core Web Vitals (LCP, FID, CLS, które odpowiednio opisują szybkość pojawiania się elementów w trakcie ładowania witryny, szybkość reakcji witryny na akcje użytkownika oraz wizualną stabilność elementów witryny w trakcie jej ładowania). Na bazie tych wyników firmy otrzymały raport wraz z dokładnym omówieniem proponowanych wdrożeń, aby poprawić zarówno User Experience, jak również szybkość działania mobilnego sklepu.

Liczy się User Experience (UX) - TOP 5 rekomendacji

Statystyczny klient mobilny przegląda produkty lub usługi za pomocą smartfona w przerwie, pomiędzy innymi aktywnościami, obsługując urządzenie jedną ręką. Jego uwaga zazwyczaj rozproszona jest na szereg różnych aktywności i tylko momentami koncentruje się na czymś konkretnym. Dlatego tak ważne jest osiągnięcie wysokiej sprawności na poziomie właściwego dopasowania do jego potrzeb. Poniżej lista to 5 rekomendacji usprawniających User Experience.

1. Dodawanie do ulubionych bez rejestracji

Możliwość dodawania do ulubionych jest świetnym wsparciem w trakcie przeglądania katalogu produktów – oferuje możliwość zapamiętania produktu “na później” bez dodawania go do koszyka, który zawsze jest kojarzony z intencją zakupu. Warto zadbać aby możliwość dodawania do ulubionych była dostępna dla niezalogowanych użytkowników. Dzięki temu użytkownik będzie mógł płynnie poruszać się po sklepie bez konieczności rejestracji, co może wpływać pozytywnie, zwłaszcza w trakcie pierwszej dłuższej wizyty.

2. Główna akcja widoczna na pierwszym ekranie (above the fold)

Ze względu na niewielkie rozmiary ekranów smartfonów warto zadbać, aby po uruchomieniu strony, w widocznej części pierwszego ekranu były widoczne najważniejsze informacje i akcje. W przypadku strony produktowej jest to jego cena oraz przycisk dodania do koszyka, a przypadku widoku kategorii produktów co najmniej większa część pierwszego produktu na liście.

3. Odpowiednia klawiatura w polach tekstowych

Na urządzeniach dotykowych użytkownik wprowadza dane za pośrednictwem klawiatury wyświetlanej na ekranie. Współczesne przeglądarki umożliwiają dopasowanie prezentowanej klawiatury do charakteru wprowadzanych danych – np. przy polu z numerem telefonu powinna być prezentowana klawiatura numeryczna z dużymi przyciskami, a przy polu na adres prezentowana klawiatura alfabetyczna. Pozostawienie klawiatury alfabetycznej z małymi przyciskami numerów powoduje frustrację użytkownika i zwiększa prawdopodobieństwo wpisania złego numeru telefonu, budynku, kodu pocztowego czy też PINu. To rodzi niepotrzebne problemy i koszty po stronie obsługi zamówienia. Warto zadbać aby dopasować klawiaturę ekranową do oczekiwanej zawartości pola formularza. Takie podejście sprawi, że uzupełnienie formularza będzie wygodniejsze oraz zrodzi mniej błędów i pomyłek.

4. Błędy oznaczone nie tylko kolorem

Przy kasie, w trakcie wypełniania formularza zamówienia warto zadbać o czytelne oznaczenie błędów – wyraźną ikoną w pobliżu błędnie wypełnionego pola oraz zrozumiałym komunikatem błędu. Kolor (np. czerwony) może być dodatkowym uzupełnieniem i sposobem na zwrócenie uwagi, jednak nie jest wystarczający do czytelnego oznaczenia błędu. Osoby, które nie rozróżniają kolorów, muszą uzyskać także inne wskazówki (np. specjalne ikony), które wskazują błędnie wypełnione pola

5. Widoczny stan filtrów

Filtrowanie jest podstawowym sposobem poszukiwania odpowiedniego produktu w kategorii, a w trakcie jednej sesji użycia użytkownik często wielokrotnie zmienia zaznaczone parametry. Warto zadbać o to, żeby stan filtrów był widoczny dla użytkownika bez konieczności wykonywania dodatkowej interakcji (np. otwierania panelu filtrowania) – dzięki temu użytkownik może uniknąć pomyłek oraz łatwiej zrozumieć prezentowane treści.

Klienci chcą szybkich witryn internetowych - TOP 5 rekomendacji szybkości

Smartfon, na którym dokonywane są zakupy mobilne ma średnio 6x mniejszy ekran niż desktop, 4x wolniejszy procesor, mniej pamięci RAM, a dodatkowym utrudnieniem jest powolne połączenie z internetem lub wręcz jego brak - na przykład w podróży. Wobec rosnącej popularności kanału m-commerce należy porzucić podejście, zgodnie z którym mobile traktowane jest jako rzecz ‘drugiej kategorii’ i zaprojektować oraz przetestować to narzędzie z taką samą starannością jak tradycyjny desktop. Aby przeglądający ofertę użytkownik stał się klientem firmy, kluczowe jest więc usprawnienie działania wersji mobilnych sklepu. Dzięki przeprowadzonym audytom udało się wyróżnić top 5 rekomendacji poprawiających szybkość działania sklepu mobilnego:

1. Rozmiary i rewizja zastosowanych JavaScript

Jeśli JavaScript blokuje renderowanie, przeglądarka musi pobrać, przetworzyć, skompilować i ocenić skrypt, zanim będzie mogła przystąpić do wszystkich innych czynności niezbędnych do wyrenderowania strony. Nawet jeśli JavaScript jest asynchroniczny (tj. nie blokuje renderowania), kod konkuruje o przepustowość z innymi zasobami podczas pobierania, co ma znaczący wpływ na wydajność. Dodatkowo nieużywany JavaScript może spowolnić szybkość ładowania strony, a wysyłanie nieużywanego kodu przez sieć jest również marnotrawstwem dla użytkowników telefonów komórkowych, którzy nie mają nieograniczonych planów transmisji danych.

2. Polityka cache’owania do optymalizacji

Kiedy przeglądarka żąda zasobu, serwer dostarczający zasób może powiedzieć przeglądarce, jak długo powinna tymczasowo przechowywać lub buforować ten zasób. Dla każdego kolejnego żądania tego zasobu przeglądarka używa swojej lokalnej kopii, zamiast pobierać ją z sieci. Dzięki optymalizacji HTTP cache można przyspieszyć czas ładowania strony przy wielokrotnych odwiedzinach.

3. Upgrade grafik i obrazów do formatów następnej generacji

WebP to formaty obrazów, które mają lepsze właściwości kompresji i jakości w porównaniu do ich starszych odpowiedników JPG i PNG. Kodowanie obrazów w tych formatach oznacza, że będą one ładować się szybciej i zużywać mniej danych komórkowych.

4. Optymalizacja rozmiaru i struktury drzewa DOM

Duże drzewo DOM (czyli innymi model struktury danej strony internetowej) może na wiele sposobów spowolnić wydajność tej strony.

Pod względem wydajność sieci i wydajność obciążenia, duże drzewo DOM często zawiera wiele węzłów, które nie są widoczne, gdy użytkownik po raz pierwszy ładuje stronę, co niepotrzebnie zwiększa koszty danych dla użytkowników i spowalnia czas ładowania strony.

Ma to również znaczenie w przypadku wydajności w czasie działania strony mobilnej. W miarę jak użytkownicy i skrypty wchodzą w interakcję ze stroną, przeglądarka musi stale rekompilować pozycję i styl węzłów. Duże drzewo DOM w połączeniu ze skomplikowanymi regułami stylu może poważnie spowolnić renderowanie.

Jeśli zastosowany JavaScript używa ogólnych selektorów zapytań, takich jak document.querySelectorAll, strona może przechowywać referencje do bardzo dużej liczby węzłów, co może przeciążyć możliwości pamięciowe urządzeń użytkowników mobilnych a tym samym ograniczyć wydajność pamięci.

5. Rozmiary i rewizja obsługi styli CSS

Nieużywany CSS również spowalnia budowę drzewa renderowania przez przeglądarkę. Drzewo renderowania jest podobne do drzewa DOM, z tym wyjątkiem, że zawiera również style dla każdego węzła. Aby skonstruować drzewo renderowania, przeglądarka musi przejść przez całe drzewo DOM i sprawdzić, które reguły CSS mają zastosowanie do każdego węzła. Im więcej jest nieużywanego CSS, tym więcej czasu przeglądarka może potencjalnie potrzebować na obliczenie stylów dla każdego węzła. Dobrą praktyką jest też minifikacja plików CSS może poprawić wydajność ładowania strony. Pliki CSS są często większe niż powinny być.

Metryką użytą w obliczeniach był tzw. Relative Conversion Rate (iloraz Mobile Conversion Rate oraz Desktop Conversion Rate), obrazujący względne prawdopodobieństwo zakupu w kanale mobile wobec desktopu. Obliczeń dokonano metodą ‘pre-post’, porównując okres 4 tygodni przed prezentacją audytu klientowi z okresem 4 tygodni na końcu projektu.