Чтобы правильно подвести клиента к выполнению целевого действия и сделать его пребывание на сайте более комфортным, нужна хорошая навигация.
Сложная и запутанная навигация на сайте отталкивает клиентов. Чем проще пользователю на сайте, тем быстрее он найдет необходимую информацию. И чтобы получить как можно больше конверсий, необходимо позаботиться об удобном функционале сайта, расположении и уровнях меню.
Навигация и юзабилити
Система навигации состоит из гиперссылок. Эти ссылки помогают пользователю перемещаться по разделам и находить нужную информацию. Они могут быть оформлены в виде текста или в виде картинок. Текстовые ссылки обязательно нужно выделять цветом или подчеркиванием. Картинку тоже желательно подсвечивать.
Типы навигации
-
Глобальная. Это самые главные ссылки, которые видно с любой страницы.
-
Основная. Здесь главные разделы ресурса, объединенные в меню.
-
Тематическая. Такие ссылки ведут на другие разделы со схожей тематикой.
-
Указательная. Помогает пользователю понять, в какой части сайта он находится.
-
Рекламная. Текстовые и графические ссылки, привлекающие внимание посетителя и ведущие на другую страницу сайта или другой ресурс.
-
Контекстная. Ссылка в тексте направляет в другую часть ресурса. Используется для оптимизации.
-
Географическая. Применяется на туристических порталах, чтобы показать геолокацию раздела.
-
Поисковая. С помощью поиска находит все соответствующие теме материалы на сайте или в поисковике.
-
Языковая. Пользователю предлагается выбрать язык, на котором будет отображаться контент.
Характеристики хорошей навигации
Интуитивно понятный интерфейс
Внешний вид программы и меню должны быть ясны и понятны любому человеку. Пользователь не должен щелкать слишком много раз, чтобы попасть в какой-либо раздел сайта. Здорово, если по значкам, иконкам и надписям посетитель сможет догадаться, где он находится.
Гармоничное визуальное оформление
Важно соблюдать контрастность, но не делать кричащий дизайн. Кислотные оттенки использовать не стоит. Общая картина сайта должна быть комфортной для глаз: цветовая схема, шрифты, сочетание всех элементов.
Проработка всех страниц
На любой странице сайта должны работать и корректно отображаться все кнопки, ссылки. Необходимо следить за качеством картинок и другой графики.
Как оценить качество навигации
По большому счету степень качества навигации можно оценить по трем вопросам:
-
На какой странице находится пользователь в данный момент?
-
На каких страницах он уже побывал?
-
На каких страницах он еще не был?
В идеале посещенные и непосещенные разделы нужно подсвечивать разными цветами. Например, как в браузере: синий — не открывал ссылку, фиолетовый — открывал ссылку.
Суммарный объем навигации нужно постараться уместить в 5-15% от общего пространства сайта.
Говоря о навигации, стоит коснуться темы юзабилити. Это основной показатель простоты и удобства, тесно связанный с навигацией и влияющий на конверсию сайта.
Критерии для оценки юзабилити веб-страницы
-
Ориентация — насколько просто новым посетителям разобраться в интерфейсе, не отвлекает ли что-то их внимание от главного, не мешают ли им всплывающие окна, реклама.
-
Результативность — как быстро пользователь освоится на странице и найдет то, что искал.
-
Запоминаемость — легко ли будет человеку вспомнить и вновь освоится на сайте после долгого отсутствия.
-
Ошибки — много ли неверных действия совершил посетитель, которые привели к программной ошибке и сможет ли он самостоятельно их устранить.
-
Удовлетворенность — субъективный критерий, оценивающий, насколько доволен пользователь посещением сайта. По большей части это сугубо эмоциональная оценка.
Люди оценивают степень удобства всего лишь за 5 секунд. Если за 5 секунд человек не смог разобраться, ему показалось все очень сложным, он закроет сайт. Разбираться в интерфейсе никто не будет, ведь вокруг множество конкурентов с простыми и понятными сайтами. Ресурс, вызывающий чувство дискомфорта, никогда не будет хорошо продавать.
Что должно быть на главной странице сайта
Разберем основные элементы навигации сайта. Это главные “маячки”, позволяющие пользователю привыкнуть к сайту и не растеряться в первые же секунды.
Шапка
Первое, куда бросается взгляд. Шапка должна содержать всю необходимую информацию о бизнесе:
-
Логотип компании. Для облегчения восприятия пользователей логотип лучше разместить в верхнем левом углу. При необходимости вы всегда можете бесплатно создать логотип c нуля в Ucraft Logo Maker.
-
Название компании и краткое описание услуг. Название желательно расположить рядом с логотипом. А описание услуг нужно уместить в несколько слов, очень емко. Например: “товары для животных”.
-
Город или регион, из которого осуществляется доставка товаров/услуг — если это локальный бизнес. Если у бизнеса нет привязки к месту, этот пункт можно пропустить.
-
Контактная информация и режим работы офиса. Указывайте только рабочий номер телефона, по которому всегда можно дозвониться.
-
Кнопка “Корзина”. Если на сайте можно оформить заказ, добавив его в корзину, эта кнопка будет очень полезной. Товары, добавленные в корзину, будут напоминать пользователю о незавершенном заказе. Это увеличивает шансы на то, что клиент совершит покупку.
-
Кнопка обратного звонка. Обычно такой значок оформляют в виде телефонной трубки. Он может располагаться чуть ниже шапки или в самой шапке. Если Вы не хотите добавлять в шапку кнопку обратного звонка, опустите ее вниз на несколько сантиметров. Но помните, что она должна находиться в поле зрения пользователя — в верхней части сайта.
Главное меню
Разделы главного меню обычно располагают под шапкой, редко — над шапкой. Разделы должны быть оформлены в едином стиле, их не должно быть слишком много — оптимально 5, максимум 7. Здесь должны быть только важные ссылки, позволяющие пользователям определиться с выбором товаров. Если не хватает места для каких-то ссылок, их можно перенести в подвал или расположить над шапкой.
Основные ссылки для главного меню:
-
Каталог товаров\услуг
-
Информация об оплате и доставке
-
Гарантии и возврат
-
Скидки, акции
-
Контакты
-
Отзывы
-
О нас\О компании
-
Блог, где публикуются новости или другая важная информация
Чтобы пользователь не потерялся, желательно настроить функцию подсветки раздела, в котором он находится в данный момент.
https://preview-shopgoods.ucraft.site/
Окно поиска
Эта функция больше подойдет для крупных интернет-магазинов или информационных порталов. Но для любого другого сайта она тоже будет полезной. С помощью поиска пользователь моментально находит то, что ему нужно, а это тоже повышает конверсию.
Окно поиска обычно размещают в правом верхнем углу, над шапкой, в строке главного меню или под главным меню. Иногда это небольшое окно, находящееся отдельно от других кнопок навигации. Главное, чтобы пользователю не пришлось слишком долго искать это окно.
Подвал сайта
Многие не уделяют должное внимание подвалу и зря. Большинство пользователей активно исследует подвал сайта. И чем больше полезной информации там для потенциального клиента, тем больше его уровень доверия к фирме.
В подвале нужно разместить ссылки на все разделы сайта, которые только могут быть:
-
Контакты и информация о компании. ИНН, лицензии и сертификаты, номера телефонов, электронная почта, адреса. Имя человека, на которого оформлено ИП. Чем подробнее, тем лучше.
-
Информация о способах заказа, оплаты, доставки.
-
Ссылка на регистрацию (если необходимо).
Дополнительные элементы
Эти элементы необязательны и нужны не везде. Но бывает так, что при добавлении некоторых деталей, вы создаете более привлекательный и удобный сайт для посетителей.
Хлебные крошки
Навигационная цепочка, или хлебные крошки, – это дополнительная локальная навигация, которая помогает пользователю не заблудиться. Хлебные крошки как бы помечают дорогу, по которой шел человек. Изображается этот путь в виде строки, где все посещенные страницы последовательно встают друг за другом. Это хорошая функция, облегчающая жизнь потенциального клиента и выделяющая сайт среди конкурентов.
Хлебные крошки советуют располагать вверху, оптимально – под меню. Шрифт не должен быть большим. Все элементы, кроме последнего, должны быть кликабельны, т.е. содержать ссылку на определенный раздел. Некоторые выделяют последний элемент строки жирным шрифтом, показывая так посетителю, где он в данный момент.
Ссылки вроде “Вперед”, “Назад”, “Вернуться в раздел” добавлять не нужно, это отвлекает и путает посетителей.
Боковое меню
Бывает, что разделов на сайте много. Тогда имеет смысл вывести все разделы в боковое меню, оставив в главном меню лишь основные. Боковое меню принято размещать слева от основной части страницы. Желательно настроить меню так, чтобы оно отображалось соответственно разделу. Не стоит дублировать его на всех страницах подряд. Подсвечивать раздел, в котором находится посетитель — хорошая функция.
Сортировка и фильтры
Это необходимо для интернет-магазинов, онлайн-библиотек или онлайн-кинотеатров. Когда есть большой ассортимент товаров, который нуждается в упорядочивании. Во всех остальных случаях вряд ли это пригодится.
Всю иерархию сортировки необходимо прописывать до того, как карточки товаров будут загружены на сайт. Специалисты называют это “семантическим ядром”, когда весь ассортимент магазина и категории товаров скрупулезно прописываются и обдумываются.
Сортировку и фильтрацию следует располагать в левой части сайта. При настройке фильтрации нужно убедиться, что товары действительно легко сортируются и кнопка “Фильтр” находится на виду.
При настройке сортировки достаточно указать три основных критерия: по цене, по популярности и по наименованию. Если товар специфичный, метод сортировки следует продумывать более детально.
Кнопка “вверх”
Почти каждый пользователь, прочитавший страницу до самого низа, захочет вернуться наверх. Кнопка возврата значительно упростит жизнь посетителя. Мало кому захочется прокручивать обратно вверх всю страницу, если это какой-то длинный лендинг. Кнопку размещают в правом нижнем углу.
На что обратить внимание при работе с навигацией
Проработка некоторых элементов может казаться не такой значимой. Но все же, даже маленькие недостатки сайта будут сильно бросаться в глаза. Особенно, если клиент искушенный и выбирает среди конкурентов.
Визуальное оформление
Все элементы навигации необходимо оформлять так, чтобы они были заметными. Пользователь должен различать, где ссылка, а где кнопка. Чтобы было понятно, кликабельный это элемент или нет – стоит выделять ссылки полужирным или подчеркнутым шрифтом.
Важно следить и за соотношением текста и картинок. Часто на сайтах можно увидеть довольно крупную картинку и очень мелкий шрифт под ней. Так делать не стоит.
Текстовые ссылки
Без ссылок в тексте, пожалуй, не обойтись. Они направляют пользователя на другую страницу, чтобы тот смог найти для себя что-то интересное или полезное. К тому же с помощью ссылок можно легко удерживать клиента на сайте.
Чтобы грамотно их оформить, нужно знать несколько простых правил:
-
Выделять цветом или полужирным шрифтом,
-
Менять цвет текстовой ссылки при наведении/нажатии,
-
Предупреждать пользователя при переходе на сторонний ресурс или скачивании файла,
-
Не использовать прямой URL, спрятать ссылку в текстовый контент.
Ошибка 404
Страница 404 появляется в том случае, если пользователь совершил какое-то неверное действие или кликнул по несуществующей/некорректной ссылке. Оформлять такую страницу нужно так, чтобы у посетителя была возможность вернуться на главный раздел или туда, где он был до этого.
Если у клиента не будет возможности за 2 секунды вернуться на сайт по работающей ссылке, с большой вероятностью он покинет сайт.
Популярные ошибки в навигации сайта
Креативность
Любому владельцу сайта хочется, чтобы дизайн был отличительным и запоминающимся, не как у всех. Но следует помнить, что зачастую креативность вредит сайту, т.к. вводит пользователей в заблуждение. Если меню или разделы находятся не посередине и не в левой стороне, клиент будет чувствовать себя неуютно, не сможет найти нужный товар/информацию и уйдет с сайта.
Оригинальные названия/наименования
Меню должно быть понятным. И названия разделов тоже. Не стоит слишком умничать и изобретать велосипед, пытаясь придумать оригинальное наименование, когда все уже давно придумано. Раздел “О нас” звучит лучше, чем “Кто мы”. Общайтесь с пользователями на простом и понятном для них языке.
Выпадающее меню
Когда строка меню постоянно выпадает в неподходящий момент или, наоборот, ускользает при попытке щелкнуть на нее, это становится проблемой. Юзабилити сайта сразу падает, пользователю становится некомфортно. Плохая навигация по сайту – одна из основных причин низкой посещаемости сайта.
Слишком подробное меню
Краткость – сестра таланта. Это правило можно применить и к навигации. Не стоит увлекаться пунктами основного меню. В идеале их должно быть не больше 5. В крайнем случае – 7. Помните, что пользователи должны обращать внимание на самое важное. Второстепенные пункты можно и пропустить.
Нелогичное расположение важных элементов
Психологические исследования доказали, что информация, размещенная посередине, не запоминается так хорошо, как информация в начале и в конце. Следовательно, самые важные разделы нужно оформлять так, чтобы они находились в крайнем левом и крайнем правом углу экрана. Например, кнопку Главной страницы принято размещать слева, а кнопку Корзины/Оформления заказа справа. Для посетителей так привычнее, а еще это повышает конверсию.
Заключение
Оптимизация системы навигации играет важную роль при низкой посещаемости сайта или высоком проценте отказа от покупок. Если вы столкнулись с перечисленными проблемами, первым делом обратите внимание на элементы навигации.
Улучшить юзабилити и упростить навигацию поможет выполнение некоторых действий:
-
Не усложнять иерархию разделов и избегать сложной структуры,
-
Отслеживать и анализировать поведение посетителей на сайте,
-
Выявлять актуальные потребности целевой аудитории и создавать продукт в соответствии со спросом,
-
Всегда тщательно тестировать новые элементы и обновления сайта,
-
Адаптировать сайт под различные форматы устройств,
-
Не тратить время на создание неординарных вещей,
-
Соответствовать ожиданиям клиентов, не сбивая их с толку,
-
Размещать главные элементы на первом и последнем пункте навигации.
Если вам кажется сложным создание сайта с нуля, вы всегда можете воспользоваться готовыми шаблонами Ucraft, которые созданы профессиональными дизайнерами с учетом тонкостей построения навигации.