Mobile Commerce. Dobry UX krok po kroku

Właściciele sklepów internetowych, którzy patrzą w statystyki, już wiedzą. Ci, którzy tego nie robią, dowiedzą się z tego artykułu. Coraz częściej większość ruchu, który odnotujesz na sklepie, będzie pochodziła z urządzeń mobilnych.

Innymi słowy, jesteśmy już od jakiegoś czasu w erze mobile-first, a nasze sklepy powinny być projektowane w taki sposób, żeby w pierwszej kolejności zaspokajać potrzeby właśnie użytkowników mobilnych.

Oczywiście nie da się odwzorować jeden-do-jednego skomplikowanego interfejsu z wersji desktopowej, gdzie nasza przestrzeń robocza jest nawet kilkukrotnie większa niż na przykład na telefonie, jednak trzymając się kilku zasad, możemy dostatecznie zadbać o użyteczność wersji mobilnych.

Dziś porozmawiamy o tych właśnie zasadach, przechodząc krok po kroku przez ścieżkę zakupową w sklepie internetowym.

Dlaczego to takie ważne?

W połowie 2018 roku Gemius wydał raport „E-Commerce w Polsce 2018”. Dla chętnych link do pobrania raportu znajduje się tutaj.

Raport nie pozostawił żadnych złudzeń. Kupujemy także mobilnie. I to wcale nie na małą skalę, bo aż 58% użytkowników wykorzystuje smartfon do e-zakupów. Co więcej, ten trend będzie się pogłębiać, bo największy udział w zakupach mobilnych ma młodsze pokolenie, które dorastając i wraz z tym dysponując coraz większym budżetem na e-zakupy, będzie coraz liczniej pojawiać się w statystykach.

Jednocześnie respondenci wskazali szereg problemów, które skutecznie odstraszają ich od zakupów:

• niedostosowanie stron zakupowych do urządzeń mobilnych (67%),
• niewygodne formularze (59%),
• za dużo operacji do wykonania podczas zakupu (39%),
• zbyt wolne łącze internetowe (37%),
• brak aplikacji mobilnej (35%),
• problemy z dokonaniem płatności (34%).

Jak widać, firmy inwestujące w kanał elektroniczny mają jeszcze dużo pracy przed sobą.

Pracy, która wydaje się nieunikniona.

Na szczęście Ty już o tym wiesz, dlatego masz szansę nie tylko lepiej dostosować swój sklep do oczekiwań klientów, ale w ten sposób osiągnąć istotną przewagę konkurencyjną. Skorzystaj z naszego doświadczenia, które nabyliśmy podczas projektowania makiet UX i wdrożeń m-commerce u naszych klientów.

Rozdział 0 — bądź szybki

Kiedy pisałem artykuł, tę część postanowiłem zostawić na sam koniec. Ale na samym końcu uznałem, że przecież to jest najważniejsza sprawa, więc gdzie ja się pcham z tym w miejsce, do którego większość czytelników nie dojedzie.

Taka to moja przewrotna natura.

Na szczęście refleksja nadeszła i mogę o tym powiedzieć w pierwszej kolejności. Żaden UX nie uratuje Twojego sklepu, jeśli strona będzie się długo ładować. Niestety.

Pamiętaj, że na czas ładowania w mobile nie bezpośrednio wpływa na rozmiar zasobów, które trzeba pobrać. Szczególnie gdy w grę wchodzi gorszy zasięg.

W tym celu warto posłużyć się narzędziem https://developers.google.com/speed/pagespeed/insights za pomocą którego sprawdzisz, ile czasu zajmuje skuteczne załadowanie strony na urządzeniu mobilnym.

Choć nie wszystkie uwagi warto poprawiać, te o czasie ładowania i ilości zasobów — na pewno.

Nawigacja

Zanim w ogóle przejdziemy do poszczególnych podstron, warto zainteresować się elementem, który:

• jest na każdej stronie,
• najczęściej jest przepakowany, co powoduje trudności przy zmniejszeniu powierzchni roboczej.

Mowa oczywiście o nawigacji strony, na którą składa się cała masa elementów:

• wybór języka,
• wybór waluty,
• kontakt bezpośredni do sklepu,
• wyszukiwarka,
• koszyk,
• menu podręczne użytkownika,
• kategorie / podstrony sklepu.

Sporo. Tym bardziej, jeśli do dyspozycji mamy kilkaset pikseli szerokości przeciętnego ekranu telefonu komórkowego.

Skompresuj belkę menu

Mimo że nawigacja jest bardzo ważna i zazwyczaj jest w niej dużo elementów, niestety są ważniejsze rzeczy na stronie, które powinieneś eksponować.

Dlatego staraj się, żeby belka nawigacyjna zajmowała nie więcej niż ⅕ przestrzeni. To pozwoli Ci wykorzystać pozostałe 80% strony na prezentację tego, po co przyszli klienci.

Jak ścisnąć elementy nawigacji, żeby zmieściły się w jednym, maksymalnie dwóch wierszach?

1. Użyj rozwijanego menu (inaczej zwanego hamburgerem). W ten sposób pozbędziesz się całej belki nawigacyjnej, a użytkownicy są przyzwyczajeni do tego rodzaju rozwiązań;
2. Podobny zabieg zastosuj do menu użytkownika (tym razem po drugiej stronie ekranu), w którym umieścisz istotne z punktu widzenia klienta linki (na przykład do Mojego Konta);
3. Elementy pomocnicze, takie jak telefon lub zmiana języka/waluty, mogą trafić do menu;
4. Koszyk i lista zakupowa mogą być reprezentowane przez ikony w nagłówku. Pamiętaj przy tym, żeby wybrać obrazki jednoznaczne i zrozumiałe dla Twoich klientów.

Zachowaj możliwość kontaktu bezpośredniego

Jeśli w Twojej branży bezpośredni kontakt telefoniczny jest ważny, zachowaj go w nagłówku. Możesz wykorzystać do tego jedną pozycję menu.

Pamiętaj, że użytkownicy telefonu chcą uzupełniać jak najmniej, dlatego kliknięcie w telefon powinno automatycznie uruchamiać wykonanie połączenia.

Podobnie wygląda kwestia zakupów offline. Jeśli w Twoim biznesie kluczowe jest wybranie lokalizacji (na przykład na potrzeby dostawy albo domyślnego sklepu), wykorzystaj w tym celu możliwość geolokalizacji użytkownika. To zdecydowanie szybsze rozwiązanie niż formularz wyboru lokalizacji (który oczywiście i tak musi znaleźć się w sklepie, bo nie każdy skorzysta z opcji podania swojego położenia).

Niezawodna wyszukiwarka

Nie ulega wątpliwości, że wyszukiwarka to jeden z kluczowych elementów na stronie. Dlatego przy wdrażaniu upewnij się, że Twoje rozwiązanie:

• jest widoczne na stronie (to lepsze rozwiązanie niż chowanie wyszukiwarki pod ikoną),
• zwraca poprawne wyniki,
• podpowiada użytkownikowi frazy,
• sprawdza pisownię,
• umożliwia wyszukiwanie głosowe.

W skrócie mówiąc, warto zainwestować w naprawdę dobrą wyszukiwarkę, która będzie odpowiadała użytkownikom nie tylko wizualnie i funkcjonalnie, ale także będą za nią stały mądre algorytmy, które ułatwią poszukiwania produktu.

Strona główna

Po to w poprzedniej części szukaliśmy miejsca, żeby w dalszych częściach je skutecznie wykorzystać. Zaczniemy od strony głównej, czyli miejsca, gdzie najczęściej lądują klienci po wyszukaniu Twojego sklepu w Internecie.

CTA powyżej linii zanurzenia

Linia zanurzenia (inaczej zwana punktem złamania, punktem załamania, punktem zanurzenia lub linią złamania albo nawet linią załamania ? ) to punkt, powyżej którego wszystko mieści się na ekranie roboczym użytkownika.

Oczywiście co urządzenie, to obyczaj, dlatego warto najpierw sprawdzić, jakie rozdzielczości są najbardziej popularne wśród użytkowników Twojego sklepu. Z pomocą przyjdzie Google Analytics i zakładka „Odbiorcy -> Technologia -> Przeglądarka i system -> Rozdzielczość ekranu”

Następnie trzeba odjąć trochę wysokości (bo jest jeszcze pasek przeglądarki, menu, które zaprojektowaliśmy wcześniej, itd.) i uznać, że pozostała przestrzeń to kluczowy marketingowo obszar.

Skoro już ustaliliśmy, czym jest linia zanurzenia (lub jej inna nazwa), wracamy do kwestii zagospodarowania obszaru powyżej na stronie głównej.

Przede wszystkim zadbaj o to, żeby umieścić w takim obszarze CTA (ang. call to action), które będzie zrozumiałe dla użytkownika. Unikaj guzików „Więcej”, a raczej skup się na:

• „Kup teraz”,
• „Zobacz zegarki”,
• „Uruchom konfigurator”,
• etc.

W ten sposób ułatwisz swojemu użytkownikowi decyzje dotyczące dalszej interakcji ze sklepem.

Pamiętaj o propozycji wartości

Propozycja wartości (ang. Value proposition) to, idąc za definicją, innowacja, usługa lub cecha produktu, która sprawia, że jesteś atrakcyjny dla swoich klientów.

Najczęściej spotykane w sklepach internetowych propozycje to:

• informacje o darmowej dostawie,
• aktualna akcja promocyjna,
• propozycja rabatu za określoną akcję (na przykład założenie konta),
• darmowe zwroty.

Zasady w przypadku propozycji wartości są dwie:

1. Zasada #1 — przygotuj propozycję wartości dla swoich klientów tak, żeby pokazać im zysk z zakupów w Twoim sklepie;
2. Zasada #2 — umieść propozycję wartości powyżej punktu zanurzenia.

Wiedząc, czym tak naprawdę jest propozycja wartości, nie powinieneś potrzebować dodatkowych argumentów, że ten rodzaj komunikatów marketingowych powinien być wyraźnie eksponowany w witrynie.

Nie zapomnij o sprzedawaniu ze strony głównej

Strona główna jest swoistym landing page, na którym, poza marketingiem, powinieneś umieścić najważniejsze dla użytkownika elementy dalszej nawigacji:

• kluczowe kategorie sprzedażowe,
• szczególnie promowane produkty,
• tzw. „Społeczny dowód słuszności”, czyli po prostu opinie o Twoim sklepie.

Dzięki tym wszystkim zabiegom cała strona główna będzie miejscem, z którego użytkownik:

• dowie się, dlaczego warto u Ciebie kupić,
• zobaczy, co może kupić,
• przejdzie do dalszych części sklepu w sposób w miarę kontrolowany.

Prezentacja produktów

Oczywiście strona główna nie decyduje o tym, czy Twój sklep jest wartościowy w sensie oferty produktowej. Decydują o tym same produkty.

Dwie najbardziej istotne rzeczy, na które powinieneś zwrócić w tym obszarze uwagę, to:

• w jaki sposób Twoi klienci mogą odnaleźć produkt, który ich interesuje,
• czego dowiedzą się o nim.

A przechodząc od ogółu do szczegółu, sprawy mają się następująco:

Popracuj nad użytecznością filtrowania i sortowania

Jeśli masz dobrze skonfigurowaną analitykę w witrynie, pewnie zauważysz, że sortowanie i filtrowanie to jedne z najczęściej używanych elementów interfejsu sklepu internetowego.

Lewa belka (lub górna część listy produktów) to zazwyczaj dość mocno rozbudowane miejsca, których nie sposób odwzorować w wersji mobilnej.

Z pomocą przyjdzie podobny zabieg, który zastosowaliśmy przy kompresowaniu nagłówka:

• sprowadź filtrowanie do aktywnego guzika na stronie,
• podobnie zrób z listą opcji sortowania,
• umieść obydwa guziki nad listą produktów,
• kliknięcie jednego z dwóch elementów powinno wyzwalać menu, w którym użytkownik będzie mógł dopasować listę produktów do swoich potrzeb.

W ten sposób zaoszczędzisz miejsce, a jednocześnie zachowasz możliwość korzystania z obu funkcji sklepu. Do nawigacji na liście produktów dodam od siebie jeszcze dwie wskazówki:

1. Informuj użytkownika w wyraźny sposób, jak posortowana jest lista produktów i czy zastosowane są filtry (możesz to osiągnąć przez inny stan odpowiednich przycisków);
2. Często klienci pytają mnie, czy stosować mechanizm infinite scroll (lista produktów bez paginacji). Moja rekomendacja — nie, jeśli masz dużo produktów lub coś ważnego w stopce. W ten sposób znacznie utrudnisz swoim klientom nawigację po sklepie.

Zainwestuj w dobry opis produktów

To chyba najczęstsza rada, jaką stosuję w pracy (i przy okazji na blogu). Klient nie dotknie, nie powącha i nie pobawi się produktem w Twoim sklepie internetowym.

Jedyne co może, to o nim poczytać.

Dlatego opis produktu powinien być:

• przede wszystkim wyczerpujący,
• atrakcyjny dla klienta,
• dostosowany do urządzeń mobilnych.

Ostatni punkt powinien zwrócić Twoją uwagę najbardziej. Jeśli w wersji desktopowej napracowałeś się nad mocno rozbudowanym opisem, ryzykujesz, że na urządzeniu mobilnym będzie nieczytelny. Wówczas dobrym rozwiązaniem jest posiadanie dwóch odrębnych kreacji na potrzeby mniejszych ekranów.

Trochę marketingu nie zaszkodzi

Pamiętasz, jak przy stronie głównej eksponowałeś propozycję wartości?

Nie zaszkodzi (a nawet pomoże) stosowanie tych samych promocji na liście i karcie produktu. Szczególnie jeśli produkt sam w sobie łapie się na dodatkową korzyść dla klienta:

• darmowy zwrot,
• darmowa dostawa,
• etc.

Nie tylko ten zabieg marketingowy ze strony głównej warto stosować także dalej. Twoja konwersja na pewno Ci podziękuje, jeśli na karcie produktu dodasz też element społecznego dowodu słuszności, czyli na przykład opinie o wybranym produkcie.

Czy to wszystko?

Na koniec zaproponuję Ci ostatni zabieg, który pozytywnie wpływa na decyzje zakupowe. Mianowicie, wprowadzenie elementu ponaglającego.

Jeśli rezerwowałeś kiedyś hotel, na pewno wiesz, o co chodzi. „Promocja trwa jeszcze tylko x minut”, „Zostały tylko 2 pokoje” i tak dalej. Okazuje się, że o ile wszyscy wiemy, że takie komunikaty trzeba traktować z przymrużeniem oka, o tyle rzeczywiście jest korelacja między tego typu informacjami a zakupami. Dlaczego więc nie spróbować?

Proces zakupowy

Ostatni krok to oczywiście zakup tego, co dzięki lekturze mojego artykułu Twoi klienci z łatwością odnaleźli i dodali do swoich koszyków zakupowych.

Co może pójść nie tak?

Dużo.

Według raportu Izby Gospodarki Elektronicznej „Porzucony e-koszyk” z 2018 roku porzucamy koszyki na potęgę. O ile oczywiście nie wszystkie da się odzyskać (celem kompletowania koszyka wcale nie musiał być zakup), to zdecydowanie wystrzegaj się błędów, które spowodują realne zaniechanie zakupu.

Cały raport możesz przeczytać tutaj, a ja w tym czasie zajmę się wyciąganiem wniosków i radami dla Twojego sklepu.

Kończenie zakupów na innym urządzeniu

Jedną z ważniejszych funkcji sklepu mobilnego jest umożliwienie klientowi dokończenia zakupów na urządzeniu stacjonarnym.

Przyznam, że sam jestem jednym z klientów, którzy tak robią. Głównie dlatego, że wygodniej mi uzupełniać dane w procesie zakupowym na klawiaturze. Poza tym mogę od razu zalogować się do banku i zrobić przelew. Na koniec (chociaż tu już jestem pewnie w mniejszości) — kupując na dużym ekranie mam poczucie lepszego spojrzenia na produkt, który kupuję.

Generalnie sklep, który mi tego nie umożliwia, ryzykuje tym, że zanim dojdę do domu i skompletuję jeszcze raz zamówienie, zamówię w międzyczasie u konkurencji.

Jak uzyskać taką funkcję w sklepie?

• jeśli klient jest zalogowany, sprawa jest prosta — zachowuj koszyk na jego koncie, zamiast tylko w sesji przeglądarki;
• jeśli klient nie ma konta, możesz skorzystać z funkcji przesyłania koszyka na adres e-mail.,

Płatności mobilne

Wyobraź sobie, że klient będzie musiał uzupełnić swoje dane adresowe.

Później dane płatnika.

Później dostanie na e-mail instrukcje wykonania przelewu, zaloguje się w banku, przeklei wszystkie dane i potwierdzi całość sms-em.

To się nie wydarzy.

Po to właśnie zostały wymyślone płatności mobilne. Jest z czego wybierać, bo ten segment ostatnio mocno się rozwinął:

• BLIK,
• Apple Pay / Google Pay / portfele elektroniczne,
• bramki płatnicze (tzw. szybkie płatności).

Szczególnie BLIK ostatnio przypadł konsumentom do gustu (czemu trudno się dziwić). Absolutne minimum to taka metoda, która ograniczy liczbę danych, które Twój klient będzie musiał uzupełnić.

Zoptymalizuj formularze

Skoro już jesteśmy przy wypełnianiu danych, nie ma innej możliwości, niż kilka solidnych rad dotyczących samego procesu zakupowego:

1. Pozwól klientom robić zakupy jako gość — umówmy się, że jeśli ktoś nie chce założyć konta, to tego i tak nie zrobi, a Ty stracisz klienta. Jeśli jednak chcesz, żeby klienci zakładali konto, możesz zaoferować w zamian mały bonus.
2. Pozwól na logowanie za pomocą social media — zwiększysz tym samym szanse na założenie konta.
3. Unikaj zbyt długich formularzy — w pierwszej kolejności pozbądź się pól, które nie są konieczne. Jeśli lista nadal jest zbyt długa, podziel proces zakupowy na kroki i dodaj progress bar.
4. Nie każ się powtarzać — użytkownicy i tak korzystają z autouzupełniania. W przypadku haseł zdecydowanie lepszą opcją będzie możliwość podejrzenia wpisanego tekstu.

Podsumowanie

Jestem tak stary, że pamiętam czasy, kiedy nikt nie przeglądał Internetu w telefonie, a kliknięcie w guzik z globusem powodowało mikrozawał serca.

Dzisiaj wystarczy rozejrzeć się po tramwaju, na światłach czy stojąc w korku — wszyscy bawimy się telefonami, a część z nas dokonuje zakupów.

Nie bez powodu Google Analytics i wszystkie raporty pokazują coraz większy udział urządzeń mobilnych. Część tylko przegląda, a część kupuje. A zadowolić musisz wszystkich, bo w przeciwnym wypadku pójdą do konkurencji. Mam nadzieję, że lektura poradnika przybliża Cię do zaprojektowania sklepu, który będzie odpowiadał potrzebom Twoich klientów, a Tobie da efekty w postaci solidnej konwersji. Powodzenia!