Проектируем «хлебные крошки»: полное руководство

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

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

«Хлебные крошки» или breadcrumbs — не самый привлекательный или интересный элемент интерфейса. Эти маленькие ссылки показывают, где сейчас находится пользователь в сложной иерархии сайта. Их дизайн кажется очевидным, как и их положение на странице, о чем же тогда пойдет речь?

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

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

Как люди ориентируются в цифровом пространстве

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

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

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

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

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

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

Хотя мы часто фокусируемся на таких метриках, как показатель отказов или время, проведенное на странице, они не позволяют увидеть полную картину. Тот факт, что кто-то проводит на странице 4 минуты, не обязательно свидетельствует об успехе; а тот факт, что кто-то уходит в течение 30 секунд, не обязательно говорит о провале.

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

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

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

Навигация, которая позволяет двигаться вперед

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

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

Навигация, которая позволяет двигаться назад

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

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

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

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

Текущий уровень навигации (в данном случае Sparen und Anlegen) не был выделен по умолчанию. Пользователи могли увидеть, где они находятся, только при наведении курсора в раскрывающемся меню (страница Online Weltpapier Sparplan), что создавало дополнительные трудности при перемещении по сайту.

Навигация, которая позволяет перемещаться по горизонтали

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

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

Когда «хлебные крошки» необходимы

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

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

Так, например, обстоит дело с The Economist. Сайт содержит множество разделов, но здесь нет многоуровневой навигации. На самом деле, информационная архитектура довольно плоская: практически весь контент располагается на одном уровне. 

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

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

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

Когда пользователь попадает на сайт New England Journal of Medicine, ему трудно сориентироваться и понять, где именно он находится в информационной иерархии. Здесь нет четкого обозначения текущего раздела. Куда идти, если вы хотите изучить больше статей по заданной теме? Как оказалось, слово Perspective над заголовком на самом деле является кликабельным названием раздела, но поскольку оно набрано светло-серым шрифтом, оно не выглядит как интерактивный элемент.

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

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

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

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

Короткая история запутанных «хлебных крошек»

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

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

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

Аналогичным образом выглядят стрелки на сайте TVM. Последний пункт обозначен как «Текущая страница» (Huidige pagina). Скорее всего, некоторые пользователи подумают, что эта подпись относится к той ссылке, на которую указывает стрелка.

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

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

Размещайте «хлебные крошки» под основной навигацией 

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

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

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

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

Кроме того, здесь возникает путаница с заголовком раздела. Мы видим под «хлебными крошками» надпись Standard shipping, но она не отображается в цепочке ссылок. На самом деле, это всего лишь один из подразделов на текущей странице, а ее заголовок располагается на баннере (Domestic prices). Получается, «хлебные крошки» относятся к баннеру, а не к подразделу под ним. Это может сбить с толку некоторых пользователей.

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

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

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

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

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

«Хлебные крошки» должны быть видимыми без прокрутки

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

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

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

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

Обратный пример — сайт финансового холдинга UBS. Пользователям не нужно прокручивать страницу, чтобы увидеть контент. Навигация последовательна и логична. Люди могут сразу изучить содержимое разделов в боковой панели. Поэтому можно обойтись и без «хлебных крошек». Да, здесь нет красивой обложки, но иногда, если мы хотим донести до аудитории важную информацию, изображения могут только мешать. Скучно? Возможно. Но эффективно.

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

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

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

Не отключайте «хлебные крошки»

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

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

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

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

На сайте Deutsche Bahn ссылки и текстовая метка (последняя «крошка») выглядят одинаково, разница обнаруживается лишь при наведении курсора. Простое подчеркивание сделало бы ее более очевидной.

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

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

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

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

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

Какой должна быть последняя «хлебная крошка»?

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

Вот два примера: в первом (DocuSign Developer) «хлебные крошки» включают текущую страницу, а во втором — нет (Stripe Docs).

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

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

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

Не обрезайте текст и используйте вместо этого аккордеоны

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

Frontier Motor Insurance заменяет некоторые пункты многоточием. Несмотря на удаление заголовка, ссылка остается и по ней можно кликнуть. Обрезая «хлебные крошки» подобным образом мы усложняем пользователям понимание полного пути.

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

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

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

На сайтах City of Düsseldorf и Federal Statistical Office Switzerland пользователям довольно сложно разобраться, как взаимодействовать с навигацией, из-за большого количества стрелок, указывающих в разные стороны.

Хороший компромисс — разместить все «хлебные крошки» в одну строку, без переноса. Например, Deutschland Auswärtiges Amt выбирает именно такой подход: чтобы увидеть всю навигационную цепочку, пользователям необходимо свайпнуть влево. Так названия разделов не обрезаются, но для того, чтобы их прочитать, требуется горизонтальная прокрутка. Тот же паттерн выбирает ADAC.

Альтернативный вариант — добавить вспомогательную стрелку для предсказуемого перемещения между уровнями. Süddeutsche Zeitung использует ее в основном меню, но она может сработать и для «хлебных крошек».

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

Также обратите внимание на разницу в оформлении текстовой метки текущей страницы и ссылок. Отличный прием, который стоит иметь в виду.

«Боковые хлебные крошки»

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

Альтернативное решение, которое значительно ускорит продвижение вперед, — сочетание «хлебных крошек» и выпадающего меню, или «боковые хлебные крошки». 

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

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

City of Düsseldorf использует похожий шаблон. На первый взгляд кажется, что в выпадающем списке появляются не связанные с текущей страницы, а родственные разделы родительской категории, однако это не так. Странно, но последний элемент в навигационной цепочке — не текущая страница, а раздел «Другие темы», который также представляет собой выпадающий список.

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

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

Одних лишь «хлебных крошек» недостаточно

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

Давайте посмотрим, как можно эффективно сочетать разные решения.

Горизонтальное наслоение

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

Боковая панель навигации

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

Теги

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

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

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

«Хлебные крошки»

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

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

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

Итоговый чеклист

Итак, вот несколько важных рекомендаций, которые следует учитывать при проектировании «хлебных крошек»:

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