Оставить комментарий
В статье рассказывается:
Все ресурсы в Сети содержат обязательный элемент, без которого пользователю было бы сложно разобраться в предлагаемом контенте. Речь идет о меню сайта. Благодаря ему каждый посетитель получает возможность без труда переходить в нужные разделы, понимает, какая информация представлена на страницах, и проводит на веб-площадке больше времени.
Разберемся, как создать удобную и полезную навигационную систему.
Что собой представляет меню сайта
По запросу пользователя поисковик выдает список релевантных страниц. Переходя по ссылке, практически каждый посетитель ресурса в первую очередь ищет меню сайта, чтобы узнать, какой информацией создатели наполнили его, и выбрать интересующий раздел.
Основная роль меню главной страницы сайта – навигационная, оно упрощает и ускоряет ориентацию пользователя в контенте, помогает мгновенно найти необходимую информацию, не тратя время на изучение страниц, которые в данный момент ему не нужны.
Чтобы создать красивое меню для сайта, веб-мастера прибегают к помощи CSS. Можно воспользоваться готовыми шаблонами, скачав их со специализированных ресурсов. Генерирование скрипта на базе пользовательских параметров осуществляется в соответствующих онлайн-сервисах.
Правильное меню сайта должно отвечать нескольким важным требованиям:
Доступность. Этот элемент служит навигатором при «путешествии» пользователя по разделам ресурса, позволяет определить направление следующего перехода. Для удобства посетителей меню должно быть на каждой странице веб-сайта и позволять делать шаг назад для возврата на предыдущий URL.
Интуитивно понятное управление. Пользователь ценит ресурсы, настроенные дружелюбно, работа с которыми проста и логична. Об этом необходимо помнить при разработке структуры и дизайна меню.
Информативность. Продуманная структура навигационной системы служит хорошим путеводителем, благодаря ей легко ориентируешься в содержимом. Функционал меню расширяется при помощи «хлебных крошек» – специальных меток, по которым можно вернуться на предыдущие страницы и определить текущее местоположение.
Сбалансированность структуры. Сложно сказать, сколько именно категорий должно включать главное меню сайта. От создателей ресурса требуется умение достигать баланса между количеством основных разделов и числом подкатегорий.
Грамотная организация элементов. Иерархия категорий выстраивается в виде перевернутой пирамиды: вверху располагаются общие разделы, с каждым шагом вниз информация детализируется.
Понятные названия. Дружелюбность ресурса должна проявляться и в создании доступных наименований для разделов. Терминов и узкоспециальной лексики лучше избегать, как и дублирования одной и той же надписи на странице.
Следование единой концепции. Необходимо стремиться к сохранению единого вида элементов первого уровня во время перемещения по веб-сайту и однообразной реакции при наведении курсора. Для элементов одного уровня подбирается общий стиль.
Информационные страницы. Пользователь должен иметь доступ к сведениям о компании, контактам и разделу помощи с любой вкладки ресурса. Они могут объединяться в общем блоке, чтобы переход осуществлялся в один клик.
Основные виды меню сайта + примеры
Горизонтальное
Вариант, который встречается чаще остальных, и на это есть веские причины. Горизонтальное меню для сайта – самый простой способ информировать пользователя о содержании страниц ресурса.
Это наиболее привычное расположение элементов навигации. Оно не доставляет проблем при поиске нужного раздела и демонстрирует заботу веб-мастера о посетителях.
Для сайтов с развернутой структурой размещение по горизонтали считается лучшим решением.
Вертикальное
Альтернативой самому распространенному варианту является вертикальное меню для сайта, которое размещается по левому краю экрана.
Расположение названий разделов ресурса сверху вниз не менее удобно, особенно для блогов, где основную часть страницы занимают фото и текст.
Вертикальное, или боковое меню для сайта, требовательно с точки зрения длины входящих в него элементов: предпочтение следует отдавать коротким наименованиям, чтобы перечень не выглядел слишком широким.
Фиксированный хедер
Шапка меню сайта, которая отображается в неизменном виде на любой странице, – оптимальный выбор для ресурсов с длинной прокруткой, содержащих пространные статьи.
Такой список пунктов доступен пользователю постоянно, в каждом просматриваемом разделе.
Добавление в фиксированный хедер контактной информации и логотипа сделает навигацию еще более комфортной для посетителей.
«Плавающее»
Похожими свойствами обладает «плавающее» меню, с которым пользователи сталкиваются все чаще.
Удобство доступа к страницам ресурса с любого места на сайте уже успели оценить пользователи сайтов с таким видом меню. Наименования разделов не двигаются при прокрутке и всегда остаются перед глазами.
Иконки
Пиктограммы вместо слов или в сочетании с ними – хороший способ донести информацию до посетителей веб-сайта.
Используя понятные всем графические обозначения, создатели добиваются эффекта новизны и необычности, проявляют нестандартный подход к оформлению и упрощают взаимодействие с гостями ресурса.
Конечно, существует опасность, что не все смогут правильно расшифровать значение иконок, поэтому такой способ лучше применять на тематических сайтах для продвинутых пользователей Сети.
Нижнее меню сайта
Для тех, кто не боится экспериментов и готов на смелые шаги, чтобы привлечь внимание к своему проекту, есть неожиданное решение – поместить список пунктов внизу.
Для сайтов, где главная страница оформлена при помощи фоновой фотографии, это лучший вариант, поскольку не мешает воспринимать изображение.
Чтобы посетители не испытывали затруднений с поиском названий разделов, необходимо продумать визуальное выделение этого блока.
Современные варианты меню сайта
Два разных меню: одно располагается вверху страницы, другое появляется при скролле
Первое включает логотип, названия разделов и ссылки на социальные сети. В процессе прокрутки появляется вторая разновидность: с логотипом, призывом совершить целевое действие и кнопкой для заказа звонка.
Меню «гамбургер»
Выглядит как три полоски, размещенные в углу экрана. Полная версия становится доступна после клика по ним. Такой вариант применяется для привлечения внимания к контенту и минимизации отвлекающих факторов.
Распространено при создании мобильных версий веб-сайтов. Обычному меню присваивается видимость «только для компьютера», а «бургеру» – «только для мобильных».
Многоуровневое меню
Нажатие кнопкой мыши на отдельный пункт вызывает выпадение вложенного списка. Без такого решения непросто обойтись, когда ресурс имеет сложную структуру и содержит большое количество информации.
Вкладки (табы)
Применяются при необходимости выделить активный элемент из ряда однотипных. Например, в портфолио подсвечивается название работы, на которую пользователь кликнул мышкой.
Какой вид меню для сайта выбрать
Меню – обязательный компонент любого веб-сайта, помогающий пользователю без труда ориентироваться в содержимом ресурса и быстро находить нужную информацию. Многочисленные варианты расположения этого важного блока позволяют подобрать решение, которое идеально подойдет к тематике, объему и другим особенностям проекта.
Какой бы вид меню из рассмотренных выше вы ни выбрали, в первую очередь стоит подумать о его доступности для всех способов просмотра сайта. Так, при работе с мобильными устройствами пользователи лишены возможности раскрывать списки при помощи курсора, поскольку на сенсорных гаджетах его просто нет.
Еще один момент, который также ограничивает возможности мобильных пользователей, – задействование flash-технологий. Это не самый частый прием, используемый веб-мастерами для создания меню, а для посетителей, зашедших на сайт с планшета или смартфона, он будет полностью бесполезен.
Не менее важным фактором является дизайн меню сайта. Несмотря на разнообразие приемов, которые могут использоваться при его разработке, самыми распространенными остаются классические варианты расположения названий разделов ресурса – горизонтальное и вертикальное.
Для удобства восприятия соблюдаются некоторые условия. Так, в горизонтальном меню не используют написание в две строки, а вертикальное делают достаточно узким, для чего наименования вкладок тоже оставляют короткими (одно-два слова).
С дизайном неразрывно связана реализация программными средствами. Наиболее простым и доступным вариантом является меню для сайта на HTML, можно использовать Javascript и Flash. Чтобы индексация ресурса поисковыми роботами была полноценной, предпочтение отдают меню сайта на HTML и CSS.
При разработке структуры придерживаются иерархии: от общего к более конкретному. Во избежание излишней громоздкости не стоит слишком сильно «углублять» меню, трех уровней вполне достаточно для комфортной навигации по сайту.
В особых случаях, когда специфика ресурса требует большей глубины (например, в интернет-магазинах), применяется структура «решетка».
Создатели проекта, исходя из его типа и объема, останавливаются на одном меню или добавляют еще несколько. При проектировании дополнительных навигационных элементов руководствуются теми же принципами: доступность для пользователей, видимость для поисковиков, продуманная структура и ограниченное количество уровней по «глубине».
Усилия веб-мастеров должны быть направлены на то, чтобы создать лучшее меню сайта: комфортное для посетителей, способствующее в перспективе их конверсии в клиентов или покупателей.
Влияние меню сайта на продвижение
Главная цель, которую стремятся достичь собственники ресурсов, – место в топе поисковой выдачи. Поможет в решении этой задачи соблюдение следующих условий:
Удобная навигация и грамотная перелинковка. Внутренняя оптимизация в итоге будет оценена по достоинству и пользователями, и поисковыми роботами. Перелинковка помогает при ориентации посетителей в контенте ресурса, позволяет легко переходить по ссылкам в нужные разделы. Правило трех кликов должно стать основным при навигации по сайту.
Интересные названия разделов способствуют увеличению времени, которое посетитель проведет на страницах проекта. Для поисковиков это положительный критерий при оценке поведенческих факторов.
Грамотная разработка сайта подразумевает создание семантического ядра. Для этого предварительно собирается и анализируется информация о тематических поисковых фразах. Названия разделов должны представлять собой самые частотные из пользовательских запросов. Это значит, что заголовки меню нужно разрабатывать в тесном контакте с SEO-специалистом.
Графические элементы необходимо снабдить alt и title, чтобы поисковики учитывали их при индексации ресурса.
При разработке интерфейсов веб-мастера опираются на результаты исследования психолога Дж. Миллера. Он выяснил, что возможности кратковременной памяти человека сильно ограничены.
В среднем, каждый способен одновременно воспринимать не более 7-9 элементов в различных комбинациях: пять коротких слов, семь букв, восемь десятичных чисел и так далее.
Все, что выходит за рамки этого количества информации, проходит мимо: мозг как бы отсекает лишнее, откладывая его на потом. Если хотите создать меню сайта, элементы которого будут попадать в зону внимания пользователя, лучше всего остановиться на семи пунктах. Допустимым считается количество заголовков разделов от пяти до девяти.
Это позволит человеку быстро понять тематику ресурса, глубину раскрытия представленной информации, оценить проект с точки зрения потенциальной пользы и принять решение о дальнейшем изучении сайта.
Выше мы говорили об иерархической структуре, подразумевающей наличие гораздо большего количества пунктов. Они скрываются во вложениях второго и последующего уровней, каждый из которых тоже должен состоять не более чем из семи элементов. Другой вариант – создание второстепенного меню при помощи виджета.
Как создать меню сайта
С технической точки зрения речь идет о списке ссылок, позволяющих перейти на определенную внутреннюю страницу ресурса. Проще всего построить такую навигационную систему с использованием CSS и HTML.
Вертикальное меню
В первую очередь создаем маркированный список. Чтобы получить возможность идентифицировать его, добавим к нему атрибут id с идентификатором "navbar". Каждый элемент <li> получившегося списка будет содержать по одной ссылке:
<ul id="navbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
Далее необходимо сбросить стили списка, установленные по умолчанию, убрать внешние и внутренние отступы и маркеры пунктов. Следующий шаг – задать требуемую ширину:
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
Приступаем к стилизации ссылок. Для этого используем добавление фонового цвета, изменение параметров текста (размера, цвета и насыщенности шрифта), удаление подчеркивания. Затем оформляем отступы и переопределяем отображение элемента <a> со строчного на блочный. Еще одно действие – добавление левой и нижней рамки к пунктам перечня.
Главная задача, которая решается в процессе этапа, – переопределение строчных элементов на блочные. Это необходимо, чтобы ссылки заняли все пространство внутри пункта. В результате пользователю необязательно попадать курсором точно на текст, достаточно навести его на область нужного элемента.
#navbar a {
background-color: #949494;
color: #fff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
}
#navbar li {
border-left: 10px solid #666;
border-bottom: 1px solid #666;
}
Представим весь код меню сайта, расположенный выше, в виде одного примера:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
#navbar li {
border-left: 10px solid #666;
border-bottom: 1px solid #666;
}
#navbar a {
background-color: #949494;
color: #fff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
}
</style>
</head>
<body>
<ul id="navbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
</body>
</html>
При желании можно добиться эффекта, когда пункт меняет внешний вид после наведения на него курсора мыши. Для этого используется псевдо-класс :hover.
Представленный выше пример вертикального меню можно дополнить правилом для таблицы стилей:
#navbar a:hover {
background-color: #666;
border-left: 5px solid #3333FF;
}
Горизонтальное меню
Навигационный блок, расположенный по горизонтали вверху страницы, считается самым распространенным вариантом. Рассмотрим создание такого меню сайта на примере.
Для этого стилизуем обычный список. Добиться расположения пунктов друг за другом поможет присвоение свойству display для элементов <li> значения inline.
Первый шаг – создание маркированного списка со ссылками:
<ul id="navbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
Избавимся от стиля для списков по умолчанию и переопределим пункты с блочных на строчные, используя пару правил:
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar li { display: inline; }
Следующий шаг – определение стилевого оформления для горизонтального меню сайта:
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
border: 2px solid #0066FF;
border-radius: 20px 5px;
width: 550px;
text-align: center;
background-color: #33ADFF;
}
#navbar a {
color: #fff;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
display: inline-block;
width: 100px;
}
#navbar a:hover {
border-radius: 20px 5px;
background-color: #0066FF;
}
Выпадающее меню
Такая навигационная система включает основное меню сайта, состоящее из размещенных горизонтально ссылок, и подпункты, отображаемые только после наведения курсора на область пункта, к которому они привязаны.
Начинаем с создания HTML-структуры будущего перечня разделов. Базовые элементы объединяем в маркированный список:
<ul id="navbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
Список подпунктов вкладываем в элемент <li>, содержащий родительскую ссылку. В результате выстраивается структура будущего выпадающего меню для сайта:
<ul id="navbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a>
<ul>
<li><a href="#">Адрес</a></li>
<li><a href="#">Телефон</a></li>
<li><a href="#">Email</a></li>
</ul>
</li>
<li><a href="#">О нас</a></li>
</ul>
Пишем CSS код. Чтобы список с подпунктами не отображался на странице постоянно, скрываем его при помощи объявления display: none;. Сделать его видимым при наведении курсора на элемент <li> позволит преобразование в блочный элемент:
#navbar ul { display: none; }
#navbar li:hover ul { display: block; }
Установленные по умолчанию отступы и маркеры обоих списков удаляем. Из элементов с навигационными ссылками формируем плавающее горизонтальное меню, а от подпунктов добиваемся отображения друг под другом при помощи float: none;.
#navbar, #navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }
Следующая задача, которую необходимо решить, – не позволить выпадающей части сдвигать контент, находящийся под навигационным блоком. Добиться этого поможет присвоение пунктам основного списка position: relative;, а перечню подпунктов – position: absolute;.
Добавление свойства top со значением 100 % обеспечит отображение абсолютно позиционированного подменю точно под ссылкой.
#navbar ul {
display: none;
position: absolute;
top: 100%;
}
#navbar li {
float: left;
position: relative;
}
#navbar { height: 30px; }
Поскольку браузеры не принимают во внимание плавающий контент и не учитывают его в качестве содержательного элемента, мы добавили высоту для родительского списка. Без этого шага браузер не воспримет перечень, а следующий за ним контент будет обтекать пункты меню.
После стилизации обоих списков выпадающее меню для сайта можно считать готовым:
#navbar ul {
display: none;
background-color: #f90;
position: absolute;
top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar {
height: 30px;
background-color: #666;
padding-left: 25px;
min-width: 470px;
}
#navbar li {
float: left;
position: relative;
height: 100%;
}
#navbar li a {
display: block;
padding: 6px;
width: 100px;
color: #fff;
text-decoration: none;
text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }
5 нюансов создания меню сайта
Отход от стандартов
Горизонтальное или вертикальное расположение блока навигации привычно и понятно большинству пользователей. Именно здесь они ищут названия разделов ресурса, чтобы оценить тематику и потенциальную пользу проекта.
Спрятав меню за декоративными элементами или предложив иное необычное решение, вы рискуете потерять консервативно настроенных посетителей, которые не оценят такую креативность. В итоге конверсия снизится, поскольку большинство пользователей закроет страницу в поисках более дружелюбного интерфейса.
Конечно, это не значит, что от творческих поисков при оформлении придется отказаться. В данном случае необходим идеальный баланс между нестандартным подходом, который заинтересует потенциальных клиентов, и комфортом использования системы навигации.
Универсальные названия разделов
Верный способ отпугнуть пользователей – присвоить пунктам меню слишком общие, безликие имена, ведь они никак не помогут определить, есть ли на сайте нужная информация, товары и услуги. Такой подход демонстрирует безразличие к посетителям: по словам «Продукция», «Технологии», «Сервис» сложно определить, какой именно контент скрывается за ними.
Точные названия разделов, перекликающиеся с запросами пользователей, сделают навигацию более доступной, а сайт – привлекательным для поисковых роботов.
Люди не ищут в Сети абстрактные товары или услуги, они вводят точное название предмета поиска, поэтому необходимо адаптировать заголовки пунктов под их ожидания.
Выпадающее меню
Популярность этого элемента навигации очень высока. Его можно встретить практически на каждом сайте, но есть как минимуму два момента, на которые нужно обращать внимание при разработке выпадающего меню.
Главный минус для пользователей – необходимость соблюдать тщательность при раскрытии выпадающих списков. Любое неосторожное движение мышкой приводит к сворачиванию перечня, и нужную позицию приходится искать заново.
Для многих пользователей это весьма раздражающий фактор, вынуждающий закрывать страницу и уходить на другие сайты, где нет подобных игр в прятки.
Вторая причина, по которой владельцы ресурсов отказываются от использования выпадающего меню, – это снижение посещаемости отдельных страниц или глубины просмотра. Нередко жалуются на малое количество посещений страниц верхнего уровня из-за выпадающих списков, «уводящих» пользователей вниз по структуре.
С другой стороны, для площадок с большим количеством разделов и подкатегорий (например, интернет-магазинов) этот недостаток оборачивается достоинством: юзабилити сайта повышается, посетителям проще найти необходимую позицию среди множества других.
Слишком много пунктов
Когда-то это считалось нормой, но сегодня от чрезмерно большого количества пунктов пора отойти. Не забываем о правиле семи элементов: именно столько наша кратковременная память может обрабатывать одновременно.
В идеале их число не должно превышать пяти. Такой объем подчеркивает значимость каждого, не дает вниманию распыляться и позволяет сконцентрироваться на самом важном.
Это относится не только к навигационной системе сайта, но и ко всему контенту в целом. Слишком много информации – не всегда преимущество конкретного ресурса, пользователь может «заблудиться» в поисках нужных сведений и в итоге покинуть площадку.
С точки зрения SEO лаконичность навигации тоже очень ценна. Внешние ссылки приводят людей на главную страницу, поэтому среди поисковых роботов она котируется выше остальных. Слишком большое количество ссылок в навигации делает домашнюю страницу не такой значимой, как внутренние.
Неудачный выбор места для кнопки оформления заказа
В пределах одного списка тоже действуют определенные правила запоминания элементов. Психологи, опираясь на результаты профильных исследований, утверждают, что проще всего привлечь внимание человека к первым (эффект первичности) и последним (эффект новизны) пунктам любого перечня.
Все, что находится внутри списка, как бы размывается и требует усилий для сохранения в памяти. В психологии это явление известно как «кривая серийных позиций».
Исходя из этого, наиболее важные элементы меню необходимо ставить по краям, то есть в начале и конце списка. Для второстепенных подойдет расположение в центре. Контактные сведения лучше разместить в правом верхнем углу, где их ожидает увидеть большинство пользователей.
Меню играет важную роль для свободной ориентации посетителей внутри сайта, помогает легко находить информацию и обеспечивает комфортное пребывание на страницах.
Пользуясь продуманной и понятной навигацией, человек не испытывает проблем с поиском и проводит на площадке больше времени. Это обеспечивает улучшение поведенческих факторов и более высокий рейтинг ресурса в глазах поисковиков.
Для воплощения навигационного блока могут использоваться различные формы, но в стремлении удивить посетителей креативными решениями и нестандартным подходом нельзя забывать об их удобстве. Слишком сложные варианты отпугнут потенциальных клиентов. Меню для сайта должно быть понятным, доступным и привлекательным.
