Частая ошибка юзабилити сайта – это сложная или запутанная навигация, которая отталкивает клиентов. Запомните простое правило: чем проще ориентироваться на вашем сайте, тем быстрее пользователь найдет необходимую информацию и, возможно, сделает заказ.
Основной принцип удобной навигации сайта: сделать так, чтобы потенциальный клиент всегда понимал в каком разделе/на какой странице он находится, откуда он перешел сюда и куда может перейти дальше. Давайте разберемся, какие элементы навигации необходимо добавить на сайт, чтобы пользователь не «заблудился» в недрах вашего ресурса.
Нижеперечисленные элементы на то и основные, что должны присутствовать на всех страницах сайта и быть в едином стиле. Их отсутствие дезориентирует пользователя.
Шапка сайта. Должна быть визуально отделена от других элементов страницы и содержать следующие элементы:
Пример информативной шапки сайта:
Ссылки на соцсети лучше не размещать в шапке, чтобы не уводить пользователей с сайта сразу. Расскажите о ваших аккаунтах в соцсетях в основной части страницы и/или в подвале сайта.
Главное меню. Лучше всего данные ссылки расположить горизонтально под шапкой сайта. При выборе названий для разделов не забываем про семантическое проектирование. Основные разделы, которые должны быть в главном меню:
Список для каждого сайта индивидуален, но для легкого восприятия не рекомендуем размещать в меню более 5-7 ссылок. Если же их получается больше, над шапкой сайта можно выделить второе меню со ссылками на вспомогательные разделы – так называемое «сервисное» меню. Пример шапки сайта с двумя меню:
Также ссылки на дополнительные разделы, например, на вакансии компании, можно показать только в подвале сайта.
Визуально выделяйте активный раздел меню, чтобы пользователь видел, в каком разделе он находится. Пример выделения раздела меню:
Форма поиска. Маст-хэв для больших сайтов, в особенности для интернет-магазинов и информационных порталов. О том, какой она должна быть и где лучше расположить ее на сайте, мы обсуждали здесь.
Подвал сайта. Многие сайты игнорируют данный блок, а ведь он помогает пользователю после просмотра страницы быстрее перейти в другой раздел или найти дополнительные ссылки, которых нет в основном меню. В подвале должны содержаться:
Логотип и название компании размещать в подвале сайта не обязательно, особенно, если у вас много ссылок на разделы. Пример удобного подвала сайта:
Также помогают пользователю разобраться в структуре сайта, но подходят не для всех ресурсов.
Хлебные крошки или локальная навигация. Показывают путь, пройдённый пользователем, или местонахождение страницы в иерархии сайта. Стоит добавить, если у вас многоуровневый сайт (вложенность более 2 уровней). Рекомендации по оформлению:
Пример понятных хлебных крошек:
Не нужно добавлять на сайт ссылки типа «Вперед», «Назад», «Обратно в раздел» и т.д., которые только путают пользователей. Достаточно добавить хлебные крошки.
Боковое меню. Если какой-то раздел сайта делится на подразделы, то стоит вывести их в боковое меню. Располагать меню лучше слева от основной части страницы.
Не нужно дублировать данное меню на всех страницах сайта, размещайте его только в том разделе, к которому оно относится. Антипример, когда на страницах блога или контактов видишь меню категорий товаров:
В боковом меню также следует выделять выбранный раздел.
Фильтры и сортировка товаров. Необходимы в основном для интернет-магазинов. О том, каким должен быть поиск по каталогу, читайте здесь.
Кнопка «Вверх». Помогает пользователям быстро вернуться в начало страницы. Располагать лучше в правом нижнем углу. Пример визуального оформления данной кнопки:
Есть еще пара элементов, о которых хотелось бы также сказать в рамках данной темы.
URL-адрес страницы. Создавайте простые и понятные для понимания обычному пользователю адреса ссылок. Желательно, чтобы весь адрес страницы был на латинице.
Хороший пример: https://site.ru/company/portfolio/
Плохой пример: https://site.ru/site/28787343/
Ссылки в основной части страницы. Выделяйте их цветом и подчеркиванием, чтобы пользователь всегда мог отличить их от некликабельного текста. Подробнее о том, какими должны быть ссылки на сайте.
Все рекомендации проверены практикой, поэтому можно смело добавлять перечисленные элементы на сайт. Удобная навигация сайта – реальная цель, которую можно достичь. Поэтому не теряйте время и ставьте в план нужные доработки. Желаем успехов!
Если вы хотите проверить, насколько понятна и рациональна навигация на вашем сайте, то можете обратиться к нам за аудитом. Также мы проводим юзабилити-тестирования, которые быстро выявляют и наглядно показывают проблемы в навигации.
Оценок: 656 (средняя 5 из 5)
Проектирование удобной навигации по сайту {descr}