Blog

20.05.2019
E-biznes

3 usprawnienia pod mobile, które możesz wprowadzić w Twoim e-sklepie już teraz

3 usprawnienia pod mobile, które możesz wprowadzić w Twoim e-sklepie już teraz

Ruch ze smartfonów w Twoim sklepie wynosi nawet 50-60%, ale konwersja i wartość koszyka z tego kanału są niskie? Zastanawiasz się skąd biorą się te rozbieżności? Prawdopodobnie z utrudnionego korzystania z Twojego sklepu internetowego z poziomu urządzeń mobilnych. Poznaj trzy proste usprawnienia, które możesz wprowadzić w swoim e-sklepie, aby ułatwić zakupy.

 

Moglibyśmy podawać dane statystyczne, dlaczego mobile w e-commerce sprzedaje. Wolimy jednak pokazać to na konkretnych danych. Sklep X to przykład witryny, która nie posiada ani responsywnego ani mobilnego szablonu. Sklep Y jest w pełni responsywny oraz został zaprojektowany w duchu mobile first. Czy widzisz już różnicę między nimi?

 

Zestawienie sprzedaży z kanału mobilnego z jednego miesiąca sklepu X

 

Zestawienie sprzedaży z kanału mobilnego z jednego miesiąca sklepu Y

 

W sklepie X ruch z desktopu i mobile jest bardzo podobny - 54% z desktopu, 40% ze smartfonów. Bardzo duże różnice widać jednak, gdy mówimy o współczynniku konwersji na mobile, który jest ponad 2-krotnie niższy w porównaniu do desktopu. Co za tym idzie, wielkość transakcji, przychodów i wartości koszyka jest odpowiednio niższa.

W porównaniu do wyników sklepu Y z analogicznego okresu, widać zupełnie odwrotną sytuację. To kanał mobile generuje dochody i charakteryzuje się wyższą wartością koszyka.

 

Do 2020 r. 45% całkowitego amerykańskiego rynku handlu elektronicznego będzie stanowił mobile commerce, według prognoz BI Intelligence. Tym samym rola desktopu w zakupach w internecie zacznie się zmniejszać. 

 

Czy wystarczy mieć responsywny sklep?

Niestety nie. Po pierwsze, responsywność to nie to samo co mobile first. RWD to sposób oprogramowania szablonu, który pozwala automatycznie reagować i dostosowywać się stronie do wielkości czy orientacji urządzenia. Dlatego projektanci tworzyli wersje e-sklepu przede wszystkim pod PC oraz laptopy. Jeżeli projekt skalował się prawidłowo do wielkości małego ekranu, szablon mogliśmy zaliczyć do responsywnego.

 

W podejściu mobile first nacisk kładzie się przede wszystkim na modyfikacje, które odpowiadają specyfice niewielkiego wyświetlacza na poziomie nawigacji, wielkości elementów, które powodują działanie (buttony, ikony) czy szybkim ładowaniu strony.

 

Badania pokazują, że choć nadal największym problemem jest niedostosowanie strony do urządzenia mobilnego (69%), na kolejnych miejscach pojawiają się problemy typowo związane z mobilną wersją sklepu, czyli:

 

  • niewygodne formularze (59%),
  • za duża liczba czynności, którą trzeba było wykonać podczas zakupu (39%),
  • problemy z dokonaniem płatności (34%).


To elementy, które można wyeliminować na poziomie usability experience (UX) w sklepie drobnymi korektami. W zeszłym roku w AtomStore podjęliśmy decyzję, iż tworząc nowe funkcje, będziemy kierowali się podejściem mobile first. Zarówno dedykowane (np. dla Manta Polska - zobacz case study) oraz podstawowe szablony powstają zgodnie z zasadą projektowania pod dotyk, nie pod klik.

 

85% użytkowników smartfonów używa jednej ręki do obsługi telefonów. Dlatego najważniejsze elementy nawigacji muszą obejmować obszar ekranu, po którym porusza się kciuk (dolna część ekranu) oraz być odpowiednich rozmiarów.

Projektując system e-commerce stawiamy przede wszystkim na doświadczenie Klienta, który ma czuć pełne zadowolenie podczas korzystania z następujących elementów: karta produktu, nawigacja, zakup oraz ładowanie się strony.


Dziś pokażemy Ci, trzy elementy, które możesz szybko poprawić w swoim sklepie, by stał się bardziej mobile friendly, a doświadczenie Klienta zdecydowanie pozytywne.

 

1. Uproszczona belka menu

Belka menu na pierwszy rzut oka nie wydaje się wielką filozofią, jeżeli porównamy ją z ważnością i nierzadko skomplikowaniem listy kategorii i podkategorii. Jednak to od niej oczekujemy wysokiej użyteczności i szybkiego dostępu do najważniejszych informacji i funkcji e-sklepu.

 

Najczęściej używane w mobilnym interfejsie są karty (top tab) oznaczone ikonkami. Pozwalają szybko przechodzić między niewielką liczbą różnych ważnych widoków. Takie skonsolidowane menu powinno zajmować nie więcej niż ⅕ ekranu.

 

Sposobów na zaprojektowanie top menu jest wiele, ale które informacje powinny się tam znaleźć? Obok menu oraz logo sklepu najważniejsza jest ikona koszyka. Możesz również dodać ikonkę lupki, czyli wyszukiwarkę. To często też miejsce na miejsce do logowania się do panelu klienta. 2-3 widoki, które zamieścisz w górnej belce wydają się optymalne pod kątem ich ważności oraz wygodzie w użyciu (DOTYK!).

 

Użytecznym a bardzo prostym ficzerem jest przypięcie belki do góry ekranu. Dzięki temu scrollując ekran, użytkownik nie musi wracać za każdym razem do góry, by skorzystać z menu czy wyszukiwarki. Ewolucją tej zmiany jest przytwierdzenie belki do dołu ekranu.

 

   

 

PROTIP: Jakie elementy w menu warto jeszcze rozważyć?
  • telefon - jeżeli Twoi Klienci często do Ciebie dzwonią, wstaw ikonę telefonu, który po naciśnięciu aktywuje aplikację do połączeń telefonicznych w smartfonie,
  • lokalizator sklepów stacjonarnych - jeżeli posiadasz sieć sklepów, warto dodać funkcję lokalizatora najbliższego z nich.

2. Duże przyciski CTA

Zanim stwierdzisz, że call-to-action to oczywistość i że masz je w swoim sklepie, zwróć uwagę na ich wygląd oraz umiejscowienie. Komunikaty jak “Dodaj do koszyka”, “Zapałać teraz” powinny być najbardziej widocznym elementem na ekranie. Jeżeli będzie też cały czas widoczny mimo przewijania ekranu, np. dzięki przymocowaniu go do dolnej części ekranu, pozwoli klientowi dokonać działania w dowolnym momencie.

 

 

Jeżeli chodzi o wielkość CTA dla Androida zalecana wielkość to 48dp, a iOS 44dp. Fizyczną wielkość buttonów określa się w zależności od wielkości ekranu. Delikatna zmiana CTA, dodanie im wyrazistych kolorów czy ikony w postaci koszyka wpływa pozytywnie na wrażenie odbiorcy.

W sklepie internetowym Zary przycisk "Dodaj" nie znika z ekranu nawet na chwilę.

 

3. Szybkość ładowania strony

Zbyt długo ładujące się strony notują bardzo wysoką liczbę wyjść. Od kilku lat Google walczy o optymalizację stron, umieszczając te szybsze wyżej w wynikach wyszukiwania. Wszystko to w imię pozytywnych doświadczeń użytkownika. Temat szybkiego ładowania się strony oraz optymalizacji jest skomplikowany, o ile nie jesteś programistą. Aby jednak szybko przeanalizować co wpływa na optymalizację i gdzie szukać miejsc do poprawy, warto skorzystać m.in. z PageSpeed Insights.

 

Najczęściej za spowolnienie witryny odpowiadają bardzo ciężkie grafiki, których w sklepie internetowym nie brakuje. Już sama poprawa rozmiaru zdjęć znacząco przyspiesza działania strony. Optymalizację grafik, czyli zmniejszenie ich rozmiaru możesz wykonać w Adobe Photoshop, JPEGmini czy Tinypng.com. Przy dodawaniu nowych zdjęć warto skorzystać z zapisu do rozszerzenia .webP - nowego lekkiego formatu, stworzonego specjalnie pod strony internetowe. AtomStore obsługuje format .webP. 

 

Techniką, która będzie coraz istotniejsza, gdy mówimy o web performance w 2019 roku jest lazy loading. To specjalny skrypt, który pozwala zaciągać obrazki, gdy są one potrzebne (np. użytkownik do nich dotrze przewijając stronę). Lazy loading nie tylko przyspiesza ładowanie strony, ale również obniża transfer - zarówno na smartfonie, jak i na Twoim serwerze. Przykład tego skryptu możesz zobaczyć m.in. na Medium.com, Unsplash.com lub tutaj.

 

W najnowszej wersji sklepu internetowego od AtomStore implementację skryptów lazy loading, Klienci otrzymują w standardzie.

Aby budować pozytywne wrażenie użytkownika przeglądającego ofertę sklepu internetowego na smartfonie, trzeba liczyć się z ciągłymi usprawnieniami. Tworząc platformę dla e-commerce, codziennie obserwujemy zmieniające się zachowania klientów. Dlatego bardzo często aktualizujemy elementy e-sklepów o nowe rozwiązania mobile friendly. Zmiany w szablonie obejmują również naszych Klientów, którzy otrzymują je w ramach abonamentu. Zobacz teraz wersję mobile sklepu od AtomStore.

 

AtomStore to platforma e-commerce klasy premium. Tworzymy dedykowane sklepy internetowe oraz systemy B2B. Oferujemy kompleksowe wdrożenia od A do Z, sklepy mobilne w technologii responsive web design, integracje z programami Comarch Optima, XL, WF-Mag, Subiekt.
Wspólnie rozwiązujemy problemy polskiego e-handlu!

Znajdź nas na:

  • Blog
  • Facebook
  • Youtube
  • Linked in
  • iab