Jak projektować interfejsy w dobie m-commerce?
Analizując dane z rynku e-commerce oraz ruch w sklepach naszych klientów nie sposób nie zauważyć, że w niektórych branżach (np. Fashion/FMCG) obserwujemy zdecydowanie większą liczbę użytkowników korzystających ze smartfona niż odwiedzających portal za pomocą komputera czy tabletu.
Jest to powszechnie znany fakt, prowadzący do powstania takich pojęć jak projektowanie ‘mobile first’, gdzie w pierwszej kolejności specjaliści UX powinni skupiać się na stworzeniu perfekcyjnej ścieżki użytkownika dla urządzeń mobilnych.
Czy tak jednak jest? Czy naprawdę rynek jest pełen świetnie dopracowanych serwisów mobile? Jakie działania i trendy projektowe zwiększają konwersję w m-commerce? Na te pytania odpowiem w poniższym artykule.
Na początek trochę statystyk o mobile commerce
W 2021 roku 54% wszystkich transakcji podczas ‘cyber monday’ zostało dokonanych za pomocą urządzenia mobilnego. W 2022 roku średni ‘traffic’ wynosił odpowiednio 59,02% dla użytkowników mobilnych i 38,65% dla użytkowników desktop. Widoczny jest trend wzrostowy jeśli chodzi o liczbę użytkowników korzystających z mobile. W branżach fashion czy FMCG liczba użytkowników korzystających ze smartfonów podczas zakupów online może wynosić 75% ogólnego ruchu. Widoczny jest także wzrost udziału rynku m-commerce w kontekście wszystkich kanałów sprzedaży. W roku 2018 było to 3,5%, natomiast w roku 2022 to już blisko 7% wszystkich transakcji. Jaką rolę odgrywają zatem interfejsy w m-commerce?
Dane wyraźnie pokazują rysujący się trend wzrostowy oraz przewagę użytkowników oczekujących doskonałych doświadczeń w kanale mobile. Patrząc jednak na konwersje oczekiwania te nie są zaspokajane. W ramach analiz dla naszych klientów sprawdziliśmy średnią konwersję w podziale na kanały dostępu (desktop vs mobile). Konwersja na mobile jest średnio dwukrotnie niższa niż konwersja na desktop. Tezę tę potwierdzają również badania Nielsen Group z 2017 roku. Liczba sfinalizowanych transakcji na desktop w 2014 roku była 288% wyższa niż na mobile. W 2017 roku to już tylko 111% więcej. Jesteśmy już sześć lat później lecz ten stan rzeczy nie uległ znacznej poprawie.
Nie sposób nie zauważyć, że konwersja mobile ciągle traci do poziomów osiąganych przez użytkowników komputerów. Jest coraz lepiej, jednak wciąż filozofia ‘mobile first’ wspomniana we wstępie artykułu jest często pustym hasłem. To jednak szansa dla Twojego sklepu, aby wyróżnić się na tle konkurencji. Na co przede wszystkim zwrócić uwagę?
Wszystkie opcje w zasięgu kciuka
Najważniejszy jest komfort. Aby umożliwić użytkownikowi korzystanie z aplikacji czy mobilnej wersji sklepu internetowego, należy się zastanowić nad tym w jakim kontekście będzie on korzystał z naszego portalu. Poniższa grafika w doskonały sposób obrazuje elementy ekranu łatwo i trudno dostępne za pomocą kciuka. Dobrze zaprojektowane sklepy charakteryzują się dostępnością opcji w dolnych sektorach ekranu tak, aby dotarcie do takich funkcjonalności jak kategorie produktów, wyszukiwarka czy koszyk były możliwe podczas korzystania z urządzenia przy pomocy jednej ręki.
Zasięg kciuka na ekranie podczas trzymania telefonu.
Istnieje tendencja do umieszczania elementów nawigacyjnych w aplikacjach mobilnych czy sklepach RWD w taki sam sposób jak na desktop. Prowadzi to często do sytuacji, w której użytkownik musi przekładać telefon w ręce aby móc poruszać się po serwisie.
Najczęstszy błąd to umieszczanie tzw. ‘hamburgera’ czyli głównego menu z kategoriami w lewym lub prawym górnym rogu. Sekcja ta jest niedostępna dla użytkowników korzystających zarówno z urządzenia lewą i prawą ręką. Prowadzi to do ogólnego poczucia braku komfortu w nawigowaniu po stronie. Zwiększa potencjalny bounce rate w ciągu pierwszych sekund po załadowaniu strony.
Jeden spójny proces zakupowy dla desktop i mobile
Często obserwowanym problemem jest modyfikacja procesu zakupowego na mobile. Jeśli modyfikacja prowadzi do jego skrócenia, zadbania, w jakiś szczególny sposób, o użytkowników mobilnych zostanie docenione w postaci lepszej konwersji. Stan rzeczy jednak pokazuje, iż często proces dla użytkowników komputerów jest prostszy, krótszy i wynika z pewnej praktyki szeroko stosowanej w branży e-commerce.
Dotyczy to najczęściej dodawania produktów bezpośrednio z listingu kategorii produktu. Jeżeli jest tylko taka możliwość rekomendowana jest opcja dodawania do koszyka produktów bez potrzeby wchodzenia na ich kartę produktu. To co normalne dla desktop nie jest jednak powszechne na mobile. Zdecydowana większość analizowanych przez nas sklepów rozdziela oba procesy. Użytkownik smartfona, musi odwiedzić kartę produktu, aby dodać przedmiot do koszyka.
Kolejny dodatkowy krok na mobile prowadzi często przez pełen koszyk. W wersjach desktop istnieje często ścieżka pozwalająca na natychmiastowe przejście do checkout z mini-koszyka lub bezpośrednio po dodaniu produktu. Na mobile? Na mobile natomiast musimy wyświetlić pełen koszyk, często przewinąć wszystkie dodane produkty, aby na końcu zobaczyć button ‘przejdź do płatności’. Te niewielkie różnice mogą mieć potężny wpływ na konwersję. Z czego to wynika? Często z lenistwa projektantów oraz klientów.
Stworzenie identycznego procesu na mobile nie jest niemożliwe. Realizowaliśmy takie przedsięwzięcia, jednak cechowały się one potrzebą stworzenia czegoś więcej, wyjścia ze strefy komfortu. Musieliśmy porzucić kopiowanie procesów konkurencji i stworzyć coś nowego w oparciu o dostępną wiedzę. Tylko posiadanie spójnego procesu pomiędzy kanałami pozwala na porównywanie konwersji pomiędzy nimi. Porównywanie różnych liczb, obrazujących różne procesy nie ma sensu z perspektywy logiki i danych.
Przykład wyboru rozmiaru i dodania produktu do koszyka bezpośrednio z listingu produktu.
Mniej w m-commerce znaczy więcej
Mobile weryfikuje dobre lub złe projekty w sposób natychmiastowy. Jeżeli czytałeś moje poprzednie artykuły, to wiesz, że przewija się w nich często wątek zadaniowości. Głęboko wierzę w to, że sukces osiągają aplikacje realizujące jeden, konkretny cel. W kanale mobile ta zasada jest niezwykle ważna z prostej przyczyny. Mamy niewspółmiernie mniejszy ekran na urządzeniach mobilnych. Projektując m-commerce powinniśmy skupić się nie tylko na jednym zadaniu aplikacji, ale także na jednej konkretnej czynności, którą w danym momencie procesu realizuje klient.
Rekomendowane jest więc usunięcie wszelkich funkcjonalności dodatkowych, takich jak formularz dodawania do newslettera, zbieranie informacji segmentujących i innych czynności, które nie są niezbędne do realizacji zamówienia.
Projektowanie filtrów w m-commerce
Przykład dobrze zaprojektowanych filtrów, źródło eobuwie.pl, nike.pl
Grafika prezentuje zestawienie dwóch sklepów w wersji mobile. Po prawej stronie widzimy doskonale zaprojektowane filtry, brak innych opcji, użytkownik skupia się jedynie na filtrach, dwa przyciski ‘wyczyść’ oraz ‘zapisz’ są dostępne w dolnej części ekranu co pozwala na natychmiastowe przejście do wyświetlenia wyników. Po stronie lewej natomiast musimy przewinąć wszystkie filtry aby dotrzeć do przycisku zapisz. Wyświetlane jest również górne menu, które nie jest potrzebne podczas ograniczania wyników na liście produktów z danej kategorii.
Przykład maksymalnego uproszczenia rejestracji.
Projekt dla jednego z naszych klientów po prawej stronie, cechuje się minimalizmem i maksymalnym uproszczeniem standardowych elementów checkoutu. Skompilowaliśmy ‘status bar’, pokazujący progres przejścia przez formularz do jednego paska, miast wyszczególniania wszystkich kroków, podzieliliśmy formularz na kilka kroków, tak aby po kliknięciu w ‘input’, klawiatura pokazała się w wolnej przestrzeni a przycisk ‘continue’ był widoczny w każdym momencie procesu. Dobrą praktyką jest również brak dostępności dla funkcji, które nie interesują użytkownika w danym momencie. Pływające buttony w formularzach i na kartach produktu
Kluczowe elementy interfejsu w m-commerce
Kluczowym elementem dobrego projektu m commerce jest pochylenie się nad formularzami oraz nad przyciskami akcji, przenoszącymi użytkownika do kolejnego kroku w procesie. Dobrą praktyką jest umiejscowienie buttona ‘dodaj do koszyka’ czy też ‘przejdź dalej’ w formularzu, przyklejonego na dole ekranu (zgodnie z zasadą dostępności za pomocą kciuka) w taki sposób, aby użytkownik od razu widział pożądaną przez niego akcje. W jednym z artykułów, w którym podaję powody dla których użytkownicy uciekają z Twojego sklepu internetowego, pisałem o tym,że istnieją teorie, w których brak możliwości znalezienia akcji w przeciągu 2.6 sekund zwiększa potencjalny bounce rate. Poniższa grafika obrazuje rekomendowane rozwiązanie.
Przykład pływającego buttona ‘dodaj do koszyka’: zawsze widoczny, zawsze dostępny, źródło: nike.pl
Jest to karta produktu, przycisk dodaj do koszyka jest widoczny bezpośrednio po załadowaniu strony jako stały element, przyklejony podczas scrolla w dół, do dolnej części ekranu. Jeżeli produkt wymaga wyboru rozmiaru lub jakiejkolwiek formy konfiguracji, button ten powinien być zawsze aktywny a po jego kliknięciu, strona produktu przewijana jest do sekcji z wyborem potrzebnych parametrów tak, aby móc dodać produkt do koszyka.
To samo dotyczy formularzy, button do przejścia dalej powinien pozostawać aktywny, jeżeli jakiekolwiek pola wymagane nie zostały wypełnione, to formularz przewijany jest do tego miejsca a pola zaznaczone są na czerwono. Absolutnym błędem jest używanie buttonów nieaktywnych. Czyli użytkownik nie może kliknąć buttona jeżeli nie wypełnił jakichś pól obowiązkowych. Prowadzi to do sytuacji, w której użytkownik nie ma pojęcia co robi źle aby aktywować button.
Poniższa grafika obrazuje sytuację poprawnego zastosowania nieaktywnego buttona. Buton pozostaje aktywny, jego kliknięcie pokazuje brakujące akcje do wykonania i dopiero wtedy jest w stanie nie klikalnym.
Przykład poprawnego zastosowania nieaktywnego buttona w projekcie Monogo dla Converse
Szybkie płatności - zakupy jednym kliknięciem
Patrząc na Uber Eats i Pyszne.pl nie sposób nie zauważyć momentu, w którym obie te marki zaczęły rosnąć niewspółmiernie szybciej. To moment maksymalnego uproszczenia płatności. M-commerce cechuje się możliwością zintegrowania platformy z licznymi metodami płatności takimi jak Apple Pay, Google Pay czy możliwość podpięcia karty bezpośrednio do konta użytkownika. Smartfon umożliwia również zapamiętanie danych karty oraz autoryzowanie jej poprzez Face ID, odcisk palca lub po wprowadzeniu hasła.
Przykład 'single page checkout' z płatnością jednym kliknięciem, źródło: appleinsider.com/
To niewspółmierna przewaga nad kanałem desktop. Umożliwia to przejście przez checkout w zasadzie jednym kliknięciem, jeśli tylko nie zmienia się adres dostawy. Jeżeli w Twoim sklepie m-commerce użytkownik musi podawać dane karty z palca, z każdym razem kiedy chce zrealizować transakcje lub co gorsza, przenoszony jest do strony banku lub musi płacić blik… to najprawdopodobniej stracisz wielu klientów. Rekomendujemy skupienie się na podpięciu karty kredytowej do konta lub integracji z Apple Pay lub Google Pay.
Powyżej zaprezentowałem najczęstsze problemy, które występują w mobilnych wersjach sklepów internetowych. Jeżeli chciałbyś otrzymać dedykowaną analizę Twojego sklepu internetowego, z naciskiem na podwyższenie konwersji mobile - zapraszam do kontaktu - bezpłatnej, niezobowiązującej rozmowy.