Проектирование эффективной навигации по хлебным крошкам

Проектирование эффективной навигации по хлебным крошкам
Проектирование эффективной навигации по хлебным крошкам

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

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

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

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

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

Хлебные крошки: Как Пользователи перемещаются по веб-сайтам?

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

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

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

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

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

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

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

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

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

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

НАВИГАЦИЯ ВПЕРЕД

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

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

НАВИГАЦИЯ В ОБРАТНОМ НАПРАВЛЕНИИ

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

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

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

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

Как выясняется, мы находимся на третьем уровне навигации. Обычно «Спарен и Анлеген» должны быть активны и выделены на странице, но это не так. Только когда мы открываем меню наведения, мы можем определить, что на самом деле представляет собой текущая страница («Online Weltpapier Sparplan»). Навигация в обратном направлении немного громоздка в Deutsche Bank.

БОКОВАЯ НАВИГАЦИЯ

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

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

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

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

Когда нужны хлебные крошки?

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

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

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

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

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

На первый взгляд трудно сказать, где именно он находится в журнале New England Journal of Medicine. Для текущей категории нет четкого ярлыка, который можно было бы сразу понять. Если вы хотите изучить больше статей по теме, как бы вы туда ориентировались? Как выясняется, «Перспектива» над заголовком на самом деле является категорией и ссылкой на эту категорию, но, поскольку она отображается светло-серым цветом, она не выглядит как интерактивный элемент. Чтобы узнать больше, нам нужно нажать туда, но это не обязательно очевидно для всех.

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

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

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

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

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

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

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

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

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

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

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

Хлебные крошки лучше всего работают в глобальной навигации

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

Избегайте «Отключенных» Хлебных крошек

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

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

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

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

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

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

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

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

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

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

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

Этот вопрос о последнем пункте

Как мы видели в предыдущем разделе, одна мелкая деталь, которой часто отличаются дизайны хлебных крошек, - это наличие текущей страницы в хлебных крошках. Ведь текущая страница указывается через заголовок прямо под хлебными крошками, так нужно ли ее дублировать? На изображениях ниже один пример включает текущую страницу в хлебных крошках (DocuSign Developer), а на другом — нет (Stripe Docs).

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

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

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

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

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

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

Frontier Motor Insurance заменяет некоторые пути многоточием; Заголовок удален, но ссылка все еще там, и ее можно изучить. При таком подходе мы сокращаем хлебные крошки, затрудняя пользователям изучение полного пути.Frontier Motor Insurance заменяет некоторые пути многоточием; Заголовок удален, но ссылка все еще там, и ее можно изучить. При таком подходе мы сокращаем хлебные крошки, затрудняя пользователям изучение полного пути.

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

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

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

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

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

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

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

Хлебные крошки сбоку

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

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

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

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

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

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

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

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

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

ГОРИЗОНТАЛЬНЫЕ ОТВОДКИ

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

НАВИГАЦИЯ НА БОКОВОЙ ПАНЕЛИ

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

ТЕГИ

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

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

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

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

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

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

Контрольный список Хлебных крошек

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

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

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

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

Вас может заинтересовать:

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

Как работает Google PageSpeed: улучшите свой рейтинг и рейтинг в поисковых системах
Как работает Google PageSpeed: улучшите свой рейтинг и рейтинг в поисковых системах
По некоторым статистическим данным в декабре 2018 Google в России обошла Яндекс по объемам поискового трафика и её доля составила 53,5%, в то время, как у Яндекса – 42,7%. Такая ситуация заставляет нас обратить особое внимание на оптимизацию сайтов под требования Google. И значительную помощь в этом нам окажет такой сервис от мирового поискового монстра, как PageSpeed.

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

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

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

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

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.