W bajce Hansel and Gretel, dwoje dzieci upuszcza okruszki chleba w lesie, aby znaleźć drogę do domu.
W dzisiejszych czasach, prawdopodobnie nie doświadczasz zbyt wielu zagubionych w lesie doświadczeń, ale jestem gotów założyć się, że czułeś się frustrująco zdezorientowany na źle zaprojektowanych stronach internetowych.
W projektowaniu stron internetowych, nawigacja po okruchach chleba jest sposobem na pokazanie użytkownikom ich lokalizacji i tego, jak się tam dostali (podobnie jak okruchy chleba Hansela). Pomaga ona również użytkownikom szybciej znaleźć strony wyższego poziomu, jeśli trafili do witryny z wyszukiwania lub głębokiego łącza.
- Co to jest nawigacja po okruchach chleba?
- Wskazówki i przykłady dotyczące nawigacji breadcrumb
- Używaj nawigacji breadcrumb tylko wtedy, gdy ma ona sens dla struktury witryny.
- Nie rób zbyt dużej nawigacji w okółkach.
- Włącz pełną ścieżkę nawigacji w swojej nawigacji okrężnej.
- Postępuj od najwyższego poziomu do najniższego.
- Utrzymuj tytuły okruszków chleba spójne z tytułami stron.
- Wykaż się kreatywnością przy projektowaniu.
- Zachowaj czystość i porządek.
- Zastanów się, jaki typ nawigacji po okruszkach ma największy sens dla Twojej witryny.
- Znaj swoją publiczność.
Co to jest nawigacja po okruchach chleba?
Regulacja po okruchach chleba to sposób, w jaki użytkownicy mogą zwizualizować swoją lokalizację w witrynie. Jest to drugorzędny pasek nawigacyjny, który zazwyczaj pojawia się jako poziome łącza tekstowe, oddzielone symbolem „większy niż” (>). Breadcrumb navigation poprawia odnajdywalność Twoich stron docelowych i pomaga użytkownikom szybciej dotrzeć do stron wyższego poziomu, jeśli początkowo znaleźli Twoją witrynę z wyszukiwania lub głębokiego linku.
Jakob Nielsen, współzałożyciel Nielsen Norman Group, zaleca nawigację breadcrumb od 1995 r., i robi dla nich mocny punkt: „Wszystko, co breadcrumbs robią, to ułatwiają użytkownikom poruszanie się po stronie, zakładając, że jej zawartość i ogólna struktura mają sens. To wystarczający wkład dla czegoś, co zajmuje tylko jedną linię w projekcie.”
Jeśli strona internetowa Twojej firmy jest wielowarstwowa, możesz rozważyć wdrożenie nawigacji breadcrumb, aby ułatwić poruszanie się po witrynie. Jednak, jak w przypadku każdego elementu projektu, istnieje dobry i zły sposób na zrobienie tego. W tym miejscu przeanalizujemy dziewięć wskazówek i przykładów, aby upewnić się, że tworzysz najbardziej efektywną nawigację breadcrumb dla swoich użytkowników.
Nawigacja breadcrumb ma strukturę liniową, więc chcesz jej używać tylko wtedy, gdy ma ona sens dla hierarchii witryny. Jeśli masz strony niższego poziomu, które są dostępne z różnych stron docelowych, użycie nawigacji okrężnej tylko zdezorientuje czytelników, którzy będą wchodzić na te same strony z różnych punktów wyjścia. Ponadto, jeśli Twoja witryna jest stosunkowo prosta i zawiera tylko kilka stron, prawdopodobnie nie potrzebujesz nawigacji w okółkach.
Nie rób zbyt dużej nawigacji w okółkach.
Twoja nawigacja w okółkach jest narzędziem drugorzędnym w stosunku do głównego paska nawigacyjnego, więc nie powinna być zbyt duża ani wyróżniająca się na stronie. Na przykład, w witrynie DHL, ich główny pasek nawigacyjny jest duży i rozpoznawalny, z kolumnami takimi jak „Express” „Parcel & eCommerce” „Logistics”, itp. Ich nawigacja w okółku chleba to mniejsza sekcja poniżej, która brzmi: „DHL Global | > Logistyka | > Transport towarów”. Nie chcesz, aby Twoi użytkownicy pomylili nawigację okrężną jako główny pasek nawigacyjny.
Włącz pełną ścieżkę nawigacji w swojej nawigacji okrężnej.
Wygooglowałem „Elon University Non-Degree Students”, aby dotrzeć do tej strony docelowej, ale Elon jest mądry, aby włączyć pełną ścieżkę nawigacji, w tym „Home” i „Admissions”. Jeśli pominiesz pewne poziomy, zdezorientujesz użytkowników, a ścieżka breadcrumb nie będzie tak pomocna. Nawet jeśli użytkownicy nie zaczęli od strony głównej, chcesz dać im łatwy sposób na poznanie Twojej witryny od początku.
Postępuj od najwyższego poziomu do najniższego.
Ważne jest, aby Twoja ścieżka nawigacyjna była od lewej do prawej, gdzie najbliższe łącze po lewej stronie to strona główna, a najbliższe łącze po prawej to bieżąca strona użytkownika. Badanie przeprowadzone przez Nielsen Norman Group wykazało, że użytkownicy spędzają 80% czasu przeglądając lewą połowę strony i 20% oglądając prawą połowę, co stanowi silny argument za projektowaniem od lewej do prawej. Dodatkowo, link znajdujący się najbliżej lewej strony będzie wyświetlany jako początek łańcucha, więc chcesz, aby była to strona najwyższego poziomu.
Utrzymuj tytuły okruszków chleba spójne z tytułami stron.
Aby uniknąć zamieszania, będziesz chciał zachować spójność z tytułami stron i okruszków chleba, szczególnie jeśli celujesz w określone słowa kluczowe w tych tytułach. Chcesz również wyraźnie powiązać swoje tytuły okruszków do strony. Jeśli tytuł breadcrumb nie ma linku, zrób to wyraźnie. Nestle skutecznie etykietuje swoje tytuły breadcrumb, aby dopasować je do tytułów stron. Na przykład „Obszary wpływu & zaangażowania” brzmią tak samo w nagłówku nawigacyjnym, jak i na stronie.
Nestle dobrze radzi sobie również z odróżnianiem łączy od nie-łączy za pomocą różnych kolorów – łącza są niebieskie, podczas gdy nie-łącza pozostają szare.
Wykaż się kreatywnością przy projektowaniu.
Tradycyjna nawigacja w nagłówku wygląda następująco: Home > About Us > Careers. Nie musisz jednak podążać tradycyjną ścieżką, jeśli uważasz, że inny projekt mógłby bardziej przemówić do Twoich odbiorców lub lepiej wyglądać w Twojej witrynie.
Na przykład Target używa nawigacji w formie okruszków na swoich stronach produktów (bo kto by się nie zgubił w wirtualnej sekcji butów?), ale używa symboli „/” i prostego czarno-szarego tekstu. W tym przypadku, subtelna odmiana projektu ma sens dla estetyki ich witryny.
Zachowaj czystość i porządek.
Twoja nawigacja okrężna jest po prostu pomocą dla użytkownika i idealnie nie powinna być zauważona, chyba że użytkownik jej szuka. Z tego powodu, nie chcesz zagracać nawigacji okrężnej niepotrzebnym tekstem.
Eionet, na przykład, mógłby się obejść bez tekstu „Jesteś tutaj”. Tekst ten, choć miał być pomocny, zagraca stronę. Przy odpowiednim projekcie, nawigacja powinna być wystarczająco zauważalna bez wprowadzenia.
Zastanów się, jaki typ nawigacji po okruszkach ma największy sens dla Twojej witryny.
Istnieje kilka różnych typów okruszków, których możesz użyć — oparte na lokalizacji, oparte na atrybutach i oparte na historii. Okruszki oparte na lokalizacji pokazują użytkownikowi, gdzie się znajduje w hierarchii witryny. Okruszki oparte na atrybutach pokazują użytkownikom, do jakiej kategorii należy ich strona. Wreszcie, okruszki oparte na historii pokazują użytkownikom konkretną ścieżkę, którą przebyli, aby dotrzeć do bieżącej strony.
Bed Bath & Beyond używa nawigacji opartej na atrybutach, aby pokazać użytkownikom, do której kategorii należy ich strona produktu, dzięki czemu użytkownicy mogą kliknąć z powrotem do „Kuchni” lub „Małych urządzeń”, aby przejrzeć podobne przedmioty. Ten typ nawigacji po okruchach chleba jest najbardziej efektywny dla klientów Bed Bath & Beyond. Tworząc nawigację okrężną, zastanów się, co jest najbardziej przydatne dla odwiedzających Twoją witrynę.
Znaj swoją publiczność.
Najlepsze praktyki w zakresie nawigacji okrężnej nakazują projektantom stron internetowych umieszczanie nawigacji na górze strony — ale Apple, jedna z najbardziej wartościowych firm wszech czasów, przeczy tej logice, umieszczając nawigację okrężną na dole swojej witryny. Ostatecznie, najważniejsze jest, abyś znał swoją publiczność. Klienci Apple’a są zazwyczaj obeznani z technologią i prawdopodobnie znaleźliby nawigację, gdyby jej potrzebowali. Weź pod uwagę potrzeby swoich klientów i wdróż testy A/B, jeśli nie jesteś pewien.
Ostatecznie, nawigacja breadcrumb jest skutecznym narzędziem ułatwiającym poruszanie się po witrynie, ale chcesz przestrzegać najlepszych praktyk projektowania, aby upewnić się, że wykorzystujesz pomocność tego narzędzia. Aby uzyskać dodatkowe porady dotyczące UX, zapoznaj się z „The Ultimate Guide to UX Design”.
