fbpx

Jak przyspieszyć dostęp do strony WWW i ulepszyć jej design? Optymalizacja konwersji cz. 2

20 sierpnia 2019

Czas czytania: 9 min.

Z poprzedniego odcinka serii dowiedziałeś się, jak zwiększyć szybkość wczytywania się bloga lub sklepu online. Poznałeś wtyczki do minifikacji HTML, CSS i JavaScript oraz nauczyłeś się, jak wdrożyć Cloudflare.

Dziś przeczytasz o tym, jak za pomocą designu strony zwiększyć konwersje oraz co oznaczają dziwne skróty: UX, AMP i PWA.

To co? Zaczynamy!

 

 

Ulepsz design strony mobilnej

 

Zanim zaczniesz cokolwiek zmieniać musisz dowiedzieć się, jakie problemy napotykają odbiorcy na twojej stronie.

 

Co ich irytuje? Czy trudno im znaleźć poszczególne funkcjonalności i jeśli tak – to jakie?

 

Na szczęście nie musisz organizować bardzo kosztownych badań fokusowych. Wystarczy, że skorzystasz z trzech typów narzędzi.

 

Najpierw użyj pierwszego a dopiero po analizie wyników – z drugiego. W międzyczasie wypróbuj raporty dostępne w trzecim narzędziu.

 

1.Poznaj problemy swoich odbiorców.

Na rynku istnieje kilka popularnych narzędzi służących do nagrywania i analizy działań użytkowników na stronach www.

Najpopularniejsze z nich to Google Optimize, Hotjar oraz Yandex Metrica.

Za ich pomocą możesz prześledzić całą drogę odwiedzającego – od momentu wejścia na stronę aż po jej opuszczenie.

W ten sposób dowiesz się, czy ma problemy ze znalezieniem paska menu, konkretnego produktu, okna wyszukiwarki, czy przejścia do płatności.

Przed rozpoczęciem analizy pamiętaj, by wypisać sobie najważniejsze elementy prowadzące na twojej stronie do konwersji.

Jeśli zależy Ci na zapisach do newslettera, to zbadaj, w jakich sytuacjach użytkownicy klikają w stronę/link zapisu i czy w ogóle zauważają tę funkcjonalność.

Gdy chcesz poprawić konwersje w sklepie online, prześledź drogę odbiorcy od wejścia do sklepu aż po dokonanie zakupu. Jakie problemy napotkal użytkownik?

Jeśli nie dokonał zakupu, to dlaczego?

Dopiero gdy zdobędziesz te informacje, zacznij właściwą analizę, co twoim zdaniem warto poprawić i w jaki sposób.

Spróbuj wymyślić więcej niż jedno rozwiązanie, aby przejść do kolejnego punktu. Czyli testów A/B.

 

 

2. Napraw je, testując różne rozwiązania.

 

Testy A/B to kluczowe narzędzie wielu dużych i średnich stron internetowych.

W przypadku, gdy twój portal jest relatywnie niewielki (np. poniżej 100 000 odwiedzających miesięcznie), to musisz dużo ostrożniej podchodzić do metodyki badania.

Im więcej wariantów danej zmiany testujesz, tym większą pulę odwiedzających musisz posiadać.

Bardzo rozbudowany poradnik, jak przeprowadzać testy A/B napisałam jakiś czas temu.

Warto, byś zapoznał się również z moim innym artykułem, w którym przestrzegam przed najpopularniejszymi błędami testów A/B.

W kursie Google, który przytaczam w tym artykule, również znajdziesz szereg praktycznych porad.

Pod tym linkiem znajdziesz natomiast wprowadzenie do ustawienia testu A/B w Google Optimize.

 

 

3. Popraw UX (użyteczność) strony

 

UX ma ogromne znaczenie w kontekście poprawienia współczynnika konwersji na twojej stronie.

Popraw rozmieszczenie kluczowych elementów i testuj różne rozwiązania graficzne.

Google podaje kilka wytycznych, które warto wziąć pod uwagę podczas testów A/B z zakresu użyteczności:

 

 

Skup się na propozycji wartości

 

Jednym ze sposobów zalecanych przez Google, jest testowanie umieszczenia propozycji wartości. Warto dodać ją u góry strony, przed punktem scrollowania.

Czym jest propozycja wartości? To grafika lub tekst, które wyjaśniają użytkownikowi, dlaczego twoja strona jest inna (w domyśle: lepsza) od konkurencji.

Darmowa dostawa, klub lojalnościowy, błyskawiczna wysyłka? To świetne propozycje wartości w sklepie online.

Darmowy PDF, codzienny podcast, rozbudowane artykuły? To z kolei bardzo dobre cechy serwisu opartego na contencie, jak np. blog.

 

 

Dostosuj test do typu odbiorców

 

Google w swoim kursie podaje 4 typy osób, które mogą odwiedzić twoją stronę www.

Oto one:

  • Spontaniczny – kieruje się emocjami i lubi szybkie tempo. Oprzyj swoją komunikację na treściach wizualnych i celu w krótkie formy tekstowe. Ten typ odbiorcy często rozumie świat zero jednynkowo, np. drogo = dobra jakość, więc wykorzystaj ten fakt w strategii marketingowej.
  • Konkurencyjny – myśli logicznie i lubi szybkie tempo. Skup się na natychmiastowym przekazaniu propozycji wartości oraz istotnych faktach na temat produktu/usługi. Zwróć uwagę na szybkość ładowania strony i jej bezawaryjność.
  • Metodyczny – myśli logicznie i lubi wolne tempo. Warto umożliwić mu rozbudowane teksty, pełne szczegółowych informacji na temat oferowanych produktów lub usług. Pozwól mu porównywać produkty i czytać opinie użytkowników oraz recenzentów.
  • Humanistyczny – kieruje się emocjami i lubi wolne tempo. Ufa opiniom znajomych i recenzjom w internecie. Spróbuj nakłonić go do konwersji poprzez atrakcyjne grafiki zbieżne z emocjami, które odczuwają. Zadbaj o widoczność danych kontaktowych obsługi klienta, gdyż czasem bywają niepewni nowych technologii.

 

 

Zwiększ szybkość wyszukiwania informacji

 

Użyteczność to jeden z kluczowych wyznaczników atrakcyjnej strony www.

Jeśli odbiorca nie może szybko znaleźć tego, czego szuka opuści twoją stronę i pewnie już nigdy na nią nie wróci.

W testach A/B weź więc pod uwagę zmiany kategoryzacji produktów lub artykułów trudnych do znalezienia.

Jeśli jakieś kategorie są szczególnie popularne w twoim sklepie, możesz pokusić się o umieszczenie odnośników do nich na stronie głównej.

Sprawdź również, czy okno wyszukiwarki znajduje się w miejscu, którego oczekuje konsument. Rozbudowanie jej o dodatkowe funkcjonalności (jak np. automatyczne podpowiedzi) również może polepszyć wrażenia użytkownika.

Równie ważnym elementem użyteczności jest rozmieszczenie kluczowych informacji. W przypadku sklepu internetowego będą to opisy widoczne na kartach produktów.

W moim poradniku UX przybliżyłam bardziej dogłębnie tę kwestię.

 

Możesz także pobrać checklistę UX dla kilku branż (po ang):

 

 

Stwórz wrażenie pilności

 

Wiele sklepów online korzysta z szeregu technik perswazyjnych, które mają nakłonić odbiorcę do natychmiastowej konwersji.

 

Spróbuj przetestować A/B najpopularniejsze z nich:

  • limitowane edycje
  • podkreślanie, że towar już prawie jest wyprzedany
  • odliczanie do zakończenia promocji

 

 

Uzupełnij stronę o niezbędne informacje

 

Czy dodanie informacji o darmowej dostawie może zwiększyć konwersję? Jak najbardziej tak!

Zastanów się, jakich informacji poszukują twoi odbiorcy i dodaj je w miejscach, w których są istotne, np. na karcie produktu, czy stronie głównej.

Dzięki temu zabiegowi twój dział obsługi klienta zostanie odciążony, a wielu klientów zamiast opuścić sklep – dokona zakupu.

Testuj rozmieszczenia kluczowych elementów – być może baner z darmową wysyłką warto dodać u góry strony, zamiast tylko w opisie produktu?

 

 

Zmniejsz rozproszenie

 

Ile razy zdarzyło ci się, że opuściłeś stronę, bo zaatakował cię kolejno: pop-up, okno chatu, prośba o wysyłkę powiadomień push i na końcu jeszcze informacja o ciasteczkach?

Mnogość elementów na stronie może nie tylko dezorientować odbiorcę, ale i mocno frustrować.

Sprawdź, jak na konwersje wpłynie usunięcie niektórych zbędnych elementów, w rodzaju automatycznie otwierającego się okna chatu.

Dodatkowo możesz pokusić się o zmiany graficzne – czy wielkość grafik i rozmiar przycisków jasno dają do zrozumienia klientowi, który przekaz jest najważniejszy?

 

 

4. Sprawdź, kiedy opuszczają stronę

 

Najmniej zaawansowanym narzędziem z wymienionej trójki jest Google Analytics i jego raport Analiza zachowań zakupowych.

Bardzo możliwe, że to wadliwy UX strony wpływa na porzucanie koszyków, opuszczanie strony checkoutu czy rezygnację z przeglądania strony po minucie od wejścia.

Za pomocą tego raportu otrzymasz wgląd w liczbę porzuceń koszyka, czy opuszczenia strony checkoutu.

By otrzymać dostęp do Analizy zachowań zakupowych musisz mieć skonfigurowane Ulepszone E-commerce w Google Analytics.

Konfiguracja tego dodatkowego modułu może być przeprowadzona albo za pomocą wtyczek albo za pomocą specjalisty, który wyśle niezbędne dane ze sklepu do Google Analytics.

Więcej na ten temat przeczytasz w pomocy Google pod tym linkiem.

 

 

PODSUMOWANIE ROZDZIAŁU

 

Dobry design, UX oraz wiedza na temat bolączek twoich odbiorców ma równie duże znaczenie w poprawieniu konwersji, co aspekty techniczne przybliżone w pierwszej części tego cyklu.

 


 

 

Zwiększ szybkość dostępu do strony poprzez AMP i PWA

 

 

W lipcu 2018 roku Google przełączył indeksowanie stron z ich wersji desktopowych na mobilne.

Od teraz szybkość sklepu online czy bloga dostępnego przeglądanego na komórkach i tabletach jest czynnikiem rankingowym.

Jeśli więc przyspieszysz swoją stronę, to nie tylko masz szansę na wyższy współczynnik konwersji, ale i Google wyżej umieści twoją stronę w wynikach wyszukiwania.

Pamiętaj, że zdecydowana większość odwiedzin twojego sklepu lub bloga nastąpi za pomocą internetu mobilnego.

 

Dlaczego warto skorzystać z tych technologii?

 

Obecnie sieć 4G czy LTE dostępna jest głównie w centrach miast. Jeśli więc zignorujesz fakt wolnego wczytywania się na wolnym internecie, to jest spora szansa, że tracisz sporo pieniędzy i wejść.

Nawet jeżeli dany operator gwarantuje, że niemal cała Polska ma dostęp do szybkiego internetu, to niestety jego prędkość mocno różni się pomiędzy małymi miastami i wsiami, a dużymi aglomeracjami.

Kliknij w ten link, jeżeli chcesz zobaczyć, jaki procent ludzi w 2018 roku miał dostęp do LTE w poszczególnych państwach świata.

Według badania przeprowadzonego przez Google ponad połowa użytkowników opuści stronę przed jej załadowaniem się, jeżeli będą musieli czekać więcej, niż 3 sekundy. Jeszcze kilka lat temu odbiorcy byli w stanie czekać ponad 2x dłużej.

 

Poza optymalizacją on site istnieją jeszcze dwa ciekawe rozwiązania problemu wolnych stron internetowych.

Bez znaczenia, czy prowadzisz bloga, stronę firmową, czy sklep internetowy – zawsze masz możliwość zaimplementować AMP lub PWA.

Co oznaczają oba skróty?

 

 

Co to jest AMP i jak z niego korzystać?

 

AMP, czyli Accelerated Mobile Pages to system mocno promowany przez Google. Polega na bardzo dużym uproszczeniu kodu HTML oraz dopuszczeniu do działania tylko niewielu skryptów JavaScript.

Dzięki temu czas wczytywania stron może zmaleć aż do mniej niż sekundy!

W przypadku WordPressa istnieje darmowa wtyczka, która daje możliwość uruchamiania stron z artykułami lub całego serwisu w wersji AMP.

Niestety, duży wzrost szybkości ma wpływ na wygląd strony.

Jeśli nie możesz pozwolić sobie na modyfikację AMP przez kodera, to możesz pożegnać się ze wieloma wodotryskami, które umieściłeś na stronie.

Kolejnym poważnym problemem w przypadku pluginu WordPressa jest jej niekompatybilność z wieloma szablonami. Może się to skończyć koniecznością odinstalowania pluginu a w najgorszym przypadku wgrania backupu strony, która “rozjechała” się w wyniku działania wtyczki.

 

Dla posiadaczy sklepów online pozostają płatne wtyczki, dostępne w sklepach dla poszczególnych platform.

Poniżej znajdziesz przykładowe wtyczki AMP:

 

W przypadku wielu sklepów SaaS (np. Shoplo, Shoper, iAi) powinieneś skontaktować się z supportem, aby wycenił wdrożenie takiej funkcjonalności.

Dla osób bardziej zaawansowanych Google przygotował cały portal poświęcony AMP. Znajdziesz go tutaj.

Stronę AMP możesz albo napisać zupełnie od zera albo przekonwertować obecną na ten właśnie format.

 

 

Co to jest PWA i jak z niego korzystać?

 

PWA, czyli Progresywne Aplikacje Webowe to połączenie funkcjonalności mobilnych aplikacji z możliwościami stron www.

Mówiąc w dużym skrócie, jest to mobilna strona www, która posiada funkcjonalności aplikacji mobilnej.

W przeciwieństwie do standardowych aplikacji, PWA nie musimy pobierać i instalować.

 

Jak pisze Google w swoim poradniku, PWA posiadają trzy ważne zalety:

  • niezawodność – wczytują się błyskawicznie i działają nawet przy bardzo słabym połączeniu internetowym (najważniejsze zasoby umieszcza w pamięci podręcznej)
  • szybkość – szybko i płynnie reagują na działania użytkownika
  • atrakcyjność – użytkownik nie ma świadomości, że nie ma do czynienia z aplikacją mobilną, dzięki czemu nie ma potrzeby nauki obsługi PWA.
    Dodatkowo umożliwiają wysyłanie wiadomości push i umieszczają swoją ikonę na pulpicie telefonu czy tabletu.

 

Poza powyższymi cechami, ogromną zaletą PWA jest to, że Google indeksuje je w wyszukiwarce – tak samo jak standardowe strony WWW.

Jeśli chcesz dowiedzieć się więcej o PWA, obejrzyj poniższy film od Google:

 

Lub skorzystaj z różnych poradników.

Pierwszy z nich przeznaczony jest dla laików, pozostałe dla osób, które potrafią programować:

Wprowadzenie do progresywnych aplikacji internetowych
Progressive Web Apps Training
Your First Progressive Web App
Developing Progressive Web Apps (PWAs) Course
My First Progressive Web App (wideo)

 

 

Czy PWA działa?

 

Według danych opublikowanych przez Google, platforma zakupowa Aliexpress odnotowała wzrost konwersji wynoszący aż 104% na mobile oraz o 74% dłuższy czas odwiedzin!

Jak podaje autor tego artykułu, progresywna aplikacja firmy Lancome zaowocowała 17% wzrostem konwersji i liczbą sesji zwiększoną o 51%.

Natomiast aplikacja od OLX zwiększyła zaangażowanie użytkowników o aż 250% dzięki powiadomieniom push i wygenerowała liczbę kliknięć reklam większą o 146%.

 

 

PODSUMOWANIE ROZDZIAŁU

 

PWA i AMP to świetne rozwiązania w dobie coraz mniejszej cierpliwości odbiorców. Jednocześnie oferują wiele funkcjonalności, które są atrakcyjne dla użytkowników.

Niestety, oba sposoby przyspieszenia twojej strony wymagają co najmniej podstawowej wiedzy programistycznej.

Jeśli chcesz nauczyć się podstaw tworzenia stron mobilnych, to zachęcam Cię do przerobienia kursu od Google, który kończy się certyfikatem.

Kliknij w link poniżej, aby przejść do kursu:

Kurs Reklama Mobilna

 

PODSUMOWANIE

 

Spośród wielu możliwości, jakie oferują nowoczesne technologie możesz wybrać wszystkie lub tylko wybrane. Istnienie AMP czy PWA nie obliguje Cię do porzucenia optymalizacji klasycznej wersji sklepu internetowego. Równie dobrze możesz ciężej popracować nad UX, designem i dopasowaniem strony do potencjalnego odbiorcy.

 

Może się bowiem okazać, że koszt wdrożenia poprawek będzie mniejszy, niż wdrożenie AMP lub zainteresowanie się PWA.

Jeśli jednak masz budżet i chcesz być przykładem, jak zapewnić odbiorcy naprawdę szybkie doświadczenie zakupowe, to spróbuj jednego z tych właśnie rozwiązań.

 

 

 

 

 

Sprawdź również WSTĘP do poradnika optymalizacji konwersji.

 

 


Chcesz dowiedzieć się więcej o marketingu online?

Sprawdź moje inne artykuły:

 

  • Analityka:

Znaczniki UTM, czyli prosty sposób na sprawdzenie wejść na stronę. Duży Poradnik

Jak uniknąć błędów statystycznych w testach A/B?

Testy A/B – Poradnik dla Początkujących

Google Data Studio 2019 – Poradnik dla początkujących

Segmenty w Google Analytics – Kompleksowy Poradnik

Atrybucja w Google Analytics cz.1 – Czym są ścieżki wielokanałowe?

Atrybucja w Google Analytics cz.2 – Czym są modele atrybucji?

Analiza kohortowa w Google Analytics – prosta optymalizowacja działań sklepu online?

Darmowe narzędzie do SEO, czyli Search Console – Poradnik Użytkownika

 

  • E-biznes:

Serie artykułów:

Promocja Lokalnej Firmy w Internecie

Wielki Poradnik marketingu szeptanego

Kompendium Wiedzy o MLM

Marketing Mix – Poradnik

Content Marketing od A do Z

 

 

Artykuły:

Marketing Afiliacyjny – co to jest? Jak na nim zarobić? Kompleksowy Poradnik

Google AdSense – czy w 2019 roku można jeszcze na nim zarobić? Wielki Przewodnik

Content Marketing – dlaczego działa u innych a u ciebie nie? Korzyści i problemy

Marketing szeptany – cz I. Jak stworzyć viral? Wielki Poradnik

Marketing szeptany – cz. II. 5 ważnych składników. Wielki Poradnik

 


 



Bibliografia

Ten tekst powstał na podstawie mojej wiedzy i wielu rzetelnych źródeł, z których najważniejsze (i najciekawsze) to:

https://www.opensignal.com/reports/2018/02/state-of-ltehttps://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
https://developers.google.com/web/showcase/2016/aliexpress
https://matsuu.com/pl/progresywne-aplikacje-webowe-pwa-to-przyszlosc-mobilnego-handlu/
https://academy.exceedlms.com/student/catalog/list?category_ids=405-reklama-mobilna
https://onlinemediamasters.com/w3-total-cache-settings/
https://bloggingwizard.com/w3-total-cache-cloudflare/



Ocena artykułu:
[Głosów:2    Średnia:5/5]



Dodaj komentarz



me

O mnie

Cześć, jestem Natalia!

Od kilku lat zajmuję się szeroko rozumianym marketingiem. Chętnie poprowadzę dla Ciebie reklamy na Facebooku - specjalizuję się w branży e-commerce :).

Możemy też współpracować dużo szerzej - napisz, czego potrzebujesz a na pewno razem stworzymy coś fajnego!

Pytania?

Skontaktuj się ze mną

Kontakt

Masz pytania, propozycje, prośby? :)

Pisz do mnie na mój adres email lub wypełnij formularz kontaktowy obok.

chrzn-logo-poziome-2019-black-mobile

Copyright 2018 charzynska.pl ©
All Rights Reserved