Агентство комплексного интернет-маркетинга

Грамотная навигация на веб-ресурсе

Актуальная информация об интернет-маркетинге и создании сайтов от специалистов Marketing Up
Здесь вы найдете подробные кейсы наших проектов, аналитику, результаты свежих исследований, разбор интересных фишек, приемов и тонкостей создания сайтов и т.д. - все, что важно для построения успешного бизнеса в Интернет.

Удобная навигация по сайту — 12 заповедей

Автор: Алексей Харитонов28.07.2020

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

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

Заповеди грамотной навигации

1. Внятная иерархия заголовков и подзаголовков

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

2. Ссылки на сторонние ресурсы должны открываться в новой вкладке

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

3. Для важных действий используйте кнопки, а не ссылки

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

4. Используйте кнопки с прозрачным фоном

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

5. Хлебные крошки

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

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

Вот пример использования этого приема на сайте, разработанном нами для кадастровой компании:

6. Кнопка «вверх»

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

7. Эффект рыбьего глаза

Можно сделать так, чтобы при наведении на них веб-элементы увеличивались. Этот классический прием до сих пор не потерял своей эффектности. Он реализуется с помощью каскадных таблиц стилей (CSS).

8. Осмысленный URL

Адрес страницы должен быть читабельным. Ведь он относится к числу факторов, на которые человек  ориентируется при изучении сайта. Недаром в интернет-маркетинге закрепилось определение «человекопонятный URL».

Пример такого читабельного адреса с уже упомянутого ранее сайта:

9. Возможность влиять на прокрутку слайдов / карусели

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

10. Указатели прогресса

Если пользователь заполняет какую-либо форму, полезно сообщить ему, сколько уже сделано, показать прогресс. Например, «остался 1 шаг из трех» и т. д.

11. Соблюдение достаточного пространства между пунктами меню

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

12. Изменение выбранного пункта в меню

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

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

О чем важно помнить, продумывая навигацию 

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

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

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

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

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

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

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

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

Навигация работает «в комплексе»

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

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

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

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

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

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

12220