Навигацию простой понятной и удобной. Мой вариант навигации в путешествиях

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

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

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

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

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

Основные элементы и приёмы навигации

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

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

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

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

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

Второй «классический» элемент – это верхнее меню .

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

В последние несколько лет стал популярен ещё один прием – это меню-гамбургер , в котором все ссылки спрятаны на схематические три горизонтальные черточки. Этот элемент сначала жил только на мобильных устройствах, но сейчас всё чаще встречается и на десктопных версиях сайтов:

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

А может оно жить и самостоятельно, без горизонтального меню вверху страницы. И таких меню может быть даже несколько, как здесь – слева и справа:

(микроразметка) — ещё один элемент навигации, который не только задает иерархию страниц, но и позволяет легко вернуться к нужному разделу, или на главную, с любой страницы:

Линки внутри статей на другие страницы сайта – это тоже навигационные элементы. Например вот такие:

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

Ссылки в footer-е (нижнем колонтитуле, подвале) – это еще один навигационный элемент. Обычно в футер выносят ссылку на контакты, пользовательское соглашение, правила использования сайта и т.п. А иногда можно увидеть и много ссылок на разные страницы сайта, сгруппированные по категориям:

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

Шкалу прогресса также можно встретить в формах заявок и регистрации, если форма длинная и разбита на несколько шагов.

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

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

Такая кнопка позволяет быстро вернуться к началу страницы.

Чтобы верхнее меню, контакты или другая важная информация постоянно были перед глазами, используется так называемый “липкий хедер”, или “липкая навигационная панель”. Она постоянно остается вверху страницы, пока пользователь скроллит вниз.

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

Как же использовать все эти элементы с толком и пользой?

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

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

1. Расположите логотип с возвратом на главную в правом верхнем углу .

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

2. Продумайте первичные и вторичные элементы .

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

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

Вынесите в основное меню самые главные разделы сайта.

3. Подумайте, какие страницы можно сгруппировать.

Если всё не помещается в верхнее (или боковое) меню. Например, часто можно встретить вариант, когда некоторые разделы сайта спрятаны под одну кнопку «Информация», «Больше», «Ещё» и т.п.

Почта Mail.ru таким образом «спрятала» проекты компании:

4. Найдите хорошее место для информационных ссылок .

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

Вот яркий пример подобного размещения информационных ссылок:

5. Не забывайте о дизайне .

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

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

6. Не открывайте страницы в новых окнах .

Это сбивает пользователей с толку.

7. Дополнительные элементы.

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

8. Подсказки.

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

9. Оставьте меню на видном месте.

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

10. Не прячьте далеко свои контакты .

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

Адрес можно оставить как в шапке, так и в футере. Не заставляйте посетителя искать всю эту информацию по всему сайту.

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

Выберите хостинг для сайта:

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

Подумайте сами, на каких сайтах вам проще всего перемещаться, и берите пример с лучших.

Удачи вам в разработке собственного интернет-ресурса!

Добрый день!

Дорогие друзья, сегодня мне хочется поговорить о системе продвижения блога.

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

Кстати, приятная новость заключается в том, что работа над блогом обучает вас этой системности сама. Правда, для этого требуется время. Поделюсь с вами комплиментом, который недавно получила от своего тренера (я же вам говорила, что постоянно чему-то учусь 🙂 ?).

Так что ведение блога полезно в любом случае. Но все-таки нам нужны результаты!

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

Шаг №1. Постановка целей

Мы с вами уже говорили о целях создания блога , не буду повторяться. У вас должны быть свои цели ведения вашего блога, и лучше, если их будет несколько (желанием заработать ограничиваться не стоит).

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

Зачем это нужно?

Просто если существует намерение достичь определенных показателей, есть смысл совершать какие-то действия для их достижения. Если же намерения не будет, то вероятность достижения каких-то абстрактных целей будет стремиться к нулю. Можно, конечно, довериться случаю (а вдруг, вам просто повезет?), но… таких случаев в моей практике не встречалось, поэтому все-таки лучше действовать самим - бить по целям постоянно точными выстрелами 🙂 .

Так что цели и намерения - важный шаг в создании успешного блога.

Шаг №2. Технический фундамент блога

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

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

Ваш блог должен работать как часы - удобно, быстро, надежно.

Шаг№3. Контент

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

Писать интересно, раскрывать тему – эти простые правила известны каждому блоггеру.

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

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

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

Шаг №4. Привлечение посетителей на блог

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

Самые простые способы привлечения читателей на блог следующие:

SEO-оптимизация (траффик с поисковых систем)
Социальные сети (постинг, ведение своих групп)
Youtube (создание собственного канала и его оптимизация с последующей передачей траффика на блог)
Сервисы рассылок
Комментирование других блогов

Возможно, есть и другие способы. Я лично использовала только эти и убедилась в их эффективности.

Шаг №5. Формирование ядра аудитории

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

Важно, чтобы те, кто однажды зашел к вам на блог, испытали желание вернуться к вам еще и еще, стать вашими постоянными читателями, друзьями, соратниками. Какими способами можно достичь этого?

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

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

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

Основной принцип удобной навигации сайта: сделать так, чтобы потенциальный клиент всегда понимал в каком разделе/на какой странице он находится, откуда он перешел сюда и куда может перейти дальше. Давайте разберемся, какие элементы навигации необходимо добавить на сайт, чтобы пользователь не «заблудился» в недрах вашего ресурса.

Создание навигации сайта: основные элементы

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

Шапка сайта . Должна быть визуально отделена от других элементов страницы и содержать следующие элементы:

Логотип , который лучше расположить в левом верхнем углу, так как такой вариант привычнее для пользователей.
Название компании и краткое описание деятельности - теглайн (если эта информация не указана в логотипе). Дополнительно можете указать ваше УТП (подробнее о том, что это и как правильно выбрать, ).
Регионы работы, доставки товаров . Не нужно перечислять весь список, укажите данную информацию кратко.
Контактная информация . Если у вас несколько офисов или магазинов, то в шапке сайта стоит указать важные сведения только для главного, чтобы не перегружать шапку.
Рядом с номером телефона обязательно добавляем режим работы , чтобы пользователи видели, в какое время можно позвонить в компанию.
Ссылка на страницу корзины , если у вас интернет-магазин.
. Добавляйте только в том случае, если у ваших специалистов есть время оперативно обрабатывать с нее заявки. Нужна для тех пользователей, которые по каким-либо причинам не могут сами позвонить в компанию.

Пример информативной шапки сайта:

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

Каталог услуг или товаров (выпадающий пункт меню).
Страница о компании.
Способы оплаты и доставки (для интернет-магазинов).
Гарантии и возврат (для интернет-магазинов).
Портфолио (если есть, что показать).
Акции и скидки.
Отзывы (для сайтов услуг).
Блог (если есть).
Контакты.

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

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

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

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

Ссылки на все разделы сайта . На все без исключения. Продублируйте ссылки из основного меню и укажите дополнительные разделы. Размещайте их столбцами и делите на логические подгруппы, чтобы было легче в них ориентироваться.
Контактная информация . Лучше указать подробнее, чем в шапке сайта, добавив адрес и реквизиты компании.
Ссылки на соцсети. Здесь они не помешают.
Форма заказа обратного звонка (только если добавили ее в шапке сайта.)

Логотип и название компании размещать в подвале сайта не обязательно, особенно, если у вас много ссылок на разделы. Пример удобного подвала сайта:

Дополнительные элементы навигации

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

Хлебные крошки или локальная навигация . Показывают путь, пройдённый пользователем, или местонахождение страницы в иерархии сайта. Стоит добавить, если у вас многоуровневый сайт (вложенность более 2 уровней). Рекомендации по оформлению:

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

Пример понятных хлебных крошек:

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

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

В боковом меню также следует выделять выбранный раздел.

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

Кнопка «Вверх» . Помогает пользователям быстро вернуться в начало страницы. Располагать лучше в правом нижнем углу. Пример визуального оформления данной кнопки:

Но и это еще не все

Есть еще пара элементов, о которых хотелось бы также сказать в рамках данной темы.

URL-адрес страницы . Создавайте простые и понятные для понимания обычному пользователю адреса ссылок. Желательно, чтобы весь адрес страницы был на латинице.

Хороший пример: https://site.ru/company/portfolio/

Плохой пример: https://site.ru/site/28787343/

Заключение

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

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

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

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

Ошибка №1: нестандартный стиль

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

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

Ошибка №2: универсальные надписи пунктов меню

Еще одно золотое правило того, как сделать навигацию на сайте, - надписи меню навигации должны быть информативного характера. Так, например, использование пунктов меню «Товары» или «Услуги» - общие для всех компаний, и подобные названия мало о чем говорят пользователям. Вот еще пример: «Что мы делаем» - такая же безликая фраза.

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

Согласитесь, что ваши клиенты не ищут абстрактные «Товары» или «Услуги», и навигация с такими значками не повлияет на продвижение сайта в результатах поисковой выдачи. Узнали себя? Значит, пора исправляться! Меню сайта и его структура в целом должны быть оптимизированы для поисковых систем и говорить на понятном для целевой аудитории языке. Дочитав нашу статью до конца, вы увидите, как подобную задачу решают многие компании.

Ошибка №3: выпадающее меню

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

Многим из вас наверняка приходилось буквально ловить выпадающее меню. Одно неловкое движение - и оно убегает от вас! И вот вы, собравшись с силами, вновь ищете, кликаете, а там - сюрприз! - еще один список вариантов действий. Подобные догонялки жутко раздражают! Задумайтесь, может быть не стоит лишний раз трепать нервы своим потенциальным клиентам?

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

Ошибка №4: большое количество пунктов меню

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

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

Ошибка №5: неуместное расположение пункта меню для оформления заказа

Исследования в области психологии показали, что легче всего запоминаются первые и последние элементы любого списка, нежели элементы из его середины. Аналогичное действие происходит и с пользователями. Это явление получило название «кривая серийных позиций» и наглядно выражается в виде графика:

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

Бонусная подсказка: ссылки - forever, кнопки - никогда!

В случае, если вы отстали от тенденций веб-дизайна лет на 8 и до сих пор используете графические навигационные кнопки вместо текстовых ссылок, тогда для вас мы приводим 5 причин пересмотреть свои привычки:

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

А теперь, как мы и обещали: 5 примеров навигации сайта без ошибок.