Посетитель сайта, блуждающий по бескрайним лесам ваших разделов, может и заблудиться. И, в отличие от Сусанина и немцев, выход у него есть: окошко закрыть. Если вы, создавая сайт, хотели не этого, ознакомьтесь.
Юзабилити - штука интересная и полезная. Хорошо спроектированный интерфейс помогает пользователю без труда найти искомую информацию. Меню сайта создается на основе древовидной структуры, созданной на этапе этапе аналитики, имеет множество разновидностей и сфер применения. Говорить здесь только о меню не совсем корректно, расширим область до термина "навигационная панель".
Общие требования к навигационному меню сайта
- Просто и понятно, логично. Меню призвано помогать посетителю в поиске нужной информации, не наоборот.
- Кратко. Число пунктов для классического верхнего меню - не более пяти. Пункты меню должны состоять из коротких одиночных слов, наиболее точно отражающих суть раздела, на который ссылаются.
- Размер и заметность. Меню должно занимать минимально необходимую площадь, быть хорошо различимым, но не отвлекать от содержимого.
- Меню должно полностью соответствовать установленной структуре сайта.
Разновидности меню сайтов
Установленного законом и наукой списка не существует, поэтому приведем свой.
По степени важности навигационные меню делятся на основные и второстепенные. Первые ведут на основные разделы сайта и доступны на всех страницах. Вторые — дополняют внутренние разделы. Например, списки подкатегорий в интернет-магазинах.
По техническим аспектам меню делятся на:
- Простое статическое меню вверху страницы. Может прокручиваться или фиксироваться при прокрутке, меняя прозрачность, цвет и т.д.
- Выпадающее многоуровневое меню. Дочерние пункты открываются при наведении или клике.
- Боковое меню или панель (aside). Может быть основным и дополняющим, с фиксацией при прокрутке или без таковой.
- Меню-гармошка (аккордеон). Нередко дополняет функционал боковых панелей там, где требуется вместить большой список дочерних элементов на относительно небольшой площади.
- Меню-бутерброд, он же «гамбургер». По клику открывается модальное окно со списком пунктов. Применяется в случае, когда пунктов меню много, а их структура должна быть оформлена в особом порядке. Любимая тема банков.
- Вкладки (табы). Чаще используется в качестве дополняющего меню, устанавливается в контенте или специальных панелях.
- Offcanvas-меню — выкатная боковая панель. Незаменима в мобильных версиях сайтов.
- Комбинированное меню. Экзотическое решение, в котором перемешиваются 2 и более видов навигационных панелей.
Пройдемся по списку более подробно.
Простое статическое меню
Классическая навигация, породившая все остальное. Подходит для большинства сайтов-визиток и лендингов, так как число пунктов не превышает 5 шт. Иногда может использоваться в более крупных проектах вместе с дополняющим.
Самое простое решение с точки зрения технической реализации. Нередко встраивается в навигационную панель вместе с логотипом и активным элементом — кнопка позвонить, поиск, вызов формы обратной связи и другое.
Выпадающее меню
Подходит подавляющему количеству сайтов. Выпадающее решение способно вместить второй, третий и более уровни меню. Дочерние пункты могут быть и длинными, и короткими. Выпадающее меню может быть реализовано горизонтально или в вертикальном исполнении. Выпадающее меню способно вместить форму входа, контакты, текст и картинки. Вместительность выпадающего меню позволяет использовать его повсеместно: сайты визитки, порталы, магазины.
Боковое меню или панель (aside)
Применяется для удобства пользователей. Раскрывает дополнительные разделы, которые не требуется отображать в основной навигационной панели, чтобы не сталкиваться с избыточным числом пунктов и путаницей. Например, в разделе "Документы" боковая панель будет выводить список рубрик и прямые ссылки на файлы. Область применения безгранична: подойдет для визиток, лендингов, больших порталов, онлайн-кинотеатров и т.д.
Меню-гармошка (аккордеон)
Не совсем музыкальный инструмент, но похоже. Имеет бесчисленное количество реализаций. Может быть использовано непосредственно в странице с контентом, либо в боковой панели, offcanvas-панели или статичном вертикальном меню. Благодаря гибкости и способности к трансформациям, может быть использовано в проекте любой сложности и масштаба. Главная фишка состоит в экономии места: по умолчанию дочерние пункты скрыты.
Меню-гамбургер
Гамбургером называют не собственно меню, а кнопку, которая его вызывает. Вызывать можно что угодно: модальное окно, offcanvas, выпадающие блоки и т.д. Благодаря мобильным устройствам, этот тип меню получил широкое распространение в WEB. На данный момент считается универсальным решением, решающим проблемы, связанные с большим количеством пунктов, длиной текста и необходимостью размещения дополнительной информации. Гамбургер открывает большие возможности для дизайнеров и проектировщиков, имеет бесчисленные варианты реализации. Экономит место, позволяя впихнуть невпихуемое разместить больше элементов на фиксированной площади: поиск, контакты, форма обратной связи, логотип.
Комбинированное меню-бутерброд используется на нашем сайте. Еще пример — Меню с большим числом пунктов
Вкладки (табы)
Дабы у посетителя сайта не отвалились пальцы при скроллинге, применяются различные методики оптимизации. Табы — одна из них. С помощью табов можно отойти от длинных портянок текста на странице и структурировать содержимое более компактно, наглядно и понятно. Для коротких заголовков используется горизонтальное исполнение, для остальных — вертикальное. С помощью табов возможно показать несколько страниц на одной, не используя переходов и перезагрузок.
Offcanvas-меню
Это меню призвано улучшить читаемость навигации и других элементов на мобильных устройствах. Большое распространение offcanvas получил в эпоху адаптивных сайтов. Конечно, мобильниками не ограничивается, и его применение стало повсеместным в качестве дополнительного и основного меню.
Какой бы выбор не был сделан, следует учитывать главное: удобство пользования и применимость.