Breadcrumbs Web Design Examples and Best Practices

Inspiracja – Websites ExamplesAndrian Valeanu – June 14, 2013 – 6 minutes READ

Breadcrumbs są bardzo ważnym elementem w projektowaniu stron internetowych. Aby to zrobić, można wdrożyć breadcrumbs w swoich projektach stron internetowych. To powiększa standard swojej stronie internetowej, a tym samym przyciąga widzów do witryny. Zasadniczo, są to linki oparte na tekście. Normalnie, czcionka okruszków chleba jest kilka punktów mniejszych niż oryginalny rozmiar tekstu treści strony internetowej.

Gdy budujesz stronę internetową, co powinno być twoim głównym celem? Oczywiście, jest to użyteczność strony. Czy to witryna edukacyjna, eCommerce lub witryny informacyjnej; nie można ignorować znaczenie użyteczności strony internetowej.

Odwiedzający muszą skorzystać z informacji z witryny w sposób bezproblemowy. Jeśli jest to witryna eCommerce to widzowie nie powinni napotykać trudności, aby dowiedzieć się ich preferowanych produktów. Jeśli znajdą to czasochłonne, aby uzyskać odpowiednie informacje z witryny, nie zawaha się opuścić witrynę i przejść do strony wyszukiwania ponownie, aby znaleźć inną konkurencyjną stronę internetową, która jest bardziej przydatna dla nich. Stąd ważne jest, aby witryna użyteczne i skuteczne dla odwiedzających.

Breadcrumbs, jak sama nazwa wskazuje, pozostawia ślad dla widzów witryny, aby wrócić do miejsca przeznaczenia w prostszy sposób. Nazwa pochodzi z bajki „Jaś i Małgosia”. Okruszki chleba są znane jako linki tekstowe, które zazwyczaj znajdują się na stronach internetowych w górnej części głównej części strony; poniżej nagłówka lub/i wszelkich grafik banerowych strony, ale powyżej treści. Breadcrumbs są zaplanowane zgodnie ze strukturą strony witryny.

Na przykład, jeśli masz sklep eCommerce i widz jest na stronie dla lodówek, struktura szlaku breadcrumb pokaże główne kategorie prowadzące do strony i z powrotem do strony głównej zgodnie z ich właściwej kolejności wyglądu strony. Stąd, widzowie znajdą breadcrumb coś jak „Strona główna>Urządzenia elektroniczne>Urządzenia domowe>Lodówki”. Ścieżka ta jest zazwyczaj oparta na określonej strukturze folderów w systemie backend strony internetowej. Użytkownik może przejść do dowolnej strony ścieżki poprzez kliknięcie na tekst. Na przykład, jeśli chcesz przejść do strony głównej, możesz bezpośrednio przejść tam klikając na link „home” na ścieżce breadcrumb.

Breadcrumbs są głównie używane jako menu nawigacyjne. Istnieje kilka sposobów, dzięki którym użytkownik może poruszać się po różnych stronach witryny. Menu nawigacyjne muszą być przyjazne dla użytkownika i proste. Stąd breadcrumb jest genialnym pomysłem jako menu nawigacyjne.

Nie tylko jako menu nawigacyjne, ale także dla optymalizacji pod kątem wyszukiwarek jest to korzystne. Szczególnie w eCommerce, gdzie konkurencja może być wysoka, uzyskanie wysokiej pozycji w wyszukiwarkach jest ważne. Ponieważ okruszki chleba są oparte na strukturze folderów na stronie internetowej, umieszcza słowa kluczowe w większej liczbie miejsc na całej stronie internetowej. Stąd, jeśli „wełniane poncho” jest popularnym terminem wyszukiwania w Twojej branży Breadcrumb stworzy jeszcze jeden link wewnętrzny do odpowiedniego słowa kluczowego w Twojej witrynie.

Jednakże, podczas gdy mamy do czynienia z menu Breadcrumb, jedna rzecz, którą musisz zachować w umyśle, ten rodzaj nawigacji powinien być traktowany jako dodatkowa funkcja w celu zwiększenia atrakcyjności witryny i nie powinien zastępować przydatnych menu nawigacji podstawowej.

Wyszukując kilka typów menu breadcrumb w Internecie można znaleźć menu nawigacyjne oparte na lokalizacji, oparte na atrybutach i oparte na ścieżce.

Komponent jest wykonany w czarnym kolorze, aby naturalnie wyróżniać się z jasnego tła i skupić się na nim. Teksturowane płótno ładnie współgra z ogólnym projektem artystycznym. Linki są szybko zauważalne dzięki ostrej i formalnej typografii, a małe odstępy pomiędzy każdym elementem zwiększają czytelność.

Order

Podczas gdy wszystkie elementy UI są oznaczone subtelnymi gradientami, okruszki chleba, przeciwnie, trzymają się bardziej czystych, płaskich elementów i monochromatycznego tła. Niemniej jednak, to idzie całkiem dobrze z innymi i uzupełnia estetykę dzięki podobnej kolorystyce. Przycisk Home dodaje klasycznego uroku. Jasne odcienie są używane do bardziej efektywnego oznaczania tytułów.

Breadcrumbs autorstwa Roba Doziera magnetyzuje niezwykle eleganckim, czystym i świeżym wyglądem. Choć nawigacja wykonana jest w jasnej kolorystyce, to i tak przyciąga wzrok. Subtelny cień nadaje boxom w kształcie strzałek dodatkowego ciężaru wizualnego, pomagając im tym samym wyróżnić się z zaszumionego tła. Aby wyraźnie zaznaczyć aktualną pozycję, ostatnia pozycja jest przedstawiona w postaci prostego napisu.

Breadcrumbs/Error autorstwa Jasona Mayo to opływowy pasek nawigacyjny pozbawiony luk i efektownych funkcji. Harmonijnie wtapia się w kompozycję, stając się istotnym detalem UI. Na ratunek przychodzi jednak efekt tłoczenia. Dzięki niemu każdy blok i tytuł zyskuje na wyrazistości i ostrości. Fiolet, który jest częścią podstawowej palety kolorów, został zastosowany do podkreślenia właściwej strony.

Podstawy projektowania

Allison House pozbywa się wszystkich klasycznych detali w kształcie strzałek i przechodzi do bardziej uproszczonych i eleganckich cech. Dzięki temu komponent wygląda naturalnie i intuicyjnie i ma silny styl edukacyjny, który jest wymagany dla tego projektu. Każdy blok zawiera tytuł, który jest wzmocniony przez towarzyszącą mu ikonę.

Podobnie jak w poprzednim przykładzie, Michal Vasko układa wszystkie linki w rzędzie, porzucając detale graficzne na rzecz typografii. Elementy oddzielone są malutkimi minimalistycznymi strzałkami, które dzięki niebieskiemu kolorowi dyskretnie wskazują kierunek. Ponieważ jednak element ten jest płynnie wkomponowany w projekt, a szary kolor nie kontrastuje z tłem, można go łatwo zgubić z pola widzenia.

JomSocial Template

JomSocial Template to już zupełnie inna sprawa. Nawigacja breadcrumbs ma dużą wagę wizualną dzięki stosunkowo dużemu rozmiarowi i jasnej kolorystyce. Rzuca się w oczy nie przytłaczając użytkowników. Mohd Izuddin Helmi manipuluje charakterystycznym krojem pisma, wewnętrznym cieniem, solidnym przyciskiem home i kilkoma delikatnymi gradientami, aby osiągnąć imponujący rezultat.

Jest to dość podstawowy przykład, ale ma prawo istnieć. Jest to najprostszy sposób na pokazanie użytkownikom ich ruchów po projekcie. Choć pozbawiony jest pięknego wyglądu i wymaga nieco dopracowania, to jednak spełnia swoją rolę całkiem nieźle. Zawiera wszystkie wspólne cechy: tytuły, strzałki wskazujące kierunek, a nawet kolor podświetlenia, dostarczając w ten sposób odwiedzającym realnego asystenta nawigacji.

Zarządzanie Galerią Zdjęć

Okruszek chleba daje elegancję i przejrzystość. Ma czysty i szczegółowy wygląd, który uzyskuje się dzięki sprytnej pracy z typografią, białymi przestrzeniami i tłem. Ostatni element ma odważniejsze kształty liter w kontraście do innych, aby skierować uwagę na odpowiednią stronę. Chociaż nawigacja zachowuje uproszczony charakter, ma jednak urok i pasuje jak ulał do tego miejsca.

Gamerscouch.com redesign

Aaron Moody czujnie stworzył front-end strony, gdzie okruszki chleba zajmują należne im miejsce i mają schludny, wyrafinowany i modny wygląd. Nawigacja dopełnia całości i oddaje nastrój projektu. Ciemna kolorystyka z odrobiną ciepłego odcienia pomarańczy podkreśla komponent i wywołuje pozytywne emocje.

Wniosek

Jako opcjonalna pomoc nawigacyjna, która nie tylko wspiera menu główne, ale także ujawnia hierarchię i pokazuje ścieżkę do bieżącej sekcji, okruszki chleba są potężnym narzędziem zwiększającym doświadczenie użytkownika.

Jednakże, niestety, dość często pozostają pomijane w projektowaniu, choć powinny być traktowane jak każdy inny zwykły element UI. Powyższe przykłady zachęcają użytkowników do tworzenia pięknych i intuicyjnych okruszków chleba, które spełnią swoją misję, jak również nie będą „czarną owcą” w projekcie.

.