В прошлой статье мы сделали кластеризацию запросов и получили некую структуру интернет-проекта. Теперь самое время подумать об удобстве передвижения по этой структуре. Важным пунктом юзабилити является навигация, от которой напрямую зависит качество вашего сайта и лояльность посетителей.
Что такое навигация?
Навигация по сайту – это функционал для движения между страницами сайта. В идеале, она должна быть простой, быстрой и понятной. К навигации относятся абсолютно все ссылки, которые перебрасывают пользователя на другую страничку этого сайта или прокручивают текущую страничку до определённого места (ссылки, ведущие на другие ресурсы, к навигации не относятся). Ссылки бывают текстовыми, в виде кнопок, иконок и картинок. Могут стоять отдельно или располагаться в группе образуя целую панель навигации сайта.
Рассмотрим основные элементы навигации сайта, к которым относятся:
- Логотип - уже для всех привычно, что, клик по логотипу ведет на главную страницу или прокручивает её в самое начало (если это одностраничный ресурс).
- Меню - самая важная часть навигации. На сайтах бывает сразу несколько типов меню:
- Главное - находится в верхней части и не меняется при переходе с одной странички на другую;
- Дополнительное - располагается в правом или левом блоке и меняет своё содержание в зависимости от текущего раздела сайта;
- Нижнее - стоит в самом низу (в подвале). Может быть краткой версией основного меню, дублировать его полностью или быть его расширенным вариантом.
- Горизонтальное - когда пункты меню располагаются в одну строку;
- Вертикальное - пункты меню находятся друг под другом.
- HTML карта - самостоятельная страница, на которой можно посмотреть всю структуру сайта и перейти сразу к нужному пункту.
- Форма поиска - помогает найти нужную информацию по слову или фразе.
- Подсказки и информационные блоки - обычно располагаются после основной информации и предлагают пользователю прочесть другую полезную информацию:
- интересное;
- похожие товары;
- вместе с этим искали;
- материалы по теме;
- и прочее.
- "Хлебные крошки" - это строка навигации на сайте, по которой пользователь может проследить свой путь. Располагается вверху контента.
- Пагинация - это нумерация страниц, с помощью которых посетитель может передвигаться по сайту. Например:
Зачем нужна навигация?
Правильная навигация пошагово ведёт посетителя к основной цели сайта. Представьте, что вы общаетесь с клиентом лично: вы же не подходите к нему со словом “Купи”. Сначала вы представляетесь, затем предлагаете ассортимент, рассказываете и показываете выбранный товар, озвучиваете цену и гарантии, и только потом заключаете сделку.
Сайт - это ваш цифровой менеджер по продажам (инструмент для общения с заказчиком), а значит, его навигация должна выстраиваться по тому же принципу, как и личное общение.
В продолжение метафоры, допустим, вы начали рассказывать очередной заученный текст про характеристики товара, но клиент его уже изучил и хочет перейти сразу к гарантиям. Также и на сайте: клиент сам выбирает интересный ему пункт. У него должна быть возможность пропустить один или несколько пунктов, которую и обеспечивает навигация сайта. По этому, если заказчик вовремя не найдет интересующий его пункт (например: гарантии), то сделка скорей всего оборвётся, и виной этому станет плохая навигация. И это будет повторяться до тех пор, пока ее не исправить.
Вот почему грамотная навигация так важна. Помимо этого, она еще и повысит лояльность пользователей к вашему ресурсу.
Как сделать навигацию на сайте?
- Начните работу над навигацией с создания структуры сайта.
- Обдумайте все этапы общения с пользователем, как при очном общении с клиентом, пример которого мы приводили выше.
- Составьте список этих этапов в виде отдельных страничек сайта.
- Обдумайте навигацию для каждой такой страницы.
- Попытайтесь мыслить как пользователь:
- Ему явно что-то нужно, если он зашёл на эту страничку.
- Готов ли он совершить основное действие.
- Что ему может понадобиться для этого.
- Какой путь и какие действия он уже проделал, чтобы попасть на эту страницу:
- Увидел рекламу в социальных сетях.
- Специально искал эту информацию в поиске.
- Перешёл с другой страницы вашего сайта.
- Подумайте, что понадобится пользователю при чтении странички, а так же после ее прочтения:
- Узнать значение непонятного слова в вашей статье.
- Выяснить дополнительную информацию по теме.
- Изучить другие варианты или условия.
- Хочет почитать отзывы или задать вопрос.
- Готов перейти к следующему этапу.
- Нужно не только учитывать эмоции клиента, но и подталкивать его к нужному вам действию (напишите комментарий, подпишитесь, позвоните и т.д.).
- Зарисуйте элементы навигации для каждого этапа на бумаге или используя программы для создания прототипа сайта.
- Учтите расположение элементов навигации при просмотре сайта с компьютера и с мобильного устройства.
- Ещё раз убедитесь, что все элементы навигации располагаются в нужном месте, заметны, но не мешаются, и в любой момент можно вернуться на шаг назад.
Заключение
Теперь вы знаете все о навигации и ее элементах. Используйте нашу пошаговую инструкцию чтобы сделать навигацию удобной и практичной. Поделитесь в комментариях своими мыслями по этому поводу или опишите трудности, с которыми вы столкнулись и мы вам обязательно поможем.
Остались вопросы? Мы поможем! Всего за 15000 тенге мы разработаем такую навигацию для вашего сайта, что все ваши посетители придут в восторг!
