Грамотная навигация по веб-сайту не попросту дозволяет юзеру перебегать из 1-го раздела в иной, да и влияет на показатель отказов, время сессии, глубину просмотров веб-сайта и, что самое принципиальное, повышение конверсии.
Анастасия Егорова, основоположник креативной студии GetProgress, ведает, как с помощью навигации управлять пользовательским поведением, верно подводить клиента к выполнению мотивированного деяния и созодать его пребывание на веб-сайте очень удобным.
«Не путайте юзера»: 14 частей и 10 правил для действенной навигации по веб-сайту
Анастасия Егорова
Безупречная навигация держится на 3-х китах. Это:
Дизайн
Дизайн нужно обмыслить с учетом принятых частей навигации. Даже если вы выбираете смелые решения, стоит применять знакомые формы и обозначения иконок. Миниатюризм сейчас еще лучше воспринимается юзерами — навигационные элементы должны выделяться, но в то же время не диссонировать с общим зрительным решением.
Удобство
Навигация обязана быть интуитивно понятной. Перенасыщение меню ведет к дезориентации, рассеянному вниманию и уводит юзера от главный повестки. На каждой страничке обязана быть своя навигация, позволяющая юзеру просто возвратиться к предшествующему материалу либо перейти на новейший без утраты логической связи.
Структура
Структура составляется так, чтоб юзер сумел оказаться в подходящем разделе максимум за несколько кликов. Не следует перенасыщать веб-сайт несколькими навигационными слоями — размещение разделов обязано быть прогнозируемым.
Главные элементы навигации веб-сайта
1. Основное меню
Это главный пункт при разработке навигации. Идеальнее всего сделать горизонтальное меню в шапке веб-сайта — таковой вариант привычнее для юзера. Среднее число разделов в нем — не наиболее 7. Для доборной инфы можно применять раскрывающееся меню с подразделами. Привлечь внимание к определенным разделам и выделить активный раздел можно шрифтом либо цветом.
Для обозначения меню можно применять значок «гамбургер» — три горизонтальные черты. При нажатии на него юзер лицезреет пункты меню, которые ранее были укрыты.
2. Боковое меню
В него помещают подразделы, рубрики и доп навигационную информацию. Обычно, оно располагается в левой части странички и не дублируется во всех разделах веб-сайта. Не стоит перенасыщать боковое меню, наилучшее количество разделов в нем — не наиболее 10.
3. Иконки
Для зрительной привлекательности заместо текстовых ссылок можно применять иконки: значок корзины для перечня покупок, значок сердца для избранных продуктов и т.д. Очень принципиально тут избегать иконок, непривычных для юзера и избранной группы.
4. Карта веб-сайта
На главную страничку можно добавить карту веб-сайта — она содержит гиперссылки на все разделы и помогает юзеру одномоментно перебегать на подходящую ему страничку.
5. Поиск
Для неких ресурсов будет животрепещущ поиск по главным словам. Его лучше расположить в основном меню и создать неизменным навигационным спутником юзера.
6. Фильтрация и сортировка
Для наиболее комфортного поиска используйте фильтры — они помогают юзеру отметить нужные свойства и стремительно отыскать пригодный продукт, не путешествуя по ненадобным ему страничкам и разделам.
7. Раздел «О компании»
Данный раздел нужен для увеличения доверия юзеров к вашей компании, его можно расположить в основном меню либо футере.
8. Текстовые ссылки
Такие ссылки употребляют для пояснения инфы и удержания внимания юзера на веб-сайте. Они могут как вести на остальные разделы, так и открывать всплывающие окна.
9. «Хлебные крошки»
Такое увлекательное заглавие пришло к нам из известной сказки про Гензель и Гретель, в какой хлебные крошки указывали им путь. Это вспомогательные навигационные элементы в высшей части странички — слева от того раздела, где на данный момент находится юзер. Они кликабельны и разрешают возвратиться на один либо пару шажков назад.
10. Призывы к действию
Для призыва к мотивированному действию можно применять отдельную клавишу, ведомую в соответственный раздел. Основное тут — придерживаться логических взаимосвязей.
11. Клавиша возврата
На площадках с огромным объемом инфы (к примеру, в интернет-магазинах) в шапке странички можно расположить клавишу в виде стрелки, направленной ввысь. Она поможет юзерам стремительно возвратиться на предшествующую страничку, не прокручивая огромные массивы данных.
12. URL-адрес странички
Весьма принципиально вынести в адресную строчку наименования разделов, чтоб юзер мог осознать, в которой части веб-сайта находится на данный момент. URL должен отражать сущность определенной странички.
13. Зрительные эффекты
Не запамятовывайте о значимости зрительных эффектов. На кликабельных клавишах значок мышки должен зрительно изменяться. Если мы используем лендинг, дизайнер может заложить визуальную навигацию при переходе от 1-го блока к другому — стрелку либо перечисление блоков. Принципиально выделять разделы, где находится юзер, иными цветами либо подчеркиванием.
Клавиши с доборной анимацией завлекают внимание и наращивают кликабельность.
14. Футер
В данной области веб-сайта дублируются разделы головного меню, размещаются контакты, документы, политика конфиденциальности и иная информация, диктуемая контекстом. Нередко футер делают контрастным остальному веб-сайту, но это никак не неотклонимый прием. Тут раскрывается большенный простор для фантазии дизайнера.
Принципиальные правила комфортной навигации
1. Не утруждайте юзера новенькими вкладками
Странички не должны раскрываться в новейших окнах. Это неловко для юзера, потому что наращивает количество вкладок в браузере и усложняет ориентацию на веб-сайте.
2. Располагайте контакты на видном месте
Не располагайте контактную информацию далековато от юзера, обычное размещение — в шапке веб-сайта либо футере. А адресок лучше расположить в футере либо на отдельной страничке.
3. Не прячьте меню
Меню обязано размещаться на видном месте, не стоит прятать его в «бургер». Лучше закрепить меню и создать его постоянным при переходе на остальные странички, чтоб ничего не путало юзера.
4. Используйте подсказки
В вариантах, когда структура меню непростая и сверхнасыщенная, можно применять систему информационных подсказок, которые обычно закрепляются в основном меню справа. Они открываются во всплывающем окне и преследуют юзера при переходе на всякую страничку.
5. Добавляйте стимулирующие разделы
Для роста времени, проведенного на веб-сайте, нередко вводят доп навигационные группы — рекомендованные продукты, не так давно просмотренные странички, полезные статьи и остальные потенциально достойные внимания юзеру разделы.
6. Помните про информационные ссылки
Самое удачное пространство для размещения информационных ссылок — футер. В него обычно помещают то, что не поместилось в основном меню. Это могут быть документы, адреса, вакансии, доставка и остальные второстепенные разделы.
7. Не запамятовывайте про правило логотипа
Ваш логотип должен вести на главную страничку — это не только лишь удобство, да и привычка среднего юзера.
8. Группируйте странички
Чем вернее сгруппирована информация, тем лаконичнее и понятнее будет навигация. Не дробите разделы, которые можно поместить в один. Если у вас группа компаний, не перечисляйте каждую в отдельном разделе — разместите всю информацию на одной страничке «О группе компаний».
9. Расставляйте ценности
Прокрутите в голове первичные и вторичные элементы. К примеру, первичным будет основное меню, вторичным — боковое и «хлебные крошки». Не путайте юзера и выносите в основное меню лишь главные разделы.
10. Используйте дизайн
Не запамятовывайте выделять анимацией, цветом либо шрифтом разделы и элементы веб-сайта. К примеру, ссылки лучше подчеркивать, а «хлебные крошки» — созодать огромным размером шрифта, нежели главный текст. Пробелы меж блоками лендинга не стоит созодать очень большенными, чтоб не заморить юзера долгой прокруткой.
Курсор мыши и клавиши также должны участвовать в дизайн-концепции и подталкивать юзера к мотивированному действию.
Верная навигация веб-сайта содержит внутри себя еще больше аспектов, чем можно обрисовать в одной статье. Основное — держать в голове, что определяющим фактором при ее разработке является логика и пользовательский опыт.
Попытайтесь поставить себя на пространство юзера и найти, как ему будет удобнее передвигаться по вашему ресурсу.
Креативные дизайн-эксперименты — это замечательно, но перед их применением стоит учесть обычные приемы, применяемые юзером в данном секторе. Составьте перечень веб-сайтов, на которых вы ощущали себя более уютно, и используйте их опыт для вашего собственного ресурса.
Как достигнуть максимума
Возьмите за базу краткость: не путайте юзера и опасайтесь излишнего в навигационной панели.
Помните, что юзер направляет больше внимания на 1-ый и крайний пункты панели навигации и просматривает меню слева вправо. Означает, в центральной части меню можно располагать менее важные ссылки.
Прокрутите в голове «план отступления» — дайте юзеру возможность возвратиться к предшествующему разделу несколькими методами, а не только лишь методом нажатия клавиши «Вспять» в браузере.
Непременно проверьте адаптацию навигации под мобильные устройства: размещаются ли все клавиши на месте, не выходят ли за рамки экрана, комфортно ли на их жать.
Обращайте внимание на то, как длительно люди задерживаются на вашем веб-сайте. Если юзер может стремительно отыскать у вас то, что ему необходимо, с большенный вероятностью он станет вашим клиентом.
Источник: