Навигационное меню. Вертикальное или горизонтальное?

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

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

Боковое (вертикальное) меню

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

Так когда же имеет смысл применять вертикальное меню? Возьмём очень наглядный пример — сайт lenta.ru. Новостному сайту приходится иметь дело с таким громадным количеством рубрик, что вертикальное меню становится наилучшим выбором. Представьте, как этот список выглядел бы в случае расположения под шапкой сайта.

Вертикальное меню можно расположить и в правой части сайта. Собственно, неоценимое преимущество вертикального меню заключается в том, что не нужно вносить изменения в макет сайта при добавлении или удалении пунктов меню. У вертикального меню нет недостатка в свободном пространстве.

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

Верхнее (горизонтальное) меню

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

Сейчас большинство сайтов предпочитают использовать основное горизонтальное меню, сочетая его с небольшими вертикальными меню, имеющими второстепенное значение. Так делают, например Facebook или Google+ и другие большие порталы. Используя современные возможности CSS и jQuery дизайнеры могут внедрять на сайты выпадающие меню, создавая таким образом что-то вроде подрубрик.

Имеет ли вертикальная навигация право на жизнь?

Для обычных веб-сайтов вертикальные меню не такая уж необходимая вещь, но для сложных многофункциональных сервисов, типа панелей управления и почтовых ящиков, вертикальная навигация всё ещё представляет большую ценность.

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

Некоторые соображения по дизайну навигации

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

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

Каждый из типов навигации имеет свои преимущества и недостатки, поэтому при разработке сайта следует руководствоваться не только эстетической привлекательностью и модными трендами, но и здравым смыслом. Хотя, в случае небольших сайтов, в 90% случаев вы выберете горизонтальную навигацию. Или нет?