Сухари панировочные что это такое: Панировочные Сухари – Простой рецепт от Бабушки Эммы

Сообщить об ошибке

© ООО «ЕДА.

Сухари панировочные – описание, состав, калорийность и пищевая ценность

Измельченный в крошку пшеничный или ржаной хлеб. Используется для приготовления жареных блюд, помогает образовывать вкусную корочку, сохраняет сок внутри, а также помогает удерживать форму.

Панировочные сухари можно купить в магазине, а можно приготовить самостоятельно.

Калорийность

В 100 граммах продукта содержится 395 кКал.

Использование

В панировочные сухари обмакивают кусочки мяса, рыбы, овощей, котлеты и пр. Также они используются при приготовлении штруделя.

Стоит отметить, что сухари дают хрустящую, довольно толстую корочку, в то время как мука – более нежную панировку. Поэтому панировочные сухари нужно использовать там, где это прямо указано в рецепте. При приготовлении некоторых блюд они не годятся в качестве панировки, поскольку быстро подгорают и не покрывают блюдо полностью.

Как выбирать

Для приготовления панировочных сухарей может использоваться заплесневелый черствый хлеб. Кроме того, в них могут добавлять химические вещества, продлевающие срок годности или улучшающие вкус сухарей. Это негативно воздействует на здоровье, поэтому панировочные сухари лучше готовить дома или выбирать у проверенных производителей. Они должны быть упакованы в герметичную упаковку, а срок годности не должен превышать 1 месяц.

Сухари панировочные: состав, калорийность и пищевая ценность на 100 г

Общая информация

Вода 6,51 г

Энергетическая ценность 395 ккал

Энергия 1653 кДж

Белки 13,35 г

Жиры 5,3 г

Неорганические вещества 2,87 г

Углеводы 71,98 г

Клетчатка 4,5 г

Сахар, всего 6,2 г

Углеводы

Глюкоза (декстроза) 1,82 г

Фруктоза 2,46 г

Мальтоза 1,92 г

Крахмал 59,66 г

Минералы

Кальций, Ca 183 мг

Железо, Fe 4,83 мг

Магний, Mg 43 мг

Фосфор, P 165 мг

Калий, K 196 мг

Натрий, Na 732 мг

Цинк, Zn 1,45 мг

Медь, Cu 0,255 мг

Марганец, Mn 0,919 мг

Селен, Se 25,2 мкг

Витамины

Тиамин 0,967 мг

Рибофлавин 0,403 мг

Никотиновая кислота 6,634 мг

Пантотеновая кислота 0,552 мг

Витамин B-6 0,121 мг

Фолаты, всего 107 мкг

Фолиевая кислота 82 мкг

Фолиевая кислота, пищевая 25 мкг

Фолиевая кислота, DFE 164 мкг

Холин, всего 14,6 мг

Витамин B-12 0,35 мкг

Витамин Е (альфа-токоферол) 0,08 мг

Токоферол, бета 0,04 мг

Токоферол, гамма 0,76 мг

Токоферол, дельта 0,18 мг

Токотриенол, альфа 0,01 мг

Токотриенол, гамма 1,04 мг

Витамин К (филлохинон) 6,6 мкг

Витамин K1 (дигидрофиллохинон) 1,1 мкг

Липиды

Жирные кислоты, насыщенные 1,203 г

16:0 0,674 г

18:0 0,529 г

Жирные кислоты, мононенасыщенные 1,023 г

18:1 недифференцированно 1,023 г

Жирные кислоты, полиненасыщенные 2,06 г

18:2 недифференцировано 1,874 г

18:3 недифференцированно 0,186 г

Фитостеролы 8 мг

Аминокислоты

Триптофан 0,162 г

Треонин 0,427 г

Изолейцин 0,544 г

Лейцин 0,963 г

Лизин 0,43 г

Метионин 0,232 г

Цистин 0,278 г

Фенилаланин 0,655 г

Тирозин 0,398 г

Валин 0,6 г

Аргинин 0,552 г

Гистидин 0,296 г

Аланин 0,483 г

Аспарагиновая кислота 0,766 г

Глутаминовая кислота 4,123 г

Глицин 0,488 г

Пролин 1,366 г

Серин 0,662 г

описание и свойства, приготовление панировочных сухарей

Панировочные сухари представляют собой перемолотые в крошку сухари из пшеничного или ржаного хлеба.

Используют панировочные сухари так же и в качестве присыпки под начинку, например при приготовлении яблочного штруделя.

По сравнению с панировкой мукой, панировка сухарями более калорийна, и придает готовому блюду хрустящую золотистую корочку.

Использовать панировочные сухари следует только в случае, если они явно предписаны рецептом. Они склонны к подгоранию, а на некоторых продуктах – не обеспечивают образования надежного и герметичного покрытия.

Выбор панировочных сухарей

При выборе готовых панировочных сухарей следует быть внимательным: некоторые производители используют для их приготовления заплесневевший хлеб, а так же различные добавки, удлиняющие срок хранения.

Все это не слишком полезно для здоровья, так что покупать готовые панировочные сухари следует у проверенного производителя. Стоит так же обратить внимание на то, чтобы сухари были герметично упакованы, а срок хранения был не больше, чем 1 мес.

Панировочные сухари могут быть перемолоты в разной степени, что указывается на упаковке. Знатоки кулинарии рекомендуют использовать панировочные сухари среднего размера, с диаметром крошки приблизительно 1,5 мм. Более крупная крошка хуже удерживает форму, и может расплыться по сковороде, а более мелкая – сделает блюдо слишком сухим.

Приготовление

Чтобы не рисковать, испытывая добросовестность производителя, панировочные сухари можно приготовить самостоятельно. Вот один из вариантов:

1. Разогрейте духовку до температуры +180 °С.
2. Разложите ломтики свежего или же черствого хлеба прямо на полке, сколько поместится.
3. Обжарьте, пока ломтики не станут сухими и хрустящими, но не зажаривайте до коричневого цвета. 7-10 минут должно быть достаточно, но, в любом случае за ними нужно внимательно следить.
4. Раскрошите полученные ломтики. Проще всего сделать это при помощи кухонного комбайна или блендера, добавляя в него мелкие ломтики небольшими порциями, и убирая крошки в контейнер для хранения. Можно также раскрошить и вручную скалкой на разделочной доске. В последнем случае рекомендуется собрать ломтики в мешок, и только потом использовать скалку: крошки сразу будут собраны, а не разлетятся по всему столу.

Хранение

Хранить панировочные сухари следует в достаточно темном и прохладном месте, подальше от свежего хлеба. Самостоятельно приготовленные панировочные сухари следует хранить не более месяца, а покупные – в течение срока, указанного производителем.

Лучшей емкостью для хранения панировочных сухарей является плотно закручивающаяся стеклянная банка, либо же пластиковый контейнер. При негерметичном хранении сухари могут расплыться, впитывая влагу из воздуха, либо же утратить свой аромат, поглощая окружающие запахи.

Белки: 14. 73г. ( ∼ 58,92 кКал)

Жиры: 5.85г. ( ∼ 52,65 кКал)

Углеводы: 79.42г. ( ∼ 317,68 кКал)

Панировка: виды панировки, секреты и тонкости использования

Если панировка кажется вам простым и незначительным этапом готовки – просто потому что так указано в рецепте, то это большое заблуждение. Панировка способна не только придать блюду аппетитную румяную корочку, но и сохранить сочность продукта, придать новый оригинальный вкус, аромат и даже консистенцию.

Немного теории….

Панировка – это определенные измельченные продукты или их смесь, которые используются для обваливания мясных, рыбных, овощных заготовок/полуфабрикатов, изделий из теста, фруктов, сыров перед жаркой или запеканием.

Панировка очень важная составляющая блюда. Во время жарки на сковороде продукты теряют влагу, сочность и мягкость, могут пригореть и изменить свою форму. Панировка же действует как защитная оболочка, которая предотвращает испарение жидкости из продуктов, помогает сохранить сочность готового блюда, удержать форму изделий и придать привычным блюдам новые оттенки вкуса.

Существует великое разнообразие панировок, и это не только мука или панировочные сухари. Если хорошо разобраться со всеми видами панировок, то одно и то же блюдо можно приготовить по-разному, не меняя его основной состав, а используя лишь разную панировку.

Первенство занимают измельченный высушенный хлеб, то есть панировочные сухари.

Их можно купить в магазине или сделать самостоятельно дома, измельчив засохшие остатки хлеба (это позволит сэкономить деньги и дать черствому хлебу вторую жизнь). А если к панировочным сухарям добавить определенные специи (например, молотый сухой чеснок), то можно получить отличную ароматизированную смесь. Очень вкусно можно приготовить лосось с хлебной корочкой.

Чаще всего панировочные сухари используются для обваливания мясных и рыбных котлет, биточков, зраз, отбивных, шницелей. Хлебная панировка защищает продукт от высыхания, сохраняет нежную текстуру продукта и придает хрустящую румяную корочку.

Мука

Второе место занимает мука. Причем не только пшеничная, но и кукурузная, рисовая, гречневая и овсяная. В зависимости от вида муки, которая используется для панировки, меняется и общий вид блюда.
Мучная панировка более нежная и мягкая. Оно не дает жесткой корочки, как панировочные сухари, и не так заметно влияет на вкус готового блюда.

Например, если запанировать рыбу перед жаркой в пшеничной или кукурузной муке, то готовая рыбка будет более выигрышнее смотреться в мучной панировке из кукурузной муки – она будет румянее, золотистее и вкуснее.

Жаренные в рисовой муке овощи, мясо и рыба будут невероятно нежными и вкусными.
Овсяная мука наоборот придает блюдам более интересный новый вкус.

Крупы

Крупы – отличный вид панировки. Использовать можно не только привычные крупы, например, манку или овсянку, но и их хлопья – гречневые, рисовые и т.д. Изделия, запанированные в крупах, получаются с плотной “ажурной” корочкой, поэтому блюда можно запекать в духовке, не боясь, что в середине они будут сухие – плотная корочка защищает продукты от потери влаги. Очень эффектно смотрятся приготовленные в панировке из овсяных хлопьев сырники, куриные ножки и котлеты.

Жидкая панировка

Сюда можно отнести взбитое яйцо, отдельно взбитый белок или желток, а также жидкое тесто, то есть кляр.

Блюда, запанированные в жидких ингредиентах, приобретают мягкий воздушный слой и нежный вкус. Например, куриные отбивные получаются очень сочными и мягкими.

Измельченные орехи

Если обвалять мясо, рыбу, овощи и другие продукты в ореховой крошке, то можно получить более питательное блюдо с новыми яркими нотками во вкусе. Например, свиная вырезка в орехах.

Сырная панировка

Придает блюдам пикантный вкус. Но это очень капризная посыпка, которая может прилипнуть к сковороде, поэтому часто тертый сыр смешивают с мукой, крахмалом или хлебными крошками, чтобы панировка лучше держалась на мясных (например, отбивные из свинины с пармезаном) и рыбных продуктах, а также овощах.

Разное необычное

Кунжут, измельченные чипсы, крекеры, попкорн, мак, смесь специй и приправ – экзотические, но очень интересные варианты панировок. Готовые блюда с такой панировкой не только выглядят очень красиво, но и отличаются оригинальным вкусом. Например, если использовать черный кунжут, то можно придать обычному блюду особенный и запоминающийся вид.

Не забывайте также экспериментировать и добавлять к панировке дополнительные ингредиенты: лимонную цедру, корицу, куркуму, сушеные травы (розмарин, тимьян, укроп), сушеный чеснок, имбирь и зелень.

Небольшое количество таких добавок сможет подчеркнуть вкус блюда, придать остроту, пикантность и оригинальный оттенок. Главное, не переборщить и добавлять всего в меру.

Но чтобы панировка хорошо держалась на продуктах недостаточно просто обвалять заготовки в сухарях или кунжуте. Нужно знать…

Итак, для того, чтобы хорошо покрыть продукты панировкой нужно смочить их в жидких ингредиентах – масле, молоке или взбитых яйцах. Чаще всего используется смесь яйца с молоком, или кефиром, или сливками – яичный льезон. Такая болтушка хорошо обволакивает продукты.

Дело в том, что при термической обработке белок свертывается, образуя тонкую пленку, которая защищает блюдо от потери влаги, а хлебные крошки, измельченные орехи или другая панировка служат дополнительным барьером, через который в продукт впитывается меньше масла, сохраняется сочность, первоначальные вкусовые качества и форма изделия.

Панировка может быть одинарной, двойной или тройной.

Иногда достаточно смочить изделия в яйце и обвалять в муке или панировочных сухарях. Но если нужно получить более плотную корочку, тогда лучше покрыть продукт яичной болтушкой, обвалять в панировке и повторить эту процедуру 2-3 раза. Например, смочить отбивную в яйце, обвалять в муке, снова смочить в яйце и хорошо покрыть сухарями или мукой – получается двойная панировка.

Как правило, жарят изделия в панировке на сковороде с большим количеством масла. Для того, чтобы убрать излишки масла, готовые продукты можно складывать на бумажное полотенце или салфетки. Также можно запекать продукты в панировке в духовке – получится менее жирное блюдо с хрустящей корочкой.

Еще полуфабрикаты в панировке можно заморозить, а после обжарить на сковороде. Но следует помнить, что не вся панировка хорошо переносит разморозку. Так, изделия, запанированные в муке, не стоит предварительно размораживать, чтобы мука не размокла и не прилипла к поверхности (доске, тарелке и т. д.) – их лучше медленно жарить в замороженном виде.

Не бойтесь экспериментировать на кухне и пробовать новые сочетания! Пусть использование различных вариантов панировки будет хорошим опытом к достижению кулинарного мастерства.

Панировочные сухари Приправыч Пикантные – «Хорошие сухари для панировки, но мне они показались слишком острыми.+ Рецепт картофельных палочек в панировочных сухарях.»

Всем привет! О продуктах я пишу редко, но сегодня хочу рассказать о панировочных сухарях. Сухари я беру редко, поэтому не посмотрев можно сказать взяла первые, что попались под руку. И то потому что они от фирмы Приправыч. Нравится мне этот производитель, потому все приправы беру только от Приправыча.

Брала я их для того, чтобы приготовить, картофельные палочки с сыром. И когда только распечатала, поняла что это не обычные сухари, а с добавлением перца, чеснока и лука.

Итак, пачка сухарей панировочных объемом 20 грамм. В составе нет ничего необычного.

Сухари панировочные, крахмал картофельный, овощи сушеные(чеснок, лук), черный молотый перец.

Только мне не понятно для чего там крахмал?

А так выглядят сами сухари. Мне показалось, что из черного какого-то хлеба.

Ну и собственно рецепт приготовления картофельных палочек.

Продукты:

• Отварной картофель (обязательно сваренный в мундире)
• Яйца
• Твердый сыр
• Панировочные сухари
• Мука

Все продукты брала на глаз.

Приготовление:

Картошку трем на терке и добавляем в нее яйца, специи по вкусу и муку. Все перемешиваем. Сыр режится не большими брусочками. Затем из картофеля формируются лепешечки и в них заворачивается сыр. Получается картофельная палочка с сыром внутри. Обваливается в панировочных сухарях и жарится на масле.

Из-за того что сухари темные и палочки у меня получились, не золотистые а коричневые. Быстро пожариваются сухари и темнеют.

Сухари эти подойдут больше для мяса или рыбы.

Делала картофельные палочки с обычными сухарями очень понравились. А с этими жарила рыбу.

Всем приятного аппетита!!!

Панировочные сухари Панко рецепт | Гранд кулинар

Японские сухари панко в отличие от обычных панировочных сухарей более крупные и воздушные. Благодаря этому их качеству панированные морепродукты, курица или овощи, получаются более хрустящими и менее жирными, поскольку из пористых сухарей стекает больше масла. Помимо этого закуски, обжаренные в сухарях панко, становятся привлекательнее на вид. Панко очень легко заготовить дома самостоятельно. Это значительно сэкономит ваш бюджет, да и найти их в магазинах порой довольно сложно. Всё что вам понадобится – это пористый белый хлеб без корки. Чтоб крошки получились нужной пушистой структуры, лучше всего натереть хлеб на тёрке, поскольку в блендере или в кухонном комбайне результат не всегда получается удачным. Подсушите хлебные крошки в духовке, но так чтоб они оставались белоснежными, и используйте для хрустящей панировки ваших жареных или запечённых блюд.

Рекомендуем

—

В рецептах используются мерные емкости объемом:
1 стакан (ст.) – 240 мл.
3/4 стакана (ст.) – 180 мл.
1/2 стакана (ст.) – 120 мл.
1/3 стакана (ст.) – 80 мл.
1/4 стакана (ст.) – 60 мл.
1 столовая ложка (ст. л.) – 15 мл.
1 чайная ложка (ч. л.) – 5 мл.

Ингредиенты к рецепту:

Приготовление блюда по рецепту:

1. Натрите хлеб на ручной тёрке или измельчите в блендере в режиме пульс 2 нажатиями. Насыпьте крошки тонким слоем на противень, застеленный бумагой для выпечки.
2. Подсушите их при температуре 60 °С в течение 1 часа – 1 часа 10 минут, или 5 – 7 минут при температуре 150 °С. Следите, чтобы хлебные крошки не подрумянились.


3. Достаньте их из духовки и остудите. Храните панировочные сухари в стеклянной банке.

Сухари панировочные. Калорийность сухарей панировочных

Свойства сухарей панировочных

Пищевая ценность и состав | Витамины | Минеральные вещества

Сколько стоит сухари панировочные ( средняя цена за 1 кг.)?

Москва и Московская обл.

70 р.

Сухари панировочные – это мелкая крошка из сухого в основном белого хлеба. Используется данный продукт в процессе приготовления разнообразных жареных блюд из рыбы, мяса и некоторых видов овощей. Нередко сухари панировочные выступают в качестве посыпки под начинку при приготовлении яблочного штруделя. Несмотря на то, что это довольно распространенный продукт, который легко можно найти практически в любом магазине, некоторые хозяйки предпочитают изготавливать сухари панировочные в домашних условиях.

Панировку кулинары используют ежедневно во время приготовления различных блюд. Так, например, она просто необходима для котлет, выпечки, свежей икры и других продуктов. Несомненно, можно для этих целей использовать муку пшеничную и другие варианты, но вкуснее всего удаются блюда, если при их приготовлении использовать панировку из подсушенного и перемолотого белого хлеба. К тому же калорийность сухарей панировочных значительно выше все той же муки, что говорит о значительной питательной ценности. Сухари панировочные не только скрепляют ингредиенты воедино, но и наделяют готовые блюда хрустящей золотистой корочкой, обогащая внешний вид.

В чем преимущества панировки? Все просто: в процессе приготовления сок, который пропитывают полуфабрикаты, очень быстро выпаривается, и в результате может получиться жесткое и бесформенное блюдо. А сухари панировочные при жарке образуют вокруг продукта плотную оболочку, благодаря которой приготовленное блюдо останется сочным и не потеряет форму.

Использовать сухари панировочные в качестве панировки рекомендуется исключительно в тех блюдах, где это предписано рецептом. Например, некоторые виды ромштексов и цветная капуста не очень сочетаются с данным продуктом в силу того, что сухари по своей характеристике не подходят под требования к панировке этих продуктов, так как не обеспечивают их герметичное и полное покрытие. К тому же они склонны к подгоранию.

Оказывается, сухари панировочные могут быть разных размеров, которые, кстати, прописаны на этикетке. Знатоки в области кулинарии советуют выбирать этот вид панировки среднего размера – примерно полтора миллиметра. А все из-за того, что более мелкая крошка сделает те же котлеты сухими, а слишком крупные сухари панировочные плохо удерживают форму продукта и могут расплыться по всей сковороде.

При выборе продукта необходимо не только учитывать калорийность сухарей панировочных, которая достаточно высока, но и обязательно смотреть дату изготовления и срок годности. Оптимальным считается срок не более одного месяца, что говорит о качестве продукта и отсутствии консервантов. Кроме того, удостоверьтесь в герметичности упаковки, так как сухари панировочные обладают прекрасными впитывающими свойствами, и способны поглощать окружающие запахи и влагу.

Калорийность сухарей панировочных 395 кКал

Энергетическая ценность сухарей панировочных (Соотношение белков, жиров, углеводов – бжу):

Белки: 13.35 г. (~53 кКал)
Жиры: 5.3 г. (~48 кКал)
Углеводы: 67.48 г. (~270 кКал)

Энергетическое соотношение (б|ж|у): 14%|12%|68%

Рецепты с сухарями панировочными

Пропорции продукта. Сколько грамм?

в 1 чайной ложке 7 граммов
в 1 столовой ложке 25 граммов
в 1 стакане 125 граммов

Пищевая ценность и состав сухарей панировочных

НЖК – Насыщенные жирные кислоты

1.203 г

Моно- и дисахариды

6.2 г

Пищевые волокна

4.5 г

Витамины

Минеральные вещества

Аналоги и похожие продукты

Просмотров: 14716

Что такое хлебные крошки и как оно упрощает навигацию? (Примеры)

Разве мы все не были в тематическом парке и заблудились, пытаясь найти выход? Мы не примем этого, но есть крохотное деревце разочарования, которое вот-вот поднимет голову.

Мы отчаянно оглядываемся, спрашиваем прохожего, и они указывают нам на карту, которая говорит нам, где мы находимся в парке.

Внезапно вы знаете, где находитесь и где находятся вход и выход, в зависимости от вашего местоположения.Паника уходит! И пошли гав гав!

В навигации по сайту «хлебные крошки» делают нечто подобное.

Панировочные сухари помогают ориентироваться и показывают, где именно вы находитесь на веб-сайте.

Вот что вы узнаете из этого сообщения:

• Что такое навигация по хлебным крошкам?
• Наша эволюционная потребность в навигации по хлебным крошкам
• Типы панировочных сухарей для веб-сайтов
• 5 преимуществ панировочных сухарей
• 10 лучших практик использования панировочных сухарей
• Проблема с навигацией по хлебным крошкам
• Последнее слово о сухарях

«Хлебные крошки» – это вспомогательное средство навигации, которое помогает пользователям легко понять связь между их местоположением на странице (например, страница продукта) и страницами более высокого уровня (например, страница категории). Этот термин заимствован из сказки о Гензеле и Гретель, где дети бросают след из панировочных сухарей, чтобы проследить свой путь назад.

С помощью панировочных сухарей, если вы дошли до страницы, на которой не хотите быть, вы можете легко найти путь назад или вернуться на шаг или два назад и начать все сначала.

Панировочные сухари не предназначены исключительно для веб-сайтов. Microsoft представила хлебные крошки в Windows Vista, и с тех пор эта функция присутствует в каждой редакции Windows.

Питер Пиролли обнаружил интересные параллели между тем, как животные добывают себе пищу, и тем, как люди ищут полезную информацию. По сути, все мы живем по эвристическому правилу – не тратьте больше энергии на поиски пищи, чем то, что дает еда.Рассмотрим, как мы ищем информацию в Интернете: мы что-то ищем, поисковая система выдает много результатов. Мы сканируем ссылки и не переходим по ним, если не улавливаем подсказки (заголовок SEO, мета и т. Д.) О том, что ссылка предоставит нам нужную информацию. Это мало чем отличается от зверя, охотящегося за добычей в саванне; зверь будет заряжаться только тогда, когда след запаха достаточно силен, чтобы оправдать энергию, которая должна быть потрачена на преследование.

На веб-сайте, при наличии нескольких навигационных следов, лучше всего, если пользователи могут четко идентифицировать след, ведущий к тому, что они хотят.Без этого они могут сдаться и отскочить.

На базовом уровне люди зарабатывают себе на хлеб, но жаждут панировочных сухарей.

Хлебные крошки на основе местоположения помогают пользователю перейти к более широкой категории (странице более высокого уровня) со страницы, на которой он находится. Представьте, что кто-то ищет в Google пару ботинок для пустыни, находит результат поиска и попадает на одну из страниц вашего продукта.Им не нравится то, что они видят, и они хотят изучить другие варианты. Как человек возвращается на главную страницу категории (мужская обувь) или страницу подкатегории (мужская обувь – обувь для пустыни)?

С помощью хлебных крошек на основе иерархии пользователь может легко увидеть, где они находятся в архитектуре вашего сайта, и легко перейти на страницу более высокого уровня. Посмотрите, как это делает Best Buy.

Они служат той же цели, что и кнопка «Назад» в браузере, позволяя пользователю вернуться на одну из предыдущих страниц, которые он посещал.Это может быть полезно, когда пользователь перешел на страницу продукта после применения нескольких фильтров на странице категории. С помощью хлебных крошек на основе истории пользователь может быстро перейти к одной из предыдущих страниц в своем путешествии, сохранив все свои выборы без изменений.

Однако наиболее распространенным применением хлебных крошек на основе истории является использование ссылки «Назад к результатам».

Навигационные цепочки на основе атрибутов просто показывают вам атрибуты, выбранные пользователем на странице.Такие хлебные крошки находят применение на страницах категорий электронной коммерции, предлагаемых большинством платформ электронной коммерции, где пользователи могут выбирать атрибуты для фильтрации результатов поиска.

Первоначально задуманный как простое средство навигации, сегодня хлебные крошки стали влиять на многие аспекты взаимодействия с пользователем в Интернете.

Если пользователь достигает страницы продукта, которая ему не интересна, он либо откажется от нее, либо вернется на страницу категории, чтобы начать все сначала.Хлебные крошки побуждают пользователя начать все сначала и пока не откажутся. В исследовании, проведенном Hull, S.S. (2004) ^[1] , было обнаружено, что пользователи, получившие инструкции по использованию хлебных крошек, выполняли задачи намного быстрее, чем пользователи, которые не использовали хлебные крошки. Для пользователей, которые ежедневно пользуются Интернетом (даже в интрасети, например, в организации), использование хлебных крошек может значительно повысить производительность и сэкономить время.

Связанное сообщение : 14 способов уменьшить отказы и повысить вовлеченность на вашем сайте электронной коммерции

Питер Морвилл, один из отцов-основателей информационной архитектуры для всемирной паутины, разработал соты взаимодействия с пользователем, которые иллюстрируют семь основных аспектов хорошего взаимодействия с пользователем.Помогая пользователям легко ориентироваться и находить то, что они ищут, хлебные крошки помогают повысить удобство поиска веб-сайта.

Соответствующее сообщение : 15 основных элементов эффективного продукта электронной коммерции Страница

Google объявил ^[2] , что они заменяют URL-адрес в своих результатах поиска на имя сайта и путь навигации по хлебным крошкам. Это происходит сейчас для мобильных устройств и может быть развернуто и для настольных компьютеров в ближайшие дни.Google считает, что использование реального имени веб-сайта поможет улучшить удобство использования, а ссылки на хлебные крошки покажут пользователям, куда они будут перенаправлены при нажатии на результат поиска.

Веб-мастера могут использовать разметку схемы для Breadcrumbs ^[3] для более эффективного взаимодействия с поисковой системой. Панировочные сухари становятся для вас дополнительным способом лучше объяснить поисковым системам, о чем ваши страницы, и получить это небольшое дополнительное преимущество SEO.Они также действуют как дополнительные ссылки в результатах поиска, чтобы дать вам больше шансов для перехода по ссылке.

Якоб Нильсен говорит, что рекомендует панировочные сухари с 1995 года. ^[4] . Причины просты.

Панировочные сухари никогда не вызывают проблем при пользовательском тестировании. Пользователи обращают внимание на панировочные сухари только 30% времени; когда они это делают, это помогает, и даже когда они этого не делают, это не причиняет никакого вреда.

Они занимают очень мало места на странице, поэтому недвижимость не может быть причиной, по которой вы отказываетесь от использования панировочных сухарей.

Панировочные сухари на протяжении многих лет остаются довольно неизменными по своему внешнему виду. Такое долгое знакомство делает его мгновенно узнаваемым и, следовательно, полезным.

«Хлебные крошки» могут уменьшить беспокойство пользователей о том, чего ожидать, показывая им весь след процесса. Например, настройка учетной записи на VWO состоит из нескольких шагов. Используя хлебные крошки, мы можем точно сказать пользователю, сколько шагов задействовано в процессе, и позволить ему вернуться к любому из предыдущих шагов в любой момент.Это дает пользователю представление об обязательствах (времени и усилиях), которые требуются от него для настройки процесса. Когда кто-то инициирует попытку, такие визуальные подсказки могут послужить сильным мотиватором для завершения процесса.

Существует множество споров ^[5] о том, следует ли называть эту функцию «индикатором выполнения» или «навигационной цепочкой». Но народная мудрость подсказывает, что если след позволяет пользователям вернуться к предыдущему шагу, то это все равно, что быть хлебной крошкой.

Обычно хлебные крошки появляются в горизонтальной линии, показывающей путь от страницы самого высокого уровня (домашней) до текущей страницы, на которой находится пользователь.Ниже приведен список из 10 лучших практик, некоторые из которых рекомендованы Стивом Кругом, автором книги «Не заставляйте меня думать» и богом веб-дизайна.

Всегда показывать весь путь : Предоставьте пользователям контекст. Хорошая навигационная цепочка действует как шоры, удерживая пользователя сосредоточенным на текущей задаче.

Начать с домашней страницы : Трассы работают лучше всего, когда они показывают путь от одного конца до другого. Включение домашней страницы в трейл действует как сильный якорь, давая пользователям четкое ощущение ориентации.

Используйте «>» в ​​качестве разделителя между уровнями. : Это работает, потому что всегда работало. Значок «>» быстро показывает взаимосвязь между страницами более высокого уровня и страницами более низкого уровня. Якоб Нильсен изначально рекомендовал использовать двоеточие ^[6] (:) в панели навигации по хлебным крошкам. После пользовательского тестирования он изменил свою рекомендацию на использование «>», потому что оно легко представляет связь между страницами более высокого уровня и страницами более низкого уровня.

Поместите крошки наверх : панели навигации обычно размещаются в самом верху веб-сайта.Поскольку хлебные крошки работают как вспомогательное средство навигации, их следует размещать над содержимым. Группа Nielsen Norman провела пользовательские тесты и обнаружила, что пользователи ожидают появления хлебных крошек наверху ^[7] страницы. Хорошее место для панировочных сухарей – под основной панелью навигации и над заголовком страницы.

Покажите немного контраста : Контраст помогает хлебным крошкам выделиться как важная функция. Поскольку они занимают меньше места и в основном основаны только на тексте, контраст становится решающим фактором их успеха.

Используйте мелкий шрифт : Использование мелкого шрифта помогает сообщить пользователю об относительной важности хлебных крошек по отношению к главной панели навигации. Его никогда не следует путать с основным навигационным средством.

Жирным шрифтом последний элемент : Последний элемент (текущая страница) выделен жирным шрифтом, чтобы выделить его и сообщить пользователю: «Это то место, где вы сейчас находитесь».

Не делайте гиперссылку на последний элемент : Почему вам нужно сделать гиперссылку на текст, ведущий на ту же страницу? Это сбивает пользователя с толку.

Не используйте хлебные крошки на главной странице : домашняя страница – это то место, где начинается пользовательский путь, нет смысла отображать хлебные крошки на вашей домашней странице.

Использовать полные заголовки страниц в хлебных крошках : имеет смысл включать полные заголовки страниц в хлебные крошки, чтобы пользователи точно знали, куда ведет каждая из гиперссылок. Но из-за длинных заголовков страниц или других причин страницы некоторые предпочитают обрезать заголовки страниц с помощью многоточия (см. Изображение ниже).В таких случаях лучше опускать такие фразы, как «Вы здесь», чтобы освободить место для наиболее важных элементов, которыми являются сами заголовки страниц.

URL-адрес страницы должен отражать цепочку «хлебных крошек» : URL-адрес страницы дает представление об архитектуре сайта. Важно обеспечить согласованность между URL-адресом и хлебными крошками, поскольку в противном случае пользователи могут получать несогласованные сообщения от обоих этих элементов.

Это сложный вопрос, потому что панировочные сухари в большинстве случаев безвредны.Но есть нюанс. Если ваш сайт содержит всего несколько страниц без множества уровней иерархии, хлебные крошки могут быть бесполезны. Включать панировочные сухари в этих случаях нет необходимости и они могут сбить с толку читателя.

Если вы действительно посмотрите под лесную подстилку, панировочные сухари не все идеальны. Проблема с навигацией по хлебным крошкам

Даже после более чем десятилетнего существования хлебные крошки по-прежнему не считаются лучшей практикой. На то есть много причин:

1. Люди до сих пор не уверены, стоит ли это затраченных усилий: это не функциональность, которую нужно исправить или сломать. Здесь нет споров.

2. Существует мнение, что хлебные крошки «необходимы» только в том случае, если ваша информационная архитектура находится в упадке. Если пользователи могут легко перемещаться по вашему сайту, они будут знать, где они находятся, даже если вы их не показываете. По сути, эта школа мысли считает, что хлебные крошки – это запасной вариант, когда ваша архитектура испорчена. Поэтому они спрашивают: если вы собираетесь тратить время и силы, почему бы не улучшить вашу информационную иерархию, чем инвестировать в хлебные крошки?

Для динамического создания хлебных крошек на основе истории вам необходимо получить доступ к файлам cookie браузера.Это требует дополнительного кода и усилий. Дополнительные усилия будут иметь смысл, если преимущества перевешивают усилия. Но так ли это?

Панировочные сухари на основе истории просто дублируют функциональность кнопки «Назад».

Нет преимущества SEO : Поскольку хлебные крошки должны основываться на истории пользователей, боты поисковых систем никогда не увидят его и не имеют преимуществ SEO

Бесполезно для всех : Многие пользователи напрямую попадают на страницы в глубине сайта через поисковые системы; для таких людей историческая тропа не приносит пользы.

Compounds Error : Для людей, которые попадают на страницу методом проб и ошибок, будет бессмысленно иметь неоптимальную историю навигации в виде хлебных крошек.

Однако стоит отметить, что последний пункт связан с ошибочной информационной архитектурой сайта в целом. Если пользователи не могут легко определить самый простой путь к странице, возможно, лучше инвестировать в оптимизацию архитектуры сайта, чем возиться с хлебными крошками.

Для многоиерархических сайтов, таких как большинство веб-сайтов электронной коммерции нового поколения, иерархия более плоская, и каждый выбранный продукт может принадлежать нескольким категориям.Например, для кого-то, кто хочет купить мешочек с фасолью, след панировочных сухарей может выглядеть как

Дом> Меблировка> Гостиная> Стулья> Одноместные> Сумка-мешок “The Dude Abides”

или

Дом> Меблировка> Гостиная> Стулья> Повседневные> Сумка-мешок «The Dude Abides»

Что вы выберете для отображения?

Давайте рассмотрим сначала страницу продукта .

Для страницы продукта один разумный способ – позвонить и узнать, какой тип хлебных крошек лучше всего отображать.Самый простой или наиболее используемый путь навигации – хороший соперник.

Если на странице вашей категории пользователи могут выбирать атрибуты продукта, будет полезно иметь наиболее подходящую навигационную цепочку навигации и ссылку «вернуться к результатам» (исторический путь) на странице продукта. Сделать выбор – дело непростое. Для пользователей, которые прошли через это, перешли на страницу продукта, не совсем удовлетворены своим выбором и хотят проверить другой продукт, соответствующий атрибуту, кнопка возврата в браузере может вызвать беспокойство.Это связано с тем, что пользователи не могут быть уверены, что браузер запомнит выбранные ими атрибуты. Опция «Вернуться к результатам» может успокоить посетителя и удержать его в воронке конверсии.

Вернуться к результатам | На главную> Меблировка> Гостиная> Бин-мешки> Бин-сумка “The Dude Abides”

Теперь поговорим о странице категории .

Для страницы категории, если вы предоставляете пользователям выбор атрибутов продукта, таких как «марка» или «размер», другой способ использования хлебных крошек – отображать как стандартный путь навигации, так и атрибуты вместе, но должным образом дифференцированно.

Начало> Меблировка> Стулья | Одноместный *

Панировочные сухари существуют уже более десяти лет.Но они никогда не привлекали особого внимания из-за постоянного статуса «вторичной панели навигации». Несмотря на свой статус, хлебные крошки могут быть мощным элементом для улучшения взаимодействия с пользователем и привлечения внимания. С точки зрения бизнеса, это помогает как в привлечении (подумайте о SEO), так и в конверсии (упрощает навигацию по сайту).

Чтобы пояснить суть дела, позвольте мне процитировать некоторые цифры из двухлетнего исследования, проведенного Бэймардом. После сравнительного исследования 40 сайтов электронной коммерции выяснилось, что 68% неоптимально использовали навигацию Breadcrumb.23% вообще не имели элемента «хлебные крошки». Некоторые считают хлебные крошки архаичным элементом дизайна, не имеющим необходимости или приоритетом в современном мире, в то время как для других это жемчужина, которая занимает мало места и требует небольших усилий, но вносит огромный вклад в общее впечатление пользователя.

Так стоит ли иметь на вашем сайте электронной коммерции панировочные сухари? Обращайтесь к своим пользователям за ответом, принесут ли они пользу? Я думаю, что это единственный вопрос, который стоит задать.

Часто задаваемые вопросы о панировочных сухарях

Меню «хлебных крошек» на веб-сайте дает новому посетителю ориентацию и показывает ему или ему, где именно он находится на веб-сайте.

«Хлебные крошки» на веб-сайте помогают стимулировать просмотр и снижать показатель отказов, улучшая доступность вашего веб-сайта, обеспечивая преимущества SEO и помогая снизить беспокойство пользователей.

Продолжить чтение

Окончательное руководство по использованию хлебных крошек на веб-сайтах + примеры

Изначально этот пост был опубликован на babich.biz, автор – Ник Бабич. Ник – разработчик программного обеспечения, увлеченный пользовательским интерфейсом.

Breadcrumbs (или навигационная цепочка) – это вторичная система навигации, которая показывает местоположение пользователя на сайте или в веб-приложении. Термин пришел из сказки Гензеля и Гретель, в которой главные герои создают след из панировочных сухарей, чтобы вернуться в свой дом.

В этой статье мы исследуем использование хлебных крошек на сайтах и ​​обсуждаем некоторые передовые методы применения цепочек навигации к вашему собственному веб-сайту или приложению.Настоятельно рекомендуется прочитать!

Как и в сказке, посетители должны знать свое местоположение в иерархической структуре сайта, чтобы, возможно, перейти на более высокий уровень иерархии.

Навигация по хлебным крошкам

Панировочные сухари служат эффективным наглядным пособием, указывающим местоположение пользователя в иерархии сайта. Это свойство делает навигацию по иерархии отличным источником контекстной информации для пользователей и помогает им находить ответы на следующие вопросы:

• Где я? «Хлебные крошки» информируют посетителей об их местонахождении по отношению ко всей иерархии сайта.
• Куда мне пойти? «Хлебные крошки» улучшают поиск разделов и страниц сайта. Структуру сайта легче понять, когда она размещена в виде хлебных крошек, чем если она помещена в меню.
• Мне туда пойти? «Хлебные крошки» сообщают о ценности контента и поощряют просмотр (например, посетитель сайта электронной коммерции может попасть на страницу продукта, продукт может не подходить, но посетитель может захотеть просмотреть другие продукты из той же категории).Это, в свою очередь, снижает общий показатель отказов сайта.

Уменьшает количество действий

С точки зрения удобства использования, хлебные крошки сокращают количество действий, которые посетитель должен предпринять, чтобы перейти на страницу более высокого уровня. Вместо использования кнопки браузера «Назад» или основной навигации сайта для возврата на страницу более высокого уровня посетители могут использовать хлебные крошки.

Занять минимум места

Компактный механизм, не занимающий много места на странице, поскольку это просто текст со ссылками в горизонтальной строке.Преимущество заключается в том, что они практически не влияют на перегрузку контента.

Ни у одного пользователя нет проблем из-за панировочных сухарей

Люди могут упустить этот небольшой элемент дизайна, но они никогда не поймут неверно следы хлебных крошек и не столкнутся с проблемами при их использовании.

Когда следует использовать панировочные сухари?

Отличный способ определить, выиграет ли сайт от навигации по хлебным крошкам, – это построить карту сайта или диаграмму, представляющую структуру навигации сайта, а затем проанализировать, улучшат ли хлебные крошки возможность навигации внутри категорий и между ними:

• Вы, , должны использовать хлебные крошки, когда у вас есть большой объем контента, организованный в строгую линейную структуру с определенными категориями.Отличный сценарий – веб-сайт электронной коммерции, на котором большое количество товаров сгруппировано в логические категории.
• Вы, , не должны использовать хлебные крошки для одноуровневых веб-сайтов, которые не имеют логической иерархии или группировки.

Виды панировочных сухарей

Панировочные сухари могут быть на основе: местоположения, пути и атрибута.

Расположение на основе

Навигационные цепочки на основе местоположения представляют собой структуру сайта.Они помогают посетителям понять и ориентироваться в иерархии вашего сайта, которая имеет несколько уровней (обычно более двух уровней). Этот тип хлебных крошек очень полезен для посетителей, которые заходят на сайт на более глубоком уровне из внешнего источника (например, из результатов поисковой системы).

В приведенном ниже примере (от BestBuy) каждая текстовая ссылка предназначена для страницы, которая на один уровень выше, чем правая.

На основе пути

Навигационные цепочки на основе пути (также известные как «исторический след») показывают весь путь, пройденный пользователем на определенной странице.Этот тип хлебных крошек обычно создается динамически. Иногда хлебные крошки на основе путей могут быть полезны, но чаще всего они сбивают с толку – посетители часто просматривают страницы очень быстро, перепрыгивая с одной страницы на другую. Такой извилистый путь не очень полезен для пользователя и может быть легко заменен кнопкой « Назад, » в браузере. Наконец, исторический след бесполезен для посетителей, которые попадают прямо на страницу в глубине сайта.

Ниже приведен пример цепочки навигации на основе пути ссылок , которые показывают два пути для перехода к целевой странице.

Attribute Based

Навигационная цепочка на основе атрибутов перечисляет категории для конкретной страницы или наиболее часто встречающегося продукта – так как этот тип навигационной цепочки полезен для сайтов электронной коммерции. Этот вид панировочных сухарей помогает посетителям понять взаимосвязь продуктов и предлагает другой подход.

Например, в TM Lewin цепочки навигации показывают атрибуты элементов, отображаемых на определенной странице:

Иерархия или история?

Практическое правило для хлебных крошек – показывать иерархию сайта, а не историю пользователя. Таким образом, используйте навигационные цепочки на основе местоположения / атрибутов, а не на основе пути.

Лучшие практики навигации по хлебным крошкам

При разработке навигации по хлебным крошкам не забывайте о следующих моментах. Навигация с помощью хлебных крошек – это дополнительный помощник, который поможет пользователям лучше взаимодействовать с вашим сайтом.

Панировочные сухари как дополнительная навигация

Навигация по хлебным крошкам должна рассматриваться как дополнительная функция, а не должна заменять эффективным основным меню навигации.Имейте в виду, что это удобная функция; вторичная схема навигации; альтернативный способ навигации по вашему веб-сайту.

Не связывать текущую страницу с помощью хлебных крошек.

Последний элемент в цепочке навигации (текущее местоположение пользователя) является необязательным – если вы хотите его отобразить, убедитесь, что он не доступен для нажатия или нажатия. Поскольку пользователи уже находятся на странице, нет никакого смысла добавлять ссылку текущей страницы в навигацию по хлебным крошкам.

Используйте разделители

Самый узнаваемый символ для разделения ссылок в цепочках навигации – это символ «больше чем» (>). Обычно знак > используется для обозначения иерархии, как в формате Родительская категория> Дочерняя категория. Другие используемые символы: стрелки, указывающие вправо (→), прямые угловые кавычки (») и косые черты (/). Выбор зависит от эстетики сайта и типа используемой хлебной крошки:

Выберите размер и набивку

Тщательно продумайте размер мишени и заполнение при проектировании.Между различными уровнями хлебных крошек должно быть достаточное расстояние. В противном случае людям может быть сложно их использовать, особенно в мобильном интерфейсе. Но в то же время вы не хотите, чтобы ваши хлебные крошки преобладали на странице, поэтому они должны быть менее заметными, чем основное меню навигации.

Не делайте это центральным элементом дизайна

Не следует использовать причудливые шрифты или яркие цвета, потому что они превзойдут саму цель использования хлебных крошек. Навигация с помощью хлебных крошек не должна быть первым элементом, который привлекает внимание пользователя при переходе на страницу.Приведенная ниже навигационная цепочка неплохая, но слишком привлекательная и может отвлекать посетителей от основной навигации и основного контента.

Google не делает навигацию по хлебным крошкам привлекательной, но пользователи могут легко ее найти и использовать.

Заключение

Все, что делают хлебные крошки, – это упрощает посетителям перемещение по сайту, при условии, что его содержание и общая структура имеют смысл. Это одна из немногих простых вещей, которые делают работу с сайтом более удобной и удобной для пользователей.И этого достаточно для того, что занимает всего одну строчку в дизайне.

9 советов и примеров для облегчения навигации по сайту

В сказке «Гензель и Гретель» двое детей бросают в лесу панировочные сухари, чтобы найти дорогу домой.

В настоящее время вы, вероятно, не испытываете слишком много заблудших ситуаций, но я готов поспорить, что вы чувствовали себя разочаровывающе дезориентированными на плохо разработанных веб-сайтах.

В дизайне веб-сайтов навигация по хлебным крошкам – это способ показать пользователям их местоположение и то, как они туда попали (аналогично хлебным крошкам Гензеля).Это также помогает пользователям быстрее находить страницы более высокого уровня, если они попали на ваш сайт из поиска или по глубокой ссылке.

Что такое навигация по хлебным крошкам?

Навигация по хлебным крошкам – это способ для пользователей визуализировать свое местоположение на веб-сайте. Это дополнительная панель навигации, которая обычно отображается в виде горизонтальных текстовых ссылок, разделенных символом «больше» (>). Навигация с помощью хлебных крошек улучшает поиск ваших целевых страниц и помогает пользователям быстрее переходить на страницы более высокого уровня, если они изначально нашли ваш сайт из поиска или по глубокой ссылке.

Якоб Нильсен, соучредитель Nielsen Norman Group, с 1995 года рекомендует навигацию по хлебным крошкам и подчеркивает их достоинства: «Все, что делают хлебные крошки, – это упрощает пользователям перемещение по сайту, предполагая, что его содержание и общая структура имеет смысл. Этого достаточно для чего-то, что занимает только одну строку в дизайне “.

Если веб-сайт вашей компании является многоуровневым, вы можете подумать о реализации навигации по иерархическому принципу, чтобы упростить навигацию по сайту.Однако, как и любой элемент дизайна, есть правильный и неправильный способ сделать это. Здесь мы рассмотрим девять советов и примеров, чтобы убедиться, что вы создаете наиболее эффективную навигацию по хлебным крошкам для своих пользователей.

1. Используйте навигацию по хлебным крошкам только в том случае, если это имеет смысл для структуры вашего сайта.

Навигация по хлебным крошкам имеет линейную структуру, поэтому вы можете использовать ее только в том случае, если это имеет смысл с иерархией вашего веб-сайта. Если у вас есть страницы нижнего уровня, которые доступны с разных целевых страниц, использование хлебных крошек только запутает читателей, которые продолжают получать доступ к одним и тем же страницам с разных начальных точек.Кроме того, если ваш сайт относительно простой, всего с несколькими страницами, вам, вероятно, не нужна навигация по хлебным крошкам.

2. Не делайте навигацию слишком большой.

Навигация в виде хлебных крошек является второстепенным инструментом по сравнению с основной панелью навигации, поэтому она не должна быть слишком большой или заметной на странице. Например, на веб-сайте DHL их основная панель навигации большая и узнаваемая, с такими столбцами, как «Экспресс», «Посылка и электронная коммерция», «Логистика» и т. Д. Их навигационная цепочка – это меньший раздел ниже, который гласит: «DHL Global |> Логистика» |> Грузовые перевозки ».Вы же не хотите, чтобы пользователи ошибочно принимали вашу навигацию по хлебным крошкам за основную панель навигации.

3. Включите полный навигационный путь в свою навигационную цепочку.

Я погуглил “Неучтенные студенты Университета Илона”, чтобы попасть на эту целевую страницу, но Илон умен, чтобы включить полный путь навигации, включая “Домой” и “Приемные комиссии”. Если вы пропустите определенные уровни, вы запутаете пользователей, и навигационная цепочка не будет казаться такой полезной. Даже если пользователи не начинали с домашней страницы, вы хотите дать им простой способ изучить ваш сайт с самого начала.

4. Переход от высшего уровня к низшему.

Важно, чтобы ваша навигационная цепочка читалась слева направо, при этом ближайшая ссылка слева – это ваша домашняя страница, а ближайшая ссылка справа – текущая страница пользователя. Исследование, проведенное Nielsen Norman Group, показало, что пользователи проводят 80% своего времени, просматривая левую половину страницы, а 20% – правую, что является веским аргументом в пользу дизайна слева направо. Кроме того, ближайшая слева ссылка будет отображаться как начало цепочки, поэтому вы хотите, чтобы это была ваша страница самого высокого уровня.

5. Следите, чтобы заголовки хлебных крошек соответствовали заголовкам страниц.

Чтобы избежать путаницы, вы захотите сохранить согласованность с заголовками вашей страницы и хлебных крошек, особенно если вы нацелены на определенные ключевые слова в этих заголовках. Вы также хотите четко связать заголовки навигации со страницей. Если в заголовке хлебных крошек нет ссылки, проясните это. Nestle эффективно маркирует свои заголовки хлебных крошек, чтобы они соответствовали заголовкам страниц. Например, «Области воздействия и обязательства» читается в навигационной цепочке так же, как и на странице.

Nestle также хорошо отличает ссылки от несвязанных с разными цветами – ссылки синие, а несвязанные остаются серыми.

6. Проявите творческий подход к дизайну.

Традиционная навигация по хлебным крошкам выглядит так: Главная> О нас> Карьера. Однако вам не нужно следовать традиционному пути, если вы чувствуете, что другой дизайн может больше понравиться вашей аудитории или лучше выглядеть на вашем сайте.

Например, Target использует навигацию с помощью хлебных крошек на страницах своих продуктов (потому что кто бы не потерялся в разделе виртуальной обуви?), Но использует символы «/» и простой черно-серый текст.В этом случае тонкая вариация дизайна имеет смысл с точки зрения эстетики их сайта.

7. Держите его в чистоте и не загромождайте.

Навигация по хлебным крошкам – это просто помощь для пользователя, и в идеале ее не следует замечать, если пользователь ее не ищет. По этой причине вы не хотите загромождать навигацию по хлебным крошкам ненужным текстом.

Eionet, например, может обойтись без текста «Вы здесь». Хотя этот текст должен быть полезным, он загромождает страницу. При правильном дизайне навигация по хлебным крошкам должна быть достаточно заметной без введения.

8. Подумайте, какой тип хлебных крошек лучше всего подходит для вашего сайта.

Есть несколько различных типов хлебных крошек, которые вы можете использовать: на основе местоположения, на основе атрибутов и на основе истории. Навигационные цепочки на основе местоположения показывают пользователю, где он находится в иерархии сайта. Навигационные цепочки на основе атрибутов показывают пользователям, к какой категории относится их страница. Наконец, хлебные крошки на основе истории показывают пользователям конкретный путь, по которому они перешли на текущую страницу.

Bed Bath & Beyond использует навигацию на основе атрибутов, чтобы показать пользователям, к какой категории относится их страница продукта, поэтому пользователи могут вернуться к «Кухня» или «Маленькая бытовая техника», чтобы просмотреть похожие товары.Этот тип навигации наиболее эффективен для клиентов Bed Bath & Beyond. Создавая навигацию с помощью хлебных крошек, подумайте, что наиболее полезно для посетителей вашего сайта.

9. Знайте свою аудиторию.

Лучшие практики в области навигации по хлебным крошкам побуждают веб-дизайнеров размещать элементы навигации вверху страницы, но Apple, одна из самых ценных компаний всех времен, бросает вызов этой логике, размещая элементы навигации в нижней части своего сайта. В конце концов, очень важно знать свою аудиторию.Клиенты Apple, как правило, технически подкованы и, вероятно, найдут навигацию, если они им понадобятся. Учитывайте потребности своих клиентов и проводите A / B-тестирование, если вы не уверены.

В конечном счете, навигация по хлебным крошкам – это эффективный инструмент, облегчающий навигацию по вашему сайту, но вы хотите следовать передовым методам проектирования, чтобы убедиться, что вы используете полезность этого инструмента. Дополнительные советы по UX можно найти в «The Ultimate Guide to UX Design».

Примеры хлебных крошек для вдохновения в дизайне

Панировочные сухари узнаваемы мгновенно – но что делает хорошую схему хлебных крошек? Ознакомьтесь с этими примерами и узнайте, что их объединяет.

Большинство пользователей знакомы с навигацией по веб-сайту с помощью хлебных крошек, даже если они не могут определить, что это такое. Дело в том, что многие из крупнейших платформ интернет-магазинов сегодня используют хлебные крошки – это особенно удобно, если у вас большой веб-сайт с большим количеством контента.

Но как выглядит хороший дизайн хлебных крошек? Есть ли рецепт успеха, когда дело доходит до их прототипирования, независимо от типа веб-сайта?

Начать создание прототипов веб-сайтов с помощью компонентов пользовательского интерфейса навигационной цепочки

Посмотрите, как некоторые из веб-сайтов в этом списке превратили свои хлебные крошки в реальную ценность для пользователей, и приготовьтесь почувствовать вдохновение.Но прежде чем мы перейдем к примерам навигации, давайте рассмотрим основные принципы их разработки в инструменте создания прототипов.

Панировочные сухари: что это такое и чем они полезны?

Большинство из нас узнает небольшие серии ссылок, которые часто можно найти небольшого размера в верхнем левом углу больших платформ, таких как Amazon. Обычно они небольшие из-за своей вторичности и предоставляются пользователям горизонтальной линией.

Несмотря на то, что панировочные сухари получили свое название от знаменитой сказки о Гензеле и Гретель, это происхождение часто может ввести дизайнеров в заблуждение относительно того, что такое панировочные сухари.

Панировочные сухари могут очень хорошо отслеживать несколько последних шагов пользователя, как и дети в сказке, но они также могут служить другим целям. Вот 3 вида панировочных сухарей, которые мы обычно видим в Интернете:

• На основе местоположения: хлебные крошки представляют уровни страниц на веб-сайте, отражая общую структуру всего объекта. Часто встречается на веб-сайтах с большим количеством плотного контента, таких как интранет или центры поддержки.
• На основе атрибутов: обычно используются для электронной коммерции, ссылки представляют категории от больших до малых.Это помогает пользователям переходить к более крупным категориям и изучать больше предметов.
• На основе пути: отслеживает последние шаги пользователя. Это означает, что ссылки будут время от времени изменяться, поскольку они будут отражать их действия, а не общую информационную архитектуру веб-сайта.

Преимущества хлебных крошек на столе

Название игры – удобство использования – буквально, сделать ваш веб-сайт максимально простым в использовании. У юзабилити много граней, и все они способствуют созданию лучшего продукта для пользователей.Все, от проверки правильности копии на кнопках до добавления анимации, чтобы сделать работу более плавной, считается удобством использования. Так где же здесь панировочные сухари?

Знакомство и контекст. Это два аспекта, которые имеют прямое влияние на то, как пользователи могут использовать веб-сайт при первой встрече с ним, что является абсолютно ключевым. Эти решающие начальные моменты – это когда пользователи исследуют и решают остаться на этом веб-сайте или перейти к чему-то лучшему или более легкому. Это первое впечатление, введение.

Первые моменты использования подразумевают, что пользователи сталкиваются с чем-то, чего они никогда раньше не использовали. Кривая обучения играет решающую роль в принятии решения о том, остаться или уйти, и хлебные крошки могут помочь нам упростить весь процесс.

Большинство пользователей узнают панировочные сухари, что делает их одним из элементов веб-сайта, которые им не нужно осваивать, чтобы использовать продукт. Но помимо этого полезного факта, хлебные крошки также предлагают некоторый контекст о том, где находится пользователь на более крупном веб-сайте.

Этот дополнительный контекст особенно полезен для пользователей, которые попали на сайт на странице более низкого уровня, такой как страница продукта, которая была результатом поиска Google. Это связано с тем, что пользователю всегда выгодно знать не только, где он находится, но и иметь представление о том, куда он может пойти.

На каждом ли веб-сайте есть выгода от использования хлебных крошек?

Вкратце: нет. Опять же, поскольку хлебные крошки не являются универсальным компонентом, они не подходят автоматически для всех существующих веб-сайтов.В основном это веб-сайты, на страницах которых не слишком много иерархии или отсутствуют большие объемы контента.

Это потому, что хлебные крошки лучше работают в сложной структуре с четкой иерархией. Они не только не добавят ценности веб-сайту, в котором всего 4 страницы, но и, скорее всего, запутают пользователей. В общем, панировочные сухари лучше всего связывать с большим количеством страниц и контента.

Примеры хлебных крошек, которые нам нравятся

Теперь, когда мы рассмотрели основы, давайте взглянем на некоторые места, которые максимально используют их вторичную схему.Ознакомьтесь с этими замечательными примерами хлебных крошек!

Национальное управление по аэронавтике и исследованию космического пространства размещает на своем веб-сайте всевозможный контент. От прямых трансляций пресс-конференций, посвященных новым изображениям красного пятна Юпитера, до сотен статей о Луне, Земле, науке и их миссиях.

Совершенно логично, что НАСА добавило бы некую форму вторичных ссылок, чтобы помочь пользователям перемещаться и находить то, что они ищут. Их пример с хлебными крошками хорош, потому что он использует более крупную категорию (Солнечная система и за ее пределами) для определения темы и определения типа контента, который пользователи могут найти по ней.

В этом смысле НАСА было умен, чтобы стереть границы между второстепенным баром и панировочными сухарями. Это помогает пользователям получить представление о том, что они видят, и о том, что еще они могут найти в той же категории.

Он также устанавливает иерархию контента с вертикальным списком подкатегорий слева. Другие темы, которые подходят для Солнечной системы, перечислены в верхнем разделе (например, Солнце), а связанные темы (например, миссия Кассини) перечислены ниже. Отличная информационная архитектура и отличный пример хлебных крошек!

Когда мы думаем о веб-сайтах с большим количеством контента, на ум приходят крупные розничные платформы.Walmart является примером этой идеи, поскольку на их веб-сайте представлены тысячи и тысячи отдельных продуктов. У каждого из этих продуктов есть собственная страница продукта, а также соответствующие категории и подкатегории.

Это делает Walmart отличным примером хлебных крошек. У них так много продуктов, что пользователям выгодна вторичная схема. Их схема навигации на основе атрибутов незаметна и почти не занимает места на страницах поиска или на страницах продуктов.

Он также расположен прямо под значком гамбургер-меню, что делает его тем, что пользователи увидят, когда решат изучить другие элементы или сравнить варианты.Это означает, что пользователи могут решить проверить больше телевизоров напрямую, вместо того, чтобы использовать основную панель.

Как и Walmart, ASOS также имеет невероятно большие объемы контента, организованного по категориям, что делает его отличным примером хлебных крошек. Придерживаясь классического шага брендов электронной коммерции, ASOS также размещает свои хлебные крошки в верхнем левом углу экрана.

Мы ценим, что даже несмотря на то, что они включили текущую страницу, на которой находится пользователь, в крайний правый угол хлебных крошек, последняя ссылка имеет другой цвет.Это сообщит пользователям, что последняя «ссылка» – это их текущее местоположение, а не ссылка вообще.

Всегда желательно не иметь ссылку, которая не добавляет ценности или была бы бессмысленной, как, например, эта ссылка. Приятно, что они все равно включили его, так как он работает как снимок. Он немедленно сообщает пользователям, где они находятся в рамках общей схемы платформы – так же, как красная точка «вы здесь» на карте торгового центра. Отличный пример хлебных крошек!

Нам нравится, что этот пример с хлебными крошками не имеет ничего общего с розничной торговлей и все имеет отношение к образованию.EdX сделал свою схему навигации немного более заметной, чем другие, за счет контрастирования шрифта ссылок с фоном, следуя той же палитре, что и раскрывающееся меню выше.

Интересная особенность этого примера хлебных крошек заключается в том, что, хотя они привязаны к местоположению, последняя ссылка справа является интерактивной, и она не ведет на ту же страницу, на которой находятся пользователи.

В нашем примере мы можем понять, что название курса, который мы изучаем, касается американских политических институтов, таких как Конгресс.Его предлагает Гарвард, в рамках более крупной программы, частью которой является курс по учебным заведениям. В панировочных сухарях последняя ссылка ведет к этой более крупной программе, а не к индивидуальному курсу.

Это интересный выбор, так как он побуждает пользователей записываться на отдельные курсы, стремясь к программе в целом. Это похоже на примечание к веб-сайтам электронной коммерции, которые пытаются побудить пользователей просматривать и сравнивать товары в одной и той же категории, что делает его очень интересным примером хлебных крошек.

Эта бухгалтерская и консалтинговая компания является отличным примером навигации, потому что она показывает, что когда дело доходит до сложного контента, пользователям нужен весь контекст, который мы можем им дать. Веб-сайт Гранта Тортона посвящен сложному контенту, включая такие темы, как международное налогообложение и управление активами.

Вот почему мы очень ценим панировочные сухари. Это дает пользователям представление не только о том, где они находятся, но и о том, как контент вписывается в веб-сайт.

Хотя пользователь может попасть на веб-сайт прямо на страницу «Возможности, подводные камни нового вычета 199A», он может не полностью понимать, как это относится к компании.В этом примере с цепочкой ссылка «налоговые службы» проясняет это сомнение.

Мы также ценим то, что на веб-сайте используются темные изображения, которые контрастируют с белым шрифтом хлебных крошек, что делает их незаметными, но их легко найти. Когда дело доходит до визуального аспекта этой схемы, это является отличным примером хлебной крошки.

Этот пример хлебных крошек ближе к нашим предыдущим примерам электронной коммерции. HP использует эту схему как способ передать общую информационную архитектуру веб-сайта с помощью хлебных крошек на основе атрибутов.

Нам нравится, что в атрибутах пользователи могут не только находить, где они находятся, но и сразу же переходить и находить другие элементы, которые они могут захотеть рассмотреть. Компания HP грамотно организовала ссылки, поскольку кто-то, глядя на ноутбук HP Pavilion, обнаружит, что «ноутбуки», «HP Pavilion» и «HP Pavilion Touch» идут последними.

Это означает, что пользователи могут задаться вопросом, существует ли такая вещь, как ноутбук HP Pavilion, не имеющий сенсорного экрана, – что является отличным ярлыком. То же самое можно сказать и о разных пользователях, которые смотрят на тот же экран и задаются вопросом, есть ли у этого ноутбука большие размеры.

Нам нравится, что они упростили для людей поиск того, что они ищут, не только на основе уровней или категорий, но и на основе фактических характеристик продуктов. Действительно отличный пример хлебных крошек!

Этот пример хлебных крошек взят из одного из самых известных учебных заведений в мире. У Гарварда очень интересный веб-сайт из-за огромного количества баров.

Как вы можете видеть ниже, у нас есть 5 разных полос! Мы знаем, что на веб-сайте много контента для этих страниц, но, черт возьми, эта информационная архитектура, должно быть, не давала команде дизайнеров спать по ночам.Однако это определенно того стоило, поскольку в результате получается контент, который четко разделен на категории, а пользователи имеют возможность быстро находить все, что им нужно.

Однако пример хлебной крошки не работает сам по себе.

Фактически, хлебные крошки (вверху слева на экране) работают вместе с вертикальной полосой внизу. Это помогает пользователям не просто понять, где они находятся или где находится этот контент на веб-сайте. Это также помогает им видеть больше контента, чтобы пользователи могли понять общую иерархию в игре.

Да, этот пример хлебных крошек – любимая всеми поисковая система Google. И мы не имеем в виду их страницы поддержки. Когда пользователи что-то ищут, им вполне могут быть предложены хлебные крошки из перечисленных результатов.

Это правда, что, поскольку пользователи не находятся на веб-сайте, когда видят результат поиска, эти хлебные крошки не очень помогают им перемещаться по веб-сайту. Тем не менее, действительно, предлагая хлебные крошки, мы даем пользователям представление об общем содержании веб-сайта.

В приведенном выше примере мы можем понять, что хотя хлебные крошки Dribbble включают «теги», журнал поисковой системы включает «SEO». С первого взгляда мы сообщаем пользователям, что на одной платформе есть теги с тем, что они ищут, а на другой платформе есть контент по этой теме в категории под названием «SEO».

Это отличный способ дать пользователям представление о том, как устроен этот веб-сайт, и насколько легко или сложно найти на нем нужный контент.

Совершенно верно – мы являемся одним из примеров панировочных сухарей в этом списке.И мы имеем в виду даже не наши основные страницы веб-сайта, а скорее наш учебный центр. Это платформа, на которой пользователи могут найти всевозможные руководства, начиная от того, как настроить свой профиль, и заканчивая тем, как создать плавную сетку.

Дело в том, что эти учебные пособия содержат много контента. Это страницы и страницы с обширной информацией, которая может быть довольно конкретной – и сбивать с толку людей, которые только начинают.

Вот почему наша навигационная цепочка работает с вертикальной полосой, как и некоторые другие примеры навигации в этом списке.Навигационная цепочка предлагает контекст, а панель ведет пользователей к любому понравившемуся контенту, одновременно передавая иерархию контента в целом.

Apple – своеобразный пример хлебных крошек. Хотя у большинства платформ в этом списке хлебные крошки расположены рядом с основными ссылками, Apple идет противоположным путем. Их панировочные сухари находятся внизу, прямо над нижним колонтитулом.

Это интересный выбор, когда дело доходит до местоположения, поскольку большинство пользователей не дойдут до конца страницы, даже если они ищут конкретную страницу на веб-сайте.

Тем не менее, если не брать в расчет расположение, это все еще надежный пример дизайна хлебных крошек. Это потому, что он незаметен и гармонирует с остальной частью веб-сайта, и это интересный контраст со ссылками в нижнем колонтитуле. Это не визуальный контраст, а скорее функциональный.

Их хлебные крошки на основе атрибутов могут работать как ярлык для пользователей, которые хотят совершить полный тур по iPhone XR, не переходя на страницу более высокого уровня «iPhone». Нам также нравится, что они используют символ «>», чтобы сделать иерархию более понятной.

Панировочные сухари могут быть маленькой деталью, которая в конечном итоге оказывает большое влияние на удобство использования вашего веб-сайта. Это правда, что они не являются основным объектом внимания пользователей, они не создают и не разрушают ваш дизайн, как первичные ссылки, но они имеют значение. Вот почему вообще существуют все эти хлебные крошки.

Great UX – это забота о мелких деталях, чтобы пользователи могли легко и приятно проводить время на вашем веб-сайте. Вы можете проявить творческий подход к своим хлебным крошкам или сделать их аккуратными и классическими, как многие из примеров хлебных крошек в этом списке.В любом случае ваши пользователи оценят их присутствие, что сделает их отличным дополнением к вашему продукту!

Что такое навигация по хлебным крошкам? | BigCommerce

У всех нас есть воспоминания о том, как мы были потеряны в детстве. Вы отчаянно начинаете искать знаки или, если вы находитесь в супермаркете, проходы и продукты, которые вы узнали. Веб-сайты ничем не отличаются от больших супермаркетов; каждая веб-страница похожа на новый проход с различными продуктами, и пользователям невероятно легко заблудиться.

Это может быть очень неприятно и, чаще всего, может привести к тому, что пользователь полностью покинет веб-сайт.В этой статье мы рассмотрим, что такое навигация по хлебным крошкам и как она может принести пользу веб-сайту вашей компании, избегая такой возможности.

Определение навигации по хлебным крошкам

Понятие «хлебные крошки» в названии взято из известной немецкой сказки «Гензель и Гретель». В этой истории Гензель и Гретель – братья и сестры, которые оказываются брошенными в лесу и используют буквальные панировочные сухари, чтобы пометить свой путь, чтобы найти дорогу обратно. Но как это связано с веб-сайтами и веб-дизайном?

Навигация по хлебным крошкам – это функция, обычно расположенная в верхней части веб-страницы, которая сообщает пользователю, на каких именно страницах он был и как они оказались.

Например, предположим, вы посетили веб-сайт, специализирующийся на облачном коммуникационном программном обеспечении. Навигация по хлебным крошкам могла быть такой: Главная> 8×8> решения типа 8×8.

Самая важная вещь в навигации по хлебным крошкам, которая делает ее намного лучше по сравнению с решением Гензеля и Гретель, заключается в том, что каждая цепочка, такая как 8×8 или Home, связана. Это позволяет пользователям вернуться к той точке, в которой они хотят.

Три жанра навигации по хлебным крошкам

1.Навигация на основе истории.

Этот тип навигации отображает все места, которые вы посетили на этом веб-сайте, по сути обеспечивая вам легкий доступ к истории вашего веб-сайта.

Это может быть особенно полезно, когда имена веб-страниц сложны или пользователи просматривают их в течение длительного периода времени. Например, такие сервисы Home> VoIP> VoIP> broadvoice>, такие как навигационная цепочка broadvoice, позволяют пользователям легко перемещаться вперед и назад по своей истории.

Но это наименее часто используемая версия навигации по хлебным крошкам, поскольку она фактически служит только для навигации вперед и назад, которая уже доступна на панели инструментов.

2. Навигация на основе иерархии.

Рассмотрим этот сценарий. Вы представляете малый бизнес и хотите найти программное обеспечение, которое поможет вам организовать складские запасы. Вы выполняете поиск по отслеживанию запасов и читаете о программном обеспечении. Объяснение полезно, но вы хотите знать, какие у вас есть альтернативные варианты.

Навигация на основе иерархии с помощью хлебных крошек будет отображать текущую веб-страницу отслеживания запасов, но также будет отображать родительскую страницу. Это позволяет пользователям быстро получить доступ к гораздо более обширной базе данных с информацией или продуктами.

3. Навигация на основе атрибутов.

Эта форма навигации по хлебным крошкам чаще всего используется на платформах электронной коммерции. Например, предположим, что вы покупали облачные средства связи и искали такие услуги, как Fuze.

Навигация на основе атрибутов на основе хлебных крошек будет перечислять не только продукт, но и его основные фильтры или функции, такие как масштабируемость программного обеспечения, качество звука или цена.

Каковы преимущества навигации по хлебным крошкам?

1. Повысьте свой рейтинг в Google.

Наличие высоко оцененного веб-сайта имеет решающее значение для любого бизнеса. Google на самом деле использует навигацию по хлебным крошкам, чтобы лучше понять ваш веб-сайт и распределить ваши ресурсы и контент по категориям.Исследования показывают, что навигация с помощью хлебных крошек значительно увеличивает ваши шансы появиться на первой странице Google.

2. Упростите задачу для пользователей.

Одна из худших вещей в бизнесе – это потеря лидерства. Вы заплатили за электронный маркетинг, рекламу в социальных сетях и многое другое, и, наконец, у вас есть покупатель на свою целевую страницу. Но после всего этого они уходят из-за плохого взаимодействия с пользователем и сложной навигации по веб-страницам.

Статистика показывает, что:

• Почти 90% пользователей говорят, что они никогда не вернутся на веб-сайт, на котором им сложно перемещаться или использовать.
• Почти три из четырех онлайн-компаний, потерпевших неудачу, терпят неудачу из-за плохого пользовательского опыта.
• Но, несмотря на все это, только около половины онлайн-компаний проводят достаточное тестирование пользовательского опыта.

Навигация по хлебным крошкам может точно показывать пользователям, где они находятся на вашем веб-сайте, и может помочь им перемещаться вперед или назад в зависимости от их предпочтений. Это снижает показатель отказов, то есть процент пользователей, которые покидают вашу веб-страницу, ничего не нажимая.

Подводя итог

Навигация по хлебным крошкам – полезное решение для любого онлайн-бизнеса. Это дискретная, но мощная функция, которая побуждает пользователей продолжать действия на вашем веб-сайте. Чем лучше опыт пользователя на веб-сайте, тем выше шанс совершить покупку. Давайте быстро резюмируем:

• Навигация по хлебным крошкам – это веб-маршрут, по которому пользователи могут следовать вперед или назад, чтобы помочь им перемещаться по вашему веб-сайту.
• Существует три типа: история, иерархия и иерархическая навигация на основе атрибутов.Каждый из них отличается, и вы должны выбрать наиболее подходящий вариант для вашей конкретной отрасли и бизнеса.
• Навигация по хлебным крошкам может улучшить ваш рейтинг в Google и значительно упростить время пребывания пользователей на вашем веб-сайте.

Панировочные сухари еще свежи для UX? | Джеффа Джимерсона | Madison Ave. Collective

Большую часть 16 лет я занимался проектированием веб-сайтов и других экранных интерфейсов, и за это время я определенно наблюдал эволюцию тенденций дизайна UX / UI.

Развиваются и технологии. Не так давно мобильные телефоны с их крошечными экранами отображали только крошечные веб-сайты. Когда адаптивная верстка стала нормой, появился целый ряд новых потребностей в удобстве использования и навигации для мобильного дизайна.

И все же, несмотря на эти изменения и новые вызовы на протяжении многих лет, работа UX-дизайнера осталась прежней: Представлять информацию в удобном для использования и доступном виде.

Я решил поближе взглянуть на один из наиболее распространенных элементов дизайна интерфейса в Интернете – навигационную цепочку – и задать несколько вопросов.Во-первых, действительно ли пользователи веб-сайтов находят панировочные сухари полезными? Во-вторых, если они действительно полезны, как можно повысить их эффективность? И, наконец, приведут ли новые технологии и тенденции в UX / UI-дизайне панировочные сухари в мусорное ведро древности? Другими словами, является ли современный веб-дизайн причиной устаревания панировочных сухарей? Давай выясним.

Давным-давно, когда братья и сестры Гензель и Гретель были брошены в лесу своими чрезвычайно бедными (во многих отношениях) родителями, они придумали изобретательный способ вернуться домой: бросить панировочные сухари.Не говоря уже о том, что птицы съели кусочки хлеба, в результате чего двух потерянных детей похитила и чуть не приготовила старая ведьма. Идея все еще оставалась хорошей: оставлять след позади.

Перенесемся в 1991 год, когда The New Kids on the Block крутили шоу на Суперкубке. Веб-серверы и веб-браузеры были новой технологией на улице, и разработчикам не потребовалось много времени, чтобы использовать блестящий метод навигации Гензеля и Гретель для своих собственных целей 20-го века.Цифровые хлебные крошки быстро стали обычным явлением во всемирной паутине, потому что они давали пользователям удобный и быстрый обзор их текущего местоположения и пути к дому. Спустя 25 с лишним лет эти цепочки ссылок, разделенные стрелками, по-прежнему постоянно присутствуют в Интернете сегодня.

(Между прочим, у меня есть теория, что само слово изначально было частью того, почему хлебные крошки прижились в сообществе дизайнеров / разработчиков. Это была запоминающаяся и умная метафора, которая стала своего рода инсайдерским термином для людей, которые создают веб-сайты .Я подозреваю, что это мнение не изменилось.)

Когда мы разрабатываем веб-сайты и приложения здесь, в MAC, одним из первых шагов в нашем процессе является анализ всего содержимого сайта, а затем нанесение на карту каждого раздела и страницы в виде колодца. -организованная древовидная диаграмма. Наши рекомендации основаны на целях клиента, потребностях конечного пользователя и лучших практиках удобства использования. Эти схемы информационной архитектуры (IA) обычно начинаются с показа домашней страницы, затем основных разделов сайта, затем подразделов и т. Д., и, наконец, отдельные страницы содержимого.

Вот как выглядит IA и соответствующая цепочка навигации для веб-сайта, который мы разработали для местного банка: Home> Business> Checking & Savings> Business Checking Accounts.

Каждый уровень представляет собой щелчок (или нажатие) пользователем. Конечно, когда хлебные крошки являются интерактивными, как и должны быть все хорошие хлебные крошки, они дают пользователям еще один способ «вернуться» или «вверх» на уровень для изучения других страниц веб-сайта. Единственным исключением из этого правила является страница в конце цепочки навигации.Название просматриваемой в данный момент страницы не должно быть интерактивной ссылкой, так как перезагрузка активной страницы может сбить с толку.

Сегодня в UX-дизайне используются два основных типа навигации:

1. На основе местоположения: , чтобы помочь пользователю определить свое текущее местоположение в структуре сайта; и
2. На основе атрибутов: , чтобы помочь пользователю идентифицировать важное качество или атрибут просматриваемого контента (страницы).

На указанном выше веб-сайте есть навигационная цепочка на основе местоположения. Теперь давайте взглянем на пару примеров, основанных на атрибутах. Amazon продает книги в нескольких форматах, включая книги в мягкой и твердой обложке и Kindle – их версию для цифрового чтения. Для Amazon формат книги (печатная или цифровая) и жанр (их десятки) являются достаточно значимыми атрибутами, чтобы оправдать их собственную систему хлебных крошек. Взгляните на два снимка экрана ниже. Это одна и та же книга, разделенная на две совершенно разные категории.Когда вы переключаетесь между «Kindle» и «Мягкая обложка», страница перезагружается и изменяется навигационная цепочка.

Fortune входит в десятку самых успешных американских компаний по полученному доходу, и в этот список входят знакомые бренды, такие как Apple, GM, и CVS Health. Я просмотрел каждый из веб-сайтов компании и обнаружил, что шесть из 10 (60%) используют панировочные сухари.

Однако из этих шести веб-сайтов только три отображают хлебные крошки для мобильных пользователей. К сожалению, такое несоответствие дизайна UX слишком распространено.

Разве это безумие использовать драгоценное место на экране мобильного телефона для списка ссылок на хлебных крошках? Или это безумие не делать этого?

Многие веб-сайты, в том числе глубокие, такие как Amazon, удаляют все намеки на «вы здесь» с мобильных устройств, хотя их дизайнеры считали хлебные крошки хорошей идеей для настольных компьютеров. Это похоже на то, что мы вернулись на дикий запад веб-дизайна, где часто используемые соглашения и нормы UX выбрасываются из окна просто потому, что экран стал маленьким.По моему скромному мнению, это неаккуратный дизайн.

Я считаю, что хороший компромисс – показать мобильным пользователям по крайней мере на один шаг назад – это одновременно и инструмент для просмотра, и намек на то, где они находятся. Best Buy отлично справляется с этим. Покупая в телефоне 12-дюймовый Apple MacBook на bestbuy.com, вы заметите одну строку навигации «<См. MacBooks» , расположенную прямо над заголовком страницы. Со стрелкой, указывающей влево, это ненавязчивый и короткий способ сказать Нажмите здесь, чтобы вернуться и увидеть другие ноутбуки Apple .

Просто помните, даже мелкие веб-сайты могут выиграть от отображения кусочка хлебных крошек на мобильном телефоне. Это связано с тем, что другие распространенные правила поиска пути, такие как выделение текущего раздела на главной панели навигации, часто скрыты за свернутым меню. Одна мобильная хлебная крошка позволяет многое, занимая при этом немного места.

Гуру юзабилити Якоб Нильсен – большой сторонник панировочных сухарей.Одна из причин, по его словам, – отсутствие обратной стороны. «Хлебные крошки никогда не вызывают проблем при пользовательском тестировании: люди могут упустить из виду этот небольшой элемент дизайна, но они никогда не поймут неверно следы хлебных крошек и не столкнутся с проблемами при их использовании», – пишет Нильсен.

Хотя углубленные исследования использования хлебных крошек – это не пруд пруди, я нашел одно исследование, которое показало, что хлебные крошки используются в качестве инструмента навигации в 6% случаев. Для сравнения: 40% пользователей нажимали на встроенные ссылки, 31% нажимали кнопку “Назад” в браузере и 22% нажимали на панель навигации.То же исследование показало, что при отсутствии навигационной цепочки навигационная панель и кнопка «Назад» используются чаще. В этом нет ничего удивительного.

Что меня действительно удивило, так это то, насколько важную роль играло расположение хлебной крошки в том, как часто на нее нажимали. Панировочные сухари, размещенные непосредственно рядом с заголовком страницы, получили колоссальные 82% всех кликов по хлебным крошкам , по сравнению с только 18% для тех, которые размещены в самом верху страницы.

Я поискал в Интернете ответ на этот вопрос, а также поговорил об этом с парой опытных веб-разработчиков. Все согласны с тем, что да, хлебные крошки могут улучшить поисковую оптимизацию, но не для того, чтобы придавать этому слишком большое значение. Поисковые системы, такие как Google и Bing, любят менять свои правила в отношении того, как они награждают или наказывают веб-сайты в результатах поиска.

Вот пара вещей, которые мы знаем. Google рекомендует добавлять хлебные крошки как один из нескольких способов «улучшить атрибуты вашего сайта». И Schema.org, который частично финансируется Google, дает здесь несколько рекомендаций по кодированию с использованием последовательного словаря хлебных крошек.

В качестве примечания: интересно видеть, что Google отображает форму навигационной цепочки в результатах поиска для мобильных устройств, но это не имеет никакого отношения к тому, содержат ли сами веб-сайты видимую навигационную цепочку. Google, похоже, изучает структуру URL-адресов, а затем переводит ее в удобочитаемый путь. Любопытно, однако, что они не делают этого для настольных компьютеров.

Как отмечалось выше, хлебные крошки могут быть полезны для таких вещей, как:

• Показывать, где вы находитесь, чтобы вы не чувствовали себя потерянными
• Показывать, как структурирован большой, глубокий веб-сайт (или как организованы продукты)
• Обеспечение возможности вернуться на уровень для изучения связанного содержимого

Но панировочные сухари также могут пойти не так.По самой своей природе панировочные сухари будут бороться за внимание с другими элементами. Уловка состоит в том, чтобы сделать их доступными, но не навязчивыми. Использование небольшого размера шрифта и ожидаемого расположения – непосредственно рядом или над заголовком страницы – предотвратит превращение хлебных крошек в визуальный шум.

Существует также часто упускаемый из виду вопрос о длине следа из хлебных крошек. Веб-сайты с длинными названиями страниц, как правило, имеют одинаково длинные панировочные сухари, которые переносятся на несколько строк и занимают место.Глубокие сайты с несколькими уровнями отображения могут еще больше вызвать такой беспорядок на страницах.

В подобных случаях мы предпочитаем создавать альтернативные версии имен страниц на MAC: более длинное и информативное имя для заголовка страницы и другое более короткое имя для навигационной крошки. Хотя формулировка просматриваемой в данный момент страницы является хорошей идеей, чтобы она соответствовала строке навигации 1: 1, другие элементы вверху по лестнице, такие как названия разделов или ранее просмотренные целевые страницы, могут быть сокращены для экономии места.

Ниже приведен пример того, как цепочка хлебных крошек, оптимизированная по длине слова, может искать веб-сайт более высокого уровня. Обратите внимание, как с каждым щелчком имя ранее просмотренной страницы сокращается.

• Первый щелчок: Домой> Ресурсы для новых студентов
• Второй щелчок: Домой> Ресурсы> Статьи по оплате обучения и финансовой помощи
• Третий щелчок: Домой> Ресурсы> Статьи> Как для подачи заявки на студенческую ссуду

Последняя строка слов легче читается, меньше повторяется и занимает меньше места на экране.

Еще один совет: не заменяет обычное меню навигации панировочными сухарями. Поскольку они показывают только один линейный путь, стандартные хлебные крошки на самом деле не очень полезны для навигации по веб-сайту. Тем не менее, в PainWise есть продвинутая технология навигации по сайту, предназначенная для поощрения пользователей к изучению веб-сайта на настольном компьютере или планшете. Когда пользователи наводят указатель мыши на последнюю ссылку хлебных крошек, появляется раскрывающийся список других страниц в этом разделе.

Хотя они не должны заменять другие соглашения о поиске пути, я считаю, что большинству крупных веб-сайтов будет полезна навигационная цепочка на основе местоположения или атрибутов, особенно когда основная навигация скрыта от просмотра.

Вот мои семь основных рекомендаций:

1. Используйте хлебные крошки при разработке веб-сайтов с тремя или более уровнями
2. Поместите хлебные крошки непосредственно над или рядом с заголовком страницы
3. Для мобильных устройств – единственная навигационная крошка (указывающий на один уровень назад) следует использовать как минимум
4. Используйте стрелки – не косые черты или вертикальные линии – чтобы обозначить перемещение между страницами или вернуться домой
5. Показать текущую страницу, но не ссылается на нее
6. Избегайте длинных и повторяющихся хлебных крошек , используя более короткие альтернативы для названий разделов
7. Даже с панировочными сухарями следует использовать обычное меню навигации

В современную эру дизайна UX хлебные крошки по-прежнему предлагают ценность, в том числе потенциал для улучшения пользовательского опыта.

Оказывается, панировочные сухари после стольких лет все еще свежая идея. Совет от Гензеля и Гретель за то, что они помогли миллионам пользователей веб-сайтов вернуться домой.

Хлебные крошки Примеры и передовые методы веб-дизайна

Вдохновение • Примеры веб-сайтов Андриан Валеану • 14 июня 2013 г. • 6 минут ПРОЧИТАТЬ

Панировочные сухари – очень важный элемент в дизайне веб-сайтов. Для этого вы можете реализовать хлебные крошки в своих веб-дизайнах.Это повышает уровень вашего веб-сайта и, следовательно, привлекает посетителей на сайт. В основном это текстовые ссылки. Обычно шрифт хлебных крошек на несколько пунктов меньше исходного размера текста содержимого веб-сайта.

Когда вы создаете веб-сайт, на что вы должны обратить особое внимание? Конечно, удобство использования сайта. Будь то образовательный сайт, сайт электронной коммерции или информационный сайт; вы не можете игнорировать важность удобства использования веб-сайта.

Посетители должны беспрепятственно пользоваться информацией с сайта.Если это сайт электронной коммерции, зрители не должны сталкиваться с трудностями при выборе продуктов, которые они предпочитают. Если получение релевантной информации с вашего сайта занимает у них много времени, они, не колеблясь, покинут сайт и снова перейдут на страницу поиска, чтобы найти другой конкурирующий веб-сайт, который более полезен для них. Поэтому важно сделать сайт полезным и эффективным для посетителей.

Какая польза от панировочных сухарей?

Breadcrumbs, как следует из названия, позволяет посетителям веб-сайта более простым способом вернуться к месту назначения.Название взято из сказки «Гензель и Гретель». Панировочные сухари известны как текстовых ссылок, которые обычно находятся на веб-сайтах в верхней части основной части страницы; под заголовком и / или любой баннерной графикой страницы, но над содержанием. Панировочные сухари планируются в соответствии со структурой страниц вашего сайта.

Например, если у вас есть магазин электронной коммерции и средство просмотра находится на странице для холодильников, структура цепочки навигации покажет основные категории, ведущие на страницу и обратно на домашнюю страницу в соответствии с их правильным порядком отображения страниц.Следовательно, зрители найдут что-то вроде «Дом> Электроника> Бытовая техника> Холодильники» . Этот след обычно основан на конкретной структуре папок в серверной системе веб-сайта. Пользователь может перейти на любую из страниц следа, нажав на текст. Например, если вы хотите перейти на домашнюю страницу, вы можете напрямую перейти на нее, щелкнув ссылку «домой» в навигационной цепочке.

Панировочные сухари в основном используются в качестве меню навигации.Есть несколько способов, с помощью которых пользователь может перемещаться по разным страницам веб-сайта. Меню навигации должны быть удобными и простыми. Следовательно, хлебные крошки – блестящая идея в качестве меню навигации.

Конструктор электронных писем

С Postcards вы можете создавать и редактировать шаблоны электронных писем онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны электронных писем быстрее, чем когда-либо прежде.

Не только в качестве меню навигации, но и для поисковой оптимизации это полезно.Получение высоких позиций в поисковых системах особенно важно в электронной коммерции, где конкуренция может быть высокой. Поскольку хлебные крошки основаны на структуре папок веб-сайта, ключевые слова размещаются в большем количестве мест по всему веб-сайту. Следовательно, если «шерстяное пончо» является популярным поисковым запросом в вашей отрасли, Breadcrumb создаст еще одну внутреннюю ссылку на соответствующее ключевое слово на вашем веб-сайте.

Однако, имея дело с меню хлебных крошек, вы должны помнить одну вещь: этот тип навигации следует рассматривать как дополнительную функцию для повышения привлекательности сайта и не должен заменять полезные основные меню навигации.

При поиске нескольких типов меню хлебных крошек в Интернете вы можете найти навигационные меню с навигационными крошками на основе местоположения, атрибутов и путей.

Примеры дизайна панировочных сухарей

Панировочные сухари

Компонент выполнен в черном цвете, чтобы естественно выделяться на светлом фоне и фокусироваться. Фактурное полотно прекрасно сочетается с общим художественным дизайном. Ссылки быстро воспринимаются благодаря четкой и формальной типографике, а небольшие промежутки между каждым элементом способствуют удобочитаемости.

Заказать

В то время как все элементы пользовательского интерфейса отмечены тонкими градиентами, хлебные крошки, напротив, придерживаются более чистого плоского внешнего вида и монохромного фона. Тем не менее, он неплохо сочетается с другими и дополняет эстетику благодаря схожей расцветке. Кнопка «Домой» добавляет классической привлекательности. Яркие тона используются для более эффективного выделения заголовков.

Панировочные сухари

Панировочные сухари от Роба Дозьера придают невероятно элегантный, чистый и свежий вид.Хотя навигация выполнена в светлой цветовой гамме, все же она все равно бросается в глаза. Тонкая тень придает прямоугольникам в форме стрелок дополнительный визуальный вес, помогая им выделяться на фоне шума. Чтобы четко обозначить текущую позицию, последний элемент представлен простой надписью.

Панировочные сухари / Ошибка

Breadcrumbs / Error by Jason Mayo – это оптимизированная панель навигации без пропусков и впечатляющих функций. Он гармонично сочетается с композицией, становясь важной деталью пользовательского интерфейса.Однако положение спасает рельефный эффект. Он придает каждому блоку и заголовку более четкий и четкий вид. Фиолетовый, который является частью основной цветовой палитры, применяется для выделения фактической страницы.

Основы дизайна

Allison House отказывается от всех классических деталей в форме стрелы и просто стремится к более упрощенным и элегантным функциям. Таким образом, компонент выглядит естественным и интуитивно понятным, а также имеет строгий образовательный стиль, необходимый для проекта.Каждый блок включает заголовок, подкрепленный соответствующим значком.

панировочных сухарей

Как и в предыдущем примере, Михал Васько размещает все ссылки в ряд, отказываясь от графических деталей в пользу типографики. Предметы разделены миниатюрными минималистичными стрелками, которые благодаря синему цвету ненавязчиво показывают направление. Однако, поскольку элемент органично интегрирован в дизайн, а серый цвет не сильно контрастирует с фоном, его можно легко потерять из виду.

JomSocial Шаблон

JomSocial Template – совсем другое дело. Навигация по хлебным крошкам имеет большой визуальный вес из-за ее относительно большого размера и яркой окраски. Это бросается в глаза, не перегружая пользователей. Мохд Изуддин Хельми манипулирует отличительным шрифтом, внутренней тенью, сплошной кнопкой «домой» и некоторыми мягкими градиентами для достижения впечатляющего результата.

Найдите и отсортируйте панировочные сухари

Это довольно простой пример, но он имеет право на существование.Это самый простой способ показать пользователям их перемещения по проекту. Несмотря на то, что он лишен красивого внешнего вида и нуждается в обновлении, тем не менее, свою роль он выполняет неплохо. Он включает в себя все общие функции: заголовки, стрелки для направления и даже цветовое выделение, предоставляя посетителям жизнеспособного помощника по навигации.

Управление галереей изображений

Навигация в виде хлебных крошек отличается гладкостью и ясностью. Он имеет чистый и подробный вид, который получается благодаря искусной работе с типографикой, пробелами и фоном.Последний элемент имеет более жирные буквы по сравнению с другими, чтобы направить внимание на соответствующую страницу. Хотя навигация выглядит упрощенно, но она очаровательна и подходит как перчатка.

Редизайн Gamerscouch.com

Аарон Муди тщательно создал интерфейс веб-сайта, где хлебные крошки занимают свое законное место и имеют аккуратный, изысканный и модный вид.