• Home
  • Blog
  • 6 powodów, dla których Twój e-commerce powinien skupić się na użytkownikach mobilnych

E-COMMERCE, PRODUCT DESIGN

05.10.2021 - Przeczytasz w 6 min.

6 powodów, dla których Twój e-commerce powinien skupić się na użytkownikach mobilnych

05.10.2021 - Przeczytasz w 6 min.

6 reasons why your e-commerce should actually adopt mobile-first approach

Czy będąc zajętym lub poza domem kupiłeś kiedyś coś w Internecie za pomocą telefonu zamiast laptopa, lub komputera stacjonarnego? Założę się, że tak było. A jeśli nie, to pewnie wkrótce może się tak stać, ponieważ do końca 2021 roku mobilny e-commerce (lub po prostu m-commerce) ma odpowiadać za 72,9% globalnej sprzedaży w e-commerce, a to 3,5 biliona dolarów.

Estimated mobile e-commerce sales worldwide 2021

Patrząc na powyższe dane, naturalnie nasuwa się odpowiedzieć na pytanie zawarte w tytule. Chcę jednak nieco bardziej przybliżyć podejście mobile-first i jak możesz wykorzystać to rozwiązanie w swoim biznesie.

Co właściwie oznacza mobile-first?

Zasadniczo jest to podejście polegające na zaprojektowaniu w pierwszej kolejności platformy dla smartfonów (w przeciwieństwie do tego, do czego byliśmy przyzwyczajeni wcześniej — czyli projektowania jako pierwszej platformy dla komputerów), a następnie skalowaniu jej do pracy na większych ekranach. Oznacza to, że projektant musi skupić się na umieszczaniu wszystkich wymaganych elementów na znacznie mniejszej przestrzeni niż monitor szerokoekranowy.

Działając zgodnie z zasadą mobile-first, będziesz musiał dostarczyć rozwiązanie, które będzie działać bezbłędnie na urządzeniach o mniejszej mocy obliczeniowej. Co więcej, umieszczenie wszystkich funkcjonalności nie może wpływać negatywnie na działanie i wydajność urządzeń mobilnych.
Jak pokażę w dalszej części artykułu, użytkownicy urządzeń mobilnych przykładają ogromną wagę do wydajności.

Innym powodem, dla którego warto wykorzystać podejście mobile-first, jest to, że pewnie nie chcesz ograniczać klientów i uzależniać ich dokonywanie zakupów na Twojej platformie od lokalizacji. W końcu to super korzyść, że klienci mogą od Ciebie kupować z dowolnego miejsca, w dowolnym czasie i za pomocą zaledwie kilku kliknięć.

Przyjrzyjmy się zatem kolejnym korzyściom, dla których warto iść w mobile-first

3 kolejne ważne powody, dla których warto uwzględniać urządzenia mobilne w fazie projektowej

Popularność urządzeń mobilnych rośnie z roku na rok, co widać w statystykach z 2019 roku – urządzenia te odpowiadały za 61% ruchu generowanego w wyszukiwarce Google. Co więcej, od początku 2017 roku urządzenia mobilne odpowiadały za ponad 50% całkowitego globalnego ruchu internetowego, z czego 54,8% wygenerowano w Q1 2021.

Patrząc na dane statystyczne nasuwa się kolejny powód dla stosowania mobile-first.

Gotowość na wyzwania przyszłości

Nie da się zaprzeczyć, że żyjemy w epoce mobilnej, a dane nie wydają się wskazywać na to, by miało dojść do odwrócenia tego trendu. Oznacza to, że inwestycja w projektowanie mobile-first będzie na dłuższą metę szczególnie korzystna. Co za tym idzie, rozpoczęcie projektowania od urządzeń mobilnych, a następnie skupienie się na pozostałych platformach, zapewni użytkownikom identyczne doświadczenie na każdej z nich.

Dla porównania, rozpoczynając projektowanie od komputerów stacjonarnych, bardzo często nie bierze się pod uwagę możliwości urządzeń mobilnych i mniejszych ekranów. Kiedy więc zasiadasz do projektowania mobilnej wersji swojego rozwiązania, usuwasz funkcje przewidziane dla komputerów stacjonarnych, przez co dostarczasz użytkownikowi końcowemu ograniczony produkt.

Skupiając się w pierwszej kolejności na urządzeniach mobilnych, oszczędzasz czas i pieniądze, które możesz zainwestować w rozwój platformy.

Dostępność międzyplatformowa

Nikogo nie zaskoczę, jeśli powiem, że ludzie nie używają jednego typu urządzeń do korzystania z Internetu. Oznacza to, że wieloplatformowość jest jednym z kluczowych czynników projektowania udanego rozwiązania.

Według ankiety GWI z 2019 roku, 96% uczestników w wieku od 16 do 64 lat twierdzi, że korzysta z urządzeń mobilnych do przeglądania Internetu. Co ciekawe, o połowę spadł odsetek osób deklarujących korzystanie z laptopów/komputerów jako głównego źródła dostępu do Internetu.

Devices used to access internet

Jak widać, aby świadczyć konkurencyjne usługi cyfrowe, trzeba śledzić ruchy użytkowników, a ci obecnie przenoszą się z komputerów stacjonarnych na urządzenia mobilne.

Doświadczenia klientów są ważne!

Czy kiedykolwiek byłeś poirytowany powolnym działaniem mobilnej wersji strony internetowej lub platformy e-commerce do tego stopnia, że opuściłeś ten portal i skorzystałeś z usług konkurencji? Według PwC, co najmniej jeden z trzech klientów (32%) doświadczy takiej sytuacji i po jednym złym doświadczeniu porzuci ulubioną markę na rzecz innej. Odsetek ten jest jeszcze wyższy w Ameryce Łacińskiej i wynosi 49%.

Nie sądzę, aby dobrowolna strata jednej trzeciej klientów była korzystna dla biznesu.

Importance of customer experience (CX) worldwide

6 najlepszych praktyk dotyczących podejścia mobile-first

Zakładając, że zdecydowałeś się na zastosowanie podejścia mobile-first, zobaczmy, jak Twoja firma może rozpocząć transformację w tym kierunku.

„Więcej nie zawsze oznacza lepiej”

Podoba mi się podejście do projektowania rakiet kosmicznych, które Elon Musk przedstawił w jednym ze swoich wywiadów. Moim zdaniem można je łatwo odnieść do każdego rodzaju projektu. Podsumowując, musisz zakwestionować każdy element swojego produktu – czy jest rzeczywiście potrzebny i czy Twoje rozwiązanie zadziała, jeśli któryś z tych elementów usuniesz. Aby podać kilka przykładów „zaniedbań projektowych”, odwołam się do badań przeprowadzonych przez Instytutu Baymarda.

Examples of cluttered e-commerce design

Jak ważna jest hierarchia wizualna

W fazie projektowania hierarchia wizualna jest prostym sposobem na uporządkowanie informacji na ekranie według ich znaczenia dla użytkownika, a dopiero później dla firmy.

Rzućmy okiem na mobilną stronę główną Etsy. Jak widać, wiedzą dokładnie, dlaczego ludzie odwiedzają ich witrynę i starają się zminimalizować liczbę kroków, które użytkownik musi wykonać, aby trafić dokładnie tam, gdzie chciał. Jest również zoptymalizowana dla tych, którzy już wiedzą, czego szukają i tych, którzy nie są jeszcze pewni. Pierwsza grupa po prostu przejdzie do danej kategorii, a druga — przewinie w poszukiwaniu inspiracji.

Etsy's well-structured e-commerce design

Co ważne, menu nie zajmuje zbyt wiele miejsca i nie ma dolnego paska menu, który mógłby zasłaniać i rozpraszać uwagę użytkownika. Obciążanie klientów różnymi bodźcami nie jest zbyt dobrym rozwiązaniem, nawet jeśli uważasz, że to, co prezentujesz na ekranie, ma ogromne znaczenie dla biznesu. W końcu chodzi tu o użytkowników.

Szybkość ładowania – Twój najlepszy przyjaciel i największy wróg

W jednym ze swoich badań Google wyliczyło prawdopodobieństwo opuszczenia witryny przez użytkowników, które rosło wykładniczo z każdą sekundą ładowania strony.

Page load time effect on bounce rate

Jeśli to nie jest wystarczająco przerażające, średnie prędkości ładowania są znacznie wyższe od przedstawionych na powyższym obrazku.

„Średnia prędkość ładowania strony internetowej wynosi 10,3 sekundy na komputerze i 27,3 sekundy na urządzeniu mobilnym. Ładowanie strony na urządzeniu mobilnym jest średnio o 87,84% dłuższe niż na komputerach stacjonarnych”.

Analiza szybkości ładowania strony Backlinko

Poznaj i zbuduj PWA

Dla tych, którzy nie wiedzą, czym jest PWA, przygotowaliśmy najważniejsze informacje na ten temat w zwięzłej formie. PWA, czyli „Progressive Web Application” (pol. Progresywna Aplikacja Internetowa), to serwis zbudowany z myślą o zastosowaniach mobilnych zarówno z punktu widzenia RWD — Responsive Web Design (pol. responsywne projektowanie stron internetowych), jak i tego, że może służyć jako aplikacja mobilna, którą można „zainstalować” na telefonie użytkownika końcowego za pomocą zaledwie kilku dotknięć.

Obecnie tworzę listę znanych firm, które przyjęły PWA jako technologię tworzenia swoich stron internetowych, a z dostępnych danych wynika, że strony powstałe w oparciu o to podejście prześcigają w działaniu zwykłe strony tych firm. W ramach przedsmaku tego, co ma nadejść, spójrzcie na to, co przechodząc na PWA osiągnęła firma Flipkart:

  • użytkownicy spędzają w witrynie 3 razy więcej czasu
  • o 40% wzrosła liczba użytkowników ponownie odwiedzających witrynę
  • o 70% wzrósł współczynnik konwersji wśród użytkowników korzystających z opcji „Dodaj do ekranu głównego” (w PWA jest to odpowiednik instalacji aplikacji)
  • 3-krotnie mniejsze zużycie danych

Opublikuję tę listę na naszym blogu, gdy będzie gotowa, więc zasubskrybuj nasz newsletter, aby jej nie przegapić.

Użyj snippetów rozszerzonych

Co to są snippety rozszerzone? To fragment wyniku wyszukiwania w przeglądarce Google z dodatkowymi danymi. Łatwiej będzie to pokazać na konkretnych przykładach.

What is a rich snippet?

I chociaż nie mają one bezpośredniego wpływu na to, czy Twoja witryna jest dostosowana do urządzeń mobilnych, pomyślałem, że warto wspomnieć, że możesz zwiększyć wydajność swojej platformy dzięki narzędziom, które zwiększają współczynnik klikalności wyszukiwania, po prostu przyciągając więcej uwagi użytkowników (fragmenty rozszerzone zajmują więcej miejsca na stronie wyników, zwłaszcza na urządzeniach mobilnych, gdzie mogą zajmować prawie cały ekran). Jeśli chciałbyś zastosować takie opisy na swojej stronie, odsyłam Cię do oficjalnej dokumentacji Google.

Weź pod uwagę to, jak użytkownicy obsługują urządzenia mobilne

Ostatni powód, ale jakże istotny. Projektując strony z myślą o urządzeniach mobilnych, nie można zapominać, że wiele osób obsługuje je tylko jedną ręką. Ważne jest, aby nie umieszczać często używanych elementów interaktywnych poza zasięgiem kciuka.

Według badania przeprowadzonego przez Stevena Hoobera w 2013 roku, 49% ludzi trzyma telefony komórkowe tylko jedną ręką, z czego 67% używa do tego celu prawej ręki. Pozostawia nam to nieco ograniczone pole zasięgu.

Methods of holding a phone with one hand

Dlatego będę powtarzał niczym mantrę, że doświadczenie użytkowników w projektowaniu ma ogromne znaczenie. Zaprojektowanie pięknego ekranu jest stosunkowo łatwe. Zaprojektowanie pięknego ekranu, który jest łatwy w obsłudze — to wyzwanie stojące przed wieloma firmami, zwłaszcza z sektora e-commerce.

Jeśli chcesz przeczytać więcej o projektowaniu stron w taki sposób, by możliwe było przeglądanie ich przy użyciu jednej ręki, polecam Ci ten niesamowity i szczegółowy artykuł Maitrika Kataria opublikowany w Smashing Magazine.

Podsumowanie

Jak widać, temat mobile-first wykracza daleko poza stwierdzenie, że na stałe weszliśmy w erę urządzeń mobilnych. Bardzo często firmy zbytnio skupiają się na tym, aby ich platformy były pięknie dla oka, poświęcając znacznie mniej uwagi użyteczności tego, z czego korzysta użytkownik.

Poruszanie się po sklepie internetowym, który świetnie wygląda na zrzucie ekranu przesłanym Ci przez Twojego projektanta, może okazać się koszmarem, jeśli nie zostały dopracowane wszystkie elementy dynamicznego użytkowania.

Mam nadzieję, że ten artykuł był ciekawym wprowadzeniem do podejścia mobile-first i zmotywuje Cię do zastosowania go w swoim biznesie. Jeśli będziesz potrzebował jakiejkolwiek pomocy, możesz skontaktować się ze mną pod adresem ross@rst.software, a wraz z naszym Leadem UX/UI zaprosimy Cię oraz Twoich partnerów biznesowych lub projektantów na bezpłatną 30-minutową konsultację.

Mam nadzieję również, że spotkamy się ponownie przy okazji kolejnego artykułu!

Tagi:

Ocena artykułu

Udostępnij

Ross Krawczyk

Ross Krawczyk

Marketing Generalist

Marketing generalist zorientowany na biznes z nastawieniem skoncentrowanym na wykonywaniu zadań w jak najkrótszym czasie z możliwie jak najlepszą jakością. Prywatnie ostatnią dekadę spędził zajmując się współczesnym gentlemaństwem. Zahipnotyzowany przemysłem kosmicznym i bawiący się ludzkimi umysłami poprzez zagmatwane i przepełnione zagadkami wydarzenia o tematyce Sherlock’a Holmesa.

Nasz serwis internetowy używa plików cookies do prawidłowego działania strony. Korzystanie z serwisu bez zmiany ustawień dla plików cookies oznacza, że będą one zapisywane w pamięci urządzenia. Ustawienia te można zmieniać w przeglądarce internetowej. Więcej informacji udostępniamy w Polityce plików cookies.