Что такое навигация сайта

Навигация в дизайне сайта: основные элементы и примеры использования

Задачи дизайнера по созданию навигации

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

Задача 1. Понимание местонахождения

Задача 2. Облегчение входа в «личное пространство»

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

Задача 3. Облегчение поиска информации

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

Задача 4. Обеспечение доступа к актуальной информации

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

Задача 5. Помощь в оформлении заказа

Все задачи дизайнер может решить с помощью основных элементов навигации. Рассмотрим каждый из них подробнее.

Элементы навигации сайта

1. Горизонтальное меню

Самый распространенный вариант. Обычно располагается в шапке сайта, состоит из кнопок и ссылок, которые ведут на соответствующие веб-страницы. Если на панели не помещаются все разделы, делают выпадающее меню со всеми категориями.

2. Вертикальное меню

В левой или правой части экрана располагается список основных разделов сайта, каталог товаров и прочее.

3. Меню-гамбургер

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

При создании дизайна меню некоторые разработчики допускают несколько ошибок:

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

Логотип и другие обозначения главной страницы

Иконки

Также иконки используются для обозначения категорий товаров в интернет-магазинах. При нажатии на изображение клиент переходит в соответствующую категорию или в карточку товара. Иконки иногда добавляют в меню сайта.

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

Как правильно оформлять гиперссылки:

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

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

Главная > Уютный блог о дизайне > Навигация в дизайне сайта: основные правила и примеры использования

Футер

Кнопка для возврата

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

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

Страница 404

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

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

Несколько советов для улучшения навигации на сайте:

Примеры нестандартной навигации на сайте

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

Горизонтальный скроллинг

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

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

Элементы навигации на главном экране

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

3D карта

Навигация 360 градусов

Такое чувство, что вы стоите где-то на природе и поворачиваетесь вокруг своей оси. Можно выбирать «окошки», которые открывают новую информацию в виде отдельных блоков.

Видеофильм

Интерактивные истории

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

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

Источник

Навигация на сайте: как ее правильно построить?

Из этой статьи вы узнаете:

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

Что такое навигация по сайту

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

Как уровень конверсии, так и успешное продвижение веб-ресурса зависят от качества навигации. Она сравнима с планировкой жилого помещения. Благодаря хорошей планировке можно без труда найти нужную комнату, не заблудиться и не перепутать вход в спальню со входом на кухню. Но если помещений, коридоров и дверей в доме очень много, человек легко может потеряться. Точно так же дела обстоят и с веб-сайтами. Запутанная навигация, бесконечные ссылки, по которым пользователь попадает не туда, куда надо, сбивает с толку. Человек не может найти то, что ему нужно.

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

Итак, какой должна быть хорошая навигация на сайте? Вот ее основные характеристики:

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

Виды навигации сайта и типы ее реализации

Из множества видов навигаций вы можете отдать предпочтение тем, что принесут наибольшую пользу именно вашему веб-ресурсу.

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

Навигация на сайте может быть реализована в 4 формах:

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

Структура навигации сайта

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

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

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

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

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

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

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

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

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

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

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

1. Меню

При разработке навигации основным элементом является меню. Это панель с размещенными на ней ссылками к главным разделам веб-ресурса. Существуют разные виды меню.

Рекомендуемые статьи по данной теме:

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

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

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

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

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

2. Логотип и прочие пометки главной страницы

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

3. Раздел «О нас»

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

4. Иконки

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

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

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

В навигации сайта присутствует еще один элемент — ссылки на страницы, которые встроены в текст.

Существуют некоторые правила оформления гиперссылок:

Благодаря ссылкам, встраиваемым в текст, можно не только выстроить навигацию, но и удержать клиента на сайте.

6. Футер

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

Оформляют данный элемент отдельно, и иногда его дизайн выбивается из общего стиля сайта.

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

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

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

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

9. Оформление заказа / Корзина

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

10. Кнопка для возврата

При скроллинге появляется сложность: как клиенту скорее вернуться в начало страницы и не прокручивать ее по новой? Для устранения этой проблемы предусматривают кнопки возврата. Они выглядят как стрелки в положении «вверх».

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

11. Страница 404

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

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

Как сделать удобную навигацию по сайту

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

Шапка

Ее необходимо зрительно отделить от других элементов страницы и включить туда:

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

Основное меню

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

Для каждого сайта перечень свой. Но чтобы информация легко воспринималась, не советуем размещать в меню больше 5–7 ссылок. Если этот показатель превышен, выделите над шапкой второе меню со ссылками на вспомогательные разделы — «сервисное меню». Кроме того, ссылки на дополнительные разделы, к примеру вакансии организации, можно показывать только в футере.

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

Форма поиска

Есть смысл сразу ответить на часто задаваемый вопрос: нужно отразить одну кнопку или показать форму целиком? Рекомендуем разместить поле ввода и кнопку запуска, чтобы избавить посетителя от необходимости выполнять лишние действия. Иногда такие кнопки трудно заметить.

Как визуально должна выглядеть форма поиска?

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

Но можно разместить и в других областях веб-ресурса:

Снова отметим, что лучшим местом для размещения формы поиска является шапка, поскольку именно на нее посетитель обращает внимание в первую очередь.

Подвал сайта

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

Подвал должен включать в себя:

Что касается логотипа и названия фирмы, их в футере размещать необязательно, особенно при большом количестве ссылок на разделы.

Дополнительные навигационные элементы на сайте

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

Если какой-то из разделов делится на подразделы, их необходимо вывести в боковое меню.

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

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

Вот по каким правилам их нужно оформлять:

Не добавляйте на сайт ссылки, такие как «Вперед», «Назад», «Обратно в раздел» и т. д., только запутывающие посетителей. Хлебных крошек будет достаточно.

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

Ссылки в главной части веб-страницы

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

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

Вот еще 6 дополнительных рекомендаций:

URL-адрес веб-страницы

Адреса ссылок должны быть простыми и понятными рядовому посетителю. Весь адрес веб-страницы пишите на латинице.

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

О навигации на сайте WordPress

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

Настройте на панели администрирования сайта меню:

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

Далее закрепите все это в настройках темы.

Внешний вид — Настроить — Навигация — Выбрать меню.

Выберите наше Меню 1 и сохраните настройки.

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

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

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

Можно установить еще один плагин — nRelate Related Content, который выводит после каждой публикации подобные статьи. Процесс установки плагина стандартный. После его активации необходимо провести еще несколько настроек. В меню панели администрирования появится отдельный блок — nRelate с двумя вкладками (Dashboard и Related Content). При первом обращении к плагину ему понадобится какое-то время для индексации всех страниц нашего веб-сайта.

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

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

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

Для реализации этого же функционала можно использовать и другие плагины, к примеру Contextual Related Posts.

Чтобы посетителям было удобно, можно выстроить карту сайта. Для этого необходимо использовать плагин Dagon Design Sitemap Generator. Если не удается найти его через админку WordPress, скачайте с официального сайта Dagon Design.

Установите и активируйте плагин, после чего выполните определенные настройки. Зайдите в меню Параметры — XML-Sitemap. Выберите все страницы, рубрики и статьи, которые вы хотели бы видеть на карте своего ресурса. И здесь же можете отказаться от всего, что не хотели бы показывать на карте сайта.

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

Простая кнопка без наворотов устанавливается в два счета. Для этого нужно открыть для редактирования файл footer.php темы WordPress, который, как мы знаем, отвечает за отображение в браузере нижней части страницы — футера.

Перед закрывающим тегом body необходимо поставить такой код:

Редактировать файлы удобнее всего с помощью Notepad++. Так создается навигация сайта.

CSS-свойства для соответствующего идентификатора (id) gotop задаются, чтобы определить местоположение и вид значка «Наверх»:

border: 2px solid #BBB9C0;

Необходимо скопировать и занести эти свойства в файл style.css темы WordPress (устройство темы WordPress). В итоге внизу справа должно появиться стандартное изображение кнопки «Наверх». Вы легко можете адаптировать ее к своему дизайну, изменив значение тех или иных свойств.

Эту простую картинку можно менять: делать рамку толще, выбрать другой тип и цвет (border), а также размер (font-size) и цвет (color) шрифта надписи «Наверх». Чтобы максимально адаптировать изображение к своему дизайну, попробуйте применить разные стили.

По каким параметрам проводится анализ навигации сайта

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

Навигацию всегда анализируют по следующим параметрам:

Нельзя значительно удалять вложенные веб-страницы от главной. Лучше всего, если посетитель всего через 3 клика попадает на самые удаленные части ресурса. Если это условие не выполнено, значит, есть над чем работать.

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

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

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

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

Смотря на навигацию сайта, пользователь должен уже приблизительно понимать общую структуру площади, а также представлять, куда ведет та или иная ссылка. Иными словами, необходимо использовать понятные и относительно короткие описания. Не нужно креативности, если вы знаете какие-либо стандартные значения. Например, прайс лучше обозначить ссылкой «Цены». К таким вариантам пользователи привыкли, следовательно, заметят их намного быстрее. И, конечно же, необходимо применять понятные шрифты средних размеров, чтобы люди воспринимали их положительно.

Основные ошибки в навигации сайта

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

Какие же основные ошибки пользователи допускают, разрабатывая навигацию?

Ошибка № 1. Оригинальный стиль

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

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

Ошибка № 2. Универсальные названия пунктов меню

Очень важно, чтобы названия меню навигации были информативны. Предположим, пункты меню «Товары» или «О нас» используют все компании, и такие надписи несут в себе мало информации для пользователя. Еще пример: «Кто мы». Эта фраза тоже ни о чем не говорит.

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

Вы ведь согласны с тем, что пользователи не ищут общие для всех «Услуги» или раздел «О нас», а потому навигация с такими пунктами никак не поспособствует продвижению сайта в результатах поисковой выдачи? Меню и структуру веб-ресурса нужно оптимизировать для поисковиков, чтобы эти элементы говорили на понятном целевым пользователям языке.

Ошибка № 3. Выпадающее меню

Этот навигационный элемент сейчас очень распространен. Но использовать его нужно очень осторожно по двум причинам.

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

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

Ошибка № 4. Чрезмерное количество пунктов меню

Иногда даже 7 пунктов — перебор. Пусть их будет меньше — не более 5. Чем меньше вторых по значимости пунктов, тем реже посетители станут обращать на них внимание и тем больше будут смотреть на важные.

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

Ошибка № 5. Нелогичное размещение пункта меню для оформления заказа

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

Источник