Mobile-first jako najprostszy sposób na wzrost konwersji ze strony

Dostosowanie sklepu i strony do urządzeń mobilnych to krytyczny, a wciąż często pomijany etap projektowania. Podejście mobile-first pozwala realnie podnieść jakość Twoich usług i zwiększyć konwersję ze sprzedaży online. Zobacz jakie kroki warto podjąć, żeby wykorzystać atrybuty mobilnego świata.

Na czym polega "mobilna przewaga"?

Spróbuj przypomnieć sobie Twoje ostatnie zakupy online. Jak przebiegał proces? Czy pojawiły się jakieś trudności? A teraz, pomyśl o ostatnich zakupach zrealizowanych przy użyciu telefonu. Poszczególne kroki, prawdopodobnie wyglądały mniej więcej tak:

Typowy scenariusz zakupowy na urządzeniu mobilnym:

  1. przejdź do strony produktu
  2. dodaj produkt do koszyka
  3. zobacz podsumowanie
  4. wypełnij dane (min. 5 pól)
  5. wypełnij dane do faktury (dodatkowe 5 pól)
  6. zaloguj się do banku i potwierdź płatność

Nawet jeśli proces działa bez zarzutu, to łatwo sobie wyobrazić jak frustrujące jest przechodzenie przez niego na telefonie. Wystarczy, że ktoś do Ciebie zadzwoni, na ekranie pojawi się jakieś powiadomienie z innej aplikacji, albo po prostu jesteś poza domem i coś rozproszy Twoją uwagę.  Nie brzmi to jak idealne warunki do wyklikania numeru NIP albo logowanie się do banku. W dodatku nie wykluczone, że będziesz mieć ograniczony zasięg i ładowanie strony pomiędzy poszczególnymi krokami potrwa nawet kilkadziesiąt sekund.

Warto do tego dodać że i tak jest to uproszczony scenariusz. Zazwyczaj czeka nas jeszcze konieczność logowania lub rejestracji. Jeśli nie pamiętamy hasła do platformy na której udostępniany jest produkt, konieczne będzie jego zresetowanie i ponowne zalogowanie się, które będzie jeszcze trudniejsze, jeśli proces nie zawiera udostępnienia "magicznego linku".

A teraz wyobraź sobie drugi scenariusz, w przypadku którego realizacja zamówienia wygląda tak:

  1. przejdź na stronę płatności
  2. kliknij kup i potwierdź przelew w aplikacji

Bez logowania, bez przypominania hasła, bez wypełniania danych do faktury. Zbyt piękne, żeby było prawdziwe? Nie, ale o tym za chwilę. Pozwól, że teraz opowiem dlaczego to ma aż takie znaczenie.

Urządzenia mobilne nie są "popularne". One dominują rynek!

Według UKE (Urząd Komunikacji Elektronicznej), 93% Polaków w 2019 korzystało z telefonu komórkowego, a niemal 60% z nas korzysta z niego więcej niż 5 godzin w ciągu dnia! (źródło)

https://space.overment.com/yLdxZ8lxRyCrQg8x9a5o/Shared-Image-2021-10-08-17-58-51.png

Takie dane jasne pokazują jak ogromną rolę już dziś odgrywają smartphone'y w naszym życiu. Nie trudno wyobrazić sobie, że jednoznacznie przekłada się to na wzrost zakupów realizowanych z pomocą telefonu. I to zresztą potwierdzają statystyki e-commerce, które prognozują, że 72.9% zakupów online w 2021 roku zostanie zrealizowana z pomocą urządzeń mobilnych (źródło)

https://space.overment.com/FqxdhmEUFNc7ZBBz9pHH/Shared-Image-2021-10-08-17-56-14.png

Najważniejszy w tym jest fakt, że nie mówimy w tej chwili o prognozach i wróżbach, lecz rzeczywistości która nas otacza. Rzeczywistości w której smartphone'y odgrywają coraz większą rolę w naszym życiu oraz w której wymagania użytkowników względem stron www, aplikacji oraz samego procesu zakupu są zupełnie inne niż jeszcze kilka lat temu.

Pisząc o Sile Subskrypcji pokazaliśmy Wam, że rok temu urządzenia mobilne po raz pierwszy wygenerowały więcej ruchu w Internecie niż komputery stacjonarne i laptopy! To kolejny sygnał potwierdzający wszystkie pozostałe dane oraz  jasna zapowiedź tego co przyniesie przyszłość.

Obecne trendy sugerują, że do 2025 roku, 72.6% użytkowników Internetu będzie korzystało z niego wyłącznie za pośrednictwem urządzeń mobilnych (Raport GSMA Intelligence).

Oznacza to że już za 3 lata, 2/3 Twoich klientów nigdy nie zobaczy Twojej strony internetowej na ekranie komputera!

Już za 3 lata, 2/3 Twoich klientów nigdy nie zobaczy Twojej strony internetowej na ekranie komputera!

Myślę, że już w tym miejscu trudno dyskutować z tym, jak kluczowe dla Twojego biznesu nie tylko jest to aby "zoptymalizować" swoją stronę i proces zakupowy na urządzenia mobilne. Tylko to aby zaprojektować je z myślą o nich.

Twoja konkurencja jest w tyle. A Ty?

Pomimo powyższych liczb, nadal tylko pojedyncze firmy w Polsce są naprawdę dostosowane do całkowicie zmieniającej się internetowej rzeczywistości.

Wydawać by się mogło, że projektowanie stron na urządzenia mobilne (Responsive Web Design) jest dzisiaj standardem i rzeczywiście jest to prawda. Coraz trudniej spotkać stronę, która nie jest dostosowana do mniejszych ekranów. Podstawowa optymalizacja strony www na urządzenia mobilne to po prostu niezbędne minimum. W praktyce jednak to dopiero pierwszy krok.

Mobile-First to nie buzzword, to konieczność

Sam potrafię programować i mam za sobą kilkadziesiąt zrealizowanych projektów, kilkaset w które byłem w jakimś stopniu zaangażowany oraz tysiące, które miałem okazję obserwować z "programistycznego punktu widzenia".

Pomimo tego, że określenie "Mobile-First Design" w pewnym sensie można nazwać "buzzwordem", firm które realnie stosują to podejście jest nadal wyjątkowo mało. Nawet najczęściej polecane agencje z dużych miast dostarczały mi projekty dostosowane do urządzeń desktopowych a mobile "miałem przygotować sam na podstawie projektu". Jeśli ktoś bardzo dobrze (naprawdę bardzo) orientuje się w świecie UI & UX Designu, to taki układ jest możliwy. Jednak programiści z podobnymi kompetencjami to rzadkość.

Pytanie tylko "o co cały ten szum?". Przecież przygotowanie wersji mobilnej strony nie jest wybitnie trudne. Wystarczy ukrycie niektórych elementów lub nawet zwykłe "poukładanie" ich w taki sposób, aby mieściły się na ekranie smartphone'a. Prawda?

Absolutnie nie, to myślenie jest błędne!

W ten sposób pożądany rezultat nie zostanie osiągnięty. Mało tego można nawet mylnie dojść do wniosku, że "optymalizacja pod smartphone'y nic nie daje".

Przy takim podejściu do procesu projektowania, sam nie mam wątpliwości, że faktycznie niewiele to da. Istnieje jednak od lat znany sposób na to, aby zrealizować go właściwie.

Czym jest Mobile-First Design?

Koncepcja "Mobile-First Design" mówi o tym, aby projektować w pierwszej kolejności na urządzenia mobilne, a dopiero w dalszych krokach na urządzenia desktopowe.

Takie odwrócenie procesu może okazać się na początku mało intuicyjne, szczególnie że nie będziemy w stanie dostrzec końcowego rezultatu na ekranie swojego komputera. W praktyce jednak o to chodzi! Aby w pierwszej kolejności sięgnąć po nasz telefon.

Główną zaletą podejścia "mobile-first" jest są ograniczenia narzucone przez urządzenia mobilne. Projektanci muszą tutaj uwzględnić:

  • mniejszy ekran
  • niższą wydajność
  • szybkość łącza internetowego
  • kontekst w jakim jest użytkownik, gdy korzysta z telefonu (np. w pośpiechu, bez poświęcania 100% uwagi)
  • dostępność funkcji aplikacji (niektóre aplikacje nie dają dostępu do wybranych funkcji na telefonach)
https://3fxtqy18kygf3on3bu39kh93-wpengine.netdna-ssl.com/wp-content/uploads/2021/03/Mobile-First-Design.png

Ograniczenia zwykle nie kojarzą się z czymś pozytywnym i raczej dążymy do tego aby było ich jak najmniej. Jednak w procesie projektowania odgrywają kluczową rolę, ponieważ ograniczenia pozwalają nam określić, co nie ma znaczenia i na tej podstawie wybrać to, co jest naprawdę ważne.

Projektowanie strony internetowej lub procesu płatności pod możliwości urządzeń mobilnych sprawia, że łatwiej jest nam wybrać kluczowe elementy. Dopiero później przechodząc do projektowania na większe ekrany, dodajemy kolejne. Jednak tym razem dzieje się to w oparciu o solidne fundamenty.

W odwrotnej sytuacji nie jest już to tak naturalne i zwykle kończy się próbą "wciśnięcia" wszystkiego na mały ekran smartphone'a. Powodem jest tutaj to, że trudniej w tej sytuacji zdecydować "co jest najważniejsze", ponieważ widząc projekt na 27" calowym ekranie, wszystko wydaje się być ważne. W dodatku wydaje się wtedy, że "projekt jest gotowy" a optymalizacja na urządzenia mobilne to prosty, szybki i mało znaczący proces.

Nie ma w tym nic dziwnego. W takiej sytuacji urządzenia mobilne nie są priorytetem, lecz dodatkiem. Dopiero faktyczne wykorzystanie podejścia "mobile-first" odwraca tę sytuację.

Niska wydajność może zepsuć pracę całego zespołu

Konwersja to procent wszystkich użytkowników, którzy zrealizowali określoną akcję (np. dokonali zakupu). Wkładając wysiłek, czas i pieniądze w to aby przyciągnąć potencjalnych klientów na Twoją stronę, nie chcesz doprowadzić do sytuacji w której wyjdą z Twojej strony zanim ta zdąży się w pełni załadować.

A jednak takie sytuacje mają miejsce niemal na każdym kroku i z całą pewnością Tobie również nie są obce. Problemy z wydajnością mają szczególne znaczenie na urządzeniach mobilnych. W grę wchodzi tam zarówno szybkość samego sprzętu jak i jakość połączenia z Internetem.

https://space.overment.com/inyZtwDG9u1KaTdt45WF/Screen-Shot-2021-10-08-10-29-48.png

Jak widać na powyższej grafice, każda kolejna sekunda drastycznie obniża konwersję, ponieważ użytkownik po prostu wychodzi ze strony. Według skilled.co 47% użytkowników oczekuje, że strona wczyta się w mniej niż dwie sekundy. Osobiście uważam, że celowanie w czas wczytywania poniżej jednej sekundy to dobry i realny do osiągnięcia wynik.

W kontekście wydajności bardzo ważne jest zrozumienie tego, jak ogromny ma to wpływ na funkcjonowanie całego Twojego biznesu oraz jak może zniweczyć pracę całego zespołu.

Zapewne znana jest Ci koncepcja "lejka marketingowego" obrazująca proces prowadzący użytkownika od pierwszego kontaktu z Twoją marką do zostania stałym klientem. Ona sama w swoim założeniu jasno mówi o tym, że na poszczególnych etapach lejka "tracisz" kolejnych potencjalnych klientów. Jest to naturalne i nie ma w tym nic złego.

Problem pojawia się w momencie gdy na końcowych etapach popełniasz błędy, przez które tracisz nienaturalnie dużo użytkowników.

https://space.overment.com/nMjWSqVUogS5zTYSOOwl/Screen-Shot-2021-10-08-10-43-30.png

Coś takiego sprawia że cały wysiłek włożony w początkowe etapy lejka jest marnowany a Ty tracisz potencjalnych klientów i szansę na rozwój Twojego produktu oraz wzrost. Jak to się ma do podejścia mobile-first? Jeśli Twoja strona czy sklep internetowy nie są naprawdę świetnie przystosowane do ruchu mobilnego, możesz tracić klientów w ostatnich etapach lejka wyłącznie przez "problemy techniczne", a nie np. zbyt wysoką cenę czy za niską jakość produktu. Przypomnij sobie przykład z pierwszego akapitu - samo uproszczenie procesu zakupowego, tak aby był bardziej przystępny dla użytkowników telefonów, może znacząco zwiększyć konwersję Twojego sklepu!

Jak dostosować swój proces do mobilnego świata?

Na tym etapie wiemy już, że coraz więcej osób nie tylko korzysta z urządzeń mobilnych, ale stają się one dla nich głównym urządzeniem wykorzystywanym do łączenia z Internetem. Co więc zrobić, żeby wykorzystać tą wiedzę w praktyce?

Potraktuj urządzenia mobilne jako priorytet

Wiemy, że tylko pojedyncze firmy są świadome roli urządzeń mobilnych i poważnie podchodzą do projektowania swoich procesów, stawiając doświadczenia mobilne na pierwszym miejscu. Jest to miejsce, w którym możesz zyskać ogromną przewagę konkurencyjną. Spiesz się, bo model mobile-first jest coraz bardziej popularyzowany.

Projektuj z myślą o urządzeniach mobilnych

Podejście "mobile-first" odwraca proces projektowania, kładąc nacisk na urządzenia mobilne. Pomimo tego, że sama koncepcja znana jest od lat, nadal jest bardzo rzadko wykorzystywana w praktyce. Jej zastosowanie pozwoli Ci lepiej podejmować decyzje dotyczące tego, co jest ważne a co nie.

Zadbaj o wydajność

W przygotowaniu swojej strony internetowej oraz procesu zakupu, uwzględnij optymalizację wydajności, szczególnie na urządzeniach mobilnych, w przypadku których ograniczenia sprzętowe i połączenia z Internetem, mają znaczący wpływ.

Zadbaj o fundamenty

No i ostatecznie zadbaj o absolutne fundamenty w postaci dostosowania Twojej strony internetowej do różnych rozmiarów i rozdzielczości ekranów urządzeń mobilnych.

Powyższe kroki są wyjątkowo proste w realizacji, ale tylko wtedy, jeżeli urządzenia mobilne staną się priorytetem dla Twojego biznesu. Dla nas były, dlatego tworząc EasyCart zaczęliśmy od zaprojektowania wersji mobile. Skupiliśmy się przede wszystkim na bezbłędnym UX - nawigacja jest niezawodna, wszystko zawsze wyświetla się tak jak trzeba, a to co ma być klikalne jest łatwe do kliknięcia.  Pozbyliśmy się też wszystkich rozpraszaczy i zbędnych elementów i rozwiązaliśmy na zawsze problem związany z logowaniem się i wypełnianiem zbyt wielu pól z danymi. Jak to wygląda? Zobaczcie sami:

Biorąc pod uwagę statystyki i trendy, zmiana podejścia na mobile-first i zadbanie o wersję mobilną Twojej strony czy sklepu, to najlepsze co możesz teraz zrobić dla swojego biznesu online.