Now reading:
Mobilna wersja sklepu internetowego: jak ją zaprojektować, aby sprzedaż była skuteczna

Mobilna wersja sklepu internetowego: jak ją zaprojektować, aby sprzedaż była skuteczna

Avatar Arkadiusz Krysik
22 października 2021
clock icon 13 min
Mobilna wersja sklepu internetowego

Z ilu urządzeń z dostępem do internetu korzystasz na co dzień? Urządzenia mobilne czyli smartfony i tablety w ostatniej dekadzie stały się łatwiej dostępne, a liczba sposobów korzystania z internetu - a co za tym idzie robieniu zakupów online - wzrosła. Co jeszcze drastycznie się zmieniło wraz z rozwojem technologii mobilnej? Odpowiedź jest prosta i kluczowa dla rozwoju branży e-commerce - nawyki użytkowników.

Ze względu na to zadbanie o sprawną i atrakcyjną mobilną wersję strony sklepu internetowego powinno być jednym z priorytetowych zadań każdego właściciela witryny e-commerce.

W dzisiejszym artykule na naszym blogu postaramy się znaleźć odpowiedź na takie pytania, jak:

  • Jakie jest znaczenie sprzedaży mobilnej na rynku e-commerce?
  • Jaka powinna być mobilna wersja strony sklepu internetowego?
  • Co to jest podejście mobile first i mobile friendly?
  • Jakie cechy powinna spełniać dobra aplikacja mobilna sklepu internetowego?
  • Co zrobić, aby strona mobilna generowała konwersje?
Mobilna wersja sklepu internetowego

Mobilne sklepy internetowe czyli m-commerce


Dzięki dostępności i wygodzie, jaką oferują urządzenia mobilne, potrzeba korzystania z komputerów stacjonarnych i laptopów powszechnie maleje.

M-commerce
Użycie smartfonów vs komputerów stacjonarnych/laptopów w latach 2015-2018 Źródło

Trend ten widoczny jest także na rynku sprzedaży internetowej.

M-Commerce, czyli mobilna sprzedaż internetowa z roku na rok odgrywa coraz większą rolę na globalnym rynku e-commerce.

Oczekuje się, że do końca 2021 roku M-commerce będzie stanowić aż 72,9% całkowitego handlu detalicznego na całym świecie


E-commerce tradycyjny vs mobilny


Według badań Pew Research Center, w 2002 roku około 62% konsumentów korzystało z urządzeń mobilnych. W listopadzie 2016 roku odsetek ten wynosił już 95%.

Co więcej, wraz z wprowadzaniem na rynek smartfonów targetowanych w grupy klientów o najniższych dochodach liczba ta obecnie jest już bardzo blisko 100%.

W zeszłym roku już około 50,88% globalnego ruchu internetowego można było przypisać urządzeniom mobilnym i smartfonom, a trend rosnący cały czas się utrzymuje.

W marcu 2021 roku smartfony i tablety jeszcze bardziej zwiększyły swój udział, stanowiąc aż 54,22% całego ruchu internetowego.

Wyraźnie pokazuje to, że użytkownicy na całym świecie odchodzą od tradycyjnych sposobów dostępu do internetu na rzecz wygodnych, łatwo dostępnych i intuicyjnych urządzeń mobilnych.

Mobilna wersja sklepu internetowego

Zmiana nawyków użytkowników i przejście z komputerów na wersje mobilne stron internetowych ma także przełożenie na rynek e-commerce.

Gdy w 1994 roku swoją działalność rozpoczynał Amazon, internet był dopiero w fazie globalnej adopcji, a przenośne komputery mieszczące się w naszych kieszeniach były obecne jedynie w filmach sci-fi.

Jednak wraz z rozwojem technologicznym i popularyzacją urządzeń mobilnych, największe platformy e-commerce musiały wprowadzać rozwiązania mobile.

Według danych Statista, w 2019 roku mobilny rynek e-commerce (M-Commerce) odpowiadał za aż 67,2% globalnej sprzedaży w sieci. Stanowiło to równowartość 2,32 biliona dolarów. Oczekuje się, że do końca 2021 roku globalny rynek m-commerce będzie stanowił aż 72,9% całkowitego handlu detalicznego online.

Mobile ecommerce
Sprzedaż online poprzez urządzenia mobile Źródło

Jeśli spojrzymy na dane z tylko z platformy Shopify, kanał mobilny charakteryzuje się jeszcze większą popularnością. Nawet 69% przychodów ze sprzedaży ze sklepów utworzonych na tej platformie e-commerce, generowanych jest przez smartfony i tablety, podczas gdy tylko 31% pochodzi z komputerów stacjonarnych.

Mimo ogromnej popularności m-commerce, warto zaznaczyć jednak kilka ważnych aspektów odróżniających ten kanał od klasycznej sprzedaży internetowej.

Jednym z nich jest fakt, że sporo osób przegląda interesujące ich produkty za pośrednictwem aplikacji, jednak finalnego zakupu dokonuje na komputerze stacjonarnym.

m-commerce gap
Powody niefinalizowania transakcji online poprzez urządzenia mobile Źródło

Dane Kibo pokazują, że średni współczynnik konwersji w Q3 2020 dla komputerów stacjonarnych na globalnym rynku e-commerce wynosił 2,59%, podczas gdy dla smartfonów wynosił on 1,86%.

Oznacza to, że różnica we współczynnikach konwersji różni się aż o 40% w zależności od platformy, jednak i tak wynik ten jest znacznie lepszy, biorąc pod uwagę dane z 2016 roku (4,14% dla komputerów stacjonarnych vs. 1,55% dla urządzeń mobilnych).

mcommerce

Co jest powodem tej wyraźnej dysproporcji?

Za jej znaczną część możemy winić słabo zoptymalizowane strony mobilne oraz nieintuicyjną nawigacją po aplikacji sklepu.

Ponadto spora część klientów sklepów internetowych wciąż niedostatecznie ufa aplikacjom mobilnym. Z tego powodu woli robić zakupy za pośrednictwem komputera czy laptopa, a smartfon służy wówczas jedynie do przeglądania stron sklepów w poszukiwaniu czegoś ciekawego.

Jak pokazują najnowsze dane trend ten powoli zaczyna się zmieniać, i coraz więcej użytkowników robi zakupy online za pośrednictwem mobilnej wersji sklepu internetowego. Co za tym idzie - luka we współczynnikach konwersji pomiędzy poszczególnymi urządzeniami zaczyna się zacierać.

 Współczynnik konwersji w sprzedaży online w zależności od urządzenia
Współczynnik konwersji w sprzedaży online w zależności od urządzenia Źródło

Jak zaprojektować sklep w wersji na urządzenia mobilne - mobile first czy mobile friendly?


Są dwa podejścia do budowania marki działającej na rynku mobilnym: mobile first oraz mobile friendly.


Najpierw mobile


Pojęcie Mobile first zostało zapoczątkowane przez Luke'a Wróblewskiego w 2009 roku i spopularyzowane Erica Schmidta w 2010 roku. Podejście to odnosi się do praktyki projektowania stron oraz ich funkcjonalności z myślą przede wszystkim o urządzeniach mobilnych.

Nadrzędnym celem strategii mobile first jest takie dostosowanie workflow, aby w pierwszej kolejności skupić się na dobrze działającej mobilnej wersji sklepu internetowego. W drugiej kolejności dostosowuje się stronę pod wersje desktopowe.

Kolejność projektowania sklepu internetowego względem rodzaju urządzenia
Kolejność projektowania sklepu internetowego względem rodzaju urządzenia Źródło

Pisanie kodu zgodnie z podejściem Mobile first zaczyna się od tworzenia stylów CSS, HTML i JavaScript pod ekrany urządzeń mobilnych. Następnie kod jest nadpisywany i modyfikowany z wyjątkami dla większych ekranów komputerów stacjonarnych.

Dlaczego to ma znaczenie?

Kod pisany z myślą o laptopach i komputerach stacjonarnych może zawierać duże i skomplikowane animacje oraz złożone funkcje.

Jeśli ten złożony kod zostanie zaimplementowany jako pierwszy, to urządzenie mobilne może mieć problemy z załadowaniem wszystkich treści. A to negatywnie wpłynie na płynność oraz doświadczenie użytkowników.

projektowanie sklepu internetowego mobile

Sklep internetowy zaprojektowany z myślą o mobile-first będzie działał bez zarzutów na wszystkich urządzeniach bez znaczenia od rozmiaru wyświetlacza.

Bez względu na to, jakie urządzenie wybierze klient sklepu, uzyska dostęp do strony sklepu, która jest spójna we wszystkich punktach styku. Zapewni to klientom bezproblemowe doświadczenia zakupowe.

Największą wadą podejścia mobile first mogą być zwiększone koszty związane z developmentem oraz dłuższy czas oczekiwania na premierę aplikacji lub otwarcie mobilnej strony sklepu.


Przyjazne mobile


Podejście mobile friendly oznacza tworzenie witryn, które powinny dobrze działać na urządzeniach mobilnych, jednak te nie są głównym priorytetem.

Strona stworzona w podejściu mobile friendly została napisana pierwotnie z myślą o komputerach stacjonarnych, wersjach desktopowych i dużych wyświetlaczach. Została jednak wzbogacona o liczne rozwiązania dostosowujące oraz optymalizujące wyświetlaną zawartość do ekranów urządzeń mobilnych.

projektowanie sklepu internetowego mobile

Dzięki temu strona w wersji mobile nie będzie spowalniała przez ładowanie na przykład skomplikowanych animacji, a wszystkie jej elementy graficzne będą zoptymalizowane pod względem rozmiaru mobile.

Nie jest to rozwiązanie idealne z punktu widzenia udoskonalania doświadczeń użytkowników. Niewątpliwie jednak może być szybsze i łatwiejsze do implementacji dla programistów pracujących nad stroną sklepu internetowego.


PWA, strona responsywna czy aplikacja mobilna - co wybrać dla mobilnej wersji sklepu internetowego?


Istnieją 3 zasadnicze podejścia do prowadzenia sprzedaży za pośrednictwem urządzeń mobilnych:

  • Strona responsywna (RWD)
  • PWA
  • Aplikacja mobilna

RWD


Responsive Web Design to podejście, według którego rozwój strony internetowej powinny być oparty o zachowanie i środowisko użytkownika w oparciu o rozmiar ekranu i platformę.

Praktyka ta składa się z połączenia elastycznych siatek i układów, obrazów oraz inteligentnego wykorzystania CSS. Gdy użytkownik przełącza się między smartfonem, a komputerem stacjonarnym witryna automatycznie przełącza się, aby dostosować się do rozdzielczości oraz możliwości skryptów.

To rozwiązanie to przyszłość wersji mobilnych stron i sklepów internetowych, ponieważ znacznie przyspiesza wczytywanie się stron.

m-commerce

PWA


Progresywne aplikacje internetowe to aplikacje zbudowane przy użyciu dobrze znanych technologii internetowych, takich jak HTML, CSS i JavaScript. Mają natomiast charakter i funkcjonalność aplikacji natywnej.

Witryna mobilna zbudowana zgodnie ze strategią PWA pozwala deweloperom wykorzystywać możliwości nowoczesnych przeglądarek internetowych na różnych urządzeniach.

Ma to znaczący wpływ na czas wczytywania strony, optymalizację wyświetlanych grafik oraz personalizację treści wykorzystując geolokalizację.

Obecnie funkcje PWA są obsługiwane w różnym stopniu przez przeglądarki Google Chrome, Safari, Firefox na Androida oraz Microsoft Edge.

Eksperci branży e-commerce uważają, że PWA jest obecnie przyszłością wersji mobilnych stron i sklepów internetowych. Jest tak ze względu na znacznie przyspieszenie wczytywania stron oraz poprawienie doświadczeń zakupowych klientów.


Aplikacja mobilna


Ostatnim i najbardziej złożonym sposobem na m-commerce są dedykowane aplikacje mobilne.

Klienci, którzy ufają twojej marce dzięki takiej aplikacji mogą być informowani na bieżąco i dowiadywać się jako pierwsi o najnowszych produktach, promocjach i specjalnych ofertach.

Dobrze zaprojektowany UX (user experience) sprawi, że proces zakupowy będzie dla użytkownika prosty, przyjemny i zmniejszy ryzyko porzucenia koszyka.

mobile e-commerce

Skuteczna wersja mobilna sklepu online - najważniejsze wskazówki


1. Postaw na UX

Dobry UX mobilnej wersji sklepu to podstawa. Klienci preferują interakcję z prostymi, logicznymi i elementami strony. Każda niepotrzebna komplikacja interfejsu mobilnej strony sklepu to poważny błąd w jej projektowaniu. Dla klienta najważniejsza jest intuicyjność aplikacji.

Stosunkowo często projektanci aplikacji mobilnych sklepów internetowych projektują jak najwięcej funkcji. W teorii aplikacja może być lepiej oceniana przez użytkowników oraz być lepiej pozycjonowana w silnikach wyszukiwarek.

Nie jest to jednak najpopularniejsza strategia.

W projektowaniu mobilnej wersji strony sklepu internetowego lub aplikacji mobilnej najważniejsza powinna być prosta i intuicyjna nawigacja po najważniejszych zakładkach sklepu, a nie mnogość funkcji.

Usprawnić nawigację po mobilnej stronie sklepu internetowego można:

  • grupować najważniejsze funkcje,
  • wyróżnić najistotniejsze strony i zakładki,
  • wprowadzić podział na podkategorie,
  • organizować rozkład treści na stronach produktów w taki sam sposób.
rady dotyczących projektowanie aplikacji mobilnej dla sklepu internetowego
Podstawowych 5 rad dotyczących projektowanie aplikacji mobilnej dla sklepu internetowego Źródło

2. Elementy wizualne sklepu mobile

Kolejnym niezwykle ważnym aspektem projektowania strony mobilnej marki działającej na rynku e-commerce jest zadbanie o hierarchię wizualną.

W webdesignie jest to praktyka porządkowania elementów projektu według tego, jak bardzo są istotne dla użytkownika.

Waga wizualna określa znaczenie elementu w hierarchii strony, przekazując podświadomie klientom treści i elementy, na których mają skupić się w pierwszej kolejności.

Hierarchia odgrywa także kluczową rolę w planowaniu architektury strony mobilnej, ułatwiając użytkownikom nawigację po witrynie.

Dzięki przemyślanemu rozmieszczeniu elementów wizualnych, projektanci mogą zachęcić użytkowników do korzystania z witryny w optymalny sposób i zwiększyć współczynniki konwersji.

online shooping mobile

Jak podaje Interaction Design Foundation, hierarchię wizualną strony mobilnej sklepu można dostosowywać poprzez manipulowanie tymi cechami:

Rozmiar

Zmieniając rozmiar elementów witryny, takich jak font i grafiki, można skupić uwagę użytkowników na najważniejsze treści na stronie.

Kolor

Kolor odgrywa niezwykle istotną rolę w web designie stron mobilnych. Przykładowo wybór czarnego i białego to łatwy sposób na nadanie swojej marce kontrastu i wyrazistości. Z kolei jasne kolory się wyróżniają i przyciągają uwagę odbiorcy do najważniejszych cech i elementów oferowanych przez Ciebie produktów.

Wzór F lub Z

W hierarchii wizualnej stron mobilnych istnieją dwa podstawowe sposoby, w jakie użytkownicy zapoznają się z wyświetlanymi treściami: wzór F lub wzór Z.

We wzorze Z wzrok klienta podąża ścieżką od lewego górnego rogu do prawego górnego rogu, a następnie w dół do lewego dolnego rogu i do prawego dolnego.

Wzór F to sposób, w jaki użytkownicy będą czytać treści, które są skoncentrowane na informacjach z dużą ilością tekstu. W tym schemacie widzowie skanują witryny w każdym wierszu od lewego rogu do prawego i tak dalej.

Bliskość elementów

Umieszczenie elementów bliżej siebie może dać czytelnikowi wrażenie, że są one powiązane. A to sprawi, że będzie on nimi bardziej zaciekawiony.

Rozmieszczenie elementów

Kolejnym ważny elementem hierarchi wizualnej sjavascript:app.copyUrlToClipboard('/cms-asset-100334045/cx1.jpg-400.jpg', 'Copied')trony sklepu jest zapewnienie, że treści będą miała odpowiednią przestrzeń. Chodzi o tak zwaną negatywną przestrzeń, która otacza element na stronie. Utworzone puste miejsce służy do skupienia uwagi użytkownika na danym, istotnym elemencie. Negatywną przestrzeń można również wykorzystać do zilustrowania przekazu w wyjątkowy, pomysłowy sposób.

Jak projektować sklep internetowy wersja mobile
Źródło

3. Zoptymalizuj wszystko pod kątem doświadczenia klienta

CX, czyli Customer Experience, to suma doświadczeń klientów w sklepie internetowym, czyli wszystkich interakcji pomiędzy użytkownikiem witryny (klientem), a dostawcą (sklepem internetowym).

Doświadczenie klientów obecnie jeden z głównych czynników decydujących o sukcesie na rynku sprzedaży internetowej.

mobile exommerce

Ankieta przeprowadzona przez Salesforce na grupie 6000 klientów sklepów online wykazała, że aż 76% z nich twierdzi , że oczekują, że sklep będzie dobrze rozumiał ich potrzeby i wymagania.

Ze względu na to, jeśli mobilna strona sklepu internetowego jest przestarzała lub skomplikowana w użyciu, potencjalni klienci bez wahania ją opuszczą i skierują się do konkurencji.

Właściciel sklepu online powinien starać się zbudować witrynę mobilną, która nie tylko zapewnia pozytywne wrażenia zakupowe, ale także utrzymuje zaangażowanie użytkowników.

4. Prostota przede wszystkim

Prosty projekt jest integralną częścią budowy pozytywnych doświadczeń użytkowników.

Upraszczając projekt strony mobilnej, dostosowując grafiki w celu minimalizacji czasu ładowania oraz usuwając zbyt obszerne treści można skrócić ścieżkę zakupową klientów oraz pozytywnie wpłynąć na wskaźniki sprzedażowe sklepu internetowego.

Budując witrynę mobilną dla e-commerce powinno się celować w prostą i intuicyjną stronę główną, zakładek produktów oraz koszyka. Zagracona mobilna wersja sklepu może bardzo szybko zniechęcić klientów.

Customer experience

Projektując wygląd sklepu internetowego warto zwrócić uwagę na unikanie niepotrzebnych pop-upów, nieestetycznych i przeszkadzających dodatków, nietypowych fontów, zbyt wielu obszernych informacji.

Nie dość, że w większości przypadków będą jedynie negatywnie wpływały na doświadczenia zakupowe klientów, to ich obecność może spowolnić ładowanie strony.

Aplikacja mobilna sklepu lub jego wersja mobilna powinna skupić się na zapewnianiu jedynie najbardziej potrzebnych elementów oczekiwanych przez użytkowników.

Kieruj się feedbackiem klientów

W świecie niezwykle rozwiniętych i dopracowanych stron sklepów internetowych nawet najmniejszy błąd może sprawić, że użytkownicy zrezygnują z zakupów lub usuną aplikację.

opinie klientów

Opinie klientów są niezwykle ważne, ponieważ dają wgląd w to, co nie podoba się klientom w twoim sklepie internetowym, a co ciężko wychwycić podczas testów.

Warto dodać, że wykorzystywanie opinii klientów nie jest kwestią jednorazową. Zbieranie informacji zwrotnej od użytkowników to element, który powinien być punktem stałym każdej działalności e-commerce.

Według Startquestion
, opinie [klientów] to zdecydowanie najcenniejsze źródło informacji w Twojej firmie.


Mobilna wersja sklepu - podsumowanie


Technologia mobilna stale się zmienia, podobnie jak techniki, których używamy do sprzedaży produktów online. Wraz z rosnącą popularnością sprzedaży mobilnej (m-commerce) każdy e-commerce manager zbadać, czy klienci są zadowoleni z interakcji z mobilną wersją strony sklepu internetowego. Istnieje kilka uniwersalnych wskazówek dotyczących budowania mobilnej witryny sklepu, które poprawią doświadczenie zakupowego klientów online.


arrow-up icon