9 wskazówek ułatwiających poruszanie się po witrynie [+ Przykłady]

Opublikowany: 2022-09-13

Czy kiedykolwiek zgubiłeś telefon, klucze lub portfel? Jeśli tak, prawdopodobnie zalecono ci odtworzenie swoich kroków. Nawigacja nawigacyjna pomaga odwiedzającym Twoją witrynę właśnie to zrobić, ale zamiast przeszukiwać kuchnię, łazienkę i obszar drzwi wejściowych tylko w celu znalezienia kluczy w lodówce, nawigacja nawigacyjna pokazuje użytkownikom ich aktualną lokalizację i kroki podjęte, aby się tam dostać.

Nawigacja okruszkowa bierze swoją nazwę od bajki Jaś i Małgosia, w której duet rodzeństwa i siostry zostawiają za sobą szlak okruszków tartych, przemierzając las, aby wskazać drogę powrotną do domu. Skutecznie zaimplementowana nawigacja typu breadcrumb na Twojej stronie zapewni, że Twoi goście nigdy nie zgubią się w lesie.

Uzyskaj dostęp do setek motywów i szablonów witryn na HubSpot

Co to jest nawigacja po stronie nawigacyjnej?

Bułka tarta to pomoc nawigacyjna, która pozwala użytkownikom śledzić ich aktualną lokalizację na stronie internetowej lub interfejsie. Ścieżka nawigacyjna wyświetla stronę, na której aktualnie znajduje się użytkownik, i jej związek ze stronami, które odwiedził przed nią, lub hierarchię stron nadrzędnych wyższego poziomu nad bieżącą stroną. Nawigacja Breadcrumb zapewnia użytkownikowi możliwość szybkiego powrotu do punktu początkowego lub wcześniejszych stron z wizyty.

Okruszki chleba są zazwyczaj wyświetlane jako pozioma lista hiperlinków stron internetowych oddzielonych znakiem „większy niż” (>). Nawigacja typu Breadcrumbs często znajduje się u góry strony, gdzieś pod główną nawigacją witryny. Zanim przejdziemy do wskazówek i najlepszych praktyk, należy pamiętać, że bułka tarta ma kilka różnych smaków.

Rodzaje nawigacji w bułce tartej

Bułka tarta oparta na lokalizacji lub hierarchii

Nawigacja nawigacyjna oparta na lokalizacji lub hierarchii jest najczęściej spotykanym typem nawigacji. Nawigacja oparta na lokalizacji pokazuje użytkownikowi bieżącą stronę, na której się znajduje, i jej związek z hierarchią witryny nad nią. Pomyśl o tym jak o folderach, w których przechowujesz dokumenty na swoim komputerze. Pierwszy folder jest najszerszy, a każdy folder w nim staje się bardziej szczegółowy, dopóki nie dotrzesz do swojego dokumentu.

przykład okruszków hierarchii z bazy wiedzy HubSpot

W powyższym przykładzie nawigacja pokazuje bieżącą stronę, na której znajduje się użytkownik, oraz każdą kolejną stronę nadrzędną prowadzącą z powrotem do bazy wiedzy. Nawigacja nawigacyjna oparta na hierarchii ułatwia użytkownikowi powrót do strony głównej lub dowolnej strony nadrzędnej powyżej, na której znajduje się bieżąca strona.

Bułka tarta oparta na ścieżce lub historii

Nawigacja nawigacyjna oparta na ścieżce reprezentuje unikalną ścieżkę, którą użytkownik wybrał przed przejściem na bieżącą stronę. Chociaż ścieżka zazwyczaj nie jest wyświetlana w całości, menu nawigacyjne oparte na ścieżce są często implementowane jako forma przycisku wstecz, który przenosi użytkownika na poprzednią stronę jego wizyty.

przykład nawigacji po ścieżkach na stronie internetowej Bloomingdales

Powyższy przykład pokazuje link „Powrót do wyników” w witrynie Bloomingdale, który jest opartą na ścieżce okładką, która pozwala użytkownikowi wrócić do poprzedniej strony z nienaruszonym unikalnym zapytaniem. Okruszki historii oparte na historii są powszechne w witrynach eCommerce z wieloma różnymi kategoriami i odmianami elementów do przeszukiwania.

Bułka tarta na podstawie atrybutów

Nawigacja oparta na atrybutach wyświetla atrybuty lub tagi wybrane przez użytkownika w celu filtrowania wyszukiwania na stronie internetowej. Okruszki na podstawie atrybutów są przydatne w witrynach eCommerce, gdzie użytkownicy mogą wybierać różne atrybuty, aby zawęzić elementy na stronie i na przykład znaleźć idealną parę dżinsów.

przykład nawigacji breadcrumb na stronie Gap

Okruszki oparte na atrybutach można również zaimplementować jako znaczniki do kategoryzowania postów na blogu i typów treści.

Teraz, gdy omówiliśmy już różne odmiany nawigacji po stronie nawigacyjnej, przejdźmy do 9 wskazówek dotyczących wdrażania nawigacji po stronie nawigacyjnej w witrynie, aby poprawić nawigację i zmniejszyć współczynnik odrzuceń.

Wskazówki i przykłady nawigacji w menu nawigacyjnym

1. Korzystaj z nawigacji po stronie nawigacyjnej tylko wtedy, gdy ma to sens ze względu na strukturę witryny.

Nawigacja w trybie Breadcrumb jest odpowiednia tylko wtedy, gdy wymaga tego struktura Twojej witryny. Jeśli masz strony niższego poziomu, które są dostępne z wielu różnych stron docelowych, korzystanie z nawigacji w trybie nawigacyjnym może zmylić czytelników, którzy uzyskują dostęp do tych samych stron z różnych punktów początkowych. Ponadto nawigacja po stronie nawigacyjnej może w ogóle nie być konieczna, jeśli masz małą witrynę internetową z tylko kilkoma stronami najwyższego poziomu.

przykład nawigacji breadcrumb na stronie Goshi

Goshi to przykład strony internetowej, która nie wymaga implementacji nawigacji breadcrumb. Oferują jeden produkt, a ich strona internetowa zawiera tylko kilka niezbędnych stron. W takim przypadku główna nawigacja obejmuje wszystko, co witryna ma do zaoferowania, i nie ma żadnych dodatkowych stron zagnieżdżonych w stronach nadrzędnych.

2. Nie ustawiaj zbyt dużej nawigacji w trybie nawigacji.

Nawigacja Breadcrumb jest drugorzędna w stosunku do głównej nawigacji Twojej witryny. Najlepszą praktyką jest, aby menu nawigacyjne wyglądały na mniejsze niż i gdzieś pod główną nawigacją witryny. Jeśli bułka tarta wydaje się zbyt duża, może to zakłócić równowagę wizualną strony i spowodować zamieszanie podczas poruszania się po witrynie.

Dobrym przykładem jest strona internetowa OXO. Ich główny pasek nawigacyjny jest duży i czysto umieszczony u góry strony, z kategoriami takimi jak „Gotowanie i pieczenie” „Napoje” itp. Ich nawigacja po stronie nawigacyjnej znajduje się pod główną nawigacją mniejszą i cieńszą czcionką.

przykład nawigacji breadcrumb na stronie Oxo

W przykładzie Oxo widać wyraźnie, że ścieżka nawigacyjna jest drugorzędna w stosunku do głównego paska nawigacyjnego witryny nad nim. Miłym akcentem jest również szary pasek, na którym znajduje się nawigacja po stronie nawigacyjnej.

3. Uwzględnij pełną ścieżkę nawigacyjną w swojej nawigacji nawigacyjnej.

Jest prawdopodobne, że niektórzy użytkownicy odkryją strony w Twojej witrynie za pomocą wyszukiwania, zamiast zaczynać od strony głównej i przechodzić dalej. Wyszukałem w Google „Studentów niestacjonarnych Uniwersytetu Elon”, aby dotrzeć do tej strony docelowej. Elon jest sprytny, aby uwzględnić pełną ścieżkę nawigacyjną, w tym „Dom” i „Przyjęcia” w nawigacji nawigacyjnej.

Jeśli pominiesz niektóre poziomy, zdezorientujesz użytkowników, a ścieżka nawigacyjna nie będzie tak pomocna. Nawet jeśli użytkownicy nie zaczynali na stronie głównej, chcesz dać im łatwy sposób na zapoznanie się z Twoją witryną od samego początku.

przykład nawigacji breadcrumb na stronie uniwersytetu elon

4. Postęp od najwyższego poziomu do najniższego.

Ważne jest, aby nawigacja w menu nawigacyjnym była czytana od lewej do prawej, przy czym skrajny lewy link to strona główna, a skrajny prawy link to bieżąca strona użytkownika. Badanie przeprowadzone przez Nielsen Norman Group wykazało, że użytkownicy spędzają 80% czasu na przeglądaniu lewej połowy strony i 20% na prawej połowie, co stanowi mocny argument za projektowaniem od lewej do prawej. Ponadto link znajdujący się najbliżej lewej strony pojawi się jako początek łańcucha, więc chcesz, aby była to strona najwyższego poziomu.

5. Dbaj o to, by tytuły okruszków były zgodne z tytułami stron.

Ważne jest, aby zachować spójność z tytułami swojej strony i menu nawigacyjnego. Pozwoli to nie tylko uniknąć nieporozumień, ale także zaoferuje inne miejsce do wylądowania docelowych słów kluczowych. Chcesz również wyraźnie powiązać tytuły nawigacyjne ze stroną. Jeśli w tytule menu nawigacyjnego nie ma linku, wyjaśnij to. Sony skutecznie etykietuje swoje tytuły w bułce tartej, aby pasowały do tytułów stron. Na przykład „Środowisko, CSR i Jakość” odczytuje to samo w nawigacji w menu nawigacyjnym, co na stronie.

Sony wykonuje również dobrą robotę, rozróżniając linki od linków niebędących linkami. Łącza są podkreślone, natomiast te, które nie są linkami, takie jak bieżąca strona „Środowisko”, pozostają bez dekoracji.

Przykład nawigacji w trybie nawigacyjnym sony

6. Bądź kreatywny w projektowaniu.

Nawigacja w menu nawigacyjnym jest tradycyjnie stylizowana jako pozioma lista łączy oddzielonych znakiem większości (>). Nie musisz jednak podążać tradycyjną ścieżką, jeśli inny projekt jest bardziej zgodny z wyglądem i działaniem witryny.

Na przykład Hoka używa „https://blog.hubspot.com/” do oddzielenia elementów w nawigacji nawigacyjnej. W tym przypadku subtelna odmiana projektu ma sens dla estetyki witryny i marki.

przykład nawigacji w menu nawigacyjnym hoka

7. Utrzymuj go w czystości i porządku.

Twoja nawigacja nawigacyjna jest pomocą dla użytkownika i nie powinna przyciągać niepotrzebnej uwagi, chyba że użytkownik jej szuka. Z tego powodu nie chcesz zaśmiecać nawigacji w trybie nawigacyjnym niepotrzebnym tekstem lub niezgrabnym projektem.

Na przykład firma Eionet mogłaby obejść się bez tekstu „Jesteś tutaj” w swojej nawigacji nawigacyjnej. Tekst, który ma być pomocny, zaśmieca stronę. Przy odpowiednim projekcie nawigacja po stronie nawigacyjnej powinna być wystarczająco zauważalna bez wprowadzenia, ale nie wystawać jak bolący kciuk.

przykład nawigacji breadcrumb na stronie eionet

8. Zastanów się, jaki rodzaj nawigacji nawigacyjnej jest najodpowiedniejszy dla Twojej witryny.

Jak omówiono na początku artykułu, należy wziąć pod uwagę kilka rodzajów bułki tartej — oparte na lokalizacji, oparte na atrybutach i oparte na historii. Okruszki nawigacyjne oparte na lokalizacji pokazują użytkownikowi, gdzie się znajduje w hierarchii witryny. Oparte na atrybutach menu nawigacyjne pokazują użytkownikom, do jakich kategorii lub tagów należy ich strona. Na koniec, oparte na historii menu nawigacyjne pokazują użytkownikom konkretną ścieżkę, którą przebyli, aby dotrzeć do bieżącej strony.

Rolling Stone wykorzystuje nawigację opartą na lokalizacji, aby pokazać użytkownikom, do której sekcji witryny należą treści, które oglądają. Ten rodzaj nawigacji w trybie breadcrumb jest najskuteczniejszy dla użytkowników Rolling Stone, dzięki czemu mogą łatwo wrócić do domu lub do szerszej strony kategorii. Tworząc nawigację nawigacyjną, zastanów się, co jest najbardziej przydatne dla odwiedzających Twoją witrynę.

przykład bułki tartej opartej na lokalizacji na stronie toczenia kamienia

Jeśli Twoja witryna oferuje produkty o wielu różnych opcjach i stylach, nawigacja oparta na atrybutach jest pomocna w umożliwieniu użytkownikom zawężenia wyszukiwania i łatwego przechodzenia do stron w wybranym atrybucie. Verishop używa bułki tartej opartej na atrybutach, aby wyświetlić wybory użytkowników, na przykład zawężając wyszukiwanie ręczników według marki i koloru.

przykład bułki tartej opartej na atrybutach w witrynie verishop

Decydując o tym, jaki rodzaj nawigacji nawigacyjnej jest najbardziej odpowiedni dla Twojej witryny, należy wziąć pod uwagę strukturę witryny, rodzaj oferowanych produktów lub usług oraz sposób, w jaki oczekujesz, że użytkownicy będą wchodzić w interakcje z Twoimi stronami.

9. Poznaj swoich odbiorców.

Najlepszą praktyką w nawigacji w menu nawigacyjnym jest umieszczenie nawigatora w górnej części strony, pod główną nawigacją. Jednak Apple, jedna z najcenniejszych firm wszechczasów, przeciwstawia się tej logice, umieszczając swoją nawigację w stopce, na dole strony. Ostatecznie bardzo ważne jest, aby znać swoich odbiorców. Klienci Apple są zazwyczaj zaznajomieni z technologią i prawdopodobnie znajdą nawigację, jeśli będą jej potrzebować. Rozważ potrzeby swoich klientów i zaimplementuj testy A/B, jeśli nie masz pewności.

przykład bułki tartej opartej na lokalizacji na stronie Apple iPhone 13 pro

Nawigacja Breadcrumb w HTML i CSS

Okruszki chleba są nie tylko przydatne — można je również łatwo dodać do witryny za pomocą odrobiny kodu HTML i CSS.

Zacznijmy od kodu HTML, którego użyjemy do stworzenia samych linków. Najprostszym sposobem, aby to zrobić, jest zorganizowanie linków w nieuporządkowanym elemencie listy (<ul>), przy czym każdy element listy (<li>) zawiera link w serii nawigacyjnej aż do ostatniego elementu, który oznacza bieżącą stronę.

Oto szablon HTML dla bułki tartej , którego możesz użyć:

Zobacz bułkę tartą pióra w HTML i CSS autorstwa HubSpot (@hubspot) na CodePen.

Zwróć uwagę, jak umieściłem również listę nieuporządkowaną w elemencie HTML <nav> (navigation) oraz dodałem klasę i etykietę ARIA do jej otwierającego tagu. Jest to opcjonalne, ale ułatwia dostęp do strony dla czytników ekranu i wyszukiwarek.

Oczywiście sam ten kod HTML nie wystarczy — w tej chwili mamy tylko wypunktowaną listę linków. Dodając CSS, możemy uzyskać wygląd breadcrumb, którego szukamy. Zastosuj następujący kod CSS do powyższego kodu HTML:

Zobacz bułkę tartą pióra w HTML i CSS autorstwa HubSpot (@hubspot) na CodePen.

Razem ten kod generuje podstawowy obszar nawigacji nawigacyjnej, którego można używać w dowolnej witrynie — zobacz końcowy wynik poniżej. Dodałem również trochę dodatkowej stylizacji, aby uzyskać czystszy wygląd. Aby zobaczyć, jak wygląda bułka tarta bez tej stylizacji, skomentuj kod na dole karty CSS.

Zobacz bułkę tartą pióra w HTML i CSS autorstwa HubSpot (@hubspot) na CodePen.

Nawigacja Breadcrumb w Bootstrap CSS

Bootstrap CSS oferuje również sposób na tworzenie okruszków chleba bez konieczności dodawania niestandardowego CSS. Aby to zrobić, użyj komponentu Breadcrumb w ten sposób. Oto przykład z dokumentacji Bootstrap 5:

Zobacz bułkę tartą pióra w Bootstrap CSS autorstwa HubSpot (@hubspot) na CodePen.

To tylko podstawy nawigacji nawigacyjnej w Bootstrap — zapoznaj się z dokumentacją nawigacyjną Bootstrap, aby poznać wszystkie szczegóły.

Projektuj, aby pomóc użytkownikom poruszać się po Twojej witrynie

Ostatecznie nawigacja w menu nawigacyjnym jest skutecznym narzędziem ułatwiającym nawigację w witrynie, ale ważne jest, aby wziąć pod uwagę najlepsze praktyki, aby zapewnić jak najlepsze wykorzystanie smacznych kąsków (okruszków tartych). Aby uzyskać dodatkowe porady dotyczące UX, zapoznaj się z naszym Ultimate Guide to UX Design.

Uwaga redakcji: Ten post został pierwotnie opublikowany we wrześniu 2018 r. i został zaktualizowany pod kątem kompleksowości.

{{slideInCta('3b85a969-0893-4010-afb7-4690