yaponochka.com - разработка сайтов,  seo продвижение, нейминг
+38 (044) 237-45-90 pr-content Бесплатный расчет
Развитие бизнеса в интернете

Как сделать навигацию на сайте

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

НАВИГАЦИЮ ДЕЛАЮТ В 3 ШАГА

Шаг 1. Создаем карту сайта

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

Используйте графическое представление структуры будущего сайта. Так проще понять, как взаимодействуют отдельные элементы, а в голове легче складывается общая картина.
Рекомендуем изучать конкурентов, находить аналоги, смотреть, что есть у них и как это работает. Только задавайтесь вопросами: «Зачем они это сделали?» и «Нужно ли это мне?»

 

Шаг 2. Рисуем макет

После того как составили карту сайта, начинаем набрасывать элементы навигации сайта.

На этом этапе мы определяем вид меню и базовую компоновку элементов. Обдумываем название ссылок, графику и тексты, которые вы хотите разместить рядом.

 

Шаг 3. Дизайн

На дизайне некоторые вещи могут измениться, но в целом структура останется такой же, как на макете.

ПРО ВИДЫ МЕНЮ

В зависимости от расположения элементов меню бывает горизонтальным или вертикальным.

Элементы навигации размещают в header (шапка сайта),footer (низ сайта) и боковых меню.

Меню могут содержать вложенности. Вложенности могут появляться по-разному. Если по наведению мыши, это выпадающее меню. Если по нажатию, то это раскрывающееся меню.

 

Боковое меню

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

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

Расположение выбирают в зависимости от важности меню. Если более важен акцент на контенте, чем на меню, то размещайте боковое меню справа. Если меню – первое, что должен увидеть пользователь, то слева.

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

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

 

Выпадающее меню

Удобнее, когда «выпадение» происходит при наведении курсора, так меньше действий и проще работать с меню. Но это не подходит для мобильных устройств, где нет такого действия, как «наведение курсора».

Проблему решают «контейнерные страницы», где представлены все ссылки в меню. Работает это так: если наводите мышкой – выпадает меню, нажимаете на ссылку – переходите на отдельную страницу.

 

Раскрывающиеся меню

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

 

Неподвижное или статическое меню

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

Но это забирает полезное место, поэтому такие меню делают как можно меньше по размерам.

РАСПОЛОЖЕНИЕ ЭЛЕМЕНТОВ

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

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

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

Опускать вниз рекомендуем только второстепенные страницы или те, на которые есть ссылки в других блоках, например «Отзывы» или профили в социальных сетях.
Не лишним внизу сайта будет упомянуть контактные данные.

 

Выделяйте самое важное

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

 

Поиск по сайту

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

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

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

Если поиск нужен только на определенных разделах, его можно размещать только там.

Поиск можно ужимать до иконки, по клику на которую он будет раскрываться.

ДЕЛИМСЯ ОПЫТОМ

Иногда элементов в меню слишком много, потому по возможности некоторые из них группируйте в подменю или опускайте в футер.

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

Место в строчке не безгранично. Помните об этом.

«Хлебные крошки» под меню должны быть, это помогает ориентироваться на сайте. А еще полезно для продвижения сайта.

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

В самом низу сайта не лишним будет разместить копирайт. Если ваша компания работает не первый год, намекните об этом.

 

Будьте дальновидны

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

Изначально утвердили 6 категорий с кучей подкатегорий,созданных на основе 11 прайс-листов от разных поставщиков.

Когда начали заполнять, ситуация изменилась, осталось 2 категории и сильно урезались подкатегории, остальное зависло в процессе.

Автор статьи:Максим Лялин

Общение с нашим специалистом поможет вам:

  • Получить ответы на возникшие вопросы.
  • Получить презентацию о нашей компании (по скайпу или в офисе).
  • Запросить примеры работ по вашей отрасли.
  • Коммерческое предложение именно для вашей компании под ваши задачи (с расчетом стоимости).

Это бесплатно и ни к чему вас не обязывает, но вы будете знать стоимость работ и то, как мы можем помочь именно вашей компании.

Ваше имя:
Телефон:

Получай свежие статьи первым по E-mail

Интересное