Операция «навигация». Почему навигация по веб-сайту – важнейший аспект его дизайна

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

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

Почему это важно?

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

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

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

Основные типы навигации

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

• Прокрутка/нажатие (скроллинг/клик)
• Меню и подменю (классическое меню)
• Иконки, изображения и кнопки
• Ссылки в контенте страницы (перелинковка)

Прокрутка на первый взгляд может показаться способом просмотра информации на сайте, поведением, а не формой навигации. Но очень часто именно она определяет выбор дизайна при отображении контента вашего сайта. Ярчайший пример – популярные ныне одностраничные сайты (лендинги). Основная причина популярности – сенсорный интерфейс смартфонов и планшетов. Ключевая задача в этом типе навигации – правильно определиться, какая информация будет доступна пользователю при прокрутке вниз по основной странице, а какая – отображаться по клику пункта короткого (!) меню или по кнопке.

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

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

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

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

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

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

Типичные ошибки и фейлы навигации сайта

Нам в Laconic Design часто приходится исправлять чужие ошибки, проводя редизайн сайтов. Поэтому мы решили выделить ТОП-5 наиболее распространенных ошибок в навигации сайта:

• непонятная навигация. Меню вообще отсутствует как таковое, не идентифицируется на странице, либо его пункты не соответствуют адресам назначения. Вызывает улыбку, но, увы, бывает не до смеха;
• слишком много меню на странице– последствия неправильного структурирования информации, ее излишнего дробления и детализации. Мешает пользователю определиться со следующим шагом;
• перегруженное меню – перекликается с предыдущим пунктом, но связано больше с неудобством восприятия;
• цель не ясна– назначение пункта меню должно быть понятным и соответствующим цели. То есть кнопка «купить» должна вести на страницу оформления заказа, а не куда-нибудь еще;
• отсутствие удобной мобильной версии сайта (и меню). Очень критичная в нынешних условиях и очень распространенная ошибка.

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

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

Кому нужен полноценный веб-сайт?

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

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

Поэтому сайт — всегда масштабно, солидно и красиво, но дорого.

Кому нужна посадочная страница (Landing page)?

Для небольшого бизнеса на 1-3 однородных услуги подойдет Landing page. Это одна простая страница, на которой указано название товара/услуги, условия, на которых они продаются/предоставляются, выгоды для клиента, контакты, несколько клиентских отзывов и т.д.

Преимущество Landing page в том, что она быстро и четко дает представление об уникальном бизнес-предложении в одном месте. То есть это простота, минимализм небольшие объемы информации и приемлемая для мелкого бизнеса цена.

Есть ли компромисс между сайтом и Landing page?

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

Яркий пример — страница салона штор MyataHome.

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

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

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

 Другой пример — страница бухгалтерской компании СONSTANTA SERVIS.

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

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

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

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