UX eCommerce dla doświadczeń mobilnych

Termin „handel mobilny” został wprowadzony 20 lat temu przez Kevina Duffeya, kiedy zasugerował, że urządzenie mobilne może pełnić funkcję punktu sprzedaży detalicznej w kieszeni klienta. Biorąc pod uwagę ograniczenia technologiczne tamtych czasów, kto by pomyślał, że pewnego dnia będziemy mogli łatwo przeglądać, recenzować i kupować towary na małym urządzeniu kieszonkowym?

Nie mogę przecenić, jak mobilność zmienia sposób, w jaki wchodzimy w interakcje z naszymi konsumentami; musimy przyjąć te zmiany. – Joel Anderson, dyrektor generalny Walmart

Zdumiewający wzrost eCommerce przyczynił się również do wzrostu mobilnego eCommerce, którego wartość wynosi obecnie prawie 700 miliardów dolarów. Mobilny eCommerce to obecnie największa część gigantycznego rynku internetowego. Ponad 80% Amerykanów dokonało zakupu w ciągu ostatniego miesiąca przez internet – trzy lata temu liczba ta wynosiła tylko 11,6%.

Raport Business Insider Intelligence sugerował, że handel mobilny wzrośnie do 45% do 2020 roku. Badanie ComScore potwierdziło, że w 2016 roku odnotowano 44% wzrost wydatków na urządzenia mobilne w porównaniu z 2015 rokiem.

Pomimo wysokich wyników sprzedaży, ponad 60% użytkowników nadal obawia się, że ich dane finansowe zostaną zhakowane podczas korzystania z telefonu komórkowego. Niemniej jednak satysfakcja klientów jest nadal dość wysoka, a mobilni giganci handlu detalicznego, tacy jak Amazon i Apple, otrzymują ocenę satysfakcji przekraczającą 80%.

Najlepsze praktyki UX dla mobilnego eCommerce na sukces

Obsługa powiększania obrazu za pomocą gestów ściskania i dwukrotnego dotknięcia

Ludzie są zaznajomieni z gestami, takimi jak dwukrotne stukanie i szczypanie, aby powiększyć obrazy na telefonie komórkowym. Podczas badania użyteczności mobilnego eCommerce, Baymard Institute odkrył, że kupujący, całkiem naturalnie, chcą mieć możliwość dokładnego sprawdzenia produktu i martwią się o drobne szczegóły. Użytkownicy, którzy byli zainteresowani zakupem produktu, ale nie mogli go obejrzeć przez powiększenie, nie czuli się komfortowo kupując go i często nie zobowiązywali się do sprzedaży.

Zaskakujące jest to, że spośród 50 najlepiej zarabiających mobilnych aplikacji eCommerce ponad 40% nie obsługuje gestów powiększania. Nawet witryny, które oferowały zbliżone wersje obrazów, miały podobne współczynniki odrzuceń, co sugeruje, że obsługa gestów powiększania obrazu produktu w mobilnej aplikacji eCommerce ma fundamentalne znaczenie.

Biorąc pod uwagę mały rozmiar ekranu urządzeń mobilnych, jest to problem specyficzny dla platformy. Obsługa co najmniej jednej z tych funkcji sprawi, że aplikacja znajdzie się w towarzystwie 50% najlepszych aplikacji eCommerce, czyli na liście najlepiej zarabiających.

Kilka czynników do rozważenia:

• Obrazy o niskiej rozdzielczości są odpowiednikami obrazów bez powiększenia. Użytkownicy są zainteresowani wyraźnym wyświetlaniem szczegółów produktu i potrzebują do tego obrazów o wysokiej rozdzielczości. Opcja powiększania obrazu o niskiej jakości jest prawie bezużyteczna, ponieważ nie pozwala użytkownikowi zobaczyć szczegółów.
• Baymard Institute odkrył, że 50% aplikacji nie wskazuje użytkownikom, że mogą uszczypnąć lub dwukrotnie dotknąć zdjęć produktów. Ważne jest wskazanie dostępności powiększania obrazu. Chociaż te gesty są powszechnie znane użytkownikom urządzeń mobilnych, nadal należy pokazać, że są one dostępne. W tym celu zalecane jest użycie ikon lub reprezentacji wizualnych.

Zapewnij funkcję „Zapisz” dla koszyka

Jak wspomniano wcześniej, mały rozmiar ekranu urządzeń mobilnych jest główną przeszkodą, jeśli chodzi o mobilny handel elektroniczny. Baymard Institute zaobserwował, że ponad 61% użytkowników telefonów komórkowych często korzysta z komputerów stacjonarnych, a nie z telefonu, aby dokonać zakupu.

Funkcja „zapisz koszyk” zmniejsza liczbę porzucanych koszyków i umożliwia kupującym zapisywanie produktów do późniejszego zakupu. Trwałe koszyki umożliwiają klientom kontynuowanie zakupów bez konieczności szukania pożądanego produktu po powrocie – funkcja, z której skorzystałoby 55% kupujących.

Oto jak zatrzymać tych klientów:

1. Spraw, aby koszyk działał jako lista życzeń, zapisując elementy dodane do koszyka.
2. Utwórz opcję umożliwiającą kupującym otrzymywanie e-maili z zapisanymi produktami. Wyświetlaj przypomnienia, że ​​mogą użyć swojego komputera do sfinalizowania zakupu.

Użyj opisowych, dobrze oznaczonych formularzy

Inną kwestią jest zastosowanie najlepszych praktyk dotyczących formularzy mobilnych. Ważne jest, aby projekt UX aplikacji lub witryny eCommerce, eliminując wszelkie zamieszanie, umożliwiał użytkownikom wypełnianie formularzy tak szybko, jak to możliwe.

Oto sprawdzone metody korzystania z formularzy mobilnych:

• Umieść etykiety formularzy nad formularzem, aby poprawić czytelność, łatwość użycia i przejrzystość. Wyjaśnienie, dlaczego potrzebne są określone informacje, zmniejszy niepokój użytkownika podczas wypełniania formularzy na telefonie komórkowym.
• Dopasuj wpisy tekstowe do odpowiedniej klawiatury. Wyświetlaj klawiaturę numeryczną podczas wprowadzania numerów telefonów i cyfr karty kredytowej oraz klawiaturę tekstową podczas wprowadzania adresów i tekstu. Zmniejszy to błędy użytkowników i przyspieszy wypełnianie formularzy.
• Ogranicz liczbę pól wejściowych, aby zmniejszyć wysiłek związany z wpisywaniem. Mniej pól wejściowych wygeneruje mniej obciążony formularz i poprawi przepływ kasy UX.
• Po zakończeniu automatycznie przesuń każde pole w górę ekranu. Takie postępowanie nie zablokuje żadnego widoku niekompletnych pól.
• Używaj stepperów zamiast rozwijanych menu, aby zmniejszyć wysiłek kupujących. Steppery służą do zwiększania lub zmniejszania wartości o stałą wartość i są rozwiązaniem szybszym w pracy i bardziej atrakcyjnym dla oka.

Zapewnij inteligentną automatyczną sugestię, automatyczne wykrywanie, wyszukiwanie adresów i błędy

Głównym celem autosugestii jest ułatwienie i przyspieszenie wypełniania formularzy przez użytkowników. Automatyczna sugestia przewiduje często zadawane zapytania i ułatwia kupującym znajdowanie produktów.

Użyteczność mobilną można dodatkowo poprawić, korzystając z automatycznego wykrywania typu karty kredytowej. Automatyczne wykrywanie usprawnia proces zakupu, zapewniając natychmiastową informację zwrotną dla obsługiwanych typów kart. Automatyzacja jak największej liczby procesów wprowadzania danych — najlepiej za pomocą wizualizacji — poprawia wrażenia użytkownika i pozytywnie wpływa na współczynniki konwersji.

Wyszukiwanie i weryfikacja adresów przyspieszają proces realizacji transakcji — różne interfejsy API (takie jak Miejsca Google i USPS) umożliwiają łatwą implementację tej funkcji.

Zapewnienie wbudowanej walidacji danych wejściowych pod kątem błędów jest również najlepszą praktyką w projektowaniu mobilnego UX. Brak szybkiej wydajności jest główną frustracją dla kupujących w eCommerce. Można w tym pomóc, przekazując użytkownikom informacje zwrotne na żywo na temat ich postępów (na przykład podczas realizacji transakcji), zwłaszcza gdy popełnią nieumyślny błąd. Pozwala to użytkownikom natychmiast naprawić swoje błędy, co pozytywnie wpływa na użyteczność.

Użyj mikrointerakcji, aby poprawić UX zakupów mobilnych

Mikrointerakcje to szczegóły w interfejsie produktu, które mają na celu wykonanie pojedynczego zadania, jednocześnie poprawiając naturalny przepływ produktu. Polubienie i ocena produktu, wybranie koloru i rozmiaru oraz przeciągnięcie palcem w dół, aby odświeżyć dane to przykłady mikrointerakcji.

Biorąc pod uwagę ich powszechność, mikrointerakcje mogą stworzyć lub zepsuć UX mobilnej aplikacji eCommerce.

Mikrointerakcje można wykorzystać do:

• Prowadź użytkownika przez aplikację w bardziej intuicyjny sposób;
• Daj lepsze poczucie zaufania, zmniejsz niepokój kupujących i zwiększ ogólny komfort psychiczny dzięki płynniejszym, bardziej naturalnym interakcjom;
• Zapobiegaj przyszłym błędom i natychmiast dostarczaj użytkownikom informacje zwrotne na podstawie wykonanych przez nich działań; i/lub
• Popraw interakcję użytkownika z aplikacją, odpowiadając na powiadomienia.

Zapewnij łatwą interakcję zorientowaną na kciuk

Zrozumienie najczęstszych sposobów, w jakie kupujący trzymają swoje urządzenia mobilne, poprawia wrażenia użytkownika i użyteczność mobilnego eCommerce. W 2013 r. Steven Hoober zapytał „Jak użytkownicy naprawdę trzymają urządzenia mobilne?” i obserwowali, w jaki sposób ludzie wchodzą w interakcję ze smartfonami i trzymają je, oraz zauważyli trzy główne wzorce zachowań, które powinny kierować projektowaniem mobilnego UX.

Dostosowanie interfejsów do naturalnego sposobu, w jaki ludzie korzystają z telefonów komórkowych, zwiększy komfort użytkownika i zmniejszy niepokój kupujących. Urządzenia mobilne i rozmiary ekranów różnią się, ale „strefa kciuka”, kluczowy aspekt projektu i doświadczenia użytkownika, pozostaje taka sama.

Projektowanie wokół „strefy kciuka”:

• Rozwiązuje potencjalne problemy z nawigacją i eksploracją
• Poprawia interakcję dzięki lepszemu dostosowaniu gestów i zasięgu palca
• Konwertuje się lepiej i poprawia użyteczność, umieszczając ważne elementy w „łatwo dostępnych” strefach

Uwagi dotyczące projektowania mobilnego e-commerce zorientowanego na konwersję

Daj poczucie bezpieczeństwa w mobilnych aplikacjach e-commerce

Bezpieczeństwo to jedna z największych trosk użytkowników podczas zakupów na urządzeniach mobilnych. Informowanie, że ich transakcje są bezpieczne, dodaje wiele wartości do pozytywnego postrzegania sklepu przez kupujących.

Oto kilka technik projektowania UX, które komunikują bezpieczeństwo użytkownikom i zmniejszają niepokój użytkowników:

• Etykiety przycisków powinny być sugestywne i wyraźnie wskazywać, dokąd zmierzają kupujący. Słowa takie jak „kontynuuj”, „bezpieczne” i „zaszyfrowane” wzmocnią komfort psychiczny użytkowników.
• Używaj symboli kłódek, aby zapewnić kupującym, że ich transakcje są bezpieczne.
• Używaj odznak zaufania dostawców zabezpieczeń, takich jak McAfee Secure i Norton. Pomaga to użytkownikom w pozytywnym postrzeganiu strony internetowej (badanie Baymard Institute).
• Zastosuj zasady psychologii koloru w projektowaniu, aby jeszcze lepiej postrzegać zaufanie kupujących. Niektóre z tych zasad obejmują kolory zorientowane na odbiorców i specyficzne dla płci.

Priorytet wyszukiwania (i trzymaj go nad zakładką)

Kupujący korzystają z mobilnej witryny lub aplikacji eCommerce, aby przeglądać produkty lub kupować określony produkt; w konsekwencji dobrze zaprojektowana wyszukiwarka nabiera krytycznego znaczenia dla mobilnej aplikacji eCommerce. eBay uważa, że ​​wyszukiwanie w witrynie jest jedną z najważniejszych funkcji dla kupujących na urządzeniach mobilnych i podkreśla to, umieszczając ją na środku i nad zakładką w interfejsie.

Ważne uwagi dotyczące wyszukiwania mobilnego:

• Upewnij się, że jest widoczny! Łatwy dostęp do paska wyszukiwania znajdującego się nad zakładką umożliwia kupującym bezproblemowe wyszukiwanie produktów.
• Zapewnij wyszukiwanie z wyprzedzeniem, korzystając z danych uzyskanych z typowych wzorców wyszukiwania i wyświetlaj powiązane produkty na stronach wyników wyszukiwania.
• Zapewnij zaawansowane opcje filtrowania, które pozwalają klientom szybko i bez wysiłku znaleźć pożądane produkty.

Ważnym aspektem do rozważenia podczas wyświetlania formularzy wyszukiwania jest to, że są one wartościowe tylko na pierwszych etapach interakcji użytkownika z aplikacją. Użytkownicy zazwyczaj przeszukują aplikację na początku swojej podróży zakupowej, a może się zdarzyć, że wyświetlenie formularza wyszukiwania w dalszej części podróży może zaszkodzić UX.

Na przykład podczas procesu kasowania wyszukiwanie nie jest już przydatne i będzie tylko rozpraszać uwagę, ponieważ może spowodować, że użytkownicy stracą koncentrację i zrezygnują z zaangażowania w zakup.

Zapewnij płynną, łatwą i szybką kasę

Badania wykazały, że proces realizacji transakcji jest najbardziej stresującą częścią dokonywania zakupu online. Baymard Institute podaje wskaźnik 35% za porzucenie koszyka z powodu konieczności założenia konta przed zakupem. Aby zmniejszyć współczynniki porzucania koszyków, ważne jest zaprojektowanie łatwego i szybkiego procesu płatności, który nie wymaga uprzedniej rejestracji kupujących.

Badania użyteczności wykazały, że ponad 60% użytkowników miało trudności ze znalezieniem opcji kasy dla gości; ergo, opcja kasy dla gości musi być wyraźnie widoczna i łatwo dostępna.

Oto kilka sugestii dotyczących usprawnienia procesu realizacji transakcji w handlu elektronicznym:

• Aby promować zaangażowanie użytkowników, oznacz każdy krok procesu kasowania, numerując i wyświetlając aktualnie aktywny krok.
• Użyj reprezentacji wizualnych, takich jak paski postępu, aby wyświetlić postęp w procesie kasowania.
• Zapewnij opcję zarejestrowania się i zalogowania podczas procesu kasowania, ale dokonaj wyboru.
• Aby zmniejszyć niepokój i współczynnik odrzuceń, zasugeruj, aby użytkownicy logowali się lub rejestrowali po wymeldowaniu, jeśli wymeldowali się jako gość.
• Zastosuj techniki progresywnego ujawniania, aby poprawić koncentrację użytkowników i ładować treści o 30% szybciej.

Podsumowując: Jakie są kluczowe cechy udanego mobilnego projektowania e-commerce?

• Zapewnia szybki i łatwy przebieg procesu rejestracji i realizacji transakcji
• Wzbudza poczucie bezpieczeństwa i zaufania poprzez wyświetlanie odpowiednich ikon, odznak, recenzji i referencji
• Zapewnia interakcję zaprojektowaną wokół stref przyjaznych kciukom
• Wykorzystuje spójną i skondensowaną nawigację
• Zawiera szybkie wyszukiwanie i łatwe filtrowanie produktów
• Rozumie bezpośredni związek między stresem użytkownika, niepokojem i współczynnikami konwersji dla aplikacji mobilnych
• Zapewnia szybko ładujące się, responsywne wrażenia z witryn mobilnych
• Obsługuje gesty do powiększania obrazu produktu

Mobilna przestrzeń eCommerce będzie się dopiero powiększać

Trendy mobilnego eCommerce pokazują, że rynek mobilnego eCommerce rośnie wykładniczo, a rozwój branży przyniósł wiele korzyści dla sprzedawców. Jednak wraz z tym pojawiło się wiele najlepszych praktyk i standardów projektowania mobilnego eCommerce, których sprzedawcy muszą przestrzegać, jeśli mają odnieść sukces.

Kupujący oczekują aplikacji mobilnej, która działa dobrze, pięknie wygląda i jest dostosowana do ich zachowań. Chociaż każda aplikacja jest inna z własnymi ograniczeniami i celami, przestrzeganie podstawowych zasad przedstawionych w tym artykule pomoże w tworzeniu udanych mobilnych aplikacji eCommerce.

Pobierz ściągawkę dotyczącą poprawy UX mobilnego eCommerce

• • •

Dalsza lektura na blogu Toptal Design:

• Wybitne trendy w handlu elektronicznym i ich wpływ na projektowanie (z infografiką)
• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• eCommerce UX – podstawowe strategie i zasady projektowania
• Kompletny przewodnik po projektowaniu witryn eCommerce
• Przeprojektowany e-commerce: jak drobne zmiany spowodowały poważne ulepszenia UX