Содержание
Навигация играет важнейшую роль в успехе дизайна сайта; она помогает посетителям найти то, что они ищут, и при этом легко проследить путь назад. В этой статье мы рассмотрим, как реализовать и оформить хлебные крошки на вашем сайте для улучшения навигации и пользовательского опыта, чтобы вы могли улучшить свои собственные сайты.
Существует множество методов навигации по сайту, которые зависят от потребностей и архитектуры вашего сайта. Одним из наиболее распространенных методов является навигация по хлебным крошкам: вторичная навигация, расположенная в верхней части веб-страницы, сразу под заголовком, которая показывает местоположение пользователя на сайте или в веб-приложении.
Оно было взято из сказки ”Гензель и Гретель”, где двое детей роняют хлебные крошки, образуя след, ведущий к их дому. Этот след из ссылок помогает пользователям проследить свои шаги и определить кратчайшие пути. Хлебные крошки очень важны, поскольку они дают пользователям уверенность в том, что они смогут продолжить исследование, зная, что они легко найдут обратную дорогу.
Когда их следует использовать?
На больших веб-сайтах. На веб-странице в качестве дополнительной функции. Хлебные крошки на основе пути обеспечивают дополнительную функцию в рамках иерархической организации.
В чем же их преимущества?
Хлебные крошки снижают процент отказов, направляя посетителей к другим похожим категориям, если первоначальный результат не соответствует их ожиданиям. Это побуждает их изучать другие разделы и оставаться на сайте дольше, а не уходить, не найдя того, что они искали.
Хлебные крошки улучшают рейтинг сайта и повышают удобство работы с ним. Поисковые системы используют хлебные крошки для категоризации и контекстуализации информации, и их присутствие на страницах поиска может улучшить SEO и привести к повышению рейтинга и увеличению трафика.
Хлебные крошки улучшают навигацию и облегчают пользователям поиск нужной информации, побуждая их посещать другие разделы сайта и улучшая общее впечатление. Это также может положительно сказаться на рейтинге поисковых систем.
Три основных типа навигационных хлебных крошек
Существует три стиля навигации по хлебным крошкам.
Хлебная крошка на основе атрибутов
Это тип хлебной крошки, в которой отображаются категории конкретной страницы или продукта. Этот тип хлебной крошки позволяет пользователям понять иерархию продуктов и переходить от общих категорий к конкретным; например, сайт одежды может классифицировать свои продукты на платья, короткие платья, а затем короткие синие платья. Этот тип хлебной крошки обычно используют компании, занимающиеся электронной коммерцией.
Хлебная крошка на основе пути
Также известны как ”дорожки истории” и отображают путь пользователя к текущему местоположению на сайте. Она функционирует аналогично истории браузера, отображая страницы, посещенные на сайте. Компании могут использовать эту функцию для помощи пользователям, которые применили фильтры для поиска продукта и хотят вернуться к исходным результатам. Одним из проявлений хлебных крошек на основе пути является кнопка “Вернуться к результатам”, которая облегчает пользователям переход к предыдущей информации и ее редактирование в многостраничных формах.
Хлебная крошка на основе местоположения
Разновидность хлебных крошек, показывающая иерархию сайта. Такие хлебные крошки помогают пользователям ориентироваться на сайте с множеством категорий и разделов, таких как ”О нас” и “Блог”. Например, компания может использовать хлебные крошки, основанные на местоположении, чтобы указать пользователю, что он просматривает конкретную запись в разделе “Блог”. Эти хлебные крошки также позволяют пользователям вернуться на главную страницу. Они особенно полезны для сайтов с большим объемом контента.
Проектирование хлебных крошек для сайта
При создании хлебных крошек для сайта необходимо, прежде всего, определить иерархию сайта,
Определить иерархию сайта.
Перед созданием ”хлебных крошек” необходимо понять организацию и структуру сайта, в том числе определить категории, подкатегории, страницы и их взаимосвязь. Это понимание послужит основой для организации иерархии “хлебных крошек”.
Выбор разделителя
Символ, который выделяет каждый уровень иерархии Breadcrumbs, называется разделителем. Обычно используются такие разделители, как символ ”больше, чем” (>) или прямая косая черта (/). Для обеспечения легкости распознавания и единообразия на сайте важно выбрать легко заметный и единообразно используемый разделитель.
Выбор стиля и оформления
Стиль и расположение ”хлебной крошки” влияют на ее общий вид и удобство использования. Следует выбрать стиль, соответствующий общему дизайну сайта, и удобную для чтения и понимания схему.
Принятие решения о количестве отображаемых уровней
Хлебные крошки могут иметь один, два или более уровней иерархии. Количество отображаемых уровней зависит от размера и сложности сайта, а также от потребностей пользователя. Важно найти баланс между достаточным количеством информации для навигации и отсутствием беспорядка.
Реализация хлебных крошек на сайте
Хлебные крошки на сайте могут быть реализованы с помощью HTML, CSS и JavaScript. Для понимания мы воспользуемся следующим примером. Создадим HTML-файл:
<!doctype html>
<html lang="en">
<head>
<title>breadcrumb</title>
</head>
<body>
<h1 style="color: green">BREADCRUMB SITE</h1>
<ul class="crumb-nav" id="breadcrumb">
<li>
<a href="home"> HOME </a>
</li>
<li class="movie-parent">
<a href="movies"> MOVIES </a>
<ul class="movie-genres">
<li><a href="action" class="act">Action</a></li>
<li><a href="comedy">Comedy</a></li>
<li><a href="drama">Drama</a></li>
<li><a href="romance">Romance</a></li>
</ul>
</li>
<li>
<a href="photos"> PHOTOS </a>
</li>
<li>
<a href="Audio"> AUDIO </a>
</li>
</ul>
</body>
</html>
Затем мы выполняем стилизацию с помощью CSS.
.crumb-nav {
padding: 10px 18px;
background-color: rgb(238, 238, 238);
}
.crumb-nav > li {
display: inline;
}
.crumb-nav > li > a {
color: #026ece;
text-decoration: none;
}
.crumb-nav > li > a:hover {
color: red;
text-decoration: underline;
}
.movie-genres > li > a:hover {
color: red;
text-decoration: underline;
}
.crumb-nav li + li:before {
padding: 4px;
content: '/';
}
ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: small;
}
.movie-genres {
display: none;
}
.movie-parent:hover .movie-genres {
display: block;
}
const movieParent = document.querySelector('.movie-parent');
const movieGenres = document.querySelector('.movie-genres');
movieParent.addEventListener('mouseover', function () {
movieGenres.style.display = 'block';
});
movieParent.addEventListener('mouseout', function () {
movieGenres.style.display = 'none';
});
Этот код устанавливает слушатель событий, который срабатывает, когда пользователь наводит курсор на элемент “movie”. Сначала код использует метод querySelector() для выбора элементов с классами “movie-parent” и “movie-genres”. Затем к элементу “movie-parent” добавляются два слушателя событий: mouseover и mouseout.
Когда срабатывает событие mouseover, то есть пользователь наводит курсор на элемент “movie-parent”, код изменяет свойство display элемента “movie-genres” на “block”, делая его видимым. И наоборот, когда срабатывает событие mouseout, то есть пользователь перемещает мышь от элемента “movie-parent”, код устанавливает свойство display элемента “movie-genres” обратно на none, снова скрывая его.
В целом этот код создает простой эффект наведения, который отображает и скрывает выпадающее меню жанров фильмов, когда пользователь наводит курсор на элемент “movie”.
Интеграция хлебных крошек с системой управления контентом
Следующим шагом после создания динамической хлебной крошки является ее интеграция с ”системой управления контентом”. Навигация Breadcrumb в системе управления контентом обычно генерируется динамически на основе текущей страницы и ее места в иерархии сайта.
Чтобы интегрировать Breadcrumb в систему управления контентом, необходимо:
- Иметь доступ к исходному коду сайта и уметь добавлять пользовательский код. Для этого необходимо поместить HTML-код навигации Breadcrumb в нужное место на странице и связать его с таблицей стилей CSS для стилизации.
- Далее, код JavaScript, создающий эффект наведения, может быть включен на страницу либо в раздел head HTML-файла, либо во внешний JavaScript-файл, связанный со страницей.
- Наконец, система управления контентом должна быть запрограммирована на динамическую генерацию ссылок в хлебной крошке в зависимости от текущей страницы и ее местоположения в иерархии сайта. Для этого обычно используется язык программирования PHP, Ruby on Rails или Java, позволяющий получать необходимую информацию из базы данных системы управления контентом и генерировать HTML-код хлебной крошки.
Выполнив эти действия, вы сможете создать динамическую хлебную крошку с эффектом наведения, интегрированную с системой управления контентом, что сделает навигацию и понимание местоположения удобными для пользователей.
Обеспечение четких и лаконичных меток хлебной крошки
Очень важно обеспечить удобство использования хлебной крошки, что можно сделать, представив четкие и лаконичные метки для каждой ссылки. Эти метки должны :
- Точно описывать местоположение текущей страницы в иерархии сайта и быть разборчивыми.
- Также отличной практикой является применение единого стиля к меткам и обеспечение их соответствия общему виду сайта. Для этого можно использовать стили CSS для форматирования текста и обеспечения его единообразного отображения на всех страницах.
- Кроме того, для разграничения ссылок и указания их иерархии целесообразно использовать разделители или стрелки. Это облегчает пользователям понимание взаимосвязи между ссылками и положением текущей страницы на сайте.
Благодаря таким четким и лаконичным обозначениям пользователи могут легко ориентироваться на сайте и четко понимать свое местоположение, что делает его более удобным и приятным для восприятия.
Заключение
В заключение следует отметить, что наличие эффективной хлебной крошки является важнейшим компонентом дизайна сайта. Понятные обозначения для каждой ссылки в сочетании с последовательной стилистикой и визуальными средствами позволяют пользователям легко перемещаться по сайту и всегда понимать, где они находятся. В результате посетители получают более качественный и приятный опыт. Применяя эти принципы, вы можете гарантировать, что хлебная крошка на вашем сайте будет эффективной, удобной для пользователя и повысит его общий уровень.