Mariusz Gąsiewski

Jak uzyskiwać wyższe wskaźniki konwersji na mobile? Optymalizacja stron docelowych.

W poprzednim artykule wspominałem o optymalizacji działań reklamowych na urządzeniach mobilnych. Jak tam wspomniałem lepsze efekty na urządzeniach mobilnych można wpływać poprzez:

  • optymalizację działań reklamowych (zdobywanie właściwego użytkownika)
  • optymalizację doświadczenia użytkownika (lepsze konwertowanie użytkownika mobilnego)
  • optymalizowanie pomiaru rezultatów (zrozumienie całkowitego efektu mobile)

Każdemu z tych tematów poświęcę odmienny post (są to dość szerokie zagadnienia). Dzisiaj temat związany z optymalizacją doświadczenia użytkownika.

Optymalizacja procesu i formularza

Bardzo często najważniejszą kwestią przy optymalizacji strony mobilnej dla urządzenia mobilnego jest dobra optymalizacja procesu transakcyjnego i formularza.

Warto tutaj wziąć tak podstawowe elementy jak:

  • umieszczenie opisów pól formularza ponad polami, a nie obok nich – z prostej przyczyny w momencie, kiedy opis pola jest z boku, kliknięcie pola powoduje powiększenie pola do wypełnienia, formularz przybliża się, co sprawia, że nie widzimy opisów kolejnych pól. Musimy zmniejszyć ekran, aby je zobaczyć

    formularz na smartfonie

  • unikanie powtórzeń pól (badania pokazują, że nawet pola email czy hasła nie powinny być powtarzane, jest to niepotrzebne dodawanie pracy użytkownikowi
  • dbanie o przesyłanie komunikatów błędów we właściwy sposób, najlepiej przez autowalidację, czyli komunikat błędu pokazuje informację jeszcze przed wysłaniem samego formularza (komunikat błedu powinien wskazywać, że jest problem, miejsce tego problemu i sposób na jego rozwiązanie)

    Formularz błędy

  • informowanie użytkownika o tym, na jakim etapie procesu się znajduje (generalnie użytkownicy mobilni są bardziej niecierpliwi niż użytkownicy desktopów)

    formularz smartfon kroki

Case study ING

Poniżej przykład optymalizacji procesu transakcyjnego ING w Turcji. Formularz zoptymalizowano według reguł podanych wyżej.

optymalizacja formularza internetowego na smartfony
Optymalizacja formularza pozwoliła tutaj na zmniejszenie kosztu pozyskania o 57%. Co więcej zwiększenie inwestycji w reklamę mobilną, będące następstwem zwiększenia jej efektywności, sprawiło, że 30% pozyskań internetowych klientach pochodziło z urządzeń mobilnych.
W przypadku optymalizacji formularza na urządzeniu mobilnym warto pamiętać o wykorzystaniu naturalnej przewagi urządzenia przenośnego nad desktopem – możemy go wykorzystać do kontaktu z przedstawicielem firmy. Coraz częściej więc w newralgicznych częściach formularza na urządzeniu przenośnym, jest widoczny numer telefonu.

Jeżeli z jakiegoś powodu użytkownik waha się przed podjęciem ostatecznej decyzji i kliknięciem przycisku „Wyślij”, dajemy mu możliwość kontaktu z przedstawicielem firmy, sprawdzenia wszystkich potrzebnych informacji, ewentualnie finalizacji transakcji przez telefon.

Case study Express Bank

Poniżej case study z rosyjskiego banku. Optymalizacja formularza połączona z udostępnieniem telefonu użytkownikom sprawiła, że koszt pozyskania jest obecnie 15% niższy na urządzeniach mobilnych niż na desktopie.

Optymalizacja formularza banku
W niektórych przypadkach proces transakcyjny na desktopie jest na tyle skomplikowany, że jedyną opcją optymalizacji tego procesu na urządzeniach mobilnych jest jego skrócenie.

Case study Naukri

W przypadku tej firmy z Indii, związanej z ogłoszeniami o pracę, proces tworzenia profilu na witrynie obejmował wiele etapów. O ile wypełnianie tej ilości pól nie przysparzało olbrzymich problemów na desktopie, o tyle wypełnianie tej ilości pól na urządzeniu przenośnym było prawdziwym koszmarem. Ostatecznie firma zdecydowała się na poważne „odchudzenie” formularza wyświetlanego na urządzeniu przenośnym.

Wersja na komputer:

Wersja formularza na komputer

Wersja na urządzenia przenośne:

Wersja formularza na mobile

Wykorzystanie danych w procesie optymalizacji

Optymalizując strony pod urządzenia mobilne warto pamiętać oczywiście o wykorzystaniu danych. Dane pokażą nam, jakie treści szczególnie często są wykorzystywane na urządzeniach mobilnych. Nawet podstawowe rapoty z Google Analytics pokażą nam, które elementy naszej witryny są szczególnie ważne z punktu widzenia użytkowników mobilnych, jak powinniśmy priorytetyzować optymalizację treści mobilnych.

Case study witryny z Polski
Poniżej przykład jednej z witryn z Polski z branży finansowej. Średnio 7,5% użytkowników tej strony pochodzi z urządzeń mobilnych. Stosunkowo niewiele jak na Polskę.

przyklad dane mobile total

Jednocześnie jest to tylko średnia. Na tej samej witrynie mamy wiele treści, gdzie udział ruchu mobilnego dochodzi do 20%.

przyklad dane mobile

Nawet taka prosta analiza może dużo nam powiedzieć o zachowaniach użytkowników na naszej stronie.

P.S. Temat danych szerzej omówię w ostatnim moim artykule poświęconym optymalizacji działań mobilnych.

25 reguł tworzenia stron mobilnych

W optymalizacji witryn pod urządzenia mobilne mogą przydać się następujące materiały:
Tworzenie stron mobilnych – zespół reguł stworzonych na podstawie ponad 119 godzin wywiadów bezpośrednich z użytkownikami witryn mobilnych

Strona główna i nawigacja

  • Wezwanie do akcji jest widoczne i zrozumiałe

    mobile wezwanie do akcji
  • Krótkie i proste menu
  • Łatwo jest wrócić do strony głównej
  • Informacja o ofercie nie utrudnia korzystania ze strony, elementy promocje łatwo odróżnić od elementów nawigacyjnych (poniżej przykład tego, jak się nie powinno robić)

    oferta a nawigacja na mobile

Wyszukiwanie na stronie

  • Wyszukiwarka jest widoczna (u góry strony)

    mobile wyszukiwarka
  • Wyniki wyszukiwania są przydatne, wyszukiwanie wykorzystuje takie element jak: podpowiadanie na podstawie danych, najczęstszych wyszukiwań

    wyszukiwania wewnetrzne
  • Filtry umożliwiają zawężenie wyszukiwania

    filtry wyszukiwania na mobile
  • Strona podpowiada, które wyniki są najbardziej dopasowane do wyszukiwań (np. recenzje, informacje o dodatkowych atrybutach elementów wyszukiwania)

    wyniki wyszukiwania na mobile

Konwersje i sprzedaż

  • Użytkownik może swobodnie zapoznać się z ofertą zanim się na nią zdecyduje

    korzystanie mobile
  • Użytkownik może kupić bez potrzeby zakładania konta

    mobile- logowanie gosc
  • Proces wykorzystuje dostępne informacje (np. nie pytamy w czasie procesu kilka razy o tę samą informację, wykorzystujemy informacje z poprzednich wizyt użytkownika)

    wykorzystanie danych na mobile
  • Kliknij-aby-zadzwonić jest dostępne w przypadku procesu wymagającego dużego zaangażowania, dużej inwestycji ze strony użytkownika

    kliknij aby zadzwonic
  • Strona umożliwia łatwe zakończenie konwersji na innym urządzeniu

    kończenie konwersji

Formularz

  • Strona ułatwia dodawanie danych (np. pokazuje automatycznie numeryczną klawiaturę w przypadku pól związanych z liczbami, typu: data urodzenia, kod pocztowy)

    latwe wykorzystanie informacji na mobile
  • Wykorzystanie mechanizmów typu “dropdown”, ułatwiających wpisywanie danych

    dropdown mobile
  • Wybór data jest wspomagany wizualizacjami kalendarzy

    kalendarz mobilny
  • Walidacja i właściwe nazewnictwo pół zmniejsza pulę błędów przy wpisywaniu danych
  • Formularz jest zoptymalizowany (wykorzystuje mechanizmy typu: autododawanie czy informacje o długości/trudności procesu)

Użyteczność

  • Cała strona jest zoptymalizowana pod urządzenia mobilne, a nie tylko jej fragmenty
  • Nie trzeba wykorzystywać przybliżania i oddalania w smartfonie do odczytywania treści (szczególnie wezwania do akcji)
  • Można powiększyć zdjęcia produktów, łatwo te powiększenia zamykać.

    zdjecia wysokiej rozdzielczosci
  • Strona działa zarówno w ustawieniu pionowym jak i poziomym urządzenia przenośnego

    mobile wersja pozioma

    mobile wersja pionowa
  • Klikniecie wezwania do akcji nie przenosi użytkownika do nowego okna
  • Witryna unika oznaczeń typu „Pełna strona” (wykorzystuje bardziej zrozumiałe określenia typu „Wersja na komputer” )
  • Witryna jasno pokazuje dlaczego potrzebuje informacji o lokalizacji użytkownika i jak zamierza tę informację wykorzystać.

    wykorzystanie lokalizacji mobile

    wykorzystanie lokalizacji mobile

 

Elementy techniczne optymalizacji strony pod urządzenia mobilne

Przy optymalizacji witryny pod urządzenia mobilne nie można oczywiście zapomnieć o aspektach technicznych takiego przedsięwzięcia. Jest to oczywiście bardzo szeroki temat, postaram się jednak zwrócić uwagę na kilka elementów.

Optymalizując witrynę pod urządzenia mobilne pamiętaj o:

  • ustawieniu tagu viewport,
  • dobrym wybraniu punktów granicznych,
  • optymalizacji obrazów.

Ustawianie tagu viewport

Strony zoptymalizowane pod kątem działania na rozmaitych urządzeniach powinny w nagłówku dokumentu zawierać metatag „viewport”. Przekazuje on przeglądarce instrukcje, jak przeglądarka ma skalować treść na stronie. W ten sposób treść na stronie jest optymalizowana dla określonego urządzenia. Bez niego witryna nie będzie dobrze działać na urządzeniach mobilnych.

Tag viewport jest definiowny w nagłówki. Najczęściej ma on postać:

Poniżej przykład witryny:

a) z wykorzystaniem Viewport

wykorzystanie viewport w stronie mobilnej

b) bez wykorzystania tagu Vieport

witryna bez wykorzystania tagu Viewport

Punkty graniczne

Punkt graniczny określa przy jakiej rozdzielczości następuje zmiana wyświetlania treści na stronie, aby ją najlepiej dopasować do określonego urządzenia.

Podczas definiowania punktów granicznych można kierować się klasami, typami urządzeń, jednak szczególnie przy zaawansowanych wdrożeniach lepiej zachować tutaj ostrożność. Utrzymanie punktów granicznych utworzonych pod konkretne, używane obecnie urządzenia, produkty, marki czy systemy operacyjne, może okazać się wyjątkowo pracochłonne. Wybór punktów granicznych powinien zależeć od samych treści.

Przy tworzeniu witryny, która ma się dobrze wyświetlać na wielu urządzeniach rozpoczyna się projektowanie treści tak, by najważniejsze elementy tej treści pasowały do ekranu o małym rozmiarze. Aby najważniejsze cele witryny były realizowalne na tych najniższych rozdzielczośćiach.

strona internetowa najnizsza ozdzielczosc

Następnie powiększa się treść, aż przestanie ona dobrze wyglądac i trzeba będzie utworzyć punkt graniczny (często określe się, że długość wiersza optymalna do czytania wynosi około dziesięciu). W ten sposób można zoptymalizować te punkty i minimalizować ich liczbę.

strona internetowa srednia rozdzielczosc

Przechodząc na coraz wyższe rozdzielczości uzupełnia się witrynę o kolejne dodatkowe elementy.

strona internetowa najwyzsza rozdzielczosc

Optymalizacja obrazów

Obrazy często stanowią większość danych pobieranych przez stronę. Z tego względu optymalizacja obrazów może często przynosić największe oszczędności w zakresie ilości pobranych danych i najwyższe wzrosty wydajności wczytywania stron witryny: im mniej danych musi pobrać przeglądarka, tym szybciej przeglądarka może pobrać i wyświetlić użyteczną treść na ekranie.

Dużo więcej wskazówek technicznych znajdziesz na stronach pomocy Google.

Test zgodności z urządzeniami przenośnymi

Przy analizie tego, jak przyjazna jest strona dla urządzeń mobilnych, bardzo przydaje się darmowe narzędzie Google: Test zgodności z urządzeniami przenośnymi.

Test zgodności z urządzeniami przenośnymi

Wystarczy wpisać adres strony, aby uzyskać wskazówki optymalizacji strony pod kątem urządzeń mobilnych.

Test zgodności z urządzeniami przenośnymi - wyniki

Szybkość czasu ładowania strony

Optymalizując wskaźniki konwersji na urządzeniu mobilnym warto zadbać o stosunkowo krótki czas ładowania strony. Jak głosi jedno z badań, 47% użytkowników oczekuje czasu ładowania strony

Przy analizie czasu ładowania strony mobilnej bardzo przydaje się darmowe narzędzie Google: PageSpeed Insights.

Sprawdzanie czasu ładowaniu strony w narzędziu

Wystarczy wpisać adres strony, aby uzyskać wskazówki na temat optymalizacji szybkości strony. Dokładne, techniczne wskazówki.

Sprawdzanie szybkości ładowania strony

Wykorzystanie kliknij aby zadzwonić

Jak już wspominałem w poprzednim artykule nie zawsze najlepszym wykorzystaniem urządzenia mobilnego będzie zmuszanie użytkownika do powielania zachowań znanych z komputera. Reklamodawcy zauważają, że użytkownicy nie chcą wypełniać formularzy. Jednocześnie często te formularze mają na celu zebranie leada, który następnie ..zostanie wykorzystany przez call center do zamknięcia transakcji.

W wielu branżach (np. finanse, ubezpieczenia, telekomunikacja) reklamodawcy uzyskują dużo lepsze rezultaty od razu łącząc użytkownika z call center. Wykorzystują fakt, że użytkownik ma telefon w ręce, ma czas na rozmowę, co nie zawsze jest faktem w przypadku późniejszego kontaktu z użytkownikiem.

Z punktu widzenia użytkowników obecność Kliknij, aby zadzwonić w wyszukiwaniu jest często preferowaną formą kontaktu z reklamodawcą za pomocą urządzenia przenośnego.

% użytkowników, którzy skorzystaliby z funkcjonalności “Zadzwoń” gdyby była ona dostępna w wyszukiwaniu

W badaniu przeprowadzonym zaledwie kilkanaście tygodni temu we Francji, bardzo duża pytanych użytkowników skorzystałoby z funkcjonalności “Zadzwoń” gdyby była ona dostępna w wyszukiwaniu.

kliknij aby zadzwonic wyszukiwanie

Dlaczego Kliknij, aby zadzwonić, a nie strona mobilna?

Badanie analizowało również przyczyny tak silnej preferencji Kliknij, aby zadzwonić nad odwiedzinami strony mobilnej. Poniżej odpowiedzi użytkowników.

Dlaczego Kliknij, aby zadzwonić

Case study – NH Hotels

NH Hotels is 3 do wielkości siecią hotelową w Hiszpanii (ponad 50 000 pokoji do wynajmu). Mobile był wykorzystywany dość marginalnie ze względu na duże niższe wskażniki konwersji niż na desktopie.

The main problem with mobile was that we had a very low conversion rate

– Emilio Asenjo, Head of Paid Search w NH Hotel Group.

W ramach optymalizacji działań reklamowych

  • sporą część działań reklamowych oparto na promocji poprzez Kliknij, aby zadzwonić.
  • mierzono efektywność reklamową poprzez dodatkowy numer telefony. System raportował więc ostateczne konwersje.

kliknij aby zadzwonic case

Rezultaty

  • koszt pozyskania był o 50% na urządzeniach mobilnych niż na desktopie,
  • uwzględnienie konwersji z telefonów użytkowników zwiększyło konwersyjność urządzeń przenośnych 2,5 razy,
  • ze względu na wzrost efektywności zwiększono inwestycji na mobile 50-krotnie.

Ciąg dalszy nastąpi…

W kolejnym artykule o drugim elemencie układanki, czyli o optymalizacji doświadczenia użytkownika.

W przypadku, kiedy uznasz strone za przydatna dodaj na swojej stronie link do niej.
Po prostu skopiuj i wklej link podany nizej (Ctrl+C to copy)
Wyglad linku po wklejeniu na stronie: Jak uzyskiwać wyższe wskaźniki konwersji na mobile? Optymalizacja stron docelowych.

Dodaj link do:
| | | Y! MyWeb | +Google

8 komentarzy to “Jak uzyskiwać wyższe wskaźniki konwersji na mobile? Optymalizacja stron docelowych.”

  1. Przemekon 28 Kwi 2015 at 09:56

    Dawno nie było tu tak bogatego w wiedzę artykułu 🙂

  2. Awodenton 06 maja 2015 at 21:02

    Bardzo przydatne porady, szczególnie dla mnie bo ostatnio zajmuję się stronką sklepu 😉

  3. Sebastian Regon 08 maja 2015 at 10:47

    Super przydatne porady, dzięki i pozdrawiam!

  4. Marcoon 08 maja 2015 at 19:49

    Faktycznie, dawno nie było takiego artykułu, który wręcz ociekał wiedzą 😉 Wielkie dzięki za niego, nie muszę już szukać na innych stronkach informacji. Wiedza przyda mi sie na pewno. pozdrawiam

  5. AniaRandon 11 maja 2015 at 13:09

    Ładny i dobry responsywny szablon na popularne cms-y, spełniający większość opisanych tu warunków co do wyświetlania się na urządzeniach mobilnych, można kupić już za kilkadziesiąt dolarów. Oczywiście nie dotyczy to sklepów internetowych, bo to już trochę wyższa szkoła jazdy.

  6. zmarlych-transport.euon 13 maja 2015 at 10:47

    Przydatne porady, mam problem z tym na swojej stronie, na pewno skorzystam z tych porad 🙂

  7. mlodyon 07 Lip 2015 at 14:45

    Fajny artykuł.

  8. Grzegorzon 11 Lip 2015 at 09:54

    Dobry artykuł bogaty w przydatne treści, pozdrawiam 🙂

Trackback URI | Comments RSS

Odpowiedz komentarzem

You must be logged in to post a comment.