Навигация по сайту: советы, примеры и лучшие практики

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тем не менее, есть и другие типы просмотра веб-страниц.

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

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

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

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

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

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

Меню бургера раскрывается при нажатии на него.

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

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

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

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

1. WE3

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

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

2. Безопасный

Вот основная навигация для сайта Guaranteem. Это очень просто, но также очень интуитивно понятно.

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

3. Кафе Гринстрит

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

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

Рекомендации и лучшие практики для навигации по сайту

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

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

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

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

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

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

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

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

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

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

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

Боковая панель не должна выглядеть как остальная часть содержимого страницы. Это должно выделиться.

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

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

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

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

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

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

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

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

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

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

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

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

7. Соедините навигацию с приоритетами компании.

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

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

Например, включите страницы «О нас» и «Контакты», а также ссылку на свой блог. Затем добавьте отличный CTA, например «Загрузить», если у вас есть мобильное приложение или «Тест-драйв» для SaaS-бизнеса.

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

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

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

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

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

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

Узнайте, как ваша аудитория просматривает ваш сайт

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

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

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

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

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

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

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

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

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

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

заключение

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

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

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

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