Broszura internetowa poprawić wrażenia użytkownika zachęcanie użytkowników do głębszego wglądu w hierarchię witryny, a jednocześnie informowanie odwiedzających dokładnie o tym, gdzie się znajdują na danej stronie. Google schemat breadcrumb to kolejny cenny powód do ustawienia bułki tartej. Ale współczynnik projektowania jest zawsze podchwytliwy, więc pomaga studiować przykłady i zbierać pomysły.

To są niektóre z moich ulubionych stylów breadcrumb i powinny one stanowić dobry punkt wyjścia dla nowych projektów.

1. Wayfair

Strona internetowa Wayfair ma wiele racji, a cały ich UX jest fenomenalny od strony do strony. Jedną z rzeczy, które naprawdę lubię, to ich styl nawigacyjny, ponieważ nie jest zbyt duży, ale też nie za mały i nie rzucający się w oczy.

Te okruchy znajdziesz na stronach produktów i strony kategorii więc podążają za tobą wokół całej witryny. Pozwala to przeskoczyć kategorię lub dwie z dowolnej szczegółowej strony.

Pasek nawigacyjny ma swoją własną małą sekcję pod nawigacją z innym kolorem BG. Nie natrętne, ale nie trudne do znalezienia. Świetny styl projektowania i jeden z moich ulubionych.

2. Wsparcie Google

Inną oczywistą wzmianką jest Google, ponieważ są one znane niesamowita praca UX . Ścieżki nawigacyjne znajdziesz w większości produktów Google z warstwowymi stronami, a jedną z najlepszych jest Wsparcie Google teren.

Ich strony pomocy oferują porady dotyczące wszystkiego, od schematu do analizy i narzędzia Search Console. Każda strona ma bułkę tartą, a te okruchy zajmują podobną przestrzeń jak nagłówek strony, więc są wyraźnie widoczne.

Zauważ, jak te linki ładnie się łączą, nie skacząc ze strony. Czują się bardzo naturalnie w projekcie, a to powinno być zawsze celem przy tartej bułce.

3. Dokumenty MSDN

Istnieje prawdziwa wyjątkowa funkcja przewijania w pliku Dokumenty MSDN które bardzo lubię. Ma wszystkie typowe cechy konstrukcyjne, takie jak ikony strzałek i linki jakościowe, ale końcowe łącze w łańcuchu ma niestandardowe rozwijanie z dodatkowymi stronami.

Nigdy wcześniej nie widziałem tego w żadnym projekcie z breadcrumb, ale jest to niezwykle cenne dla użytkownika. Zazwyczaj wymaga to innego menu nawigacyjnego, aby uzyskać dostęp do tych linków, ale w witrynie takiej jak Microsoft jest tak wiele stron do przejścia.

Nie wspominając już o tym, że dokumentacja może być dość skomplikowana, więc nie jest to najłatwiejsza rzecz do stworzenia bułki tartej. Ta technika jest genialna i warto ją wykorzystać, jeśli masz skomplikowaną hierarchię w swojej witrynie.

4. Apple

Na stronie Apple widziałem mnóstwo bułek tartych na wielu stronach, takich jak strony sklepów internetowych i strony produktów. Ale jednym drobnym szczegółem, który wpadł mi w oko, jest obszar stopki z małą bułką nad ich dolnymi ogniwami.

Apple to ogromna firma z wieloma stronami i zasobami. Tą bułkę tartą warto dodać również na górze strony, ale z pewnością nie zaszkodzi to być blisko dna.

Zachęcam projektantów do wypróbowania tego i zobaczenia, jak to działa. Stopka breadcrumbs z pewnością nie jest normą, ale pomaga w nawigacji wizualnej.

5. TechRadar

Większość elementów nawigacyjnych, które znajduję, zwykle znajduje się w witrynach firmowych lub sklepach e-commerce. Ale blogi często mają też własną bułkę tartą, a dobrym przykładem jest blog Strona z artykułem TechRadar .

Każde menu jest dość małe, zawiera link bezpośrednio do kategorii głównej i kopię tytułu artykułu. W przypadku tego typu blogów trudno jest uzasadnić bułkę tartą, ponieważ nie ma w niej zbyt wiele hierarchii.

Ale działa to dobrze, jeśli nie masz innego miejsca, aby dodać kategorię artykułu na stronę.

6. TutsPlus

Aby uzyskać bardziej szczegółowy projekt breadcrumb sprawdź Blog TutsPlus . Każdy artykuł zawiera małą nawigację u góry strony, w tym kategorie podstawowe i dodatkowe.

Bardzo lubię ten projekt, ponieważ naturalnie wtapia się w nagłówek strony. Zamiast więc powielania nagłówka w bułce tartej i tagu nagłówka, łączy to wszystko w jeden element, dzięki czemu

nagłówek jest częścią menu nawigacyjnego.

Zwróć uwagę, że nie używa on właściwego schematu Google, więc nie pojawia się w wynikach wyszukiwania w bułce tartej. Ale biorąc pod uwagę, że ledwo wpływa na CTR, cenię projekt i użyteczność na stronie znacznie więcej niż korzyści SEO (lub ich brak).

7. Coolspotters

Tradycyjna bułka tarta zazwyczaj zawiera kilka symboli tekstowych, takich jak przedni ukośnik lub prawy wspornik strzałki (>). Działają, ponieważ są używane od dziesięcioleci, a użytkownicy znają je.

Ale zawsze lubię oglądać inne trendy w zakresie projektowania menu breadcrumb Coolspotters . Używają niestandardowych odnośników do menu nawigacyjnego, które mają strzałki wbudowane w elementy linków.

Możesz znaleźć mnóstwo style breadcrumb o otwartym kodzie źródłowym tak jak dla twojej własnej strony. To świetny sposób na odświeżenie tego bardzo tradycyjnego elementu strony.

8. MarketWatch

Powrót do podstaw to internetowa strona z wiadomościami Zegarek rynku . Wszystkie ich posty wewnętrzne funkcje nawigatora nawigacyjnego z ikonami prawej strzałki wskazującej dość mały tekst.

W tym przypadku myślę, że mały tekst działa dobrze. Używanie bułki tartej nie jest trudne, ale wydaje się mniejsze i mniej znaczące niż reszta strony.

Blogi i witryny z wiadomościami działają lepiej dzięki mniejszej bułce tartej, ponieważ głównym celem jest treść. Wciąż fajnie jest je dopasować, a ten wzór jest świetnym przykładem.

9. Amazon

Wszyscy kochają Amazon za ich ogromny ekwipunek i bezpłatną wysyłkę. Ale mają też fantastyczną stronę i nie ma mowy, abym mógł pominąć ich projekt.

Wiele strony produktów mieć zestaw elementów nawigacyjnych w pobliżu bardzo górnej nawigacji. To zawsze jest bardzo długie, ponieważ kategorie Amazon stają się głębsze. Jest to cenne dla konsumentów, aby przekonać się, które kategorie warto przeglądać i które są cenne dla projektantów / webmasterów w badaniu ogromnej struktury produktów Amazon.

Ale jeśli przewiniesz na każdej stronie produktu, znajdziesz sekcję "Informacje o produkcie" lub "szczegóły produktu" z listą najlepszych sprzedawców.

Ta funkcja wykorzystuje łącza do stron nawigacyjnych, aby pokazać, gdzie produkt był sprzedawany najlepiej, i zachęca odwiedzających do kliknięcia w te powiązane kategorie.

Cała bułka tarta Amazona jest zadziwiająco długa, więc warto się ich nauczyć, jeśli masz stronę z bardzo głęboką hierarchią.

10. Etsy

Ogromna internetowa strona e-commerce DIY / crafts Etsy nieustannie rozwija swój projekt. Został założony w 2005 roku i patrząc na stronę, teraz widać, że dokonali dużych zmian w ciągu ostatnich 10 lat.

Jeśli wyewidencjonujesz jakiekolwiek strona kategorii w lewym górnym rogu znajdziesz małe bułki tartej. Nie są tak wyraźne w porównaniu z nawigacją po pasku bocznym, która naprawdę wydaje się być podstawowym sposobem wyszukiwania.

Ale fajnym dodatkowym efektem jest całkowita pozycja przedmiotu w kategorii. Etsy pokazuje ile totalnych przedmiotów jest na sprzedaż w każdym subcat, kiedy zagłębiasz się w stronę.

Jedna rzecz, na którą będę narzekać, to brak bułki na stronach produktów. Wydaje się to być prawdziwym niedopatrzeniem dla interfejsu użytkownika i mam nadzieję, że dodadzą to w przyszłości.

11. LinuxInsider

Ten projekt bułki nie jest szczególnie piękny, ale ma funkcję, która przyciąga moją uwagę.

Zauważycie link "Następny artykuł" u góry każdego z nich LinuxInsider post . Pojawia się bezpośrednio obok menu nawigacyjnego, więc wydaje się, że jest to część nawigacji.

Użytkownicy, którzy wchodzą w interakcję z bułką tartą, zwykle chcą przeglądać te kategorie, więc ten dodatkowy link ma sens. Każdy zainteresowany oprogramowaniem linuksowym może chcieć przejść do następnego artykułu w tej kategorii.

• ← Jaka jest najlepsza muzyka do projektowania?
• Adobe ujawnia tajemnice poczty elektronicznej →