Jak nie tracić konwersji na stronie internetowej? Poradnik CRO część 2 – budowa strony

W poprzedniej części poradnika skupiłem się na pokazaniu dobrych praktyk CRO dotyczących nawigacji w serwisie internetowym, na podstawie rzeczywistych przykładów Nadszedł czas, aby czas zająć się budową strony.

Budowa strony głównej

Strona główna to poniekąd wizytówka całego sklepu. Od tego, jak zostanie ona zaplanowana i poukładana, zależeć może zachowanie użytkownika.

Przede wszystkim — home page powinien zawierać sekcję banerów z wysokiej jakości grafikami przyciągającymi uwagę oraz informacjami — np. o nowościach, przecenach, kodach rabatowych itp.

Na poniższym przykładzie widać poprawnie zoptymalizowane banery z funkcją automatycznej rotacji. Dla wygody użytkowników warto wprowadzić możliwość samodzielnej zmiany banerów za pomocą strzałek, co zostało wdrożone w witrynie:

W sklepie pod sekcją banerów dodane zostały karuzele produktowe, zamiast klasycznych, statycznych listingów, co zdecydowanie skróciło stronę główną. Wpływa to pozytywnie na ogólny odbiór strony. Wprowadzenie tego rodzaju wyświetlania produktów na stronie głównej pozwala na zwiększenie głębokości przeglądania strony przez użytkownika, dzięki czemu ma on możliwość zobaczenie większej ilości informacji, które ma do zaprezentowania sklep.

Karuzele produktowe, które można wprowadzić na stronie głównej:

• promocje,
• nowości,
• top produkty,
• wybrane dla Ciebie (tutaj należy zastosować odpowiedni algorytm, aby “inteligentnie” dobierał produkty pod użytkownika),
• ostatnio oglądane.

W przedstawionym przypadku, na stronie głównej widoczna była sekcja kategorii z lewej strony ekranu, co niepotrzebnie rozpraszało uwagę użytkownika (drzewo kategorii powinno znajdować się jedynie w górnej belce).

Po usunięciu sekcji — strona automatycznie zyskała na przejrzystości. Pojawiła się również przestrzeń do wyświetlania informacji np. banerów w większym formacie:

Po zmianach, w centrum ekranu widoczne są jedynie banery z sekcją wyróżników sklepów pod spodem.

Kolejnym przykładem, w którym usunięta została sekcja drzewa kategorii ze strony głównej, jest sklep z oświetleniem. Przed wdrożeniem zmian — home page wyglądał następująco:

Drzewo kategorii w tym miejscu może być dla użytkownika zaskoczeniem. Po wprowadzeniu zaleceń z audytu CRO — strona zyskała na przejrzystości. W centrum ekranu pozostała jedynie sekcja produktów polecanych, co jest powszechną praktyką:

Dobrą praktyką jest także umieszczenie na stronie głównej slidera/karuzeli z logo producentów. Pozwala to użytkownikowi na szybkie zapoznanie się z producentami, których produkty są dostępne w sklepie.

Prawidłowo zostało to wdrożone na jednym ze sklepów ogrodniczych:

Kolejnymi elementami, które powinny obowiązkowo znaleźć się na stronie głównej, są wyróżniki sklepu. Ich zadaniem jest zachęcenie do zakupów od razu po wejściu na stronę.

W tym przykładzie — sklep wdrożył wyróżniki firmy tuż pod głównym banerem, dzięki czemu są one widoczne:

Głównymi zaleceniami związanymi z optymalizacją sekcji banerów na stronie głównej stanowiło:

• umożliwienie użytkownikowi własnoręcznego przewijania banerów
• wdrożenie autorotacji banerów

Zalecenia zostały wdrożone — dzięki czemu użytkownik posiada większą kontrolę nad stroną.

Opieka posprzedażowa i zakładka kontakt

Użytkownik — od samego początku musi zyskać pewność, że w przypadku problemów z zamówionym/zakupionym produktem, będzie mógł go zwrócić/wymienić, lub w prosty sposób skontaktować się z obsługą sklepu, by wyjaśnić sytuację. Bardzo istotne jest więc prawidłowe skonfigurowanie zakładek ze “zwrotami/reklamacjami” oraz “kontaktu”.

Przed audytem, witryna w ogóle nie posiadała zakładki kontaktu. Utrudniało to skomunikowanie się z obsługą sklepu, przez co zniechęcało do zakupów. Po wdrożeniu zakładki kontaktu — użytkownik uzyskał dostęp do maila oraz numeru telefonu sklepu, oraz dane takie jak NIP, godziny pracy biura i nr konta. Została dodana także mapka Google z lokalizacją sklepu. Podanie wyżej wymienionych informacji znacznie zwiększa zaufanie użytkowników do witryny.

Optymalizacja okienka czatu, w którym brakowało podanych godzin pracy konsultantów.

Przed:

Po:

Obecnie — użytkownik otrzymuje jasny komunikat, kiedy może pisać na czacie oraz kiedy uzyska odpowiedź.

Po wdrożeniu powyższej sugestii — użytkownik od razu otrzymuje jasną informację o tym, ile zaoszczędzi i niczego nie musi przeliczać.

Budowa stopki i dostępność na wszystkich podstronach

Stopka to jeden z elementów witryny, który powinien być dostępny na wszystkich podstronach serwisu, zarówno w wersji desktopowej, jak i mobilnej, oraz zawierać najistotniejsze z punktu widzenia użytkownika informacje, tj.:

• dane kontaktowe sklepu,
• wszelkie informacje dotyczące polityki prywatności
• regulamin sklepu,
• informacje dotyczące wysyłki (czas, koszty i sposoby wysyłki)

Stopka to miejsce na jedynie najważniejsze informacje. Na poniższym przykładzie można zauważyć, że przed wdrożeniem zmian, ten element strony był mocno przeładowany zbędnymi informacjami, takimi jak listing produktowy, opis sklepu (tu zdecydowanie lepiej sprawdza się osobny landing poświęcony opisowi/historii sklepu), czy listing najczęściej kupowanych produktów:

Po usunięciu zbędnych elementów i uporządkowaniu architektury informacji — stopka zyskała na przejrzystości i pozbyła się efektu “natłoku informacji”

Głównymi zaleceniami związanymi z przebudową stopki witryny było:

• usunięcie górnej stopki strony — na wersji mobile zajmowała nieproporcjonalnie dużo miejsca tuż pod sekcją MENU i SZUKAJ
• uproszczenie dolnej stopki do najważniejszych zakładek

Klient osiągnął cel poprzez :

• uproszczenie dolnej stopki do 3 sekcji
• usunięcie z dolnej stopki zdublowanego, górnego menu

Przed:

Po:

Problem stanowiła także zbyt mała czcionka — na wersji mobilnej, użytkownik mógł mieć przez to kłopot z trafieniem w wybrany element.

Przed: Po: