8 wskazówek, jak poprawić doświadczenie użytkownika (UX) w mobilnym sklepie internetowym
Coraz częściej ludzie używają swoich telefonów wymiennie z komputerami stacjonarnymi. Nie są to już tylko interakcje, takie jak sprawdzenie najnowszych wiadomości ze świata, e-maila czy ilości pieniędzy na koncie bankowym. Kupujemy coraz częściej i coraz więcej właśnie dzięki kanałowi mobilnemu. Według badań przeprowadzonych i opublikowanych przez KISSMetrics 78% wyszukań miejscowych firm dokonanych przez kanał mobilny może prowadzić do zakupu lub innego rodzaju konwersji.
Poniżej przedstawiamy 8 porad dla właścicieli sklepów internetowych odnoszących się bezpośrednio do kanału mobilnego.
Może się to wydawać proste i oczywiste. W praktyce jednak często spotykamy się ze stronami e-commerce, w których wdrożony jest tylko podstawowy moduł RWD, czyli skonfigurowane są tzw. media queries, nierzadko dopasowane tylko i wyłącznie do 3 najbardziej popularnych szerokości ekranu: desktop 992px. / 1200px., tablet 768px., oraz mobile 320px. Spotykamy też rozwiązania oparte na gotowych szablonach, gdzie widok mobilny nie jest optymalizowany i dostosowywany, a pozostawiony sam sobie. Ustawiając go, oczekujemy, że będzie on reagował w każdej rozdzielczości, a klienci będą z chęcią powracać na stronę i kupować produkty. Tak się jednak nie dzieje i powoduje, że klienci mobilni niechętnie korzystają z zakupów. Należy wtedy zastanowić się nad tym, co na Twojej stronie jest ważne, czego oczekiwaliby użytkownicy oraz w jakim momencie zakupowym korzystają z Twojego sklepu. Tak naprawdę każda branża jest inna, każdy moment zakupowy jest inny i nad tym powinniśmy się zastanowić, projektując mobilny e-commerce.
Polecamy, abyś zawsze sprawdzał swój sklep na kliku typach urządzeń, szerokościach i rozdzielczościach, aby zobaczyć, jak reaguje on w środowiskach mobilnych. Niewygodne funkcjonalności da się zauważyć od razu, gołym okiem. Najlepiej jednak pokazać Twój sklep na urządzeniu mobilnym użytkownikowi z grupy docelowej i sprawdzić, jak on będzie z niego korzystał.
Przykład niezoptymalizowanego pod mobile sklepu internetowego (usefulusability.com)
W obecnych czasach sklepy mobilne powinno się projektować zgodnie z zasadą mobile first index, jednakże w praktyce wygląda to zupełnie inaczej. To desktop zwykle jest tym pierwszym ogniwem, do którego dostosowujemy kolejne rozdzielczości. A przecież prościej jest coś dodać – tak jak w przypadku projektowania mobile → desktop, niż później zastanawiać się, co trzeba usunąć z rozbudowanego projektu typu desktop → mobile.
Zawsze zadbaj o to, aby pierwszy ekran Twojego sklepu był atrakcyjny oraz pokazywał, co sprzedajesz i dlaczego właśnie u Ciebie użytkownik powinien kupić produkt. Umiar jest równie wskazany – nie przesadź z wyróżnionymi promocjami i pokaż użytkownikowi, na co powinien zwrócić uwagę.
Musisz również pamiętać, że kluczowym elementem mobilnego rozwiązania e-commerce jest przejrzysta i prosta nawigacja. Nie zawsze trzy kreski ułożone poziomo, zwane potocznie ”hamburgerem” będą oczywistą dla Twojej grupy docelowej ikoną sygnalizującą menu. To trzeba zbadać.
Zadbaj również o dobrze widoczną, prostą w obsłudze i intuicyjną wyszukiwarkę produktów – często zakup odbywa się pod wpływem chwili – pozwól użytkownikowi wpisać to, o czym myśli i ułatw mu zakup.
Łatwy dostęp do menu w postaci „hamburgera” oraz do wyszukiwarki z każdego miejsca strony mobilnej (usefulusability.com)
Kluczowym kryterium wyboru produktu przez klienta są dobre zdjęcia. Warto zastanowić się, jak w atrakcyjny, a przede wszystkim prosty sposób pokazać wszystkie zalety naszego asortymentu. Musimy przy tym pamiętać, że zdjęcia pokazują się na mniejszym ekranie.
Warto w takim momencie zastanowić się nad wymuszoną zmianą orientacji powiększanego zdjęcia produktu, sygnalizowaną wcześniej ikoną. Wtedy użytkownik będzie musiał co prawda przekręcić o 90 stopni swoje urządzenie, ale my zwiększymy pole widoczności zdjęć. To ułatwi mu oglądanie zdjęć w lepszej rozdzielczości.
Pamiętajmy również o doskonałej jakości zdjęć – białe tło oraz detale wpłyną pozytywnie na odbiór i decyzję zakupową klienta.
Przykład dobrego przedstawienia produktów na zdjęciach w galerii One Kings Lane (webdesignerdepot.com)
W alejkach wielkich supermarketów widzimy wskazówki informujące o tym, gdzie możemy pójść i co możemy kupić, dlatego również w sklepie internetowym powinniśmy o tym pamiętać. Co więcej, użytkownik nie będzie w stanie zapytać o kierunek, tak jak w przypadku sklepów stacjonarnych, a poirytowany zmieni sklep na inny. Nigdy nie powinien czuć się on zagubiony lub niepewny swoich dalszych działań. Najbardziej popularną wskazówką są tzw. breadcrumbs’y czyli „okruszki chleba”, które wskazują, gdzie jesteśmy, skąd przyszliśmy i jak możemy wrócić. Nie jest to jedyna droga. Możemy również pokazać w nawigacji, gdzie nasz użytkownik się znajduje, wyróżniając daną kategorię lub podkategorię innym kolorem.
Breadcrumbs w e-commerce sprzedającym sprzęt komputerowy (under30ceo.com)
Jeżeli klient dotrze do koszyka, powinniśmy mu pokazać, ile i jakie kroki ma przed sobą, zanim dotrze do końca zakupów, a także rozróżnić innymi kolorem kroki przybliżające go i anulujące zakup. Zawsze zakładajmy, że klient będzie chciał edytować dane, które już wprowadził – pokażmy mu przyciski edycji.
Prawidłowo zaprojektowane kroki w koszyku zakupowym (crazyegg.com)
Projektując lub sprawdzając swój sklep po kątem mobile, pamiętaj o obszarach, które użytkownik może kliknąć kciukiem – wg badań uxmatters.com z 2013 roku prawa dłoń to najczęstsza pozycja, w jakiej trzymamy smartfony. Pamiętaj, aby przyciski dodawania do koszyka były łatwo dostępne i duże – nie każ swojemu klientowi odrywać się od decyzji zakupowej, aby powiększyć ekran. Wszystkie pola do kliknięcia lub wpisu danych powinny być duże i szerokie, aby klikając nawet nieprecyzyjnie, osiągnąć to, czego oczekujemy.
Sposoby używania smartfonów (uxmatters.com, 2013)
Obszary, które są najłatwiej dostępne kciukiem podczas trzymania telefonu w prawej ręce (usefulusability.com)
Na stronie produktowej od razu pokaż użytkownikowi, gdzie może dodać produkt do koszyka, zmienić ilość zamawianych towarów, zobaczyć specyfikację lub zdjęcia. Nie zmuszaj go do szukania tych funkcjonalności, a zwłaszcza funkcji „Dodaj do koszyka” – wyróżnij ją kolorem.
Sprawdź, co dzieje się po rzeczywistym dodaniu do koszyka – czy użytkownik otrzymuje powiadomienie, czy pojawia się pop-up, który zachęca do przejścia do stron zakupowych? Brak reakcji strony jest często powodem porzucania koszyka. W procesie weryfikacji zadbaj o przejrzystość – usuń wszystkie zbędne reklamy, pokaż korzyści, spraw, aby użytkownik w szybki i przyjemny sposób przebrnął przez proces zakupowy.
Przejrzysta nawigacja zakupowa w sklepie riverisland.com (webdesignerdepot.com)
Nikt z nas nie lubi formularzy, ponieważ wciąż wypełniamy ich bardzo dużo, wszędzie podając te same dane. Pozostaw po sobie dobre wrażenie w nieuniknionych formularzach wysyłkowych. Pozwól się zalogować lub zarejestrować się za pomocą portali społecznościowych. Podziel wymagane dane na sekcje lub kroki, jeżeli jest ich dużo. Nie pozwól przejść dalej, jeżeli klient wpisze nieprawidłowe dane i zasygnalizuj, co może być nie tak. Stwórz duże i szerokie pola do prostego wprowadzania danych. Jeżeli jest to możliwe – podczas podawania danych cyfrowych (np. kod pocztowy, telefon) – pokaż mu tylko klawiaturę numeryczną. Wymagaj tylko tych danych, które są absolutnie niezbędne, a dane opcjonalne zaznacz widocznie.
Przykład wyraźnie zaznaczonych kroków podczas wypełniania formularza (crazyegg.com)
Dużym udogodnieniem dla użytkowników, zwłaszcza w przypadku dużych sklepów e-commerce, jest możliwość filtrowania i sortowania produktów. Funkcjonalności takie powinny być łatwo dostępne. Jest to udogodnienie dla tych użytkowników, którzy nie są jeszcze przekonani do konkretnego produktu, a jedynie przeglądają oferty. Jest duże prawdopodobieństwo, że wrócą oni do nas za pośrednictwem desktopu.
Dobrze widoczne filtrowanie i sortowanie na stronie shinola.com (usefulusability.com)
Zagadnienia związane z projektowaniem doświadczeń użytkowników korzystających z urządzeń mobilnych są bardzo szerokie – powyższe wskazówki to tylko malutki wycinek zasad, których powinno się przestrzegać podczas projektowania sklepu na urządzenia mobilne. Tylko dzięki dobrze zoptymalizowanemu i dostosowanemu do potrzeb Twoich użytkowników sklepowi internetowemu będziesz w stanie zdobywać większy ruch, a dzięki temu uzyskasz większe przychody. Zamów audyt UX!
Grzegorz
Maliszewski
HEAD OF BUSINESS DEVELOPMENT
tel. +48 577 997 701
e-mail g.maliszewski@promotraffic.pl
PromoTraffic to przede wszystkim wysoki standard obsługi. Jest to agencja, która podchodzi do zagadnienia marketingu w sposób kompleksowy.
Adam Grybalow
4FIZJO
Przeprowadzane przez PromoTraffic kampanie są kluczowe dla naszego biznesu. Razem skutecznie realizujemy je na ponad 20 rynkach.
Łukasz Gwóźdź
Picodi
Ponad 11 lat doświadczenia, nieustanny #PROgress i sukcesy naszych Klientów.
