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

Содержание

Как правильно выстроить систему навигации сайта с пользой для SEO

Что такое навигационная система сайта?
Какие бывают виды?
Как реализуется?
Как навигация влияет на SEO?
Как правильно выстроить навигацию сайта: 9 (+1) рекомендация

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

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

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

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

Навигация состоит из разных видов гиперссылок. Каждый вид отвечает за разные действия:

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

Какие бывают виды?

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

Рекламная — кликабельные рекламные блоки.

С точки зрения дизайнерской разработки навигация сайта бывает:

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

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

URL;
хэдер;
основное меню;
форма поиска;
шкала прогресса, кнопка «Наверх»;
ссылки внутри текстов;
футер.

Как реализуется?

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

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

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

Как навигация влияет на SEO?

Формирует поведение посетителя.

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

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

Поведенческие факторы оказывают прямое влияние на ранжирование, а система навигации — один из ключевых факторов поведения.
Влияет на индексацию в поисковиках.

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

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

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

Корректная структура позволяет отображать в поиске сразу несколько дополнительных ссылок:

Читайте по теме: Что такое сниппет и как настроить сниппет в Яндекс и Google

Как правильно выстроить навигацию по сайту: 9 (+1) рекомендация

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

Пользователи должны иметь возможность свободно переходить с одной страницы на другую. Это основное правило, которое задает тон всем остальным. Любой веб-площадке нужна простая, логичная, предсказуемая навигационная система.
Если у вас крупный интернет-ресурс, на котором много страниц, вы должны организовать их иерархию таким образом, чтобы любой пользователь мог перейти на любую страницу в несколько кликов.
Отслеживайте Подробнее…»>уровень вложенности приоритетных страниц. Это количество кликов, которое совершает посетитель при переходе от главной до нужной ему страницы. Так, у главной — 1 уровень, у ссылок с нее — 2 уровень, и так далее. Чем ближе страница к главной, тем больше ссылочного веса она получает. С точки зрения SEO размещать важный контент на страницах 4 и последующего уровней — не лучшая идея. Краулеры уделяют мало внимания таким страницам. Поэтому все то, что пользователи и/или поисковые боты должны увидеть, нужно размещать не дальше, чем на 3 уровне.
Соблюдайте системность структуры. Внутренняя перелинковка должна строиться на текстовых анкорах, которые дают представление о том, куда ведет ссылка. В качестве таких анкоров могут выступать ключевые слова, связанные с другим релевантным контентом.
Избегайте сложной, слишком разветвленной структуры.
Внедряйте Подробнее…»>«хлебные крошки». Они помогают ориентироваться, особенно если пользователь отвлечется:
Используйте Подробнее…»>ЧПУ. Это вид URL позволяет пользователю понять, какой контент расположен на странице еще до того, как она открылась.
Создавайте и сортируйте категории, исходя из их популярности и актуальности для пользователей.
Адаптируйте новые элементы навигации для мобильных устройств.
Делайте элементы навигации контрастными, но при этом гармоничными по отношению к фону и основному контенту.

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

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

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

Практические советы по созданию понятного сайта

Tilda Education

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

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

Содержание

Сделать меню навигации для сайта лаконичным
Поставить ссылку на главную страницу на логотип
Сделать меню на одностраничном сайте
Зафиксировать меню
Выделить активный пункт меню для постраничной навигации
Добавить индикаторы (точки) для определения местоположения
Показать процесс загрузки и прокрутки страницы
Выделить кнопку с более важным действием
Скрыть часть контента
Добавить кнопку навигации «Наверх»
Проследить, чтобы в конце страницы не было «тупика»
Задать понятный URL адрес страницы
Сделать «хлебные крошки»
Подведение итогов

Сделать меню навигации для сайта лаконичным

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

При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».

Советы и инструкции по дизайну удобного меню сайта

sistersbakery.ru

www.linelo.ru

fyrclothes.tilda.ws/story01

Поставить ссылку на главную страницу на логотип

Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.

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

Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.

Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.

Сделать меню на одностраничном сайте

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

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

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

Якоря и ссылки внутри страницы

Зафиксировать меню

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

Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».

Выделить активный пункт меню для постраничной навигации

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

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

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

Добавить индикаторы (точки) для определения местоположения

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

На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.

Показать процесс загрузки и прокрутки страницы

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

На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.

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

Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.

Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.

Выделить кнопку с более важным действием

Из двух соседних кнопок более важная должна визуально выделяться.

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

archskills.ru

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

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

Скрыть часть контента

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

Хороший прием — написать на кнопке какое именно количество элементов, она скрывает.

Скрыть часть контента можно несколькими способами:

Кнопка «Показать еще». Она находится в разделе «Форма и кнопка» под номером BF703.

Текст в раскрывающихся блоках. Отличный вариант для длинных списков с услугами или ответами на вопросы. Его можно найти в разделе «Текстовый блок» под номером TX16.

Вкладки с раскрывающимся контентом. Находятся в разделе «Меню» под номерами ME602 и ME603. Эти блоки позволяют создавать на странице несколько вкладок и показывать разный контент по клику на соотвествующую вкладку в рамках одной страницы.

Кнопка «Показать еще»

Текст в раскрывающихся блоках

Вкладки с раскрывающимся контентом

Добавить кнопку навигации «Наверх»

Кнопка «Наверх» помогает пользователю из любого места страницы быстро попасть в ее начало.

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

В Тильде блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.

Проследить, чтобы в конце страницы не было «тупика»

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

Если вы сделали лендинг — самое время повторить призыв к действию. Если на странице находится статья, в конце можно поставить ссылки на другие статьи похожей тематики. В Тильде для этой цели можно использовать блоки из разделов «Плитка и ссылка» либо «Список страниц».

piece-of-cake.ru/absorption

britishsummer.tilda.ws/page2203.html

togdazine.ru/project/airzero

ayuev.com/estetica

fyrclothes. tilda.ws/2016

ohmy.moscow/books2

Задать понятный URL адрес страницы

URL (Uniform Resource Locator) — это единообразный адрес, указывающий путь к интернет ресурсу. Иными словами, это ссылка, которая отображается в адресной строке браузера.

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

Для понятных упорядоченных URL адресов существует термин ЧПУ (человекопонятный URL). ЧПУ состоит из понятных пользователю слов, а не из системного адреса (в Тильде системный адрес страницы будет выглядеть, например, так: /page4652188. html).

Пример, как устроена структура адреса:

https://www. mysite.com/shop/men/shirts

Первая часть (https://) показывает метод, который используется для получения доступа к интернет ресурсу. Протокол HTTP используется чаще всего.

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

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

Адрес страницы в Тильде можно поменять в разделе «Настройки страницы». Если вы хотите использовать несколько слов в адресе страницы, прописывайте их через дефис «-» либо через символ подчеркивания «_». Например, /about-us или /our_works.

Сделать «хлебные крошки»

«Хлебные крошки» (навигационная цепочка) — это навигационный элемент, который помогает пользователю отслеживать свой путь перемещения по сайту.

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

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

Хлебные крошки выглядят таким образом:

Главная страница > Раздел сайта > Подраздел сайта > Страница

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

www.adidas. ru/muzhchiny-botinki

www.lamoda.ru

www.tehnosila.ru

Для того, чтобы сделать путь из хлебных крошек на Тильде, достаточно добавить на страницу блок ME605 «Хлебные крошки» из раздела «Меню». Разместить его можно, например, под обложкой. В контенте блока пропишите названия пунктов и проставьте ссылки на соответствующие страницы. Блок можно копировать из одной страницы и вставлять в другую, добавляя по одному новому пункту навигационной цепочки.

Подведем итоги

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

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

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

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

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

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

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

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

Текст: Ира Смирнова и Юлия Засс
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

что это такое, из каких видов элементов состоит

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

Заказывайте честное и прозрачное продвижение

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

Подпишись на рассылку и получи книгу в подарок!

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

Как сделать современную и удобную навигацию на сайте: основные требования

Перечислим критерии качественной навигации:

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

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

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

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

Языковая – используется на сайтах, потенциальная аудитория которых мультиязычна. Пользователю предлагается выбрать наиболее удобный язык, на котором будет отображаться информация. В большинстве своем такой тип навигации внедряется на сайтах различных международных организаций. Использование языковой навигации позволяет избежать необходимости создания нескольких одинаковых сайтов с контентным наполнением на различных языках.
Основная – ссылки на наиболее важные разделы сайта, размещаются обычно в меню. Большинство ресурсов ограничиваются только ей, поскольку она подходит для небольших проектов в несколько десятков страниц.
Глобальная – это те ссылки, которые должны быть видны с любой страницы сайта, к примеру ссылки на главную страницу.
Рекламная навигация – к ней относятся ссылки, расположенные для привлечения клиентов на другие ресурсы или страницы с предложением услуг или продукции. Такая навигация может быть, как текстовой, так и графической, в зависимости от замысла дизайнера.
Тематическая – к такому типу навигации относятся ссылки на близкие по тематике разделы. К примеру, похожие публикации на новостных сайтах. Также это могут быть ссылки под одной статьей с возможностью перехода к следующей или к предыдущей. Наглядно демонстрирует пример тематической навигации фотогалереи, в большинстве из которых под каждым фото будут ссылки, по которым можно просмотреть предыдущее или следующее по порядку фото.
Навигация в контенте – в основном используется для внутренней перелинковки страниц сайта с целью лучшей поисковой оптимизации. Выглядит как ссылка в тексте страницы, направляющая на другой ресурс или другой раздел.
Указательная – показывает пользователю, в какой части сайта он находится на данный момент. Удобна для крупных порталов и сайтов с множеством разделов. Такой вид навигации позволяет пользователю легко ориентироваться в большом объеме информации.
Географическая – применяется в основном для крупных сайтов или туристических порталов, которым требуется наглядно указать страну, город или регион, к которому относится раздел, в котором пользователь находится. Такой вид навигации обычно компонуется со ссылками на полезные материалы о стране или туристической достопримечательности.
Поисковая навигация – в этом случае можно ввести интересующую информацию в поисковую строку (слово или фразу), и система найдет на сайте материалы, где встречается это буквосочетание. Некоторые порталы не ограничиваются поиском только по своей площадке, а попутно выдают пользователя информацию из поисковых систем по интересующему вопросу.

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

По типу реализации всю навигацию можно разделить на 4 вида:

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

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

Удобная навигация сайта – одно из условий высокой конверсии

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

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

Передовой опыт навигации по веб-сайту — 9 советов и предупреждений по дизайну навигации

На каждом веб-сайте есть меню. Но некоторые намного лучше других.

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

Навигация влияет на посещаемость посредством поискового рейтинга
Навигация влияет на лидогенерацию по показателям конверсии и удобству использования

И если этих двух основных факторов недостаточно, навигация на вашем веб-сайте влияет практически на все остальные факторы успеха вашего веб-сайта:

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

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

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

1. Используйте описательные навигационные метки

«Что мы делаем» на самом деле не говорит о том, чем вы занимаетесь. Также как и «Продукты», «Услуги» или «Решения». Описательная навигация с использованием ключевых фраз лучше по двум причинам: ранжирование/трафик (SEO) и удобство использования/конверсии (UX).

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

Сравните разницу. Первый пример нечеткий. Нет ясности. Никакой дифференциации. Второй пример конкретный. Любой посетитель (или робот) может с первого взгляда сказать, чем занимается компания.

Объективы Dan Brown для информационной архитектуры

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

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

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

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

Прежде всего, это хорошо для посетителей.

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

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

2. Избегайте навигационных меток на основе формата

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

Форматы:

Артикул
Видео
Технические документы
Вебинары
Инфографика

Темы:

Навигация в дикой местности
Морская навигация
Выживание и безопасность
Советы по картографии

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

Сравните разницу в меню навигации. Спросите себя, какие из них более полезны для посетителя:

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

«Сегодня я хочу прочитать технический документ. Подойдет любая тема!»

Ярлыки, указывающие на формат, не являются описательными и, следовательно, менее полезными для посетителей. Вот почему Аврора Харли из Nielsen Norman Group рекомендует не использовать навигацию на основе формата.

Аврора Harley Nielsen Norman Group

«Пользователям, интересующимся конкретной темой, обычно все равно, в каком формате им будет доставляться информация; они сосредоточены исключительно на поиске ответов на поставленный ими вопрос».

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

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

3. Избегайте маленьких выпадающих меню

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

Вот почему: посетители двигают глазами гораздо быстрее, чем двигают мышью. Когда они наводят указатель мыши на пункт меню, они уже решили щелкнуть… а затем вы дали им больше возможностей. Это сбой в сознании посетителя. Момент визуального трения.

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

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

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

Вы только посмотрите сколько мы вписались в мегаменю на 6sense:

Объективы Dan Brown для информационной архитектуры

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

Курт Круз Креативный директор Orbit Media

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

Мы также рекомендуем использовать в дизайне большое количество отступов и пробелов, чтобы пользователи случайно не убрали мышь. И не забудьте включить визуальный индикатор для ссылок, которые вылетают, а не нет, чтобы пользователи не удивлялись».

4. Добавьте призыв к действию в заголовок

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

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

Слова, которые вы выберете, могут иметь значение. И здесь специфичность коррелирует с рейтингом кликов. Конкретные описательные метки кнопок могут иметь значение. Сравните:

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

Проверка основного призыва к действию навигации

Вы можете использовать Google Optimize для проведения A/B-тестирования рейтинга кликов (CTR) вашего основного призыва к действию. Без какого-либо программного обеспечения или затрат вы можете создавать варианты и сравнивать их производительность с оригиналом в режиме реального времени.

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

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

5. Группирует элементы, если их больше семи

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

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

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

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

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

Сколько ссылок на вашей домашней странице? Проверьте счетчик ссылок WebFX, чтобы узнать.

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

Чем меньше элементов в навигации, тем лучше для посетителей

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

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

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

Чтобы принимать трудные решения, нужна дисциплина. Ты можешь это сделать. Испытайте себя, чтобы сократить его до пяти!

6. Порядок навигации по вашему веб-сайту важен

Количество элементов имеет значение, но не менее важен и порядок этих элементов.

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

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

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

7. Уберите значки социальных сетей из заголовка

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

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

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

Они не вернутся.
Вероятно, они забыли, что находятся на вашем сайте.

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

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

8. Навигация по сайту на мобильных устройствах

До сих пор все наши примеры относились к настольным веб-сайтам. Но, может быть, мы смотрим не на тот сайт? Проверьте свою аналитику, чтобы узнать, какой процент посетителей просматривает ваше мобильное меню.

В Universal Analytics отчет находится в разделе Аудитория > Мобильные устройства > Обзор. В GA4 вы можете найти его в разделе «Отчеты» > «Технологии» > «Технический обзор». Здесь я переместил соответствующие сводные карточки наверх.

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

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

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

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

Сделайте номер телефона доступным для нажатия в меню мобильных устройств

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

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

4581

Хороший адаптивный мобильный веб-сайт заставляет ваш телефон звонить.

9. Оптимизируйте навигацию с помощью Analytics

Разработка навигации — это начало, а не конец. Цифровые чернила никогда не высыхают. Через несколько недель после создания навигации используйте Google Analytics, чтобы узнать, как ее используют посетители. Ищите пути улучшения.

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

Как использовать Universal Analytics для измерения эффективности навигации по веб-сайту:

Перейти к отчету «Поведение» > «Контент сайта» > «Все страницы»
Перейдите к главной странице отчета (нажмите «/», которая будет одной из верхних строк отчета)
В верхней части отчета щелкните вкладку «Сводка навигации».

Если ваш веб-сайт с низким трафиком, выберите более длинный диапазон дат. Если в вашей навигации много элементов, выберите 25 или 50 в раскрывающемся списке «Показать строки». Вот как должен выглядеть отчет:

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

Как использовать исследование Google Analytics 4 (GA4) для измерения эффективности навигации по веб-сайту. Покажу это подробнее для тех, кто еще не знаком с новой версией Analytics.

В разделе «Исследования» нажмите «Исследование пути», поскольку наша цель — увидеть пути, по которым посетители проходят через сайт.

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

Нам нужно указать Analytics использовать страницы в качестве отправной точки или узла. Поэтому перетащите «Заголовок страницы и класс экрана» в поле «Начальная точка».

Затем он спросит вас, какая страница является вашей отправной точкой. Выберите домашнюю страницу.

Вуаля! Вот оно. Теперь вы смотрите на производительность вашей навигации.

Просматривая эти отчеты, вы можете мгновенно ответить на самые разные интересные и важные вопросы:

На что чаще всего кликают?
На что почти никогда не нажимают?
Упускают ли из виду большие дела?
Много ли кликают по мелочам?
Насколько эффективны ваши призывы к действию?

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

«Вау, 20% наших посетителей ищут работу!»

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

«Вау, люди действительно хотят видеть членов нашей команды».

…затем вы полируете эти биографии и начинаете показывать свой талант на своей домашней странице.

«Эй, никому нет дела до наших отраслевых страниц».

… затем вы превращаете этот раздел в «кейсы» и соответственно перерабатываете контент.

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

Составление графика (и изменение) вашего курса

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

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

Советы, примеры и рекомендации

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

Если посетители не могут понять, где найти то, что им нужно, они уйдут.

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

Почему важна навигация на веб-сайте?

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

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

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

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

Понимание связи между навигацией по веб-сайту и пользовательским опытом

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

Многие аспекты веб-дизайна и разработки влияют на взаимодействие с пользователем:

Шрифты, цвета и изображения
Заголовки и призывы к действию
Наличие контактной информации
Время загрузки страницы
Дизайн формы

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

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

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

Типы навигации по веб-сайту

Когда большинство людей думают о навигации по веб-сайту, они представляют меню навигации по веб-сайту, которое появляется в заголовках большинства веб-сайтов. Если вы посетите блог Crazy Egg, вы увидите яркий пример:

Однако существуют и другие типы навигации по веб-сайтам.

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

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

Хорошим примером является толстый нижний колонтитул Zappos:

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

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

Развитие мобильных устройств создало потребность в других типах навигации по веб-сайтам. Рассмотрим, например, меню гамбургеров. Вот оно на веб-сайте Нила Пателя:

Меню гамбургера расширяется, когда вы щелкаете по нему.

Большинство этих меню появляются только на мобильных устройствах.

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

3 отличных примера навигации по веб-сайту

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

1. WE3

Здесь у нас есть скриншот домашней страницы WE3. Мы выбрали этот пример, потому что он демонстрирует, как лучшие методы веб-навигации могут быть адаптированы к конкретным потребностям вашего веб-сайта или бизнеса.

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

2. Surem

Вот основная навигация по веб-сайту Surem. Это очень просто, но также очень интуитивно понятно.

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

3. Greenstreet Coffee

Давайте рассмотрим пример местной компании электронной коммерции. Вы видите обычное меню навигации, но это особенное по нескольким причинам.

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

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

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

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

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

Пошаговое руководство по началу использования инструментов Crazy Egg

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

Войдите в свою учетную запись Crazy Egg и загрузите расширение Chrome. Решите, хотите ли вы создать один снэпшот или несколько снэпшотов.

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

После сбора данных запустите A/B-тестирование навигации по веб-сайту. Меняйте мелкие вещи за раз, чтобы увидеть, влияют ли они на количество кликов.

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

Заключение

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

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

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

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

8 инновационных способов оптимизации навигации по сайту

Оптимизация коэффициента конверсии

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

Автор: Джон Макдональд

Последнее обновление: 19 января 2022 г. 7 минут чтения

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

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

8 Передовой опыт навигации по веб-сайту

1. Оптимизируйте навигацию мобильного веб-сайта

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

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

Ferrum Pipe имеет очень эффективное мобильное меню, которое, хотя и очень простое, сообщает пользователям: 1) что они продают и 2) как с ними связаться (см. пример ниже). Это действительно так просто. Любая несущественная информация, которую вы, возможно, захотите предоставить пользователям, может (и должна) быть перемещена в нижний колонтитул вашего сайта.

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

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

3. Сделайте поиск по сайту беспрепятственным

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

ИКЕА — отличный пример компании, которая в значительной степени полагается на возможности поиска по сайту. Магазинам, которые продают тысячи артикулов в различных категориях товаров, нужна хорошо отображаемая панель поиска, чтобы их покупатели могли найти именно то, что ищут. Вы можете видеть на мобильной версии их веб-сайта, что они придерживаются очень минималистичного дизайна: кнопка меню гамбургера, кнопка корзины покупок и панель поиска.

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

4. Укажите контекст

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

Нравится эта статья?

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

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

Хотите просматривать веб-сайты по оттенку? Каждый пункт в меню «Цвет» имеет цветовую кодировку.

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

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

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

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

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

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

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

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

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

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

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

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

8. Повторный список подвариантов

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

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

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

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

Упростите навигацию по сайту

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

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

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

Как правильно выстроить систему навигации сайта с пользой для SEO

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

Какие бывают виды?

Как реализуется?

Как навигация влияет на SEO?

Как правильно выстроить навигацию по сайту: 9 (+1) рекомендация

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

Поставить ссылку на главную страницу на логотип

Сделать меню на одностраничном сайте

Зафиксировать меню

Выделить активный пункт меню для постраничной навигации

Добавить индикаторы (точки) для определения местоположения

Показать процесс загрузки и прокрутки страницы

Выделить кнопку с более важным действием

Скрыть часть контента

Добавить кнопку навигации «Наверх»

Проследить, чтобы в конце страницы не было «тупика»

Задать понятный URL адрес страницы

Подведем итоги

что это такое, из каких видов элементов состоит

Как сделать современную и удобную навигацию на сайте: основные требования

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

Удобная навигация сайта – одно из условий высокой конверсии

Передовой опыт навигации по веб-сайту — 9 советов и предупреждений по дизайну навигации

1. Используйте описательные навигационные метки

Объективы Dan Brown для информационной архитектуры

2. Избегайте навигационных меток на основе формата

Аврора Harley Nielsen Norman Group

3. Избегайте маленьких выпадающих меню

Объективы Dan Brown для информационной архитектуры

Курт Круз Креативный директор Orbit Media

4. Добавьте призыв к действию в заголовок

Проверка основного призыва к действию навигации

5. Группирует элементы, если их больше семи

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

Чем меньше элементов в навигации, тем лучше для посетителей

6. Порядок навигации по вашему веб-сайту важен

7. Уберите значки социальных сетей из заголовка

8. Навигация по сайту на мобильных устройствах

Сделайте номер телефона доступным для нажатия в меню мобильных устройств

9. Оптимизируйте навигацию с помощью Analytics

Составление графика (и изменение) вашего курса

Советы, примеры и рекомендации

Почему важна навигация на веб-сайте?

Понимание связи между навигацией по веб-сайту и пользовательским опытом

Типы навигации по веб-сайту

3 отличных примера навигации по веб-сайту

1. WE3

2. Surem

3. Greenstreet Coffee

Рекомендации и советы по навигации по веб-сайту

1. Сделайте гипертекст очевидным

2. Оптимизируйте панель навигации

3. Держите боковые панели отдельно

4. Поместите навигацию в стандартное место

5. Сделайте все понятным и простым для пользователя

6. Не забудьте нижний колонтитул

7. Свяжите навигацию с бизнес-приоритетами

8. Убедитесь, что навигация веб-сайта на 100 % реагирует на мобильные устройства

9. Оставьте кнопки для призыва к действию

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

Пошаговое руководство по началу использования инструментов Crazy Egg

Заключение

8 инновационных способов оптимизации навигации по сайту

1. Оптимизируйте навигацию мобильного веб-сайта

3. Сделайте поиск по сайту беспрепятственным

4. Укажите контекст

Нравится эта статья?

8. Повторный список подвариантов

Упростите навигацию по сайту

Добавить комментарий Отменить ответ

Рубрики

Рубрики