Breadcrumbs – dlaczego to tak ważny element nawigacji po witrynie

„Breadcrumbs” to w dosłownym tłumaczeniu z języka angielskiego „okruszki chleba”. Ale co mogą mieć wspólnego okruchy chleba z Internetem? Otóż tym terminem określa się istotne elementy dobrze zaprojektowanej strony internetowej. Czym są, jakie jest ich działanie i jakie powinny być prawidłowe „okruszki”? Wyjaśniamy i doradzamy – zobacz już teraz!

Co to jest breadcrumbs?

Aby użytkownik chętnie odwiedzał stronę internetową, musi ona ułatwiać mu poruszanie się po niej oraz być przyjazna. W tym celu w interfejsie użytkownika powinna znajdować się jego aktualna lokalizacja w strukturze witryny – to właśnie owe „okruszki chleba”. Pozwalają one prześledzić drogę do aktualnego miejsca, w którym użytkownik się znajduje. Nazwa nawiązuje oczywiście do doskonale znanej na całym świecie baśni o Jasiu i Małgosi, którzy okruszkami właśnie oznaczali drogę do chatki czarownicy.

Breadcrumbs określa się także nazwą „menu okruszkowe”. Może być ono wykonane na bazie jednego z trzech rozwiązań:

• struktura strony – jest to najczęściej spotykany rodzaj menu okruszkowego; pokazywana w nim jest pełna droga użytkownika według struktury samej witryny. Nie tylko umożliwia łatwe cofnięcie się do wybranego miejsca, ale również pozwala na poznanie hierarchii poziomów strony;
• atrybuty – tutaj pokazywane są atrybuty, z jakich korzystał użytkownik. Mogą być to na przykład filtry pokazujące tylko treści/produkty danego rodzaju;
• historia – ten rodzaj okruszków jest najrzadziej stosowany przez twórców witryn. Nie przedstawia ani atrybutów, ani struktury, zamiast tego pokazując wyłącznie podstrony odwiedzone przez użytkownika. Można powiedzieć, że to rozbudowana funkcja „wstecz”, jaka znajduje się w każdej przeglądarce internetowej.

Menu okruszkowe ma dwie bardzo ważne zalety. Pierwsza to pomoc użytkownikowi w nawigacji na stronie. Druga – pozytywny wpływ na SEO. Zanim jednak opiszemy szerzej obie te korzyści, najpierw warto pokazać przykład zastosowania każdego z rodzajów menu okruszkowego.

Breadcrumbs oparty na strukturze strony

Menu okruszkowe oparte na strukturze strony pokazuje ścieżkę użytkownika krok po kroku. Najbardziej użyteczne jest wówczas, gdy strona jest rozbudowana, znajdują się na niej liczne kategorie i podstrony. Wówczas breadcrumbs pozwala na łatwiejsze orientowanie się w ułożeniu na stronie poszczególnych kategorii oraz powiązań między nimi.

Weźmy za przykład sklep muzyczny online. Użytkownik wchodzi na stronę główną, wybiera gatunek muzyki, a następnie nośnik, który go interesuje i dodatkowy parametr. Jego droga jest następująca:

• strona główna –> jazz –> płyta CD –> nowości

Menu okruszkowe pokazuje mu te cztery kroki, pozwalając cofnąć się zarówno do kategorii, aby wybrać dodatkowy parametr, inny nośnik, jak również do strony głównej, aby zmienić gatunek muzyki. Każdy z kroków powinien mieć zatem postać hiperlinku, który pozwoli na łatwą zmianę obecnej lokalizacji.

Breadcrumbs oparty na atrybutach

Breadcrumbs oparty na atrybutach jest bardzo podobny do strukturalnego. W wymienionym przykładzie atrybuty mogą być takie, jak gatunek muzyki, nazwiska wykonawców lub grup muzycznych. Jednak jest to nieco bardziej skomplikowane, niż mogłoby się wydawać. Gdy mamy np. zespół jazzowy „ABC”, internauta wpisze do sklepowej wyszukiwarki tę nazwę i wówczas menu okruszkowe będzie wyglądać następująco:

• strona główna –> jazz –> ABC

Ogólnie wygląda to podobnie jak w przypadku menu opartego na strukturze strony, ale daje mniejsze możliwości interakcji użytkownika. Oczywiście aby korzystanie z tego breadcrumbs miało sens, zespół ABC musi być przypisany w strukturze sklepu do kategorii „jazz”.

Breadcrumbs oparty na historii

Ten rodzaj breadcrumbs jest bardzo nieskomplikowany i nie daje za dużego pola do popisu. Właściwie nie daje żadnego. Po prostu rejestrowane są tu kolejne kroki użytkownika, poczynając od strony, od której zaczął przeglądanie witryny. Można to przedstawić bardzo prostym schematem:

• strona 1 –> strona 2 –> strona 3

…i tak dalej. Nie różni się to niczym od cofania za pomocą przycisku w przeglądarce lub przeglądania historii. Jeśli użytkownik dostanie się na stronę, która w strukturze umieszczona jest pod kilkoma warstwami (w powyższym przykładzie będą to gatunek muzyki, rodzaj nośnika oraz czas wydania płyty), wówczas nie będzie mieć dostępu do innych lokalizacji. Czyli po wpisaniu w wyszukiwarkę „płyta ABC” i przejściu na jej stronę zobaczy taką ścieżkę:

• strona główna – wyszukiwanie – płyta ABC

Jest to nie tylko niewygodne dla użytkownika, ale również nie wnosi wiele do SEO strony.

Dlaczego breadcrumbs są tak ważne pod kątem SEO?

Czy zaprezentowane powyżej rozwiązania naprawdę mają jakikolwiek wpływ na SEO? Odpowiedź jest oczywista – jak najbardziej. Zastosowanie breadcrumbs przynosi konkretne, wymierne korzyści i może realnie pomóc w pozycjonowaniu danej witryny. Dlaczego?

Przede wszystkim same nazwy elementów menu okruszkowego będą zaindeksowane przez roboty. Pozostając przy powyższym przykładzie, jednym ze słów kluczowych do zaindeksowania będzie jazz. Jednak można nazwać kategorie bardziej kreatywnie i przyjaźniej pod kątem wyszukiwarek. W jaki sposób? Na przykład płyty jazzowe albo muzyka jazzowa.

Wszystko zależy od tego, na jakie frazy się postawi, aby promować stronę. Nie należy jednak zapominać, że powinny być one przyjazne i zrozumiałe dla użytkownika – roboty czy nie, to właśnie żywe osoby i ich odczucia są najważniejsze. Nie można także zapomnieć, że każdy krok w menu okruszkowym to również link, a więc otrzymuje się efekty SEO wypływające z wzajemnego linkowania pomiędzy stronami, co jest jedną z podstawowych rzeczy przy optymalizacji witryn.

Jak breadcrumbs wpływa na UX?

Skoro już wiemy, czym są „okruszki chleba” oraz jak działają, czas przyjrzeć się, gdzie powinny być umieszczone na stronie oraz jak mają wyglądać? Menu tego typu powinno być umieszczone w miejscu widocznym dla użytkownika, aby ten nie miał problemów z wybraniem kroku, na który chce powrócić.

Zazwyczaj umieszcza się je w lewym górnym rogu witryny – co jest związane z tym, że powyżej znajduje się adres, a więc użytkownicy chcący zmienić swoją lokalizację odruchowo patrzą w to właśnie miejsce.

UX Designer może dodać menu okruszkowe przy wykorzystaniu odpowiedniej wtyczki. Jeśli jednak z tych czy innych powodów nie da się jej użyć, wówczas można wpisać funkcję ręcznie w strukturę kodu. Odpowiednie poradniki na ten temat znajdują się w sieci.

Czego nie powinno się robić przy breadcrumbs?

Jak i każdy inny aspekt tworzenia stron internetowych, także i przy breadcrumbs można popełnić kilka błędów. Na szczęście nie ma ich zbyt wiele, dlatego łatwo zapamiętać, czego nie powinno się robić przy tworzeniu i wdrażania menu okruszkowego:

• menu okruszkowe nie zastąpi nawigacji – zdarzają się przypadki, że twórca strony dochodzi do wniosku, że skoro użytkownik ma menu okruszkowe, inna nawigacja nie jest mu potrzebna. Jest to podejście wręcz absurdalne i należy go unikać;
• literówki w nazwach „okruszków” – niestety, nikt nie jest doskonały i od czasu do czasu każdemu się to zdarzy; po wdrożeniu breadcrumbs należy sprawdzić wszystkie możliwe kroki i zobaczyć, czy gdzieś nie przytrafił się „kiks klawiatury”; o ile literówka samemu użytkownikowi nie przeszkadza (choć oczywiście na pewno zwróci on na nią uwagę), o tyle roboty nie zaindeksują jej poprawnie.

Do jakich witryn nie pasują breadcrumbs?

Teoretycznie „okruszki chleba” pasują do wszystkich witryn, więc pytanie tego typu może dziwić. Sytuacja ulega jednak zmianie, gdy dotyczy witryn niewielkich, mających tylko jeden lub dwa poziomy. Przyjmuje się zasadę, że menu okruszkowego nie wprowadza się do niewielkich stron – ponieważ nie ma ono po prostu sensu, gdyż trudno się na takiej stronie zgubić.

Jeśli jednak witryna ma trzy i więcej poziomów kategorii, wtedy breadcrumbs pasuje jak najbardziej. Pomoże zarówno samej stronie, jak i użytkownikowi – i to bez ponoszenia dodatkowych kosztów. Dlatego jeśli odpowiadasz za taką witrynę, a brak na niej jeszcze „okruszków”, czas najwyższy, aby zmienić ten stan rzeczy.