Помните сайты середины 2000-х годов? Огромные списки ссылок справа и слева страницы и абсолютно непонятная навигация. К счастью, ситуация изменилась и сейчас в тренде другие принципы создания меню и навигации.
Содержание
Жизненная необходимость в размещении на сайте меню
Хотя вы по-прежнему можете вывалить на пользователя сразу список всех страниц сайта, поверьте — это не самый эффективный путь. Во-первых, всегда есть основной контент, а есть вторичный, и их надо разделять по степени полезности. Незачем путать человека, впервые пришедшего на сайт, и показывать ему абсолютно все. Гораздо эффективнее разделить контент по категориям, сделать приятный интерфейс и понятную структуру. В основе этой работы лежит проектирование сайта с точки зрения UX (user experience). При попадании на сайт в первый раз человек еще не знает структуру сайта, его надо направлять.
В поведении пользователей сложились устойчивые модели поведения. Большинство людей ищут меню на самом верху страницы. Это понятно и логично. Меню зачастую ассоциируется с оглавлением, как у книги. Но чаще это место, которое направляет нас дальше по сайту, дает импульс к изучению контента. Грамотная структуризация навигации позволит задержаться пользователю на сайте надолго и стать горячим клиентом.
Резюмируя, меню на веб-ресурсах должно быть по следующим причинам:
- понятная навигация
- увеличение заинтересованности посетителей
- улучшение поведенческих факторов
- более простой путь по нахождению материалов
- структурированность и адаптация под поисковые системы при переобходе материалов.
Нижнее меню сайта
В футере (подвале) страницы можно продублировать пункты навигации, но чаще там размещают менее значимые страницы, которые могут заинтересовать пользователя после изучения лендинга или если содержание страницы не дало ответ на интересующий ответ. Как правило, это категории всех товаров и услуг, дополнительная контактная информация. Ничего зазорного в подобном дублировании навигации нет. Главное, не надо допускать разрастания футера. Высота в 400 пикселей является максимальной. А ведь еще надо разместить контактную информацию и копирайты!
Боковое меню
Меню в правой части экрана на информационных сайтах стало привычным. Обычно оно используется для размещения последних материалов веб-ресурса. Вообще, все, что не принадлежит основному содержанию страницы, но находится на одном уровне с ним принято называть сайдбарами. Традиционно в этих блоках размещают и другие элементы навигации: облако тегов, контактные формы. У сайдбаров есть важный недостаток: его, обычно, скрывают на мобильных устройствах. Меню слева в интернет-магазинах служит сводным списком категорий товаром. Здесь же иногда размещают фильтр по товарам. Это не самый популярный прием на сайте и если есть возможность создать сайт без него, то лучше так и поступить.
Верхнее горизонтальное меню
Это традиционный способ навигации на всех сайтах: от лендингов до больших корпоративных порталов. Еще буквально 7 лет назад данный тип меню вызывал большие вопросы у верстальщиков. Технологии не позволяли сделать расположение пунктов меню гибким, да и сами ссылки в ряд были тяжелым испытанием. Сейчас же это отработанный прием, которым никого не удивить. Привычно для пользователя размещенный слева логотип, а справа 5-8 пунктов меню. Если логотип и информация о компании размещена на верхней строчке, то для меню выделяется вся нижняя строчка. Это позволяет разместить до 12 читабельных пунктов.
У горизонтального меню есть разновидность: меню с выпадающими списками. Один из пунктов содержит в себе подпункты, появляющиеся только при наведении на «родителя» и располагающиеся снизу. Это очень удобно для каталогов услуг или категорий товаров. Вариантов появления анимации очень много, но чаще всего достаточно плавного появления сверху вниз.
Вертикальное меню
Как правило, этот прием используется при создании первого экрана эффективного лендинга или на имиджевых сайтах. Вертикальное меню прижато к краю экрана и содержит до 10 основных пунктов навигации с возможностью раскрытия подпунктов. Зачастую, вместо слов используются графические приемы отображения: иконки.
Проблемой данного метода можно считать мониторы разного размера. Мы «съедаем» большую часть экрана и на старых моделях можем утратить акцент на основной информации, на УТП. Для мобильных устройств этот прием и вовсе неактуален.
Использование гамбургера/бургера в меню
Популярный способ для скрытия меню и его последующего отображения. Пользователь при клике на кнопку с тремя полосками получает выплывающее меню. Обычно, меню-бургер используется в мобильных версиях сайтов или там, где дизайн не позволяет размещать большое количество ссылок. Преимущество этого способа в универсальности и привычках пользователей. Подобный прием применяется в большинстве приложений на телефонах и планшетах и воспринимается как органичный элемент управления. Легкая анимация + удобное использование позволили бургеру шагать по планете. Сейчас у этого меню практически нет конкурентов, и оно еще долго продержится в тренде. Откуда появится меню уже непринципиально: слева, справа, сверху или вообще всплывет на весь экран.
Фиксированное меню
Строго говоря, это не отдельный тип, а метод реализации. При прокрутке страницы вниз меню все равно остается перед глазами человека. Актуально для лендингов и сайтов с огромными пластами контента. Чтобы не мотать каждый раз вверх для перехода на другие страницы можно сразу кликнуть по верхним компонентам. Обычно комбинируется с верхним горизонтальным меню и с бургерами. Можно использовать вместе кнопкой «вверх» на этих же самых сайтах.
В профессионально созданном сайте меню — обязательный элемент. Благодаря грамотно выстроенной понятной навигации можно повысить заинтересованность людей в контенте, увеличить конверсию и повысить количество переходов между страницами. Используйте тесты, проектируйте структуру, делайте все для выбора оптимального меню на сайте и удобства пользователей. Обращайтесь в студию Profigrammm, если вам нужно создать лендинг, интернет-магазин или сайт-визитку. Кроме этого, мы занимаемся и доработкой сайтов: от дизайна до технического оснащения.
