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ć

  

• 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)

  

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

  

Case study ING

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

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.

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 na urządzenia przenośne:

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ę.



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

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
  
  
  
• 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ć)
  
  
  

Wyszukiwanie na stronie

• Wyszukiwarka jest widoczna (u góry strony)
  
  
  
• Wyniki wyszukiwania są przydatne, wyszukiwanie wykorzystuje takie element jak: podpowiadanie na podstawie danych, najczęstszych wyszukiwań
  
  
  
• Filtry umożliwiają zawężenie wyszukiwania
  
  
  
• Strona podpowiada, które wyniki są najbardziej dopasowane do wyszukiwań (np. recenzje, informacje o dodatkowych atrybutach elementów wyszukiwania)
  
  
  

Konwersje i sprzedaż

• Użytkownik może swobodnie zapoznać się z ofertą zanim się na nią zdecyduje
  
  
  
• Użytkownik może kupić bez potrzeby zakładania konta
  
  
  
• Proces wykorzystuje dostępne informacje (np. nie pytamy w czasie procesu kilka razy o tę samą informację, wykorzystujemy informacje z poprzednich wizyt użytkownika)
  
  
  
• Kliknij-aby-zadzwonić jest dostępne w przypadku procesu wymagającego dużego zaangażowania, dużej inwestycji ze strony użytkownika
  
  
  
• Strona umożliwia łatwe zakończenie konwersji na innym urządzeniu
  
  
  

Formularz

• Strona ułatwia dodawanie danych (np. pokazuje automatycznie numeryczną klawiaturę w przypadku pól związanych z liczbami, typu: data urodzenia, kod pocztowy)
  
  
  
• Wykorzystanie mechanizmów typu “dropdown”, ułatwiających wpisywanie danych
  
  
  
• Wybór data jest wspomagany wizualizacjami kalendarzy
  
  
  
• 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ć.
  
  
  
• Strona działa zarówno w ustawieniu pionowym jak i poziomym urządzenia przenośnego
  
  
  
  
  
• 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ć.
  
  
  
  
  

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

b) bez wykorzystania tagu Vieport



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.

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ę.



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

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.



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

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.



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

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.

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.

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.

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.