M-commerce w Polsce rozkręca się, ale nadal potrzebuje poprawy. Wyniki 2. edycji badania przeprowadzonego przez Google i e-point SA 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 r. smartfony odpowiadały za 6% globalnego ruch w sieci. W 2022 r. 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 r. było dwa razy więcej zapytań ze smartfonów roku niż z desktopów. Z najnowszych danych firmy Google wynika, że w 2022 r. 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%.
Słuchaj „Marketer+” Podcast
Chcesz dowiedzieć się więcej o m-commerce? Sięgnij po EwP7 (PDF).
Dowiesz się, co zrobić, aby odwiedziny Twojego sklepu przez potencjalnego klienta z telefonu lub tabletu zaowocowały sprzedażą.
Jak usprawnić polski m-commerce
Firmy Google oraz e-point SA w ramach 2. edycji projektu Google Retail Growth szukały odpowiedzi na pytanie, jak usprawnić polski m-commerce, aby był jeszcze szybszy i przyjaźniejszy mobilnym internautom. Audytem objęto 25 mobilnych witryn firm pod kątem usprawnienia procesu sprzedaży i szybkości działania sklepów mobilnych.
W analizie badania mobilnego UX 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).
Efekty drugiej edycji projektu to ponad 530 rekomendacji dotyczących mobilnego user experience oraz szybkości witryny, przekazanych do 25 polskich firm e-commerce dużej i średniej wielkości, z kategorii zdrowie & uroda, meble, art. spożywcze, elektronika, książki, moda i turystyka.
Kluczowe wnioski
- 73% firm, które wdrożyły przynajmniej jedną rekomendację dot. mobilnego UX, odnotowało wzrost konwersyjności w kanale mobile (względem desktopu).*
- 57% firm, które nie wdrożyły żadnej rekomendacji dot. mobilnego UX, zaliczyło spadek konwersyjności w kanale mobile (względem desktopu).
- Prawie 12% – tyle wyniósł średnio wzrost szybkości stron w firmach, które wdrożyły rekomendacje. Natomiast blisko 5% spadku szybkości zanotowały firmy, które nie wdrożyły żadnej rekomendacji.
- 72% klientów biorących udział w projekcie wdrożyło rekomendacje, ponad 30% rekomendacji zostało wdrożonych lub jest w trakcie wdrożenia, a średnia oceny audytu przez uczestniczące firmy to wysoka nota 4.9 punktów, na 5 możliwych.
Przeczytaj raport z pierwszej edycji badania (PDF).
Liczy się user experience (UX) – TOP 5 rekomendacji
Statystyczny klient mobilny przegląda produkty lub usługi za pomocą smartfona w przerwie mię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 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ło dobrze widać najważniejsze informacje i akcje.
W przypadku strony produktowej jest to cena oraz przycisk dodania do koszyka. W 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ż PIN-u. 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 – za pomocą ikony w pobliżu błędnie wypełnionego pola oraz zrozumiałego komunikatu 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. 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 6 razy mniejszy ekran niż desktop, 4 razy 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.
