Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн меню сайта: как сделать навигацию удобной
Дизайн развивается с молниеносной скоростью, и если раньше меню всегда было стандартизировано: статичная полоса с текстом, при нажатии на который, происходит переход на определенные страницы, то теперь есть огромное разнообразие меню и это круто! Но, иногда, желание выделиться и сделать меню креативным, выходит за рамки первостепенной задачи — удобство навигации для пользователя.
Зачем нужно меню на сайте и почему важно продумать его дизайн
Меню сайта — это элемент дизайна, предназначенный для навигации. То есть, он должен помогать пользователю перемещаться по сайту, а не путать его.
Рассмотрим основные факторы, на что влияет грамотная разработка меню сайта:
Рассмотрим основные факторы, на что влияет грамотная разработка меню сайта:
Навигация
Создавая меню и проектируя вложенность страниц, вы показываете пользователю структуру сайта, чтобы он понимал иерархию. Для этого необходимо продумывать пункты: основные / второстепенные / названия разделов и т. д.
Горизонтальное меню с выпадающим списком, где классическое меню — основное, а выпадающий список — второстепенный по приоритетности.
Благодаря этому, пользователь не заблудится и сможет в пару кликов перейти на интересующий раздел сайта.
Конверсия
Комфортный поиск разделов и важных страниц повышает конверсию сайта. Можно создать логику и вести пользователя так, как требуется компании, отделяя важные разделы сайта от второстепенных. Если пользователь может свободно и комфортно перемещаться, находить нужную информацию, он с меньшей вероятностью покинет сайт.
Разделение навигации на конверсионные и информационные пункты меню сайта Solok Cosmetics, проект WebValley Studio
SEO-оптимизация
Навигация важна не только для пользователей, но и для поисковых роботов. Сканируя сайт, робот анализирует его структуру. Меню помогает ему понять вложенность страниц и их вес. Поэтому важно, разрабатывая меню, оптимизировать его под продвижение.
Изменение меню на сайте СТЛогистик для SEO-продвижения, проект WebValley Studio
Запишись на PRO Web и получи золотой билет в крупные агентства.
Стань профессиональным веб-дизайнером за 5 месяцев. Обучайся напрямую у практиков — команды агентства, пройди мощнейшую прокачку от арт-директора и начни создавать сайты премиум-уровня.
Требования к меню
Задача маркетолога, UX/UI-дизайнера упаковать и вывести новый продукт на рынок. В условиях высокой конкуренции необходимо выделить бренд среди сотни однотипных компаний, в чем помогает уникальный дизайн.
Исследование, проведенное компанией KoMarketing, показало, что 50% пользователей, опрошенных в ходе интервью, используют навигационное меню при знакомстве с сайтом, и 37% покидают его в первые минуты из-за неудобной навигации. Поэтому креатив — это круто, но в основе разработки меню сайта должно лежать удобство.
Исследование, проведенное компанией KoMarketing, показало, что 50% пользователей, опрошенных в ходе интервью, используют навигационное меню при знакомстве с сайтом, и 37% покидают его в первые минуты из-за неудобной навигации. Поэтому креатив — это круто, но в основе разработки меню сайта должно лежать удобство.
Структура
Важно не путать со структурой сайта, это совершенно разные вещи. Общая структура сайта показывает взаимосвязь блоков и страниц: откуда можно перейти и на какую страницу. Структура меню — отражает навигацию по значимым страницам (редко по блокам, например, на лендинге).
То есть, в основном, навигация строится на транзитных страницах, например, в меню может быть заложена страница «Портфолио» со всеми проектами, а не конкретно «Проект 1», «Проект 2» и т. д. В редких случаях, когда сайт небольшой, в меню может быть отражена полная схема сайта.
Важно: не пытайтесь впихнуть в меню все страницы и разделы. Это перегружает и утяжеляет его. И вместо того, чтобы быстро найти нужный раздел на сайте, пользователь вынужден долго искать нужный раздел в меню. Основная цель этого элемента дизайна — навигация. А если там борщ из сотни разделов, то теряется самая суть меню, оно становится бесполезным.
В этой работе важно задать цели, чего вы хотите добиться: повышения конверсии или представления информации. Исходя из цели, определяйте последовательность пунктов, название и иерархию.
То есть, в основном, навигация строится на транзитных страницах, например, в меню может быть заложена страница «Портфолио» со всеми проектами, а не конкретно «Проект 1», «Проект 2» и т. д. В редких случаях, когда сайт небольшой, в меню может быть отражена полная схема сайта.
Важно: не пытайтесь впихнуть в меню все страницы и разделы. Это перегружает и утяжеляет его. И вместо того, чтобы быстро найти нужный раздел на сайте, пользователь вынужден долго искать нужный раздел в меню. Основная цель этого элемента дизайна — навигация. А если там борщ из сотни разделов, то теряется самая суть меню, оно становится бесполезным.
В этой работе важно задать цели, чего вы хотите добиться: повышения конверсии или представления информации. Исходя из цели, определяйте последовательность пунктов, название и иерархию.
Меню WebValley Studio разделенное на логические разделы для разных целей пользователей сайта.
Названия пунктов
Основная задача названий пунктов — простота понимания. Здесь не нужно выводить новые тренды, пытаться выделиться на фоне конкурентов и создавать целые лозунги. Если пользователю будет не ясно, куда ведет данный раздел, он просто потеряется и не найдёт нужную страницу.
Если пункт меню не удается описать в рамках одного слова, не страшно, можно сделать емкое предложение из 2−3-х слов. Но учитывайте визуальную составляющую: дурной тон в дизайне, если название пункта будет распадаться на 2 или 3 строки:
Плохой пример: из-за длинных названий пунктов, меню просто распалось по частям.
Названия должны быть лаконичными, в идеале состоять из одного слова и быть максимально понятным для пользователя: «Что произойдет, когда я нажму на …». Это не место для фантазии.
Функциональность
Помимо переходов на страницы сайта, в меню нужно предусмотреть функциональность и микроанимацию, которая поможет пользователю при взаимодействии с сайтом. Важно: не забывайте делать все элементы кликабельными или отразите, что сейчас пункт неактивен, например, это можно сделать менее насыщенным цветом:
Социальная сеть Behance на сайте WebValley Studio менее выражена по насыщенности оттенка, таким образом, считывается информация, что данная иконка сейчас неактивна.
Используйте подчёркивание или другие способы выделения, чтобы показать пользователям, где они сейчас находятся, или hover-эффект, чтобы отразить на какой элемент они навели курсором мыши.
Пункт «О студии» на сайте WebValley подчеркивается при наведении.
Активный пункт меню отображает пользователю, где сейчас он находится на сайте СТЛогистик.
При наведении курсора, активный пункт закрашивается в фирменный цвет компании X-merch и отражает больше информации, проект WebValley Studio
Дополнительно в меню могут быть встроены следующие функции :
- Звонок при нажатии на номер телефона или иконку;
- Открытие pop-up окон с формой;
- Открытие почты для отправки письма при нажатии на иконку или адрес электронной почты;
- Открытие меню второго уровня.
Логотип
Заложите в меню логотип компании, при нажатии на который, пользователя будет перебрасывать на Главную страницу. Пользователи уже привыкли к такому сценарию, и испытывают неудобства, когда логотип в шапке некликабелен.
Благодаря этому способу, вам не придётся разрабатывать отдельно пункт «Главная», что экономит место. Единственное, если возраст вашей аудитории 45−50+ стоит предусмотреть это решение.
Благодаря этому способу, вам не придётся разрабатывать отдельно пункт «Главная», что экономит место. Единственное, если возраст вашей аудитории 45−50+ стоит предусмотреть это решение.
Количество пунктов
Если вы разрабатываете классическое, открытое меню, не пытайтесь впихнуть туда множество разделов, это будет некомфортно, и смотреться перегружено. В таких случаях используйте меню-бургер. В горизонтальном меню оптимальное количество пунктов 5−7.
Приоритетность
Расположите объекты в меню на основе иерархии. Помните, что пользователи подсознательно будут считывать логику и важность объектов на переднем плане или большего размера.
Пример реализованной навигации раздела «Каталог» на сайте Технофорум, проект WebValley Studio. Названия разделов каталога расположены выше подразделов и выделены жирным начертанием.
Размер
Меню должно быть максимально крупным для любого экрана, будь то монитор или телефон пользователя. Текст будет читабельным, а кликабельность элементов удобной.
Иконки
Использовать графические элементы в меню допустимо, но не стоит слишком увлекаться. Вспомним правило — пункты должны быть понятны, что в случае навешивания множества иконок может быть сложным.
Концепт в качестве примера, как делать не стоит: иконки отвлекают внимание и мешают восприятию информации
Горизонтальное меню сайта
Классическое горизонтальное меню — наиболее часто используемый способ навигации. Пользователи привыкли к этому визуалу, поэтому такой вариант подходит для большинства сайтов.
Статичное горизонтальное меню
Недостаток подобного решения состоит в ограниченном количестве пунктов: в открытом доступе можно сделать только 5−7 категорий, в большем количестве меню будет смотреться перегружено и некомфортно в использовании.
Если в меню есть выпадающие списки — обязательно отразите это визуально. Не используйте множество выпадающих списков: если требуется сложная навигация, делите категории на уровни или используйте другое меню.
Если в меню есть выпадающие списки — обязательно отразите это визуально. Не используйте множество выпадающих списков: если требуется сложная навигация, делите категории на уровни или используйте другое меню.
Плохой пример горизонтального меню с выпадающими списками 2-го, 3-го и даже 4-го уровня. Огромный каскад из списков и полный провал по юзабилити.
Пример хорошего меню с выпадающим списком, проект WebValley Studio. Выпадашка простая и понятная, мгновенно считывается, не усложняет навигацию.
Фиксированное горизонтальное меню
От классического статичного отличается только тем, что оно скролится и при прокрутке страницы. Используйте фиксированное меню, если страница сайта очень длинная, чтобы пользователю не пришлось крутить колесиком мышки, чтобы опять добраться в начало и перейти к другому разделу, это бесит не правда ли?)
Либо сделайте прокрутку страницы к начальной точке одним нажатием кнопки ↑.
Либо сделайте прокрутку страницы к начальной точке одним нажатием кнопки ↑.
Горизонтальное меню в виде вкладок (табов)
Вариант горизонтального меню, при котором клик на определенный пункт открывает соответствующий контент на той же самой странице, на которой сейчас находится пользователь. То есть перехода на другую страницу со сменой URL — нет.
Меню в виде вкладок можно использовать как в качестве основного, так и для отдельных блоков, чтобы расширить возможности функционала и удобно подать информацию.
Меню в виде вкладок можно использовать как в качестве основного, так и для отдельных блоков, чтобы расширить возможности функционала и удобно подать информацию.
Концепт основного меню с вкладками
Прототип проекта Korean Simple, блок стоимости обучения, переключение между тарифами реализовано вкладками, проект WebValley Studio
Горизонтальное меню с иконками
В горизонтальное меню можно добавить пиктограммы и разделители. Иконки быстро считываются пользователями, если хорошо подобраны по смыслу. Только помните, что нельзя переборщить: большое количество элементов в горизонтальном меню сложно для восприятия.
Концепт прототипа меню личного кабинета с иконками
Двойное горизонтальное меню
Такая разработка довольно редкая, но также пользуется спросом для:
- Разработки основного меню и для личного кабинета;
- Разработки дополнительного меню для удобства навигации.
Использование двойного горизонтального меню на сайте Solok Cosmetics, проект WebValley Studio. Основное меню ведёт на разделы каталога косметики, а в личном кабинете — появляется дополнительное, для навигации внутри кабинета.
Хлебные крошки
Навигационные цепочки используются на многостраничный сайтах, порталах, в интернет-магазинах для дополнительной комфортной навигации. Хлебные крошки выглядят как строчка со ссылками на все предыдущие разделы, которые привели пользователя к текущей странице.
Дизайн сайта с хлебными крошками Granite&Marble Monuments, проект WebValley Studio
Вертикальные меню
Сегодня большинство мониторов изготавливаются с горизонтальной ориентацией, за счёт чего на экране появляется свободное место для вертикального меню. Чаще всего его располагают слева, согласно F-паттерну: пользователям удобно читать пункты слева направо, сверху вниз, как в книге.
В отличие от горизонтального меню, вертикальное реже используется в виде вкладок:
В отличие от горизонтального меню, вертикальное реже используется в виде вкладок:
Использование вертикального меню в разделе «О компании» для быстрого перемещения между страницами
Вертикальное меню с группировкой ссылок
Данный способ используется довольно часто в объемных структурах сайта и очень актуален в интернет-магазинах в качестве сортировки и фильтрации:
Вертикальное меню с группировкой ссылок, использованное для фильтрации товаров каталога Granite&Marble Monuments, проект WebValley Studio
Вертикальное меню с иконками
Использование графики в вертикальном меню также пользуется спросом. Преимущество такого решения в том, что меню можно свернуть так, чтобы оно состояло только из иконок, сводя к минимуму занимаемое пространство.
Прототип вертикального меню личного кабинета с использованием иконок сайта питомника Калужский Тракт, проект WebValley Studio
Раскрытое и свёрнутое вертикальное меню с иконками на сайте сервиса Топвизор
Меню с навигацией точками
Максимально аккуратное меню, практически не занимающее места. Используется для комфортной навигации на конкретной странице. Особенно актуально, когда страница большая по количеству блоков, и пользователю придется много скролить, чтобы вернуться к какой-то конкретной информации.
Навигационное меню с точками на сайте Revive System, проект WebValley Studio
Вертикальное меню в сочетании с горизонтальным
Использование сразу двух разноориентированных меню на сайтах — нечастая история, но в интерфейсах сервисов и приложений, наоборот, пользуется популярностью. Такая раскладка помогает сделать основное и второстепенное меню, разделяя их по функционалу.
Использование двух меню: вертикального и горизонтального в CRM Битрикс24 WebValley Studio
Использование двух меню — вертикального и горизонтального на сайте логистической компании.
Раскрывающиеся меню
Компактное на первый взгляд меню, которое раскрывается по клику или наведению. С точки зрения функциональности, раскрывающееся меню хорошо работает на крупных корпоративных сайтах, где нужно отразить большой объём услуг, в интернет-магазинах с огромным ассортиментом продукции.
Многоуровневое мега-меню
Мега-меню работает по следующему принципу: в основной раздел (пункт меню) вложено обычное выпадающее меню второго уровня, с подразделами и под-подразделами. В нише логистики или автозапчастей — просто мастхев.
Использование многоуровневого мега-меню в проекте STLogistic, проект WebValley Studio.
Бургер
Меню, которое вызывается при нажатии на иконку, как правило состоящую из 3х горизонтальных линий. Пользователи давно привыкли видеть его на мобильных устройствах, но теперь бургер часто встречается и в десктопе. В таком решении есть свои плюсы и минусы: с одной стороны, бургер даёт больше возможностей и меньше ограничений в плане дизайна, с другой — не каждой целевой аудитории будет понятно, что это и как им пользоваться.
Если хотите использовать меню-бургер на десктопах, мыслите логически: всегда задавайте себе вопрос — а чем оно поможет пользователю и можно ли ограничиться стандартным горизонтальным? Если ответ — да, используйте более привычную реализацию навигации для пользователей.
Если хотите использовать меню-бургер на десктопах, мыслите логически: всегда задавайте себе вопрос — а чем оно поможет пользователю и можно ли ограничиться стандартным горизонтальным? Если ответ — да, используйте более привычную реализацию навигации для пользователей.
Меню-бургер на сайте Outerra: слева — бургер в закрытом виде, справа — в раскрытом, проект WebValley Studio
Меню-бургер с раскрывающимся списком на сайте ИМБА, слева — бургер в закрытом виде, справа — в раскрытом, проект WebValley Studio.
Использование сплит-экранов для навигации
Тренд, который пришел к нам с запада и смотрится очень эстетично. В переводе с английского, «Split Screen» — это разделение экранов, то есть, это конфигурация, когда дизайнер намерено делит экран на 2 и более частей.
Данный метод помогает в удобстве навигации, повышает интерес к изучению контента и подталкивает пользователей понажимать на кнопки.
Данный метод помогает в удобстве навигации, повышает интерес к изучению контента и подталкивает пользователей понажимать на кнопки.
Концепции вариантов реализации навигации с помощью сплит-экранов
Необычные варианты дизайна меню сайта
Мы подобрали интересные и нестандартные идеи для навигационных меню и элементов управления. Смотрите и вдохновляйтесь.
Навигационный слайдер сортов чая Andtea
Меню, основанное на 3-х продуктах dr. dabber, каждый имеет отдельный лединг.
Бургер и сплит меню
Меню, выдержанное в стилистике проекта
Выпадающий список с использованием графики
Минималистичный боковой бургер с дополнительно важной навигацией на обложке
Еще один вариант открытого бургера, с крупной типографикой и минималистичной анимацией
Меню, сопровождающееся фотографиями, для добавления визуализации
Обложка сайта, которая представляет собой вариант меню в формате сплит-экрана. При наведении на разные части, можно попасть на соответствующий раздел сайта.
Меню, каждый пункт которого сопровождается графикой
После того, как вы познакомились с такими креативными референсами, наверняка вам захочется повторить эти идеи на ваших сайтах. Но, проектируя меню, помните: в приоритете удобство пользователя и быстрая навигация. Каким бы прикольным ни было меню, если пользователь испытывает трудности с навигацией, то ценность этого элемента дизайна — нулевая.
Автор статьи
Алёна Панюшкина
СОО WebValley Studio
21.06.2022
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.