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

Правильная навигация сайта, какую навигацию делать на сайте?

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

Правильная навигация сайта. Какую навигацию делать на сайте?

Watch this video on YouTube
В этой статье мы выделим такой важный фактор как навигация, о чем часто забывают новички.

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

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

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

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

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

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

Правила хорошей навигации

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

Чтобы не упустить важные моменты, учтите следующие рекомендации:

1. Интуитивность. Навигация не должна быть сложной, поэтому как бы вам не хотелось, лучше отказаться от сложных форм и меню, написанных, к примеру, на Flash. Лучше использовать стандартную навигацию с привычным интерфейсом.
2. Значимость. Нет смысла добавлять новые пункты меню, ссылки и блоки с представлением материалов, которые не важны вашим посетителям. Каждый элемент навигации должен быть полезным, перегружать ресурс не стоит.
3. Идентичность. Некоторые вебмастера намеренно пытаются проявить свою креативность и создают разную навигацию, для отдельных страниц сайта. Лучше этого не делать, так как посетители могут легко в этом запутаться.
4. Гармоничность. Все элементы навигации, которые вы устанавливаете на сайте, должны хорошо вписываться в общий дизайн ресурса. Это касается не только меню, но и таких элементов как хлебные крошки или блоки с ссылками.

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

Удобная навигация сайта начинается с главного меню

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

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

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

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

Постраничная навигация сайта – внутренняя перелинковка

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

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

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

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

Навигация по странице сайта

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

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

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

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

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

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

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

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

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

Вам также будет интересно:
— Советы по внутренней перелинковке
— Ошибки блоггеров
— От чего зависит успех блога

Как формируется навигация на сайте

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

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

Главное меню

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

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

Также могут быть включены ссылки на другие важные страницы, к примеру, блог, скидки и т.д. Оптимальное количество пунктов в главном меню – в пределах 5-7. Резонно добавлять подпункты, что положительно скажется на удобстве навигации. Для привлечения внимания посетителя к определенным страницам используется выделение с помощью шрифта или цвета. Таким образом, к примеру, можно оформить пункт «Акции».

Встроенный поиск

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

Подвал

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

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

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

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

Кнопка возврата

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

Боковое меню

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

Карта сайта

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

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

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

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

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

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

Сложные предположения

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

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

• Прочитайте все наши сообщения о веб-дизайне здесь

В ‘ В разделе твитов вы отбрасываете карты, когда читаете их. Попытайся. Это весело!

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

Этот сайт агентства предлагает интерактивный и увлекательный опыт, включающий движение на 360 градусов и ссылки на старые школьные тетрисы. Предлагая многофункциональное путешествие по тому, что предлагает агентство, сайт нацелен на сенсорные устройства, но также работает на настольном компьютере, где в углу есть кнопка «Повернуть», чтобы имитировать вращение iPad.

Жирный черный текст Franklin Gothic служит навигацией к модулям и многое другое.

Сайт креативного агентства LBVD действительно поощряет пользователей нажимать, а жирный черный текст Franklin Gothic служит навигацией к модулям и дополнительной информации.«Мы хотели, чтобы мы выделялись среди других сайтов агентств и позволили легко исследовать нашу работу и философию», — говорит креативный директор Стив Саари. «Со всем на одной странице прокрутки, он был разработан, чтобы поощрять открытия и в конечном итоге (мы надеемся в любом случае) вознаградить любопытных».

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

Необычная техника навигации хорошо работает.

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

Минимальный картографический дизайн — это чистый и вкусный …

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

Крутой эффект 3D поразит гиков!

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

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

Сайт представляет собой скорее интерактивную инфографику

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

Арт-сайт позволяет легко прокручивать в двух измерениях.

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

Навигация использует мотив zip

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

Очаровательный иллюстративный стиль здесь идеально подходит

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

Яркие, шестиугольные кнопки привлекают внимание

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

Простой набор цветных кругов служит навигационной панелью

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

Метафора набора номера отражает функциональность камеры.

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

Умная прокрутка хорошо работает с липким верхним правым меню навигации

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

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

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

Минималистский подход все проясняет

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

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

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

Минималистский сайт имеет эффект переворачивания при прокрутке

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

Сайт Niketo прост, но эффективен

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

Другой вариант раскрывающегося меню

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

Этот Flash-сайт сводит страницу к основным элементам привлекательным минималистским способом.

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

На этом Flash-сайте навигация является контентом.

Веб-сайт Organic Grid использует Flash для создания полностраничного дизайна, в котором навигация — это контент, и наоборот.Поразительно за его использование цвета и звука.

Words: Sam Hampton-Smith

Понравилось это? Прочитайте это!

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

,

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

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

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

Навигация по верхней горизонтальной панели

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

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

Общие характеристики верхней горизонтальной панели навигации

• Элементы навигации — это текстовые ссылки в форме кнопок или вкладок
• Горизонтальная навигация часто размещается в непосредственной близости от логотипа сайта
• Часто располагается над сгибом

Недостатки верхней горизонтальной панели навигации

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

Когда использовать верхнюю горизонтальную панель навигации

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

Навигация по вертикальной панели / боковой панели

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

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

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

Общие характеристики навигации по вертикальной панели / боковой панели

• Текстовые ссылки для элементов навигации очень распространены (с иконками и без)
• Вкладки используются редко (кроме шаблона навигации с накоплением)
• Меню вертикальной навигации обычно имеют множество ссылок

Недостатки вертикальной / боковой навигации

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

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

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

Вкладки Навигация

Навигация по вкладкам

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

Вкладки

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

Общие характеристики вкладок навигации

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

Недостатки вкладок навигации

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

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

Когда использовать вкладки Навигация

Вкладки

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

Breadcrumb Navigation

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

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

Общие характеристики навигации Breadcrumb

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

Недостатки навигации Breadcrumb

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

Когда использовать навигацию Breadcrumb

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

Теги Навигация

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

Теги

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

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

Общие характеристики тегов навигации

• Теги — это распространенная функция контент-ориентированных сайтов (блоги и новостные сайты)
• Только текстовые ссылки
• Ссылки часто бывают разных размеров при размещении в облаке тегов для обозначения популярности
• Часто включается в метаинформацию поста

Недостатки тегов Навигация

Теги

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

Когда использовать теги Навигация

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

Поиск навигации

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

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

Общие характеристики поисковой навигации

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

Недостатки поисковой навигации

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

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

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

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

Всплывающее меню и раскрывающееся меню

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

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

Общие характеристики Всплывающее меню и раскрывающееся меню Навигация

• Используется для многоуровневой информационной архитектуры
• Использует JavaScript и / или CSS для скрытия и отображения меню
• Ссылки, отображаемые в меню, являются дочерними элементами основного элемента
• Меню чаще всего активируются при наведении курсора мыши, но иногда также при щелчке мышью

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

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

Когда использовать всплывающее меню и раскрывающееся меню

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

Многогранная / Управляемая навигация

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

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

Общие характеристики многогранной / управляемой навигации

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

Недостатки граненой / управляемой навигации

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

Когда использовать фасетную / управляемую навигацию

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

Нижний колонтитул

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

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

Общие характеристики нижнего колонтитула

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

Недостатки нижнего колонтитула

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

Когда использовать нижний колонтитул

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

Заключение

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

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

Связанное содержимое

,Навигация

— Использование сайтов Google

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

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

Page View

Просмотрите страницу, которую вы хотите добавить к навигационной панели , и выберите Дополнительные действия> Параметры страницы .
Появится меню Настройки страницы .

Установите флажок Показать эту страницу в поле боковой панели , а затем Сохранить .

Site View

Перейдите на вкладку Внешний вид либо на

• щелкнув ссылку Изменить боковую панель , расположенную внизу боковой панели, или
• нажмите Настройки сайта , а затем Изменить внешний вид .

В элементе Navigation на боковой панели нажмите Edit .

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

Автоматическая настройка навигации

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

.