Nawigacja nawigacyjna Najlepsze praktyki i przykłady

Nawigacja breadcrumb jest często pomijana w procesie projektowania i rozwoju. Niektórzy ludzie mogą uważać to za niepotrzebne, podczas gdy inni mogą uważać, że jest to zbyt duży kłopot, na co warto. Faktem jest, że nawigacja breadcrumb znacznie zwiększy użyteczność strony internetowej.

Ścieżki nawigacyjne dają użytkownikom alternatywną metodę nawigacji, pozwalają zobaczyć, gdzie stoją w hierarchii witryny i zmniejszą liczbę kroków potrzebnych do przejścia na wyższy poziom w witrynie internetowej.

Przedstawiono tutaj różne rodzaje nawigacji nawigacyjnej, dlaczego są one ważne i jak najlepiej powinny być wdrażane online. W tym miejscu znajdują się również odniesienia ponad 30 przykładów, w jaki sposób bułka tarta jest obecnie używana w Internecie.

Pamiętaj, że chociaż nawigacja nawigacyjna nie spowoduje, że strona internetowa zostanie utworzona lub złamana, zapewni użytkownikom dodatkową korzyść, zwiększając ogólną użyteczność i funkcjonalność witryny.

Rodzaje breadcrumb

Ścieżka

Ścieżki nawigacyjne oparte na ścieżkach wskazują kroki lub ścieżkę, którą podjął użytkownik, aby dotrzeć do bieżącej strony witryny. Ponadto użytkownicy zobaczą linki do stron, które odwiedzili wcześniej, aby dotrzeć do bieżącej strony. Spośród trzech typów nawigacji breadcrumb nawigacja oparta na ścieżce jest najmniej popularna w Internecie. Powodem jest to, że nawigacja nawigacyjna oparta na ścieżce zapewnia podobną funkcjonalność jak “Naprzód” i “Z powrotem” przyciski w przeglądarce. Dla większości stron nawigacja nawigacyjna oparta na lokalizacji i atrybutach oferuje lepszą funkcjonalność.

Lokalizacja

Ścieżki nawigacyjne oparte na lokalizacji wskazują użytkownikowi, gdzie bieżąca strona znajduje się w hierarchii witryny. Ten typ nawigacji breadcrumb jest najczęściej widoczny na stronach internetowych z więcej niż dwoma poziomami głębokości lub zawartości. Po przejściu na stronę użytkownicy otrzymują linki do stron lub kategorii, które działają jako “rodzic” lub poziom wyżej od aktualnie oglądanej strony. Na przykład użytkownik może być na “Mówić” strona jednak “Co robimy” strona jest rodzicem “Mówić” strona podczas “Dom” strona jest rodzicem “Co robimy” strona.

Clearleft Ltd

Atrybut

Okruchy oparte na atrybutach wskazują użytkownikowi atrybuty lub kategorie przypisane do bieżącej strony w witrynie. Często spotykane w witrynach e-commerce, produkty mogą nie tylko należeć do kategorii, ale także pod pewnymi atrybutami. Na przykład pojazd może zostać sklasyfikowany jako SUV, a następnie mieć atrybuty koloru czarnego i wydany w 2010 roku.

Cars.com

Dlaczego warto używać Breadcrumbs?

• Świetna użyteczność

  Ścieżki nawigacyjne zapewniają dodatkowe środki, dzięki którym użytkownicy mogą łatwo poruszać się po stronie internetowej. Jeśli użytkownik wyląduje na wewnętrznej stronie w witrynie z innego źródła, nawigacja pozwoli użytkownikowi zobaczyć, gdzie dokładnie się znajdują w hierarchii witryny. Użytkownik ma również możliwość przejścia na wyższy poziom witryny w dowolnym momencie bez żadnych kłopotów.

• Łatwy do cofania

  Podstawowe nawigacje nie są zaprojektowane do śledzenia wstecznego, ponieważ okruchy są. Ponieważ backtracking jest bardzo popularny w Internecie, dzięki dodatkowej pomocy może przejść długą drogę.

• Wyeliminuj dodatkowe kliknięcia

  Ścieżki nawigacyjne umożliwiają użytkownikom przeskakiwanie z jednego poziomu witryny na drugi bez konieczności używania “Naprzód” lub “do tyłu” przyciski w przeglądarce. Dodatkowo bułka tarta eliminuje konieczność ciągłego korzystania przez użytkowników z głównej nawigacji.

• Pokazuje hierarchię użytkowników

  Podstawowa nawigacja na stronie internetowej nie odzwierciedla hierarchii każdej strony w witrynie. Nadanie użytkownikom okruchów pozwoli im zobaczyć hierarchię strony w witrynie.

• Przyjemnie wizualnie

  Ścierka nie tylko zapewnia użytkownikom dodatkową użyteczność, ale nie zajmuje dużo miejsca ani miejsca na stronie. Ścieżki nawigacyjne są łatwe do zaimplementowania w wizualnym projekcie witryny i zapewniają użytkownikom ogromne korzyści.

• Zapewnia dodatkową pomoc

  Jest całkiem możliwe, że niektórzy użytkownicy mogą nie zrozumieć, jak działa podstawowa nawigacja w witrynie, aw niektórych przypadkach użytkownicy mogą nawet nie wiedzieć, czego szukają. Danie użytkownikom nawigatora pozwoli im zobaczyć ogólny postęp i strukturę strony, dzięki czemu będą mogli lepiej poruszać się po stronie.

• Niższe wskaźniki odrzuceń

  Zazwyczaj nawigacja zapewnia bardziej szczegółową nawigację niż nawigacja podstawowa. W ten sposób użytkownicy otrzymają więcej opcji dotyczących nawigacji w witrynie. Zapewnienie im możliwości łatwego śledzenia wstecznego kilku poziomów w witrynie obniży współczynnik odrzuceń.

• Buduje zainteresowanie

  Gdy użytkownik ląduje na wewnętrznej stronie witryny internetowej, szanse na to, że są już na interesującej stronie. Ścieżki nawigacyjne mogą zawierać linki do dodatkowych stron i informacji, którymi zainteresowany jest również użytkownik, nie powodując, że zaczynają się od pierwszego.

Najlepsze praktyki Breadcrumb

• Użyj bułki tartej na górze strony

  Najczęstsze i instynktowne rozmieszczenie okruchów jest na górze strony. Dzięki temu użytkownicy mogą znaleźć okruchy chleba w nieskomplikowany sposób i wykorzystać je odpowiednio.

• Użyj konsekwentnie Breadcrumbs

  Jeśli zdecydujesz się na użycie breadcrumbs, upewnij się, że używasz ich w całej witrynie. Nadawanie użytkownikom nawigatora na niektórych stronach, a nie na innych, tylko je dezorientuje i frustruje. (Jednym z najlepszych przykładów jest Amazon, ponieważ usuwają okruchy z poszczególnych stron produktu).

• Bułka tarta powinna ulec degradacji

  Ścieżki nawigacyjne powinny zawsze zaczynać się od strony głównej i spadać do bieżącej strony. W ten sposób Twoje bułki tartej muszą przechodzić z najwyższego poziomu na najniższy poziom jeden krok na raz.

• Odpowiednio stylizuj bułkę tartą

  Chcesz, aby Twoje bułki tartaczne były widoczne, ale nie chcesz, aby były one punktem centralnym. Chcesz również pokazać, że Twoje okruchy nie są częścią głównej zawartości strony, a jedynie dodatkowym wsparciem dla niej. Znajdź szczęśliwe medium, w którym Twoja bułka tarta jest zauważalna, ale nie narzucająca się.

• Klasyfikuj wyraźnie strony

  Jeśli masz strony, które mieszczą się w dwóch lub więcej kategoriach, możesz nie chcieć korzystać z nawigatora na swojej stronie. Próba umieszczenia strony w dwóch lub więcej kategoriach prawdopodobnie spowoduje powstanie niejasnych okruchów i łamigłówkę dla użytkownika. Upewnij się, że witryna ma zorganizowaną hierarchię i jest odpowiednio wyświetlana w okruchach.

• Wyraźnie oddziel każdy poziom

  Upewnij się, że użytkownicy są w stanie odróżnić różnicę między poszczególnymi poziomami nawigacyjnymi. Najczęstszym separatorem między poziomami jest znak „większy niż” (>). Inne dobre separatory obejmują prawe dwukrotne notowania kątów (»), ukośniki (/) i strzałki (→). Jeśli używasz znaku zwykłego tekstu, używaj tylko jednego. (»Jest bardziej atrakcyjny i skuteczny niż >>)

• Wyłączyć bieżącą stronę

  Użyj innego stylu w ostatnim elemencie listy nawigacyjnej, aby ustalić, czy jest to aktualnie wyświetlana strona. Możesz to zrobić, tworząc przedmiot pogrubienie, zmiana koloru, lub podkreślając to.

• Nie twórz bieżącej strony jako łącza

  Nie ma potrzeby umieszczania ostatniego elementu na liście nawigacyjnej, ponieważ jest to przeglądana bieżąca strona. Utworzenie tutaj linku tylko wprowadzi użytkowników w błąd, zwłaszcza gdy klikną na niego i nie zostaną przeniesieni na nową stronę.

• Nie używaj okruchów jako nagłówka strony

  Użycie ostatniego elementu listy nawigacyjnej jako nagłówka bieżącej strony jest nieskuteczne. Jeśli zdecydujesz się użyć okruchów chleba, zrób to również dodając nagłówek strony.

• Ścieżki nawigacyjne nie zastępują podstawowej nawigacji

  Ścieżki nawigacyjne mają być używane tylko jako wsparcie dla podstawowej nawigacji, nigdy nie zastępując całkowicie podstawowej nawigacji. Zawsze należy zapewnić użytkownikom podstawową nawigację, z której mogą poruszać się po witrynie przed użyciem nawigacji nawigacyjnej.

Świetne przykłady bułki tartej

Vitra Direct

Rowery Trek

Illy

SiteInspire

Mia i Maggie

Intridea

Projektowanie przez ludzi

Roxy

Blik

SitePoint

Cel

Walmart

1-800-Kwiaty

Najlepsza oferta

Amazon.com

Barns & Noble

Koniec lądu

jabłko

Google

Gonić

AbsolutePunk.net

Littman Bros. Oświetlenie

Guardian.co.uk

OBSZAR 17

Wufoo

Harcerki z Middle Tennessee

Kolektyw Glasgow

Pierworodny

Bell Canada

Grooveshark

Devlounge

o autorze - Shay Howe to profesjonalny projektant interfejsów internetowych i użytkowników, obecnie mieszkający w Chicago, IL. Pisze o projektowaniu stron internetowych na swoim blogu na stronie letniej i chciałby usłyszeć od ciebie na Twitterze. Proszę, powiedz mu cześć!