Jak stworzyć skuteczną nawigację w swoim sklepie internetowym

Dobry system nawigacji pomaga klientom szybko i skutecznie znaleźć to, czego szukają, oraz poprawia ogólny sukces Twojego sklepu. W rzeczywistości Twoja witryna ma tylko kilka sekund, aby przyciągnąć uwagę odwiedzających witrynę, więc lepiej od razu poprowadź ich do potrzebnych informacji!

Nawet niewielkie różnice w podstawowej nawigacji mogą znacząco wpłynąć na zdolność klientów do znajdowania produktów odpowiadających ich potrzebom. Jeśli nie wiedzą, co zrobić lub gdzie się udać, gdy trafią do Twojej witryny, szybko wyjdą i zrobią zakupy w innym miejscu.

Ale jak stworzyć skuteczną nawigację w swoim sklepie internetowym, która zwiększy sprzedaż i zmniejszy współczynnik odrzuceń?

Najlepsze praktyki w menu nawigacji

1. Używaj jasnego i znaczącego języka

Jeśli chodzi o główne menu nawigacyjne, zwykle znajdujące się w nagłówku witryny, upewnij się, że etykiety są jasne i znaczące. Odwiedzający witrynę powinien dokładnie wiedzieć, które produkty należą do kategorii lub jakie informacje znajdzie po kliknięciu menu rozwijanego, po prostu czytając etykietę. Może wydawać się kuszące, aby być kreatywnym w swoich sformułowaniach, ale może to po prostu zmylić klientów, zamiast zachęcać ich do kliknięcia.

Na przykład główne menu nawigacyjne na fixjeiphone.nl jest zarówno przejrzyste, jak i znaczące. Masz fantastyczne wyobrażenie o tym, jakie treści lub produkty będą znajdować się na każdej stronie, zanim klikniesz określony element.

Pozycje w menu nawigacyjnym są również bezpośrednio związane z potrzebami klientów FixjeiPhone. Wiedzą, że ludzie odwiedzają ich witrynę, aby kupić części lub akcesoria, przeczytać instrukcje obsługi telefonu lub kupić odnowione urządzenie. Każda pozycja menu jest oparta na tych konkretnych potrzebach, więc odwiedzający witrynę wiedzą, gdzie kliknąć od razu.

2. Spraw, aby elementy najwyższego poziomu były klikalne

Niektóre witryny mają elementy nawigacyjne najwyższego poziomu, które uruchamiają tylko listę rozwijaną, a nie linki do nowej strony. Ale może to być mylące dla odwiedzających witrynę, zwłaszcza jeśli z jakiegokolwiek powodu mają problemy z otwarciem menu.

Jeśli w menu podajesz kategorie produktów, rozważ połączenie pozycji najwyższego poziomu ze stroną kategorii podstawowej i uwzględnij podkategorie w listach rozwijanych. Daje to również użytkownikom więcej opcji znajdowania dokładnie tego, czego szukają, lub przeglądania całych kategorii.

Absoluteantibody.com skutecznie to robi. Jeśli klikniesz „Zasoby przeciwciał” w ich głównym menu nawigacyjnym, przeniesiesz się do wszystkich informacji o przeciwciałach. Możesz też kliknąć bardziej szczegółowe zasoby, które są podświetlone w menu.

3. Dodaj wskaźniki rozwijane

Absolutelyantibody.com i fixjeiphone.nl również wdrażają wskaźniki rozwijane w swoich menu nawigacyjnych.

Zazwyczaj wskaźniki rozwijane dodają strzałkę obok każdej etykiety nawigacji, aby pokazać, że element menu się rozwija. Pomagają odwiedzającym witrynę zrozumieć, że dostępnych jest więcej opcji bez konieczności najeżdżania kursorem na każdy element.

Jest to często opcja w ustawieniach motywu, ale możesz również użyć wtyczki, takiej jak Ikony menu lub edytować kod witryny.

4. Trzymaj się standardowych lokalizacji

Kreatywność w projektowaniu witryny to świetny sposób na wyróżnienie się z tłumu. Ale jeśli kreatywność powoduje zamieszanie, możesz stracić zarówno klientów, jak i sprzedaż.

Dobrym pomysłem jest umieszczenie nawigacji w miejscu, w którym ludzie spodziewają się jej znaleźć. Badania eye-trackingowe pokazują, że odwiedzający witrynę najpierw patrzą na lewy górny róg strony. Dlatego zachowaj podstawową nawigację w nagłówku i umieść najważniejsze elementy, takie jak strona główna, po lewej stronie.

Użytkownicy korzystają również z nawigacji w stopce i pasku bocznym. Rozważ umieszczenie w stopce linków do ważnych stron wraz z zasadami i warunkami zwrotów. Na stronach produktów i kategorii możesz umieścić pasek boczny z linkami do powiązanych produktów, dodatkowych kategorii i często zadawanych pytań.

Chociaż menu „hamburgerowe” (które rozwijają się, gdy klienci klikną trzywierszową ikonę) świetnie nadają się do uproszczenia menu mobilnych, mogą być mylące na komputerach stacjonarnych.

Ponieważ ikona jest tak mała i zwykle schowana w rogu, odwiedzający witrynę mogą ją łatwo zgubić lub przeoczyć. Nie pokazuje również najważniejszych pozycji menu i wymaga od odwiedzających, aby zrobili jeszcze jeden krok, zanim znajdą to, czego szukają.

Jak używać bułki tartej i dlaczego powinieneś

Bułka tarta to dodatkowe systemy nawigacji, które pokazują lokalizację użytkownika w witrynie. Nazwa pochodzi od opowieści o Jaśu i Małgosi, którzy zrzucają bułkę tartą, by odnaleźć drogę powrotną przez las. Ta metoda nawigacji jest szczególnie pomocna, jeśli masz dużo stron lub produktów.

Menu nawigacyjne jest zwykle wyświetlane pod główną nawigacją, tuż nad zawartością witryny. Ułatwia to odwiedzającym Twoją witrynę korzystanie z nich bez konieczności przewijania.

Witryna Craft Can Directory używa bułki tartej, aby pokazać klientom stronę, na której się znajdują i jak wrócić do punktu wyjścia. Dzięki temu mogą cofnąć się tylko o jedną stronę, a nawet pominąć kilka stron, bez konieczności wielokrotnego klikania przycisku „wstecz” przeglądarki.

Jest to również przydatne, gdy kupujący przegląda produkty lub porównuje przedmioty. Jeśli chcą kupić skrzynkę piwa, ale nie podobają im się opcje w przeglądanej kategorii, mogą po prostu kliknąć z powrotem do kategorii Skrzynie mieszane, aby zobaczyć inne opcje.

Dlaczego bułka tarta jest ważna

Bułka tarta zapobiega zgubieniu się klientów w Twojej witrynie. Bez nich znacznie trudniej jest komuś wrócić do poprzednich stron lub kategorii. Zamiast tego klient musiałby ponownie kliknąć menu główne, wyszukać stronę lub użyć przycisku „wstecz”.

Google uwielbia również bułkę tartą, ponieważ pomagają nakreślić strukturę i hierarchię Twojej witryny. Okruszki chleba można nawet umieszczać w wynikach wyszukiwania, co zwiększa szanse potencjalnych klientów na znalezienie i kliknięcie na stronach Twojej witryny.

Jak dodać bułkę tartą do swojej witryny:

W wielu przypadkach bułkę tartą można włączyć w ustawieniach motywu. Na przykład darmowy motyw WooCommerce Storefront ma tę funkcję wbudowaną dla stron, produktów, kategorii i nie tylko.

Jeśli Twój motyw nie zawiera okruszków chleba lub chcesz je dalej dostosować, możesz dodać je do swojej witryny na dwa sposoby:

1. Użyj wtyczki:

Istnieje kilka wtyczek, których możesz użyć do włączenia bułki tartej jednym kliknięciem. Na przykład Jetpack pozwala na używanie bułki tartej na stronach internetowych, ale nie na stronach produktów lub kategorii.

Każda wtyczka pozwoli na różne poziomy dostosowywania, a konfiguracja będzie się różnić. Aby uzyskać pełną listę opcji, zajrzyj do repozytorium wtyczek WordPress.

2. Dodaj bułkę tartą za pomocą niestandardowego kodu

Aby wyświetlić bułkę tartą WooCommerce, możesz użyć <?php woocommerce_breadcrumb(); ?> snippet, aby kontrolować, gdzie wyprowadza się Twoja bułka tarta.

Możesz także użyć filtrów i argumentów do kontrolowania takich rzeczy, jak separator bułki tartej oraz tekst i link do domu.

Ten niestandardowy argument zmieni separator bułki tartej oraz kod HTML wyświetlany przed bułką tartą:

 /* Change breadcrumbs separator */ <?php $args = array( 'delimiter' => '/', 'before' => '<span class="breadcrumb-title">' . __( 'This is where you are:', 'woothemes' ) . '</span>' ); ?> <?php woocommerce_breadcrumb( $args ); ?>

Ten filtr zmieni domyślny tekst główny na dowolny, który określisz:

 /* Change Home Text in Breadcrumbs */ add_filter( 'woocommerce_breadcrumb_defaults', 'mm_change_breadcrumb_home_text',20); function mm_change_breadcrumb_home_text( $defaults ) { $defaults['home'] = 'Store'; return $defaults; }

Ten filtr zmieni link do głównego adresu URL:

 /* Replace the home link URL */ add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' ); function woo_custom_breadrumb_home_url() { return 'http://woocommerce.com'; }

Sprawdź wszystkie niestandardowe fragmenty kodu w dokumentach WooCommerce, które pomogą Ci wprowadzić jeszcze więcej dostosowań.

A co z mega menu?

Mega menu to popularna opcja w sklepach internetowych. Pozwalają one dawać klientom wiele możliwości wyboru w menu głównym, a nawet dodawać zdjęcia lub filmy.

Ale sposób, w jaki kategoryzujesz swoje treści i produkty, jest niezwykle ważny. Należy używać nadrzędnych kategorii, podkategorii i hierarchii w taki sposób, aby grupować odpowiednie produkty. Dzięki temu potencjalni klienci mogą łatwiej znaleźć to, czego szukają, i zobaczyć na pierwszy rzut oka różne segmenty produktów i opcji.

Na przykład The Craft Can Directory wykonuje dobrą robotę, wykorzystując mega menu w sposób, który pomaga klientom w dotarciu do produktów, które chcą zobaczyć.

Jeśli najedziesz kursorem na „Craft Beer Shop” w ich menu głównym, zobaczysz, że kategorie nadrzędne są wyróżnione pogrubioną czcionką, a podkategorie są wyświetlane czcionką treściową, pod każdą kategorią nadrzędną.

Gdyby kategorie nie były pogrupowane w ten sposób, mega menu mogłoby być jeszcze bardziej mylące dla klientów niż standardowe menu nawigacyjne.

Dla użytkowników motywu Storefront WooCommerce oferuje rozszerzenie mega menu, aby uprościć proces.

Skuteczne korzystanie z nawigacji w stopce

Twoja stopka powinna być częścią strategii witryny, a nie refleksją. Ponieważ jest wyświetlany na każdej stronie i produkcie w Twojej witrynie, jest to cenne miejsce do zaprezentowania najważniejszych stron.

Nie powinieneś tworzyć masywnej, przytłaczającej stopki zawierającej dziesiątki linków, ale ważne jest, aby jak najlepiej wykorzystać dostępną przestrzeń. Pomyśl o swojej stopce jako o uniwersalnym. Jeśli odwiedzający stronę przeczyta całą zawartość strony i przewinie ją w dół, jakie informacje uzna za najbardziej przydatne?

W niektórych przypadkach może być podobny do linków znajdujących się w menu głównym. Dodanie tych opcji do stopki ułatwia użytkownikom znajdowanie tego, czego szukają, bez przewijania z powrotem do góry.

Nie zapomnij jednak o stronach i treściach, których użytkownicy serwisu oczekują w stopce sklepu internetowego. Na przykład:

• Informacje wysyłkowe
• Zasady zwrotów i zwrotów
• Polityka prywatności
• Regulamin
• Szczegóły obsługi klienta
• Często zadawane pytania
• Informacje kontaktowe
• Pasek wyszukiwania
• Linki do mediów społecznościowych

Yubico.com to świetny przykład skutecznej stopki. Podobnie jak w przypadku ich głównego menu nawigacyjnego, Yubico organizuje ważne linki i treści w kategorie, aby ułatwić odwiedzającym ich witrynę znalezienie informacji.

W zależności od wielkości Twojego sklepu internetowego możesz potrzebować tylko niektórych z tych opcji. Nie chodzi o liczbę linków; chodzi o strategię, która za nimi stoi.

Nie zapomnij o swojej nawigacji

Nawigacja w witrynie jest jednym z najczęściej pomijanych aspektów sklepu internetowego i często jest uważana za pewnik. Pierwszym krokiem w tworzeniu skutecznej nawigacji jest ustalenie, jakie elementy są najważniejsze dla Twoich klientów.

Jak możesz ułatwić im przeglądanie treści, produktów i ofert? Jakie informacje byłyby dla nich najbardziej przydatne? Jeśli masz duży katalog produktów, czy mega menu miałoby sens?

Pamiętaj, że jeśli potencjalny klient nie może szybko znaleźć tego, czego szuka, możesz stracić go na rzecz konkurencji.

Chcesz przetestować różne wersje swojego menu? Dowiedz się, jak przetestować nawigację A/B.