Колонки

«Не путайте пользователя»: 14 элементов и 10 правил для эффективной навигации по сайту

Колонки
Анастасия Егорова
Анастасия Егорова

основатель креативной студии GetProgress

Ольга Лисина

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

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

«Не путайте пользователя»: 14 элементов и 10 правил для эффективной навигации по сайту
Присоединиться

Идеальная навигация держится на трех китах. Это: 

  • Дизайн

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

  • Удобство 

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

  • Структура

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


Основные элементы навигации сайта

1. Главное меню

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

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


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


2. Боковое меню

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


Пример неперенасыщенного меню с подразрелами слева


3. Иконки

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


Работа студии. Удобное меню слева представлено иконками и при наведении дублируется текстом


4. Карта сайта

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


Карта сайта на главной странице. Отличный пример удобного размещения разделов


5. Поиск

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


Светлый поиск является продолжением главного меню


6. Фильтрация и сортировка

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


Расширенная сортировка и фильтрация облегчают пользователям поиск


7. Раздел «О компании»

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


Работа студии. Раздел «О компании» размещен в футере


8. Текстовые ссылки

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


Работа студии. Текстовые ссылки органично смотрятся в тексте и не перегружают его


9. «Хлебные крошки»

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


Ozon активно использует «хлебные крошки»


10. Призывы к действию

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


Работа студии. На сайте кнопки «Оставить заявку» расположены под каждым предложением компании


11. Кнопка возврата

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


Кнопка возврата крупно показана справа


12. URL-адрес страницы

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



13. Визуальные эффекты 

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

Кнопки с дополнительной анимацией привлекают внимание и увеличивают кликабельность.


Работа студии. Кнопка «Записаться» меняет цвет при наведении курсора. На сайте реализованы различные анимационные эффекты 


14. Футер

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


Работа студии. Футер включает все необходимые разделы


Важные правила удобной навигации

1. Не утруждайте пользователя новыми вкладками

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


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


2. Располагайте контакты на видном месте

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


Работа студии. Удобное расположение контактной информации. Пользователь видит номер и может связаться сам или «Заказать звонок»


3. Не прячьте меню

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


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


4. Используйте подсказки

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


Подсказки закреплены в главном меню


5. Добавляйте стимулирующие разделы

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


Работа студии. Возможность прочитать о компании в СМИ


6. Помните про информационные ссылки

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


Работа студии. Информативные ссылки для больших объемов информации


7. Не забывайте про правило логотипа

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


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


8. Группируйте страницы

Чем правильнее сгруппирована информация, тем лаконичнее и понятнее будет навигация. Не дробите разделы, которые можно поместить в один. Если у вас группа компаний, не перечисляйте каждую в отдельном разделе — разместите всю информацию на одной странице «О группе компаний».


Работа студии. При такой группировке в один блок помещается больший объем информации


9. Расставляйте приоритеты

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


Работа студии. Правильно расставленные акценты на главной странице


10. Используйте дизайн

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

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


Работа студии


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

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

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


Как достичь максимума

  1. Возьмите за основу краткость: не путайте пользователя и избегайте лишнего в навигационной панели.
  2. Помните, что пользователь обращает больше внимания на первый и последний пункты панели навигации и просматривает меню слева направо. Значит, в центральной части меню можно располагать наименее значимые ссылки.
  3. Продумайте «план отступления» — дайте пользователю возможность вернуться к предыдущему разделу несколькими способами, а не только путем нажатия кнопки «Назад» в браузере.
  4. Обязательно проверьте адаптацию навигации под мобильные устройства: располагаются ли все кнопки на месте, не выходят ли за рамки экрана, удобно ли на них нажимать.
  5. Обращайте внимание на то, как долго люди задерживаются на вашем сайте. Если пользователь может быстро найти у вас то, что ему нужно, с большой вероятностью он станет вашим клиентом.

Фото на обложке: Shutterstock / William Potter

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 Какие ошибки веб-дизайнеров могут стоить вам клиентов
  2. 2 На что обратить внимание при разработке и создании сайта: чек-лист
  3. 3 Пять контент-ошибок на вашем сайте, которые можно исправить прямо сейчас
EdTech: карта российского рынка
Все компании и инвесторы в области образовательных технологий
Перейти