вход

Что такое строка навигации или как улучшить сайт

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

Зачем нужна строка навигации?

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

Когда нужна строка навигации?

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

Строки навигации

Вам кажется, что строка навигации это очень просто и может быть легко интегрирована в веб сайт? Не всегда. Для разных типов веб сайтов есть разные типы навигационных меню. Все зависит от структуры вашего контента. Как я упоминал в начале, мы коротко рассмотрим три типа. Первый тип строк навигации это стока - путь (path based breadcrumb). Она показывает пользователю точные шаги, которые он выполнил, чтобы попасть на текущую страницу. Это кликабельный, динамически создаваемый путь, позволяет переходить на любую из его составляющих частей. Пользователь может вернуться на любой уровень в пути, по которому он шел к данной странице. Второй тип строк навигации это строка - местоположение (location based breadcrumb). Она позволяет пользователю понять, где он находиться внутри иерархической структуры сайта.  Обычно они используются там, где есть множество страниц, назначенные для конкретного региона в рамках веб-сайта. Третий тип строк навигации это строка - атрибут (attribute breadcrumb). Она дает  пользователю информацию о том, к какой категории принадлежит  страница, на которой он находится. Например, пользователь посещает сайт на тему одежды. И здесь он может просматривать множество страниц, дающих детальную информацию о материале, цвете, стиле выбранной одежды. Каждая из этих страниц будет принадлежать к одной из категорий (атрибутов).

Примеры строк навигации

Guarian ↓

Пример строки навигации

The Glasgow Collective ↓

Пример строки навигации

Wufoo ↓

Пример строки навигации

Girl Scouts ↓

Пример строки навигации

Delicious ↓

Пример строки навигации

Apple ↓

Пример строки навигации

Yahoo! TV ↓

Пример строки навигации

CoolSpotters ↓

Пример строки навигации

Hillside Group ↓

Пример строки навигации

BubbleStick ↓

Пример строки навигации

Crooked Tongues ↓

Пример строки навигации

Mia & Maggie ↓

Пример строки навигации

Target ↓

Пример строки навигации

Design Collectors ↓

Пример строки навигации

Bell ↓

Пример строки навигации

Nasa ↓

Пример строки навигации

Ideo ↓

Пример строки навигации

Bridge 55 ↓

Пример строки навигации

Nestle ↓

Пример строки навигации

Marchand Trucs ↓

Пример строки навигации

По материалам Джоэля Рейеса


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Что такое строка навигации или как улучшить сайт

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

 

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