Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Оформление главного меню сайта

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

Оформление главного меню сайта

Давай по порядку рассмотрим несколько основных пунктов, соблюдение которых поспособствует хорошему оформлению главного меню сайта:

  1. Меню должно располагаться на всех страницах сайта. Это тот элемент, который должен связывать страницы вашего ресурса в единое целое. Находясь в любом месте сайта, пользователь должен иметь возможность быстро вернуться на главную страницу, а также перейти в какой-то другой раздел. Элементы, отображающиеся на всех страницах сайта вне зависимости от их типа и содержимого, называются сквозными. В общем главное меню всегда должно быть сквозным. Исключение лишь может составить страница 404 ошибки.
  2. Меню не должно содержать в себе слишком много ссылок (оптимальный вариант - до 10). Десяти ссылок, как правило, вполне хватает для того, чтобы отобразить основные разделы сайта. В этом случае глаза посетителя не будут разбегаться по сторонам, ему будет легче сконцентрироваться на главном меню и разделах сайта. Основываясь на статистике, можно сделать вывод, что большинство горизонтальных меню на сайтах содержат 5-6 ссылок.
  3. main-menuНе перегружать меню лишними ссылками. Чтобы не перегружать главное меню, можно вынести ссылки на страницы с контактными данными, прайс-листом и т.д. на отдельное место (к примеру, разместить их под хедером). Также можно продублировать ссылки на эти страницы в футере. Времена, когда главное меню полностью дублировалось в подвале сайта давно прошли и в оба эти меню можно и нужно вставлять различные ссылки. Самое важное всегда должно быть на виду, а ссылки на второстепенные страницы можно разместить и в подвале сайта. Кому надо, все равно найдут, если будет желание.
  4. Не стоит использовать большое количество вложений (в выпадающем меню). Такое меню может быть горизонтальным и вертикальным. Однако в том и в другом случае принцип действия будет похожим – после наведения на один из пунктов будет выдвигаться дополнительное меню, которое визуально закроет часть страницы. На некоторых сайтах можно встретить сразу 3 или 4 уровня вложенности меню. Понятно, что пользователю в этом случае будет очень неудобно ориентироваться в содержимом сайта. Кроме того, нужно очень точно двигать указателем мыши по пунктам выпадающего меню. В противном случае оно может автоматически закрыться и вам придется начинать все с начала. Также есть риск того, что вы случайно ткнете по другому пункту.
  5. Используйте выделение ссылок разными цветами. Во-первых, в правилах CSS желательно прописать изменение цвета уже посещенных ссылок. В этом случае человек будет знать, что в данный раздел сайта он уже заходил и смотрел материалы, которые там размещены. Желательно, чтобы менялся также цвет ссылок на обычные страницы со статьями, а не только на страницы с разделами. Во-вторых, при помощи CSS сделайте подсветку того раздела сайта, в котором пользователь находится на данный момент. Так человек всегда сможет понять, где он находится, а затем перейти в какой-то другой раздел. Вместо или помимо подсветки также имеет смысл использовать отображение мини-пути до страницы, на которой находится пользователь, начиная с главной (хлебные крошки).
  6. При наличии большого числа подразделов сайта целесообразно делать не выпадающее вбок, а раскрывающееся вниз меню. В случае с вертикальным меню при нажатии на ссылку внизу открываются дополнительные пункты подразделов. В случае с горизонтальным меню под выбранным пунктом появляется еще одно горизонтальное меню с подразделами. В этом случае пользователю будет очень легко перемещаться по сайту и ориентироваться в его содержимом.

Предыдущая статья:
Пресс-релиз — один из видов рекламы в интернете

Читайте также:
Версия для печати


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»