Jak nie tracić konwersji na stronie internetowej? Poradnik CRO część 1 – nawigacja w serwisie

Projektanci oraz administratorzy stron internetowych są często bardzo pomysłowi. Różne koncepcje dotyczące architektury serwisu, wyglądu oraz rozmieszczania poszczególnych funkcji — choć estetyczne i nieszablonowe — mogą skutkować chaosem oraz niedostosowaniem portalu pod użytkownika.

A to największy błąd. W końcu — to on jest odbiorcą przekazywanych treści oraz potencjalnym klientem. Jeżeli nie będzie w stanie w szybki, intuicyjny sposób znaleźć tego, czego poszukuje — po prostu wybierze ofertę konkurencji.

User Expierience (doświadczenie użytkownika) jest jednym z kluczowych elementów CRO (conversion rate optimization — optymalizacja konwersji). Jeżeli nie chcesz tracić klientów poprzez źle zaprojektowaną / zoptymalizowaną stronę internetową — serdecznie zachęcam do lektury mojego poradnika, w którym wyjaśnię, na co zwracać szczególną uwagę. Dzisiaj zajmiemy się jego pierwszą częścią, w której omówię dobre praktyki oraz błędy w nawigacji serwisu.

Przykłady, na których się opieram, to rzeczywiste problemy, z którymi na co dzień mierzę się w swojej pracy. Całość została ujęta w formie swoistego Case Study sklepu, w którym pokazuję, które elementy, w jaki sposób oraz z jakiego powodu zostały zmienione. Jeżeli potrzebujesz analizy własnego portalu, serdecznie zapraszam do kontaktu.

Nawigacja w serwisie

Strona internetowa musi posiadać intuicyjną nawigację. Drzewo kategorii to najważniejszy element sklepu. Pomaga użytkownikowi w odnalezieniu się w danej przestrzeni, odpowiada na jego potrzeby oraz nakierowuje go na podkategorie, które chcemy, aby zobaczył. Nieprawidłowo zoptymalizowane nazewnictwo oraz budowa/struktura kategorii zniechęca konsumenta do dalszych zakupów.

Budowa menu

Drzewo kategorii to najważniejszy element nawigacyjny pozwalający klientowi na poruszanie się po sklepie. Nieprawidłowo zoptymalizowane nazewnictwo kategorii sprawia użytkownikowi problemy w rozeznaniu się co do asortymentu oraz może zniechęcić go do dalszych zakupów.

Poniżej znajduje się przykładowy screen z nieprawidłowo zoptymalizowanym menu sklepu:

Przed wdrożeniem zmian z audytu CRO, w belce menu została umieszczona kategoria pośrednia o nazwie “kategorie” oraz takie sekcje, jak “rabaty” czy “współpraca”. Informacja o rabatach widoczna jest tuż pod sekcją banerów, zatem niepotrzebnie została zaimplementowana do górnego menu. Zakładka o współpracy powinna natomiast znajdować się znacznie niżej, w menu dolnym, ze względu na to, że będzie interesowała zdecydowanie wąskie grono użytkowników.

Po zmianach menu przedstawia się następująco:

Obecnie menu zbudowane jest w oparciu o drzewo kategorii produktów bez pośredniej zakładki “kategorie”. Dodatkowo zostały dodane ikony przy nazwach kategorii, które symbolizują produkt. Dzięki temu rozwiązaniu — użytkownik od razu po wczytaniu strony widzi, jakie kategorie produktowe są dostępne w sklepie.

Skupiając się na temacie konstrukcji menu w sklepie internetowym, nie można zapomnieć o powszechnie obecnym trendzie “mobile first”. Podejście to ma na celu dostosowanie w pierwszej kolejności witryny pod najmniejsze urządzenia, jakimi są smartfony i tablety. Dotyczy to głównie stworzenia projektu idealnego pod względem UX oraz doświadczeń użytkownika.

Im mniejsza rozdzielczość ekranu, tym mniej elementów można na nim umieścić. Jest to wyzwanie pod kątem budowy drzewa kategorii, które musi w przystępny i przejrzysty dla użytkownika sposób przedstawić cały asortyment sklepu. Mobile interfejs przede wszystkim powinien znajdować się w widocznym miejscu po skrajnej prawej, lub lewej stronie, a jego rozmiar powinien pozwalać na bezproblemowe kliknięcie i rozwinięcie całego menu kategorii.

Przed wprowadzeniem zmian z audytu CRO — w sklepie widać niepoprawnie zaimplementowany mobile interfejs, który nie znajdował się w skrajnej prawej części ekranu. Dodatkowo przycisk “menu” oraz “hamburger” nie działał. Należało kliknąć w “…”:

Po wdrożeniu zmian można zaobserwować różnicę. Interfejs pojawił się w skrajnej lewej części ekranu, co jest praktycznym oraz najpowszechniejszym rozwiązaniem. Sam element działa również prawidłowo pod względem technicznym. Możemy tapnąć w napis lub ikonę, aby wywołać rozwijalną listę menu.

Głównymi zaleceniami związanymi z przebudową drzewa kategorii dla sklepu była optymalizacja belki menu nastawiona na:

• zwiększenie jej przejrzystości
• skrócenie jej długości
• lepsze wizualnie przedstawienie listingu kategorii

Wdrożono menu kafelkowe na podstronach kategorii wyższego rzędu zamiast mało czytelnego, klasycznego “drzewka kategorii”:

Po wdrożeniu zmian:

Zastosowanie ikon i symboli ułatwia i przyśpiesza odnajdywanie kategorii przez użytkownika.

• zmianę architektury informacji w belce menu

Usunięto z niej mało użyteczne zakładki, nieodwiedzane przez użytkowników dzięki analizie wtyczką Hotjar. Klient uzyskał w ten sposób efekt bardziej logicznej i przejrzystej struktury menu.

• optymalizacja widoku vertical menu

Zmniejszono m.in. odstępy między kategoriami, by całość prezentowała się bardziej czytelnie i spójnie.

Jednym z zaleceń dotyczących optymalizacji CRO strony głównej było dodanie menu kafelkowego w oparciu o najważniejsze kategorie dla sklepu:

Dzięki temu, rozwiązaniu użytkownik, nawet bez czytania wie, na jaką kategorię może przejść klikając w poszczególne kafelki. Tego typu interfejs jest bardzo przyjemny dla użytkownika, w wielu przypadkach częściej wybierany od klasycznego menu (rozwijanego).

Menu nawigacyjne

Breadcrumbs ułatwiają poruszanie się po witrynie, a także pomagają zorientować się w strukturze strony. Tutaj głównym problemem był brak nawigacji okruszkowej na wersji mobile produktów. Zostało to poprawione:

Porównywarka produktowa

Za pomocą porównywarki produktowej, możliwe jest szybkie i przejrzyste porównanie parametrów kilku różnych produktów, a co za tym idzie, szybsze dokonanie decyzji zakupowej. Na sklepie brakowało tej funkcjonalności. Obecnie porównywarka produktowa została dodana.

Co ważne, jest ona dostępna zarówno z poziomu karty konkretnego produktu, jak i listingu produktów na kategorii.

Filtry produktowe

Filtry produktowe pozwalają na przeglądanie konkretnych produktów użytkownikom, jednocześnie oszczędzając im czas oraz ułatwiając poruszanie się po produktach dostępnych w sklepie. Tego typu mechanizm jest niezbędny w przypadku sklepów z szeroką ofertą asortymentu, ale nie tylko.

Przemyślanie zoptymalizowanie filtrów produktowych jest niezwykle ważne na urządzeniach mobilnych z niedużym ekranem, gdzie produkty zazwyczaj wyświetlane są jeden pod drugim. Ten sposób wyświetlania produktów powoduje długie scrollowanie, co może zniechęcać użytkownika do przeglądania asortymentu z kolejnych stron paginacji sklepu.

Poniżej widać screen z wdrożonymi jedynie 4 filtrami:

Po wdrożeniu zmian zaproponowanych w audycie CRO w witrynie znalazło się 14 filtrów produktowych, dostosowanych do asortymentu. Pozwala to, na precyzyjne dopasowanie produktów do preferencji użytkownika.

Jednak poza samymi filtrami warto pamiętać o takich elementach jak: filtrów w postaci suwaków lub graficznej (np. przypadku kolorów) czy przycisku “filtruj”, który powinien być w formie pływającej (by użytkownik nie musiał wracać na sam początek strony w celu potwierdzenia wyboru filtrów) lub wprowadzenie opcji odświeżania strony “w locie” (tylko na desktopie) po wybraniu każdorazowo dowolnego atrybutu filtra.

W przypadku tego sklepu, pominięto umieszczenie przycisku “filtruj” na dole strony lub w formie pływającej, co zmusza użytkownika do powrotu na górę strony w celu potwierdzenia wyboru filtrów.

Poniżej przykład prawidłowo wdrożonego przycisku:

Sortowanie produktów

Sortowanie to kolejne rozwiązanie, które ułatwi użytkownikowi znalezienie idealnego produktu.”Sortowanie” podobnie jak filtrowanie ułatwia użytkownikowi przegląd produktów na kategoriach, których często jest kilkadziesiąt czy nawet kilkaset. Nie należy tego jednak mylić z filtrowaniem.

Głównymi zaleceniami związanymi z sortowaniem produktów było dodanie nowych opcji. Dzięki temu użytkownik może w łatwiejszy i szybszy, a dzięki temu — przyjemniejszy sposób odnaleźć właściwe produkty (od najważniejszych, u góry).

Przed:

Po:

Wyszukiwarka produktowa

Popularna “szukajka” to niezwykle istotny element sklepu internetowego. Jeśli działa sprawnie i prawidłowo, stanowi wygodną “drogę na skróty” dla użytkowników, którzy chcą szybko znaleźć konkretny model produktu. Aby tak się stało, wyszukiwarka powinna być dobrze przemyślana i zaprojektowana.

Głównymi zaleceniami związanymi z wyszukiwarką produktową było:

• wdrożenie podpowiedzi “po kategoriach” – z jakich kategorii produkty odpowiadają na zapytanie
• przyspieszenie jej działania, ponieważ:
  • podpowiedzi powinny pojawiać się już w trakcie wpisywania frazy a tutaj ładowały się ponad 1 s
  • załadowanie landing page’a z wynikami wyszukiwania trwało ponad 8 s

Użytkownik otrzymuje teraz wynik wyszukiwania z jeszcze większą ilością podpowiedzi.

Możliwość dokonania zakupów z różnych poziomów sklepu

Użytkownik przeglądając asortyment sklepu powinien mieć możliwość dodania produktu do koszyka nie tylko z poziomu karty produktowej, ale również z karty listingów kategorii czy listingów produktów powiązanych/podobnych/ostatnio oglądanych. Ta opcja pozwala zdecydowanym użytkownikom na przyspieszenie procesu zakupu poprzez pominięcie klikania w kartę produktu.

Przykład sklepu, który prawidłowo wdrożył możliwość dodania produktu do koszyka z poziomu listingu kategorii:

Lista życzeń

Lista życzeń pozwala ograniczyć dodania do koszyka produktów, co do których klient nie jest pewny jeśli chodzi o decyzję zakupową.

Rekomendacja dotyczyła przyznania możliwości dodania produktów do listy życzeń, także użytkownikom niezalogowanym.

Od teraz potencjalny klient ma możliwość dodania (stworzenia listy) produktu/ów „na później” bez dodawania i usuwania ich z koszyka.