Навигация на сайте: чек-лист по созданию

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

Основные виды и требования к навигации

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

Основные критерии хорошей навигации:

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

Навигация может быть реализована различными способами:

• текстовым, когда ссылки оформлены простыми анкорами;
• графическим, когда меню состоит из прорисованных визуальных элементов;
• html, когда разнообразные формы скрывают меню таким образом, чтобы пользователь видел его, лишь наведя курсор на корневую папку;
• java или flash, когда элементы меню носят интерактивный, анимированный характер.

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

Какие элементы входят в понятие навигации

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

Навигация состоит из таких элементов как:

• Меню. Может быть выполнено в виде горизонтальной или вертикальной панели. Кроме того, широко используется меню «гамбургер», когда перечень гиперссылок разворачивается при клике на иконку в виде трех горизонтальных черточек. Раньше такой вариант использовали только в мобильных версиях, однако теперь его часто можно встретить на самых разных сайтах, так как это решение позволяет сэкономить место и добавить на панель навигации дополнительные разделы.
• Логотип и другие способы визуализировать переход на главную. Раньше попасть на эту страницу можно было только кликнув на одноименный текстовый блок. Сейчас ссылкой на главную страницу чаще всего выступает логотип, размещенный на каждой странице сайта в одном и том же месте. Также для визуализации можно использовать иконку в виде дома. Такое решение применяют в случае, если логотип плохо смотрится в уменьшенном виде или сливается с выбранным фоном меню.
• Раздел «О компании». Наличие ссылки в навигационной панели сразу повышает доверие пользователя, даже если он не будет переходить в раздел и изучать информацию. Важно реализовать саму такую возможность.
• Иконки в шапке сайта. Яркий пример — значок лупы в качестве визуализации опции поиска по сайту или значок корзины для перехода в соответствующий раздел. Все иконки должны быть оформлены в одинаковой стилистике.
• Ссылки в тексте. Такой элемент навигации также часто называют внутренней перелинковкой. Это решение облегчает изучение информации пользователем и улучшает поведенческие факторы. Например, перейдя по ссылке на страницу, где рассказывается об одной услуге, потенциальный клиент сразу может перейти по ссылкам на страницы похожих услуг, изучить информацию о компании и сделать заказ. При оформлении таких ссылок важно учитывать определенные правила: они должны отличаться от остального текста, иметь оповещение при переходе на сторонний ресурс, оформлена анкором.
• Футер. Это нижняя часть страницы, где также можно найти множество ссылок на страницы, которые не попали в шапку или меню. Как правило, именно здесь располагается информация о правилах пользования ресурсом и юридические данные, а также ссылки на все основные разделы, оформленные списком гиперссылок.
• «Хлебные крошки». Этот элемент навигации носит вспомогательный характер и призван отразить путь, который отделяет пользователя от главной страницы. Все элементы, кроме текущей страницы, кликабельны и позволяют совершить переход.
• Кнопки и формы. Эти элементы также можно отнести к навигации, так как при заполнении или нажатии пользователь перенаправляется на страницу оформления заказа или покупки. Важно, чтобы по завершении заполнения посетитель мог легко вернуться в любой раздел или на главную страницу.
• Оформление заказа или корзина. Этот элемент, как правило, располагается на панели навигации и служит дополнительным элементом, побуждающим к действию. Когда пользователь видит значок корзины, который свидетельствует о том, что в нее уже добавлены товары, ему проще закончить оформление заказа. Кроме того, всегда должна быть возможность перейти в корзину из любого раздела сайта.
• Кнопка возврата. Этот элемент навигации нужен, чтобы сократить время скроллинга и помочь пользователю быстро вернуться к началу страницы. Решение хорошо подходит для ресурсов, где представлено большое количество информации.

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

Правила удобной для пользователя навигации: чек-лист

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

• Шапка. Необходимо визуально отделить ее от других элементов страницы. Удобная шапка содержит не только логотип, но и ссылки на разделы: портфолио, услуги и цены, оформление заказа или корзина, кнопка обратной связи. Также в шапке можно указать УТП, время работы и контактные телефоны или оставить кликабельные ссылки на мессенджеры. 
• Основное меню. Чаще всего реализуется горизонтальными ссылками под шапкой. В нем размещаются ссылки на разделы, которые не вошли в шапку, но имеют значение для пользователя. Например — о компании, полный каталог в виде выпадающего пункта меню, способы доставки и оплаты, гарантии и возврат, акции и скидки, блог и другие.
• Форма поиска. Это не обязательный, но полезный для крупных ресурсов элемент. Разместить его лучше всего в шапке, однако строгих ограничений нет. Такая форма может быть реализована и в футере, и над боковым меню сайта.
• Футер. Элемент навигации, полезный как для крупных, так и для малых ресурсов, так как именно в нем можно расположить ссылки абсолютно на все разделы без исключения. Кроме того, здесь располагаются более подробные контактные данные и юридическая информация: дополнительный элемент доверия. В футере же оставляют и ссылки на мессенджеры и социальные сети.

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

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

Неочевидные способы сделать навигацию более удобной

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

Как этого избежать:

• Не перегружайте меню. Определите 4-5 основных пунктов или воспользуйтесь меню «гамбургер», если категорий очень много.
• Не пренебрегайте меню на лендинге. Разместите ссылки на основные блоки в шапке. Например — портфолио, цены, контакты. Это поможет пользователю быстро переместиться на нужную часть страницы и сократить время принятия решения.
• Выделяйте активный пункт меню в постраничной навигации, чтобы облегчить понимание точного местонахождения пользователя.
• Выделяйте кнопку с более важным действием визуально. Например, в одном блоке может быть расположено две кнопки: с предложением купить товар или услугу и с возможностью перейти в раздел о компании или узнать больше. Целевая кнопка должна отличаться по цвету от дополнительной.
• Скрывайте часть контента, чтобы не перегружать пользователя: при желании его можно будет развернуть, кликнув на соответствующую кнопку.
• Избегайте «тупика» в конце страницы. Пользователь, который дошел до самого ее конца, должен иметь возможность либо перейти в любой раздел, не проматывая страницу вверх, либо совершить целевое действие.
• Используйте ЧПУ (человекопонятный URL), когда по его содержанию можно определить, о чем именно идет речь на той или иной странице, а также показывает путь от конкретной страницы до главной, отражая уровень вложенности.

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

Как получить помощь в разработке удобной навигации

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