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

«Хлебные крошки» или 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, напротив, «хлебные крошки» располагаются поверх основного изображения. Они более заметны и их проще связать с заголовком страницы. Единственное, что я бы добавил, — подчеркивания, указывающие на то, что перед нами набор ссылок.

Похожий пример, но здесь элементы организованы немного по-друг�