Jak zaprojektować lepszy proces zakupowy na urządzeniach mobilnych? 9 wskazówek.

W ostatnich latach udział e-commerce w rynku konsumenckim gwałtownie rośnie. Według raportu ComScore “State of the U.S. Online Retail Economy” (“Sprzedaż detaliczna online w USA”) w samych Stanach Zjednoczonych do końca pierwszego kwartału 2017, co piąty wydany przez konsumentów dolar, zostanie przeznaczony na zakup za pośrednictwem internetu. Proporcjonalnie do tego rośnie udział m-commerce, który zbliża się do 22% całkowitej wartości e-commerce. Coraz więcej konsumentów nie tylko szuka produktów na urządzeniach mobilnych (ROPO – research online purchase offline), ale także za ich pośrednictwem kończy proces zakupowy.

Musimy więc projektować doświadczenia zakupowe na małych ekranach tak, by nie ustępowało ono niczym w projektowaniu sklepu na komputerze. Klienci muszą mieć te same funkcjonalności i możliwości niezależnie od urządzenia, z którego korzystają. To duże wyzwanie zwłaszcza w kontekście dokonywania zakupu, gdy klient wybrał już produkt i chce go zakupić. Zły UX na urządzeniu mobilnym może nie tylko kosztować sklep utraconą transakcję, ale też klienta, który nie wróci.

Ten artykuł zbiera kilka dobrych praktyk, o których warto pamiętać projektując proces zakupowy. Nie przedłużajmy więc i zaczynajmy!

01. Nie zmuszaj swoich klientów do zakładania konta.

Zgodnie z badaniem przeprowadzonym przez Baymard Institute, jest to drugi największy powód, dla którego ludzie porzucają swój zakup (pierwszym są za wysokie dodatkowe koszty, np. wysyłki). Przede wszystkim dlatego, że użytkownicy nie pamiętają swoich loginów i haseł, a wypełnianie formularzy rejestracyjnych na urządzeniu mobilnym to droga przez mękę. Sam proces trwa znacznie dłużej niż na komputerze i daje klientowi sporo czasu na dodatkowe przemyślenie zakupu. Nie chcemy tego. Rozwiązaniem jest możliwość zakupu bez konieczności zakładania konta i logowania się. Dlatego warto udostępnić opcję “zakupu gościnnego” i upewnić się, że jest dobrze widoczna! Baymard Institute wykazał, że 88% spośród badanych procesów zakupowych dostępnych na urządzeniach mobilnych, ma tę opcję tak ukrytą, że klienci jej nie zauważają. Jeśli nie ma jej na pierwszy rzut oka, to tak jakby nie było jej wcale.

02. Upewnij się, że Twoje formularze są przyjazne użytkownikom.

Jeśli już mówimy o formularzach. Najlepiej myśl o nich jak o przeszkodzie pomiędzy klientem a zakupem produktu. Oczywiście nie da się ich pominąć, ale możesz zrobić wiele by były przyjaźniejsze w użyciu. To ogromny temat, który zasługuje na osobny artykuł (lub dwa). Na ten moment skupmy się więc na absolutnych podstawach.

• Przede wszystkim klient będzie musiał podać adres i tu możemy mu przyjść z pomocą z podpowiedziami i auto-uzupełnieniem pól. Możesz uzupełnić pola adresu w oparciu o kod pocztowy wpisany przez użytkownika na początku formularza. Nie jest to jednak metoda doskonała – w mniejszych miastach kod może bowiem zwrócić więcej niż jedną nazwę ulicy. Alternatywnie można również poprosić użytkownika o jego lokalizację GPS lub wykorzystać geolokalizację Google rozpoczynając formularz adresowy od wyszukiwarki. Użytkownik wypełni wówczas swój adres wybierając jedną z podpowiedzi wyświetlanych w oparciu o kilka pierwszych liter ulicy.

• Unikaj rozwijanych list z wyborem. Zawsze staraj się wyświetlić wszystkie alternatywy od razu. Jeśli masz ich dużo do wyboru, rozważ dodanie opcji szukania w liście. Dobrym pomysłem jest również wyświetlenie najpopularniejszych opcji na początku listy. Przykładowo, jeśli użytkownik ma wybrać miasto, jest duża szansa, że żyje on w jednym z pięciu największych miast w kraju. W większości przypadków. Wyświetl je jako pierwsze i dodaj możliwość szukania wśród innych.

• Zawsze wyświetlają klawiaturę dopasowaną kontekstowo do rodzaju informacji, jaką użytkownik musi wpisać. Jeśli prosisz o numer telefonu, pokaż klawiaturę numeryczną.

03. Projektuj pod dotyk, nie pod kursor.

Za małe obszary klikalne są szczególnie widoczną bolączką w źle zrealizowanych stronach responsywnych. Po zeskalowaniu z desktopu na mobile, obszary są wciąż zoptymalizowane pod użytkownika z myszką w ręku a nie tabletem czy smartfonem, które obsługuje się dotykając ekrany. Zgodnie z badaniem MIT Touch Lab przeciętny kciuk u dorosłego ma szerokość 2,5 cm, a palec wskazujący pomiędzy 1.6 a 2 cm. Przekłada się to odpowiednio na 72 px i 45 do 57 px. Najprostszą odpowiedzią na to jest korzystanie z wzorców typografii i ikon z systemu Material Design od Google. I pamiętaj dodać padding do swoich linków tekstowych.

04. Rozważ opcję “szybkiego zakupu”.

Zakup musi zabrać jak najmniej czasu, niezależnie od tego czy klient korzysta z komputera czy z telefonu. Niemniej jednak, to w doświadczeniu mobilnym każde uproszczenie jest na wagę złota. Dla powracającego klienta doskonałą opcją jest tak zwany przycisk “szybkiego zakupu”, którego użycie dodaje produkt do koszyka i od razu przenosi do ostatniego kroku procesu zakupowego. Wszystkie ustawienia dostawy i płatności są albo wzięte z ustawień konta klienta, albo zapamiętane z poprzedniego zakupu. Jeżeli dasz tę opcję klientom, to zapewnisz sklepowi sporo zakupów impulsywnych… To znaczy zadowolonych klientów! Rzecz jasna.

05. Upewnij się, że proces płatności jest bez skazy.

Rozważ wykorzystanie pośredników płatności, którzy są godni zaufania i rozpoznawalni wśród grupy docelowej sklepu. I zapewnij tyle opcji płatności, ile tylko jesteś w stanie, tak by użytkownicy mieli możliwość wybrania tej opcji, z którą czują się najpewniej. A jeśli chcesz przyjąć dane kart kredytowych bezpośrednio na stronie sklepu, upewnij się, że system jest bezpieczny, a formularze przyjazne użytkownikom.

• Zawsze informuj o akceptowanych rodzajach kart.
• Nie ukrywaj numeru karty i pozwól użytkownikom wpisać je w sposób, który preferują: ze spacjami, z myślnikami czy bez nich. Możesz sformatować go po swojej stronie tak aby klient myślał jedynie o wypełnieniu pól.
• Wyświetl rodzaj karty w oparciu o numer. To upewnia użytkownika, że podał poprawne dane.
• Nie dodawaj zbędnych rozwijanych list dla daty ważności karty. Użytkownicy są w tym miejscu w trybie pisania. Niech wpiszą datę ręcznie, z ukośnikiem czy bez.
• Gdy prosisz o kod zabezpieczający, wyświetl wizualną podpowiedź, co to jest i gdzie klient ma tego szukać na swojej karcie. Zaprojektuj małe karty z zaznaczonym kodem. W tym momencie formularza masz już informację, jaki rodzaj karty użytkownik podaje. Podpowiedź może więc być dostosowana do tego.

06. Nie pokazuj pola wpisania kodu zniżkowego przed końcem procesu zakupowego.

To prawdopodobnie najpopularniejszy antywzorzec w historii e-commerce. Przeciętny użytkownik, który natrafi na pole na kod zniżkowy, zaczyna podważać swój zakup. Zaczyna zastanawiać się czy może kupić dany produkt taniej. Porzuca koszyk i rusza na poszukiwania kodów rozrzuconych w czeluściach Internetu. Oczywiście same kody zniżkowe nie są złe – służą budowaniu lojalności klienta, przyciągają nowych, nagradzają stałych. Miej jednak pewność, że nie odciągają uwagi od zakupu na etapie, w którym ten zakup jest już niemal pewny. Rozważ inne możliwości: dedykowane strony, URL-e aktywujące specjalny produkt w koszyku, który obniża cenę… Jest bardzo dużo możliwości.

07. Zaprojektuj proces tak, by postęp był widoczny i zrozumiały.

Brzmi to jak coś oczywistego, ale nie zawsze jest dopracowane jak należy. Użytkownicy zawsze muszą wiedzieć, gdzie się znajdują i co ich czeka. Potrzebują informacji o ilości kroków do wykonania zadania. A im mniej ich, tym większe szanse na domknięcie transakcji.

08. Unikaj bałaganu na stronie i w samym procesie.

Święty Graal każdego procesu zakupowego to prostota i szybkość. We wcześniejszych punktach wymieniłem kilka pomysłów, jak uprościć proces i zapewnić mu przyjazność dla użytkownika. Ale warto w tym miejscu dodać jeszcze kilka wskazówek. Unikaj wszelkich rozpraszaczy, do których zaliczamy nie tylko kody zniżkowe, ale też niepotrzebne wyskakujące okienka, reklamy czy pozostawioną ze strony głównej sklepu nawigację, z wszystkimi kategoriami i stronami informacyjnymi. Skomplikowany proces ze zbędnymi formularzami, niepotrzebna rejestracja czy nachalne techniki sprzedażowe są wśród przyczyn porzucania przez klientów koszyków zakupowych… Warto o tym pamiętać.

09. Uwzględnij opcję dokończenia zakupu na innym urządzeniu.

We wstępie pisałem o rosnącej liczbie konsumentów kończących zakup na urządzeniu mobilnym. Te wartości stale rosną, ale jest też wciąż ogromna ilość klientów, dla których smartfon nie jest podstawowym narzędziem do dokonywania zakupów. Ponadto wiele osób wciąż rozpoczyna proces zakupu na urządzeniu mobilnym, sprawdza ceny poza domem czy szuka produktów w sytuacji kontekstowej. Gdy znajdą czego szukają, kończą już zakup w zaciszu swojego domu przy komputerze. Warto odpowiedzieć na tę potrzebę. Daj tym klientom możliwość zapisania koszyka lub wysłania go na adres e-mail; zapamiętaj koszyk, gdy użytkownik jest zalogowany; dodaj opcję zapisania produktu na później.

Podsumowanie 9 wskazówek UX dla mcommerce

Wszystkie powyższe dobre praktyki to ogólne wytyczne i są sytuacje, w których poszczególne rozwiązania nie będą miały zastosowania, np. ze względu na grupę docelową wystąpi konflikt pomiędzy jakimiś rozwiązaniami czy też po prostu ich wpływ na konwersję będzie zerowy. Rolą projektantów i specjalistów UX jest dostosowanie projektu do potrzeb użytkowników a często też do możliwości technicznych, budżetu czy ograniczeń czasowych. Na szczęście poprawa doświadczenia w trakcie procesie zakupowego jest możliwa nawet najmniejszymi środkami.

Najważniejszą rzeczą, którą musisz wynieść z tego artykułu jest to by zawsze pamiętać o użytkowniku. Zaprojektuj proces zakupowy prosty, łatwy, przejrzysty, angażujący dla klientów. Im łatwiejszy będzie zakup, tym większa szansa, że zostanie on zrealizowany. A to jest przecież nasz główny cel.