Mobile first w e-commerce – Jak dostosować swój sklep do urządzeń mobilnych

W dzisiejszych czasach niemal każdy posiada smartfon. Co więcej, spędzamy w nim już średnio 5h dziennie (data.ai). Jest to powód, dla którego urządzenia mobilne stały się niezwykle ważnym kanałem sprzedaży. Z tego samego powodu też, coraz więcej firm decyduje się na wdrożenie strategii Mobile First. A co to jest? Inaczej, to określenie na strategię projektowania stron internetowych z myślą o użytkownikach korzystających z kanału mobilnego. Ale jak skutecznie realizować tę strategię w e-commerce?

Jak wynika z szacunków Google i e-point z 2022 roku, aż 231 mln euro wynosi przychód stracony ze względu na bariery związane ze złym doświadczeniem użytkownika w trakcie zakupów na telefonach. Oznacza to, że wiele sklepów internetowych serwowało swoim użytkownikom nieprzyjemności wynikające z niedostosowania witryny do urządzeń mobilnych. Dużo przy tym straciło finansowo! Kłóci się to mocno z założeniami “Mobile first”. 

– Dzisiaj wszyscy mamy telefony i to raczej z nich korzystamy najczęściej w ciągu dnia. Gdy mówimy o projektowaniu rozwiązań cyfrowych, pierwszeństwo dajemy interfejsom mobilnym, gdyż to na nich będzie operować największa liczba użytkowników. Trzeba zatem wziąć pod uwagę wymiary ekranu, prędkość ładowania strony oraz przyjazny design dla użytkowników korzystających z mniejszych ekranów niż desktop – mówi Klaudia Borodziej, UX/UI Designer w Escola. 

Mobile first to nie żaden wymysł!

W przypadku e-commerce, podejście mobile first jest nie tylko ważne. Dzisiaj jest wręcz niezbędne. Dlaczego? Spójrzmy na szerszy kontekst. Facebook już od 2012 roku stopniowo zmieniał strategię rozbudowy swojego serwisu, by w 2015 roku oficjalnie stać się firmą „mobile-first”. Mobile w 2016 roku zaczął być zauważalny przez reklamodawców jako skuteczny realizator celów reklamowych. Głównie ze względu rosnącej liczby użytkowników w tym kanale. Z tego samego powodu, i w tym samym roku, Google zaprezentowało Mobile-First Indexing. Była to zmiana w algorytmach indeksowania stron, która do tej pory premiuje strony dostosowane do urządzeń mobilnych, ponad te niedostosowane.

 – Lekcją, którą powinniśmy wyciągnąć z danych jest “Mobile first”. Jeżeli ja teraz odpalę planer słów kluczowych i wpiszę dowolne słowo kluczowe, to mogę sprawdzić ile osób wyszukuje średnio miesięcznie to słowo. Dostanę trend. Zobaczę, że na przykład 8 tys. osób miesięcznie wpisuje to słowo. Bardzo często okazuje się, że większość tych wyszukiwań to właśnie mobile. Więc ja muszę się skupić na tym jak moja strona jest odbierana przede wszystkim w wynikach mobilnych i na urządzeniach tego typu – mówił nam Krzysztof Marzec, CEO w DevaGroup.

W e-commerce to powinien być już obowiązek!

Widzimy więc, że nie jest to żadna nowinka w biznesie. Jest ważna z punktu widzenia SEO oraz doświadczeń użytkownika, którym teraz głównie konkurują strony internetowe. Jednak strategia Mobile first będzie jeszcze ważniejsza w przyszłości. 

Według raportu Digital 2023 na początku 2023 roku ponad 88 proc. Polaków korzystało z internetu. Ponad 65% z nas najczęściej wykorzystuje sieć do celów zakupowych. Dodatkowo wzrósł ruch w sieci z urządzeń mobilnych. Aktualnie wynosi on prawie 61% (o ponad  18% więcej niż w 2021 roku). Dla porównania ruch z desktopu zanotował spadek i obecnie wynosi zaledwie 38%. Raport ten jest kolejnym badaniem, które dowodzi, że ruch mobilny zyskuje na znaczeniu. Z kolei, Insider Intelligence mówi, że do 2024 r. globalna sprzedaż detaliczna m-commerce może stanowić 70% całkowitej sprzedaży detalicznej e-commerce. Oznacza to, że udział sprzedaży za pośrednictwem telefonów będzie znacząco rosnąć. 

Pokazuje to także rosnący udział aplikacji do zakupów na rynku aplikacji na przestrzeni ostatnich lat. Co prawda już w zeszłym roku, zauważyliśmy spowolnienie, ale trend ten wciąż jest w tendencji wzrostowej. Vice-Prezeska Kubota, Joanna Kwiatkowska zauważa, że rośnie przy tym odsetek użytkowników “mobile only”, czyli korzystających tylko i wyłącznie z telefonu komórkowego. Marki będą zatem musiały zainwestować w mobilne doświadczenia zakupowe swoich klientów. Tyczy się to zarówno środowiska płatności, co wpłynie na rozwój portfeli i płatności mobilnych, ale i samego interfejsu użytkownika (UI). Dlatego warto wiedzieć, jak skutecznie realizować mobile first w e-commerce (UX).

UX istotą mobile frst w e-commerce

Gdy mowa o optymalizacji strony pod urządzenia mobilne, bezwiednie musimy przejść do aspektu UX/UI. Gdy mowa o UX, mamy na myśli zarówno interfejs strony, nawigację po niej, wszystkie jej funkcjonalności, jak i mniej oczywiste rzeczy jak komunikacja z użytkownikami we wszystkich kanałach czy nawet sposób pozycjonowania danej strony w wynikach wyszukiwania. 

To ważne, ponieważ The Next Scoop mówi, że przeciętny klient mobilny opuszcza źle zaprojektowaną witrynę w mniej niż 3 sekundy. Strona musi być zatem estetyczna i łatwa w obsłudze. Według Neila Patela, 55% konwersji dokonywane jest w ciągu godziny od rozpoczęcia wyszukiwania w kanale mobilnym. To dość szybki zysk. Jednak klient nie kupi niczego w sklepie, który nie wzbudza w nim zaufania albo budzi wątpliwości w wygodzie jego  obsługi. Cały proces kupowania powinien być zatem prosty i przejrzysty, ale przede wszystkim krótki. 

– Każdy chce dokonać zakupu produktu tu i teraz. Każdy chce to zrobić jak najwygodniej i jak najprzyjemniej. Warto zadbać o każdy etap, ale szczególnie o ten końcowy. Czasami zapominamy o tym i rzeczywiście nasz sklep jest świetnie zrobiony, ma funkcjonalne zakładki, wszystko jest przemyślane, nawet działania promocyjne. Jednak często jak już dochodzi do finalizacji zakupu, to nagle bezpowrotnie tracimy klienta. Warto zbadać ostatnie kroki naszego procesu – tłumaczyła nam Kamila Gębik, autorka książki “Przyszłość E-commerce dla fashion i beauty”. 

Jak być mobile friendly w e-commerce

Sklep dostosowany do mobile to przede wszystkim taki, który odpowiada rozmiarem jego ekranowi. Wszystkie elementy mają w nim wielkości dostosowane do właśnie tego typu rozmiaru. Nawigacja po takim sklepie jest czuła oraz zapewnia odpowiednie wrażenia haptyczne, by użytkownik miał pewność, czego właśnie dotyka. Nie wolno zapominać o szybkości ładowania się strony i usunięciu zbędnych elementów. Mobile UX to także spersonalizowane reklamy, krótkie opisy oraz integracja z możliwościami sprzętowymi urządzenia. Może to być zarówno wykorzystanie silnika sztucznej inteligencji jak i kompatybilności aparatu z AR, zintegrowanym na platformie.

Zapewnij responsywność!

Strona powinna być responsywna, czyli zaprojektowana w taki sposób, aby dostosowywała się do rozmiaru ekranu, na którym jest wyświetlana. Oznacza to, że treści, zdjęcia i przyciski powinny być automatycznie dostosowane do mniejszych rozmiarów ekranów. Ale także powinny ładować się szybko, aby uniknąć frustracji klientów. Dzięki temu użytkownik może łatwo przeglądać i dokonywać zakupów, bez konieczności ciągłego przewijania lub powiększania czy zmniejszania ekranu.

Miej szybką witrynę!

Urządzenie mobilne ma średnio 4 razy wolniejszy procesor, o wiele mniej pamięci RAM oraz wolniej działające połączenie z internetem. Wpływa to na długość ładowania witryny. A zbyt długi czas oczekiwania na stronę to jedna z największych barier dla użytkowników mobilnych. W przypadku e-commerce, gdzie użytkownicy zazwyczaj oczekują szybkich i łatwych transakcji, wolne ładowanie jest frustrujące i jak już wiemy, skutkuje odpływem użytkowników. Dlatego warto zadbać o optymalizację pod kątem prędkości ładowania. 

Audytorzy z Google i e-point zalecają, aby zmniejszyć rozmiar i zrewidować kod JavaScript, aby nie blokował renderowania strony. Należy także zmienić cache’owanie na dłuższe oraz przekonwertować format grafik na WebP. Zaleca się także zmniejszenie rozmiaru i struktury drzewa DOM. Ponadto, warto też zmienić obsługę stylów CSS, w tym minifikację plików CSS, aby przyspieszyć ładowanie strony.

Postaw na prostotę i funkcjonalność!

Użytkownicy mobilni oczekują łatwego i szybkiego dostępu do informacji. Zazwyczaj robią zakupy w trakcie wykonywania innych czynności. Dlatego ważne jest, aby strona była intuicyjna w obsłudze. Dobre praktyki projektowe to m.in. stosowanie prostych formularzy, przejrzystych menu oraz prostych i zwięzłych opisów produktów czy tzw. microscopies dotyczących nawigacji po samej stronie.

Audytorzy z Google i e-point polecają też dodanie funkcjonalności dodawania produktów do ulubionych bez konieczności rejestracji, co może przyczynić się do zwiększenia liczby konwersji. Jednocześnie, rekomendują umieszczenie na pierwszym ekranie najważniejszych informacji, takich jak cena produktu i przycisk dodania do koszyka. Z kolei, dostosowanie klawiatury do rodzaju wprowadzanych danych może zminimalizować błędy podczas wpisywania oraz skrócić jego czas. Błędy mogą się jednak zdarzyć, ale oznaczanie ich samymi kolorami może być niewystarczające. Warto wprowadzić specjalną ikonę lub komunikat, aby poinformować użytkownika o konieczności poprawy danego pola. Nie mniej ważna jest funkcja filtrów na stronie internetowej, która pozwala na szybsze wyszukiwanie interesujących produktów. Ważne jest, aby klient widział stan obecny włączonych filtrów, co pozwoli uniknąć mu nieporozumień związanych z produktem.

Nie zapominaj o personalizacji!

Kolejną istotną kwestią jest personalizacja oferty dla użytkowników mobilnych. Urządzenia mobilne pozwalają na zbieranie różnego rodzaju danych, takich jak dane geolokalizacyjne, preferencje klientów, zachowania zakupowe i wiele innych! Danych jest ogrom, więc nie ma sensu ich tu wszystkich wyliczać. Ważne jest to, że smartfon pozwala na dokładne określenie profilu klienta i personalizowanie przekazu marketingowego. Pozwala też na bezpośrednią komunikację z nim. Dlatego ważne jest, aby wykorzystywać jego możliwości i oferować klientowi mobilnemu spersonalizowane treści i produkty, które odpowiadają jego własnym potrzebom. Organizacje wykorzystujące marketing behawioralny i dane dotyczące zachowań konsumentów do generowania wniosków, uzyskują nawet do 85% wzrostu sprzedaży w porównaniu do konkurentów.

Zadbaj o komfortowe płatności

Wyobraź sobie, że stoisz w kolejce albo jedziesz autobusem i chcesz kupić sobie buty, o których ciągle zapominasz. W końcu nadszedł ten moment, w którym masz chwilę na zakupy. Znajdujesz interesujący cię towar, wszystko przebiega zgodnie z planem i szybko. Jednak nagle podczas dokonywania zakupu musisz podać numer karty, której nie masz przy sobie albo musisz wypełnić bardzo długi formularz i przerzuca cię na inne strony płatników. Choć brzmi to niewinnie, może skutecznie odstraszyć od zakupu. 

Dlatego, kolejnym ważnym elementem jest zoptymalizowanie procesu zamawiania i płatności. W przypadku urządzeń mobilnych łatwość korzystania z platformy jest kluczowa. Wszystkie formularze i kroki w procesie zamówienia powinny być skrócone i uproszczone. Klienci powinni mieć też wybór w metodach płatności, aby skorzystać z dla siebie najwygodniejszej w danym momencie. Dla właścicieli biznesów online nie jest łatwe zarządzanie wszystkimi płatnościami na swoich stronach, bo wymaga to wielu umiejętności i czasu. Generuje to zatem duże koszty! Jednak są już rozwiązania dla firm, które ułatwiają ten proces. Ułatwieniem w zarządzaniu wieloma metodami płatności w e-commerce jest zastosowanie bramki płatniczej, umożliwiającej akceptację różnych form płatności w jednym miejscu.

Testuj swoje rozwiązania!

Aby sprawdzić, czy strona jest przyjazna dla użytkowników mobilnych, przeprowadzaj testy i analizy. W ten sposób wykryjesz potencjalne problemy i zoptymalizujesz stronę pod kątem urządzeń mobilnych. Istnieje wiele narzędzi do testowania responsywności strony oraz prędkości ładowania, jak Google PageSpeed Insights czy GTmetrix. Jednak nie powinny być to jedyne wyznaczniki. Prowadź też badania z użytkownikami oraz własne audyty użyteczności. Na Mobile Trends Conference dowiedzieliśmy się, że sespół Mobeedicka już pracuje nad ułatwieniem tego procederu.

Mobile first to strategia

Realizacja strategii Mobile First w e-commerce jest niezwykle ważna, aby zapewnić klientom łatwy i intuicyjny dostęp do sklepu internetowego. Ważne jest, aby poświęcić czas i zasoby na stworzenie responsywnego designu, zoptymalizowanie procesu zamawiania i płatności, personalizację oferty dla użytkowników mobilnych oraz regularne testowanie strony internetowej na różnych urządzeniach mobilnych i mierzenie kluczowych wskaźników, jak liczba konwersji czy współczynnik odrzuceń. Pozwoli nam to lepiej oszacować skuteczność realizowanej strategii. Strategii, którą jest nie tylko zwiększenie konwersji, ale też zadowolenie klientów. 

Kluczowy jest klient oraz platforma!

Ostatecznie, tym co jest najważniejsze w Mobile first jest tym samym, co jest najważniejsze w biznesach, w ogóle! Mowa oczywiście o naszym kliencie, który coraz częściej jest też naszym użytkownikiem! Zadbanie o jego doświadczenia związane z naszymi interfejsami oraz procesami będzie kluczowe dla zachowania płynności w sprzedaży sklepu internetowego. Stąd tak istotne jest, aby nie zapominać o User Experience.  Jednak między wierszami, możemy zauważyć, że w strategii tej bardzo ważny będzie dobór odpowiedniej technologii, która pomoże szybko adaptować się do zmian w biznesie oraz zmieniających się potrzeb użytkowników. 

– Temat doświadczeń użytkownika może spędzać sen z powiek, ale nie musi. Istnieje coś takiego jak headless, które moim zdaniem jest przyszłością handlu internetowego. W kontekście UX/UI, architektura “bez głowy” daje pełną kontrolę nad wyglądem oraz funkcjonalnościami, które można łatwo zmieniać na własne potrzeby, tudzież naszych klientów. Dzięki niej powstają piękne sklepy internetowe. Ważniejsze jest jednak to, że konwertują. Nasi klienci już dzisiaj mogą wyprzedzać rynek i wyznaczać trendy! A na tak konkurencyjnym rynku, właśnie to buduje długoterminową przewagę – powiedział nam Daniel Parzych, odpowiedzialny za headlessowy projekt Heseya.