Меню верхнее для сайта: Горизонтальное меню для сайта. Создание горизонтального анимированного меню с фиксированной позицией на странице средствами CSS и jQuery

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

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

04. Кальвин Паузания: Полноэкранное меню, которое делает заявление

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

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

05. SQUARE-Urban Legends: плавающее меню без прокрутки вверх

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

Меню веб-сайта SQUARE-Urban Legends остается фиксированным на веб-странице, действуя как плавающее меню. Также есть функция «Купить сейчас». кнопка, стратегически расположенная в середине главной страницы, которая возвращает посетителей на страницу продукта веб-сайта.

06. Ruby Love: выпадающее меню для сайта электронной коммерции

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

07. Дорис Лиу: иллюстрированное меню с анимацией-сюрпризом

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

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

08. Adva Santo: интерактивная навигация на боковой панели бренда

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

09. Лирон Эльдар-Ашкенази: Небольшое, но мощное меню

По прибытии этот веб-сайт приветствует посетителей жирной строчкой в ​​строке меню: «Я Лирона, и это то, что у меня получается лучше всего.Цитата остается вверху на всех страницах, что создает последовательность. Минималистский дизайн меню веб-сайта Лирон Эльдар-Ашкенази включает в себя страницу «Обо мне» и интернет-магазин под названием «Магазин». Дизайнер упростил количество опций меню, что позволяет пользователю легче перемещаться по всему сайту.

10. Рои Бен Йехуда: Меню, разделенное на четыре угла, позволяющее искусству занять центральное место.

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

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

Иден Спивак

Эксперт по дизайну и писатель

Лена Сернофф

Старший эксперт по цифровому маркетингу и писатель

Основное руководство по навигации на сайте [Типы и лучшие примеры1]

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

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

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

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

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

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

Последний пункт особенно актуален в навигации, поэтому давайте быстро определим, что на самом деле означает меню в веб-дизайне:

Что такое меню навигации?

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

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

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

Источник изображения

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

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

Источник изображения

Что такое поднавигация на веб-сайте?

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

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

Источник изображения

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

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

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

Горизонтальная панель навигации

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

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

Источник изображения

Выпадающее меню навигации

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

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

Источник изображения

Меню навигации для гамбургеров

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

Ознакомьтесь с меню гамбургеров на мобильном сайте Nettle Studio.

Источник изображения

Меню навигации по вертикальной боковой панели

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

Взгляните на вертикальную боковую панель ресторана Arbor ниже.

Источник изображения

Нижний колонтитул меню навигации

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

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

Источник изображения

Дизайн панели навигации веб-сайта

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

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

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

Что должно быть включено в панель навигации вашего сайта?

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

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

Сортировка карт

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

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

Источник изображения

Отчеты об атрибуции

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

Источник изображения

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

Поток пользователей

Если у вас нет отчета об атрибуции, вы все равно можете получить представление о том, какие страницы важны на вашем сайте, с помощью отчета Users Flow в Google Analytics.Хотя в этом отчете не проводится различие между стандартным трафиком и трафиком клиентов, в нем показано, как люди перемещаются по вашему сайту. По словам самого Google: «Отчет Users Flow — это графическое представление путей, по которым пользователи прошли через ваш сайт, от источника, через различные страницы и по каким путям они ушли с вашего сайта».

Как упорядочить элементы навигации?

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

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

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

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

Объектно-ориентированный

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

Источник изображения

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

Основанный на действиях

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

Источник изображения

На основе аудитории

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

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

Источник изображения

Поисковая оптимизация

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

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

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

Пропа Бьюти

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

Источник изображения

СЗП

NWP — еще один сайт электронной коммерции с горизонтальной панелью навигации.Однако, в отличие от Propa Beauty, панель навигации NWP представляет собой комбинированное меню. Когда страница загружается, вы можете видеть только основные навигационные ссылки. Однако, если вы наведете курсор на «Магазин», появится раскрывающееся меню со списком различных подкатегорий одежды, которую вы можете купить на сайте.

Источник изображения

Комната теней

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

Источник изображения

Патагония

Чтобы разместить свой большой каталог товаров, Patagonia реализовала мегаменю на своем веб-сайте. Когда пользователи наводят курсор на элемент «Магазин» на горизонтальной панели навигации, появляется гигантский список ссылок на все, что вы хотите просмотреть.Также обратите внимание, что другие элементы на панели навигации, а именно «Активизм» и «Истории», не вызывают мегаменю при наведении курсора мыши.

Источник изображения

Бриогео

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

Источник изображения

Твиттер

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

Источник изображения

Оливье Жийазо

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

Источник изображения

Пипкорн

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

Источник изображения

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

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

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

1. Будьте последовательны.

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

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

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

Источник изображения

2. Дизайн для любого размера экрана.

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

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

3. Сделайте самую важную информацию доступной.

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

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

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

4. Добавить панировочные сухари.

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

Он также не занимает много места. Эта вторичная панель навигации обычно состоит из текстовых ссылок, разделенных символом «больше» (>) и размещенных под заголовком.

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

Источник изображения

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

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

Примечание редактора. Этот пост был первоначально опубликован в октябре 2020 г. и обновлен для полноты информации.

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

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

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

Какое положение и ориентация меню лучше всего подходят для моего веб-сайта?

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

Горизонтальное меню сайта

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

Преимущества верхней строки меню:

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

Вот некоторые из шаблонов веб-сайта с горизонтальным меню сайта:

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

Преимущества левой строки меню:

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

Вот некоторые из веб-сайтов.com с вертикальным меню сайта:

Настройка строки меню сайта цвет фона, стили шрифта и т.

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

Создать сеть ссылок, по которой пользователь может перемещаться, непросто.Посмотрите эти 10 веб-сайтов, которые не только сделали это, но и сделали это стильно!

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

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

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

10 примеров навигации по веб-сайту для вашего вдохновения

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

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

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

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

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

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

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

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

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

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

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

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

Petersham установили четкую иерархию категорий и включают одну и ту же подкатегорию более чем в одну категорию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эта компания по производству бургеров — прекрасный пример навигации по сайту. Ресторану Good Burger (TGB) удалось создать что-то одновременно функциональное и индивидуальное. Он отвечает всем требованиям: он интерактивен, прост в освоении, уникален и доставляет удовольствие — если вам внезапно захочется съесть гамбургер.

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

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

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

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

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

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

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

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

6 Креативных примеров дизайна меню веб-сайта, которые необходимо скопировать

Меню вашего веб-сайта — это ворота на ваш веб-сайт.

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

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

6 примеров потрясающего дизайна меню веб-сайта

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

Если это так, вам следует изучить дизайн, ориентированный на рост (GDD). GDD — это итеративный подход к веб-дизайну, в котором оптимизация — это непрерывный процесс.

1.

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

2. ДИЗАЙН ДЛИННОЙ КОРОТКОЙ ИСТОРИИ

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

3. ЭДВИН ЕВРОПА

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

4. ПЛОХАЯ СБОРКА

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

5. РУКОВОДСТВО ПО БРЕНДАМ UBER

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

6. ВСКРЫЛА

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

3 характеристики отличного дизайна меню веб-сайта

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

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

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

1. Веб-навигация должна быть интуитивно понятной

Потребители формируют первое впечатление о веб-сайте всего за 0,2 секунды. В среднем потенциальный клиент тратит всего 6,48 секунды на взаимодействие с панелью навигации. Если навигация по вашему веб-сайту недостаточно проста, чтобы посетители могли сразу сказать, где найти нужную им информацию, вероятно, виноват дизайн вашего меню.

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

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

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

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

3. Элементы меню веб-сайта должны быть четко обозначены

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

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

Создание лучших навигационных меню

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

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

5 советов для идеального меню навигации по сайту

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

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

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

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

Нужна помощь в навигации по сайту?

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

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

Узнайте, как создать собственный веб-сайт сегодня!

Итак, что именно следует учитывать при построении навигации? Эти советы могут помочь.

Давайте посмотрим на этот пример с нашего любимого тестового сайта Jimdo Café:

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

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

Будет ли мое меню так хорошо выглядеть на мобильных телефонах? Да! Jimdo автоматически настраивает ваше навигационное меню под любое устройство (будь то ноутбук, планшет или смартфон).На небольших мобильных экранах ваши посетители смогут найти дополнительные страницы на вкладке «Дополнительно».

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

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

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

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

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

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

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

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

Переведите свой бизнес в онлайн с Jimdo.

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

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

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

Типы веб-навигации

Верхнее меню

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

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

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

Боковая панель

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

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

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

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

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

В чем разница между картой сайта и навигацией?

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

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

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

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

Не скрывайте навигацию

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

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

Разместите навигацию там, где пользователи ожидают ее увидеть

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

Визуально отделить навигацию от содержимого

Раздел навигации не должен выглядеть как остальной контент на веб-странице. Он должен выделяться. Используйте пробел (пустое пространство) для визуального разделения содержимого и параметров навигации.

Избегайте оформления параметров навигации в виде кнопок

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

Напишите описательные метки

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

Избегайте общих ярлыков, таких как «Статьи» или «Видео». Такие метки не являются описательными, поскольку сообщают посетителям формат контента, а не тему. Люди посещают веб-сайты, чтобы получить ответы на интересующие их вопросы, и их мало волнует, в каком формате им будет доставлена ​​информация. Поэтому лучше использовать фразы, соответствующие целям вашей целевой аудитории. Google Keyword Planner — очень полезный инструмент для поиска описательных ярлыков в соответствии с доменом сайта.

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

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

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

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

Следите за порядком

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

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

Добавить поиск для упрощения веб-навигации

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

Избегайте раскрывающихся меню

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

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

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

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

Протестируйте дизайн навигации вашего веб-сайта на мобильных устройствах

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

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

• Навигационные надписи должны легко читаться на экране мобильного устройства. Размер шрифта 16px (пикселей CSS) является хорошим значением по умолчанию для большинства случаев. Сенсорная мишень физического размера около 9 мм хорошо подходит для большинства групп пользователей.

Анализ того, как люди используют вашу навигационную систему

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

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

Заключение

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