Меню на сайте это: Меню для сайта – что это и его виды.

что это такое, как его сделать, виды оформления на примерах

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

Аудит и стратегия продвижения в Семантике

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

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

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

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

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

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

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

Виды меню сайта

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

Главное

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

Второстепенное

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

По способу реализации выделяют:

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

• В раскрывающемся меню вывод дополнительных полей происходит по клику.

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

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

Второе бывает левым либо правым, либо комбинацией обоих.

Варианты дизайна меню

Стили отвечают за внешний вид, то есть за то, как видим элементы мы с вами. Варианты оформления меню сайта:

• с динамическими эффектами при наведении;
• с иконками, картинками;
• стиль «метро»;
• аккордеон.

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

Основные правила и ошибки

• Меню должно быть заметным. Это может быть выделение оформлением или цветом. Ссылки, иконки должны контрастировать с фоном настолько, чтобы при считывании не возникло проблем. Откажитесь от скрытого или недостаточно контрастного меню, даже если очень хочется воплотить оригинальную дизайнерскую мысль. Если реализовали, оцените по счетчикам аналитики показатель отказов, просмотрите по вебвизору, как люди ведут себя на сайте. И расставьте приоритеты: супер-креатив или понятный дружелюбный интерфейс.
• Дизайн. Разные средства: цвет, шрифты, тени— помогают добиться удобства восприятия. При этом помните, что нужно сделать элемент заметным, а не пестрым и аляповатым.
• Единство оформления. На всех страницах ресурса стиль меню должен оставаться неизменным. Разные варианты будут сбивать пользователя, ухудшать восприятие информации.
• Стандарты верстки. Располагайте меню в общепринятых местах: вверху, справа, слева. Внизу в футере могут быть дублирующие ссылки, но никак не единственный элемент навигации. Пользователи не будут его искать, они просто уйдут. Был пример размещения элемента Корзина на сайте не в стандартном правом верхнем углу, а в левом нижнем. Результат — ее просто не находили.
• Тестирование. Если на старте трудно оценить, какой вариант будет оптимальным, подсмотрите у лидеров в топе. При вводе серьезных многоуровневых веб-проектов полезно проводить тесты на предмет доступности, удобства и т.д.
• Индикация. Настройка отображения меню таким образом, чтобы посетитель ориентировался, в каком разделе находится. Для этого используют выделение активного пункта графикой или цветом.

• Четкие ориентиры. Люди приходят не всегда сразу на главную, могут начинать с любого подраздела. Грамотное навигационное меню должно показать, где они сейчас и как попасть в раздел любого уровня. Размещение ссылки/иконки на главную страницу на каждом URL в заметном месте обязательно.
• Меню должно быть понятным. Не пишите неизвестные аббревиатуры, сокращения, иностранные аналоги только потому, что они короче и оригинальнее смотрятся. Посетитель не должен догадываться, что скрывается в разделе Print: печатная продукция или размещение в прессе. Если рассчитываете таким образом заинтриговать, чтобы человек перешел и посмотрел, получите процент отказов под 100.
• Удобство. Если ваше меню многоуровневое с выпадайками, позаботьтесь о настройке, приемлемой скорости отображения вспомогательных секций. Иногда очень сложно со скоростью света уловить всю цепочку из 4 подразделов. Ставьте себя на место ваших клиентов. Даже если пунктов много, оставьте только основные.
• Не мельчите, шрифт должен быть хорошо читаемым, высота и ширина плашек достаточной для комфортного попадания по ним курсором. Выпадающий список должен уместиться в высоту одного экрана. В противном случае не все будут напрягаться, пытаясь одновременно удерживать его открытым и осуществлять прокрутку.
• Сегодня правило хорошего тона – верстать сайты с учетом адаптивных версий под мобильные устройства с отличными разрешениями.
• Статичное меню. Если настройки и дизайн позволяют это реализовать, закрепите панель на странице неподвижно относительно остального контента. Так навигация всегда будет перед глазами пользователя и избавит от необходимости возвращаться каждый раз наверх, чтобы перейти в другой раздел. Или как минимум используйте заметные значки, при нажатии на которые автоматом можно перейти на первый экран.

Роль меню в процессе продвижения сайта

На итоговые результаты выдачи в поиске могут влиять следующие критерии:

• Удачная навигация и грамотная внутренняя перелинковка являются факторами внутренней оптимизации. Это удобство для людей и положительная оценка от поисковиков. Понятная перелинковка поможет пользователю сориентироваться, увидеть ссылки на интересные разделы. Удобным считается такой вариант, когда добраться до нужного материала можно в 3 клика.
• Если содержимое заинтересовало, человек проведет на веб-сайте дольше времени. Поисковые системы учтут это, как положительный результат для поведенческих факторов.
• Есть еще один важный момент. В web-разработке при проектировании сайтов правильным считается разрабатывать структуру на основе семантического ядра. То есть, сначала нужно собрать и структурировать информацию обо всех тематических поисковых запросах. Самые высокочастотные лягут в основу заголовков разделов. Соответственно, названия пунктов меню лучше не изобретать с креативным копирайтером, а согласовывать с seo-специалистом. Он подскажет, насколько часто люди ищут ту или иную информацию, это поможет сформировать интуитивно понятные названия.
• Если ссылки оформлены в виде графических элементов, нужно прописывать alt и title к ссылкам. Тогда роботы при индексации смогут учесть эти пункты.

Как сделать меню сайта

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

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

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

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

Примеры дизайна меню сайта | Основы

2020-10-24

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

Вертикальное меню для сайта необходимо, потому что:

1. Это помогает раскрыть тематику сайта, не посещая все страницы;
2. Навигация обеспечивает структурированность ресурса, а это улучшает опыт взаимодействия пользователя;
3. Это поощряет пользователей остаться на сайте дольше и посмотреть другие разделы;
4. Навигация помогает поисковым роботам индексировать контент вашего сайта.

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

• Горизонтальные меню
• Вертикальные меню
• Выпадающие меню

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

Дизайн с использованием вкладок:

Дизайн с элементами, отображаемыми в виде ссылок или кнопок:

С использованием иконок:

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

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

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

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

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

А здесь горизонтальное и вертикальное многоуровневое меню для сайта используются вместе:

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

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

Но вертикальные меню чаще используют группировку ссылок:

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

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

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

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

Или все разделы и подразделы:

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

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

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

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

И в вертикальном меню:

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

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

Идея всплывающего красивого вертикального меню для сайта хорошо реализована в шаблоне WordPress Wordie:

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

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

Вадим Дворниковавтор-переводчик статьи «Examples of website menu designs»

5 вещей, на которые стоит обратить внимание

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

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

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

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

Запомните: в списке приоритетов опыт пользователей должен находиться на самом первом месте.

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

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

Читайте также: Нужна ли навигация на лендинге: данные, подтвержденные кейсами

1. Структура меню

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

Маркетинговое агентство сфокусировало свое внимание на системе навигации, которая явно не была оптимизирована для работы пользователей. Вот как она выглядела в 2013 году: 

Дизайн меню сайта Portland Trail Blazers в 2013 году

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

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

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

Дизайн меню после оптимизации

2. Заголовки меню

Когда перед дизайнерами сайта Formstack встала задача разработки навигационного меню, сначала они постарались дать ответ на вопросы типа:

1. Какого рода контент должен быть отображен в меню?
2. Как он должен быть структурирован?
3. Какие страницы должны быть приоритетными в иерархии?

Страница, на которой они решили запустить свое меню навигации, носила название «Why Use Us» (Почему выбирают нас). Они возлагали большие надежды на то, что этот заголовок приведет к росту трафика и конверсий, и были неприятно удивлены, увидев, что показатель CTR не оправдал их ожиданий.

Вот как выглядела эта страница в 2013 году:

Formstack — до

Разочарованные полученным результатом разработчики решили поменять название «Why Use Us» (Зачем мы нужны) на «How It Works» (Как это работает). Это было то название, придуманное еще до запуска проекта, но в итоге отброшенное. Как вы можете себе представить, они были в шоке от того, как простое изменение названия привело к 50%-ному увеличению числа просмотров страницы и 8%-ному увеличению конверсий.

Вот как сайт выглядел в марте того же года, когда были реализованы изменения: 

Formstack — после

Школа юзабилити: как улучшить навигацию сайта?

3.

Логика меню

В 2014 году люди, ответственные за проект Bizztravel Wintersport, начали замечать, как много действий приходится совершать посетителям сайта, чтобы найти то направление и место проведения отпуска, наиболее им подходящее. Чтобы перейти к нужному региону (всего лишь региону, а не конкретному месту назначения), в среднем требовалось 5 кликов. Авторы сервиса тут же осознали, что это упущение грозит им куда большими проблемами в будущем.

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

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

Контрольный вариант

Новый дизайн навигационного меню

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

4. Скрытые меню

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

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

Можете ли вы догадаться, где спрятано меню на этом сайте?

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

Вот что удалось выяснить NMG:

Десктопная версия сайта

1. Посетители использовали скрытое меню в 27% экспериментов.
2. Видимое меню использовалось в 48% случаев.
3. На сайтах со скрытым меню людям приходилось тратить больше времени на то, чтобы понять, где какую информацию искать; в частности, они были на 39% медленнее, чем те, кто работал на сайтах с видимым меню.

Мобильная версия сайта

1. Пользователи использовали скрытые меню в 57% экспериментов.
2. Когда меню было частично видимо (использовать полностью видимое меню не практично на мобильных версиях сайтов), оно использовалось в 86% случаев.
3. Скрытые меню замедляли пользователей на 15% (по сравнению с теми, кто работал с сайтом с видимыми меню).

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

Ниже — хороший пример простого, понятного и видимого меню:

Видимое навигационное меню сервиса HostGator

Читайте также: Создание мобильной навигации независимо от гамбургер-меню

5. Мобильные меню

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

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

1. Базовая модель, которая представляла собой только три горизонтальные полоски.
2. Иконка-гамбургер, состоящая из трех горизонтальных линий, обведенных тонкой линией.
3. Иконка-гамбургер с надписью «МЕНЮ», помещенной внизу.

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

Caffeine Informer — иконка-гамбургер

Во втором эксперименте была поставлена задача проверить, оказывает ли какое-либо влияние на число конверсий слово «Меню», размещенное рядом с иконкой. Были созданы четыре версии значка скрытого меню:

1. Базовым дизайном был выбран победивший в предыдущем эксперименте вариант — три полоски в квадрате.
2. Слово «Меню» вместо иконки.
3. Иконка-гамбургер и слово «Меню», размещенные вместе и обведенные чертой.
4. Слово «Меню», обведенное чертой.

Согласно полученным данным 3 вариант иконки получил большее количество кликов; однако, слово «Меню», заключенное в квадратик, собрало больше конверсий.  

Caffeine Informer — иконка-меню

Дополнительные советы по дизайну навигационного меню

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

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

Совет 1

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

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

Логотип компании на сайте REI

Совет 2

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

Навигация La Moulade послужит этому отличным примером:

Упрощенная навигация La Moulade

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

Совет 3

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

The Daily Show занимает самое приоритетное место в иерархии меню

Как вы можете видеть на сайте Comedy Central, шоу перечислены не в алфавитном или любом другом логическом порядке, что помогло бы пользователям найти предмет поисков гораздо быстрее. Можно предположить, что «The Daily Show», вероятно, самое популярное шоу — либо сервис хочет привлечь к нему больше внимания — и именно поэтому оно и занимает верхнюю позицию.

Совет 4

Названия меню должны быть лаконичными, но вместе с тем и емкими. Это не то место, где вы можете дать свободу фантазии.

Совет 5

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

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

Так и к мобильной:

Совет 6

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

Совет 7

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

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

Совет 8

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

Десктопный вариант меню:

Мобильный:

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

Совет 9

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

Сайт Politico

Совет 10

Иконки не всегда всем понятны, поэтому старайтесь их не использовать — как в мобильной версии, так и в десктопной. Далеко не всем удается подобрать такие картинки, которые будут понятны и легко узнаваемы. Компании Brit & Co удалось:

Совет 11

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

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

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

Совет 12

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

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

Читайте также: Ключевой принцип навигации, или «Скажите, где вы находитесь»?

Заключение

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

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

Высоких вам конверсий!

По материалам: crazyegg.com

31-07-2017

Основное руководство по навигации по веб-сайту [Типы и примеры]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Раскрывающееся меню навигации

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

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

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

Гамбургер-меню навигации

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

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

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

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

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

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

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

Меню навигации нижнего колонтитула

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

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

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

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

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

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

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

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

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

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

Сортировка по карточкам

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

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

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

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

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

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

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

User Flow

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

Как заказать элементы навигации?

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

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

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

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

Объектная навигация

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

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

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

Action-Based

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

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

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

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

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

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

Оптимизировано для поисковых систем

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

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

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

Propa Beauty

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

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

NWP

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

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

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

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

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

Patagonia

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

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

Briogeo

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

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

Twitter

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

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

Оливье Жильязо

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

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

Pipcorn

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разработка навигации по сайту

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

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

Темы: Пользовательский опыт

Не забудьте поделиться этим постом!

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

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

14 Мин. Чтение

Дизайн веб-сайта

19 июля 2022 г.

Твиттер Linkedin

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

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

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

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

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

Что такое дизайн меню веб-сайта?

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

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

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

Почему важен эффективный дизайн меню навигации по веб-сайту?

Дизайн навигационного меню веб-сайта — это разница между отказом и конверсией.

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

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

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

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

1. SQUARESPACE

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

2. ДИЗАЙН LONG STORY SHORT

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

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

3. EDWIN ЕВРОПА

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

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

4. MOSTLY SERIOUS

Mostly Serious использует боковое меню, доступное с помощью классического значка «гамбургер» в правой части экрана. Выбор этого меню затемняет остальную часть экрана, вызывая простое меню с дополнительными ссылками.

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

5. СЭМ ГОДДАРД  

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

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

6. PIPE  

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

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

7. SercoPointWeb

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

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

8. Stripe

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

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

9. William LaChance 

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

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

10. I Love Dust

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

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

11. Кальвин Паузания

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

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

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

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

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

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

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

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

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

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

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

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

3. Пункты меню веб-сайта должны иметь четкую маркировку

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

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

4. Пункты меню веб-сайта должны следовать пути покупателя

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

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

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

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

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

Это ошибка, которая ошеломит посетителей и заставит их уходить.

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

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

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

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

Создание лучшего дизайна меню веб-сайта

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

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

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

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

Предыдущий пост Следующий пост

Что такое меню веб-сайтов и как они используются на веб-сайтах WordPress

стандартный значок

11 апреля 2014 г. Дженнифер Борн

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

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

• ПРИМЕР: Основное меню навигации по веб-сайту может включать такие пункты меню, как «О программе», «Услуги», «Продукты», «Отзывы» и «Контакты». Пункт меню «Услуги» может отображать раскрывающееся меню с элементами подменю «Частная консультация», «Групповое обучение», «VIP-день».

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

Меню WordPress можно использовать практически в любом месте сайта WordPress.

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

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

Зачем использовать меню?

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

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

Меню значительно облегчают процесс!

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

На экране меню вы можете изменить имя и заголовки любых пунктов меню, не затрагивая их постоянную ссылку (URL), а с помощью функции перетаскивания вы можете изменить порядок пунктов меню и создать перетаскивание вниз меню. Кроме того, с помощью виджета пользовательского меню WordPress вы можете добавить собственное меню в любую область виджетов на вашем веб-сайте — , и все это без необходимости прикасаться к HTML!

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

Адаптивное меню веб-сайта

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

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

Что насчет тебя?

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

Related Posts

• Как создать высокоэффективную домашнюю страницу веб-сайта
• Как создать шапку веб-сайта (и что в ней должно быть)
• Что такое виджет WordPress?
• Умные стратегии для дизайна боковой панели вашего сайта WordPress
• Разница между нижним колонтитулом WordPress и областью виджета нижнего колонтитула
• Советы по содержимому веб-сайта для страницы WordPress и области содержимого публикации
• Почему каждому бизнесу нужен блог WordPress
• Понимание шаблонов страниц WordPress
• Понимание шаблонов архивов WordPress
• Страницы продаж, целевые страницы и страницы сжатия, о боже!
• Добавьте поле подписки на свой сайт WordPress, чтобы создать свой список адресов электронной почты
• Адаптивный дизайн веб-сайта: что это такое, как это работает, почему меня это должно волновать?

Категория: Советы и ресурсы по WordPress Теги: Адаптивный дизайн, Веб-дизайн, Стратегия веб-сайта, WordPress

Подпишитесь на наш блог и ничего не пропустите

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

Адрес электронной почты

О Дженнифер Борн

Креативный директор · Цифровой стратег · Евангелист WordPress

Как основатель Bourn Creative, Дженнифер является отмеченным наградами дизайнером, работающим в области брендинга и дизайна с 1997 года. Сегодня она консультирует по вопросам развития бренда, стратегии веб-сайта и стратегии контента, тесно сотрудничает с клиентами в области графического дизайна и проекты веб-дизайна с WordPress в качестве предпочтительной платформы.

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