Главное меню
Меню для сайта: вертикальное или горизонтальное?

Меню для сайта: вертикальное или горизонтальное?

  • Обновлено:
    2015-10-02
  • Просмотров:
    2916
  • Отзывов:
    2
  • Рейтинг: 4.0

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

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

Вертикальное меню: за и против

Преимущества вертикального меню можно свести к следующим пунктам:

  • Вам не нужно пытаться вписаться в ограниченную ширину страницы. Хорошо подходит для магазинов с большим ассортиментом, к примеру. Делайте столько пунктов, сколько вам нужно;
  • Не имеет значения длина названий пунктов. Горизонтальное лучше выглядит при более-менее одинаковых длинах названий. Да и ширина макета не резиновая. Придётся использовать либо мелкий шрифт, либо меньше пунктов, либо короче названия. Или же всё вместе, но выглядеть это будет скученно, нечитабельно;
  • У тех, кто планирует частое добавление разделов, будет меньше проблем. Страницу вниз можно прокручивать сколько-угодно. Хоть тысячу пунктов делайте, если нужно;
  • Хорошая обзорность структуры меню. Поскольку вы не ограничены в длине списков меню, можно не использовать выпадающие списки, выставив всю структуру пользователю напоказ. Так нагляднее;
  • Вы будете избавлены от проблем с отображением меню на смартфонах и др. мобильных устройствах. Меню не будет ни сужаться, ни растягиваться. 

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

Но есть и недостатки, конечно. Суть их такова:

  • Мы привыкли читать слева направо, а не сверху вниз. Увидев длинное вертикальное меню, посетитель сайта может быстро «устать» его просматривать;
  • По той же причине важные кнопки и ссылки веб-мастера располагают справа. Тут работает рефлекс: прочёл слева направо до конца строки и нажал кнопку либо кликнул по ссылке. Комфортно. В целом, правая сторона экранной области более выгодна с этой точки зрения для размещения важных элементов. Хотя ничто не мешает вам сломать стереотипы и разместить вертикальное меню справа, компенсировав данный негативный эффект;
  • Не на всех устройствах вертикальное меню будет полностью видно без необходимости прокрутки. На широкоэкранных дисплеях область просмотра широкая, но не длинная. Горизонтальное меню в шапке будет видно целиком 100%, а вот вертикальное – не факт;
  • Длинные название всё же должны быть в меру длинные. Так автоматически расширяемое в зависимости от длины содержимого текста вертикальное меню может налазить на соседние блоки (контент, слайдер и т. д.). Но это, скорее, не его недостаток, а следствие невнимательности разработчика сайта. Этого эффекта легко можно избежать.

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

Как понять, где располагать меню и другие важные элементы?

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

Если же вы рисуете макет проекта сами либо правите готовый шаблон, можно немного переиначить стандартную расстановку. Установите на свой сайт тепловую карту кликов. Такой инструмент можно встретить как в отдельности, так и в составе Метрики Яндекса и Аналитики Гугла. Суть в том, что после анализа количества кликов посетителей по областям сайта вы получите статистику наиболее популярных для кликов зон сайта. Это так называемая тепловая карта. Шаблоны-то разные, вот и руки у пользователей могут тянуться к различным областям в первую очередь. Возможно и отступление от стандартной схемы «вверху/справа» в вашем конкретном случае. Так вы сможете подкорректировать расположение меню и других важных элементов под поведение пользователей.

Выводы

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

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

Вот, пожалуй, и всё. Нередко мелочами называют то, из-за чего провалится будущая задумка. Помните об этом. Меню – не мелочь, продумывайте его/их сразу. Успехов! 

P.S. Пример создания вертикального меню с небольшой анимацией.

Шаг-1. Добавляем html-код в первый или во второй контейнер.

Шаг-2. Добавляем css-стили в конец шаблона "Таблица стилей (CSS)".

Чтобы отображались иконки Font Awesome в самый верх таблицы стилей вставляем строчку:

Код
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

Готово.

  • Автор: Дмитрий Луценко

avatar

Комментариев:2

Аватар pavlovadinagm
2 fb Asus Root • 12:28, 2016-03-24
Добрый день!
возникла необходимость разместить данное меню не с левой, а с правой стороны сайта, собственно вопрос что надо поменять, чтобы пункты подменю всплывали слева а не справа?
нет аватара
1 ya Руслан Яровой • 16:55, 2015-10-14
Я ещё хочу по рекомендовать автору сайта обратится к профессионалам из компании ВебГруп  http://webgr.ru/ . Тогда результат поиска вашего сайта будит гораздо лучше.