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

Навигация по сайту. Наглядные примеры и не хорошие советы

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

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

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

Вот какие самых основных типов навигации мы сегодня с Вам рассмотрим. Это:

• Горизонтальная
• Вертикальная
• Сайты без навигации
• Экспериментальная

Горизонтальные навигации на сайтах

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

Вот несколько наглядных примеров:

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

Ещё один очень удобный пример фиксированной навигации. Выглядит очень просто, а главное удобно.

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

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

На этом сайте имеется тоже очень красивая фиксированная навигация вверху страницы.

Вертикальные навигации на сайтах

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

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

Кстати это уже довольно популярный и классический стиль — большие буквы ещё и фиксированные.

В данном случае меню находится справа, а не слева.

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

Сайты без навигации (меню)

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

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

Экспериментальная навигация на сайтах.

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

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

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

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

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

Вывод.

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

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

Топ-10 вариантов дизайна веб-навигации | Umbrella IT

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

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

Как сделать навигацию на сайте максимально эффективной и какой дизайн подойдет именно вам?

У компании веб-разработки Umbrella IT есть ответы на все ваши вопросы.

Но обо всем по порядку.

ЧТО ТАКОЕ НАВИГАЦИЯ?

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

ПЛАНИРОВАНИЕ НАВИГАЦИИ

Максимально эффективная веб-навигация держится на 3 китах:

• Структура
• Лаконичность
• Дизайн

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

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

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

ТРЕНДЫ В ДИЗАЙНЕ ВЕБ-НАВИГАЦИИ

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

1. ГОРИЗОНТАЛЬНАЯ НАВИГАЦИЯ

Горизонтальная навигация – классический дизайн, соединивший удобство с функциональностью.

Источник

Плюсы:

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

Минусы:

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

2. ВЕРТИКАЛЬНАЯ НАВИГАЦИЯ

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

Источник

Плюсы:

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

Минусы:

• В развернутом виде может перекрывать контент;
• Нижние навигационные элементы малозаметны.

3. ВЫЕЗЖАЮЩЕЕ МЕНЮ

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

Плюсы:

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

Минусы:

• Скрытая навигация затрудняет доступ к меню;
• В развернутом виде меню перекрывает контент.

4. ЛЕНДИНГ

Лендинг – это одностраничный сайт с длинной или бесконечной прокруткой, оптимизированный под определенные цели.

Источник

Плюсы:

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

Минусы:

• Ограниченная свобода пользователя: невозможно контролировать порядок информации и способ представления контента;
• Невозможно использовать футер;
• Увеличивает нагрузку на серверы;
• Снижает показатели SEO.

5. ФИКСИРОВАННОЕ МЕНЮ

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

Источник

Плюсы:

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

Минусы:

• Перегруженный и навязчивый хедер затрудняет веб-навигацию и перекрывает контент.

6. ГАМБУРГЕР-МЕНЮ

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

Источник

Плюсы:

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

Минусы:

• Несмотря на свою распространенность, пользователи не всегда легко находят скрытое меню;
• Гамбургер – негласное стандартное меню на платформе Android, и его использование на iOs приводит к нарушению единообразия базовых навигационных элементов и перегрузке навигационной панели.

7. АДАПТИВНАЯ НАВИГАЦИЯ

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

Источник (полная версия)

Источник (мобильная версия)

Плюсы:

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

Минусы:

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

8. МЕГА-МЕНЮ

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

Источник

Плюсы:

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

Минусы:

• нарушение принципа организации способно осложнить навигацию;
• сложно реализовать на мобильных устройствах.

9. РАСШИРЕННЫЙ ФУТЕР

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

Источник

Плюсы:

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

Минусы:

• Рядовой пользователь часто не дочитывает до футера.

10. ПОЛНОЭКРАННАЯ НАВИГАЦИЯ

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

Источник

Плюсы:

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

Минусы:

• Возможно снижение скорости загрузки;
• Нерациональный выбор для сайтов со сложной навигационной картой.

И традиционный бонус от компании Umbrella IT, которая всегда готова предложить Вам больше  — 11 вариант — АНИМИРОВАННЫЕ ЭЛЕМЕНТЫ НАВИГАЦИИ.

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

Источник

Плюсы:

• Привлекают внимание пользователей;
• Структурируют меню;
• Улучшают юзабилити сайта и ориентируют пользователя.

Минусы:

• Чрезмерная визуальная перегруженность затрудняет навигацию по сайту;
• Могут замедлить скорость загрузки сайта.

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

Представленные примеры – лишь малая часть того, что позволяет реализовать современный веб-дизайн. Остались вопросы? Свяжитесь с Umbrella IT, и мы поможем воплотить Ваши самые смелые проекты в реальность .

Фото: Shutterstock.com

Навигация по сайту: дизайн и юзабилити

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

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

Размещение навигационных элементов

Убедитесь в единообразии вашего сайта по стилю / виду пользовательского интерфейса / управлению. Ваш посетитель не знающий «куда бы еще пойти» сэкономит свое драгоценное время, будет легко ориентироваться на сайте и наверняка это оценит (+1 к юзабилити).

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

1. Понятность
2. Легкость
3. Минимальное чувство разочарования

Заметная очевидность – это норма. Недопустима ситуация, когда посетитель не догадывается о кликабельности элементов первичной (меню) или вторичной (прямой переход к страницам) навигации. Одним словом:

Не вынуждайте пользователя приспосабливаться к интерфейсу – возвращаться назад, теряя время в поисках…

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

Текстовые ссылки: преимущества и ошибки

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

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

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

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

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

Упрощаем пользовательский интерфейс

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

Интуитивный & быстрый UI: для высокой конверсии сайта необходим удобный интерфейс аккаунта. Многие включают дополнительные возможности для пользователей, прошедших регистрацию или создавших аккаунт. Иногда это порождает проблемы. Различия в интерфейсе / навигации для авторизованных (получивших доступ к бонусам, сервисам) и остальных, может разочаровывать и служить препятствием. Логичным будет упростить интерфейс, избавившись от излишеств в выборе опций.

Контрасты в цветовой схеме

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

Решения с выпадающим меню

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

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

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

Почему такое происходит? Пользователи желают тратить минимум своего времени на навигацию и для доступа к пунктам подменю перемещают курсор по кратчайшему пути – диагонально. Непроизвольный выход указателя мыши за границы приводит к схлопыванию меню. При возрастающем количестве уровней меню, начинаются проблемы. Смотрите сами: (http://gig-pro.ru)

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

Wikimart  (Левое вертикальное меню) Выпадающее меню сбоку с раскрывающимся списком подкатегорий со ссылками подкатегорий (см. увеличение пространства за последней ссылкой списка). Еще примеры:
http:/www.mvideo.ru
http:/www.ebuyer.com
http:/molotok.ru

Есть и исключения, когда выпадающее меню улучшает юзабилити, позволяет реализовать многоуровневую иерархию категорий товаров или разделов сайта. Mega Drop Down меню – наиболее подходящее решение для крупных веб-сайтов или порталов. Тут оно становится помощником пользователя, поскольку на сайтах обширной тематики всегда затруднена навигация. Если только пользователю не предоставлена возможность доступа ко всем пунктам меню в одном месте (МЕГА меню). Сайт Tesco.com хороший пример навигации с расширенной структурой меню, которое случайно не схлопывается.

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

Человек запомнит первое и последнее из того, что видел или читал намного лучше, чем всю промежуточную информацию

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

Заключение

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

50 примеров навигационных меню

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

1. Черная панель навигации на сайте netdreams.co.uk

2. Винтажное навигационное меню на Tennessee Vacation

3. Такая навигация на Anderbose

4. Навигация на тканевой текстуре на сайте Alpine Meadows

5. Навигация на White House

6. Такая навигация на сайте The Hole In Our Gospel

7. Навигационная панель сайта Cognigen

8. Разноцветная навигация на сайте в стиле гранж Skatepark Hattingen/Ruhr

9. Стильная ретро навигация сайта The Ernest Hemingway Collection

10. Отличная навигационная панель на Thomas Prior

11. Угловатое навигационное меню сайта Navigant Consulting

12. Брызги и потертости в меню навигации сайта The Lippincott

13. Простая навигация на Branded07

14. Навигация в стиле Веб 2.0 на TORRANCE WEB DESIGN

15. Мазки краски в навигации Matt Dempsey

16. И на rzepak.pure.pl навигация в стиле гранж

17. Аккуратная навигационная панель сайта Thuiven

18. Необычное навигационное меню на Africa Tour 2008

19. Стильная навигация на Bamboo Juice

20. Еще одно навигационное меню в стиле гранж на сайте Glocal Ventures

21. Навигация сайта Worldwide Blogger Bake Off

22. Отличная навигация на Agami Creative

23. Простое навигационное меню на Aperfolio

24. Меню сайта Games for Her By You

25. Навигация на сайте Tutorial9

26. Интересная навигация на Sarah Longnecker

27. Меню в стиле гранж на Kayintveen

28. Шрифт “от руки” в меню сайта Manndible Cafe

29. Навигация сайта Creative Spaces

30. Сайт David Hellmann и его навигационное меню

31. Навигация на Viget Extend

32. Фигурный шрифт в меню сайта Candes

33. Навигация в виде кнопок на Red Nose Day

34. Навигация на деревянном фоне на сайте Brad Colbow

35. Стильное меню на csharpdesign.co.uk

36. Навигация “от руки” на ярком сайте Sarah Hyland

37. Полупрозрачная навигационная панель сайта okb

38. Забавные иконки в навигации на MacRabbit

39. Навигация в стиле ретро на сайте Cheesetique

40. Навигационное меню сайта Nitram+Nunca

41. Креативная навигационная панель на Satsu Design

42. Необычная навигация на Africa Oasis Project

43. Навигация на Nuttersmark.com

44. Еще один пример навигации в стиле гранж на toby-powell.co.uk

45. Яркие цвета в навигации сайта GIANT Creative

46. Оригинальное навигационное меню на Organic food Ireland

47. Клочки бумаги в виде навигации на сайте Portfolio de Guillaume Pacheco

48. Навигация на сайте Von Dutch Originals

49. Стильная навигационная панель в стиле гранж на Blue Moon

50. Навигационное меню на сайте Hey Josh

Автор — sixrevisions

Перевод — Дежурка



Комментарии

[an error occurred while processing the directive]

Похожие статьи

Случайные статьи

[Кейс] Как компания улучшила навигацию сайта и этим разгрузила менеджеров

Реальный пример с пошаговым алгоритмом: как компания поняла, что у сайта плохое меню, и переделала его так, что клиентам стало на 85% легче искать товары.

Исследователи юзабилити Nielsen Norman Group в статье  «Quantifying UX Improvements: A Case Study» поделились кейсом о том, как компания по изучению пользователей Marketade помогла клиенту разгрузить отдел продаж и улучшить сайт. Опыт вполне можно применить и на сайтах в рунете.

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

Посмотрим, в чем была проблема на сайте Baileigh Industrial и как компании Marketade удалось ее решить.

Нецелевые клиенты завалили отдел продаж

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

Пример ассортимента компании

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

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

Полезно руководителям:
Как управлять коллективом: опыт, нейрофизиология и эволюция [Конспект лекции]

Раз клиенты не могут найти ответы на сайте, значит, с сайтом что-то не так. Нужно искать слабое место.

Как понять, где проблема на сайте

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

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

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

Как выглядела навигация на сайте

Тест провели с помощью Treejack от Optimal Workshop. К задачам применили систему оценок, связанных с возможностью найти что-то на сайте. Задачу из примера оценили в 3 балла из 10, только 34% участников пошли правильным путем, чтобы найти ответ.

Скриншот из анализа

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

Как улучшить навигацию сайта

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

Они нашли несколько проблем:

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

• Пересекающаяся иерархия навигации интуитивно не понятна.

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

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

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

Результатом исследования стала новая информационная архитектура:

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

• Похожие или непонятные названия категорий перегруппированы и переформулированы, чтобы не было путаницы.

• К функциям инструментов добавили контекст, где это возможно.

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

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

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

Страница категории

Как понять, хороша ли новая навигация

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

В первом тесте со старым меню общая оценка составила 4 из 10 баллов. Ни одна задача не получила оценку больше 5.

У второго меню шесть из восьми заданий получили 7 и выше баллов. Общий балл — 7,4 из 10. Возможность найти продукты, которые пользователи ожидают увидеть на сайте, выросла на 85%.

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

---

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

Проверить сайт

---

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

» УРОК 2. СОЗДАЕМ ШАБЛОН САЙТА

ОСНОВНЫЕ БЛОКИ

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

В HTML5 появились новые элементы, помогающие определять разные части документа и упорядочить его структуру. В HTML5 документ (в отличии от предыдущих версий) делится на несколько основных разделов, и структура сайта практически не зависит от тегов <div> и <table>.

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

Большинство современных сайтов построены по следующему шаблону:

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

Под заголовком находится меню навигации

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

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

С учетом новых элементов HTML5 шаблон будет такой

 

<header> — ШАПКА

Один из новых элементов HTML5. В отличии от тега <head>, который предназначен для хранения информации обо всем документе, <header> используется только для тела документа или для его разделов. В блоке находится логотип организации, её наименование, контакты и ряд других элементов. См. пример шапки магазина «Эльдорадо»

Зададим заголовок сайта

 h2 – заголовок первого уровня

 

<nav> — НАВИГАЦИЯ

 Тег меню сайта <nav> находит после тега <header>. Элемент <nav> предназначен для определения навигацион­ных элементов (главное меню или другие элементы навигации). Используйте его только для этих целей.

Сформируем код меню

Внутри <nav> используются 2 тега:

<ul> — тег списка

<li> — тег элементов списка

<section> — ОСНОВНАЯ ИНФОРМАЦИЯ

В этом блоке находится основной контент страницы (текст, фото, видео)

 

 

 

 

<aside> — БО­КОВАЯ ПАНЕЛЬ

Блок <aside> может располагаться справа и слева, содержать дополнительное меню, баннеры или виджеты. См. пример боковой панели

В нашем случае он будет находиться под блоком <section>.

 

<footer> — ПОДВАЛ

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

Тэг подвала   <footer>

 

 

 

 

 

 

 

 

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

7 лучших практик на примере сайта Kohl’s — CMS Magazine

В 2017 году Baymard Institute начал публиковать результаты нового юзабилити-исследования, благодаря которому мы можем сравнить сайты лидеров e-commerce не только между собой, но и с их собственными сайтами пятилетней давности. Представляем вашему вниманию перевод статьи об особенностях навигации интернет-магазина Kohl’s, занявшем 5 место в обновлённом рейтинге Baymard Institute.

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Протестировав юзабилити 19 самых прибыльных интернет-магазинов, дважды (с промежутком в 4 года) изучив главные страницы и страницы категорий ещё 50 крупных онлайн-ритейлеров и, наконец, усилиями команды проставив более 7 900 оценок различным элементам UX из нашей базы, мы сделали следующие выводы:

1. Качество опыта взаимодействия с главной страницей и страницами категорий среднестатистического интернет-магазина можно оценить как хорошее. С 2013 года этот показатель вырос на 39%.

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

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

При том что хорошие сайты — далеко не редкость, лишь немногие из них могут похвастаться исключительно высоким качеством пользовательского опыта, в частности, в трёх упомянутых областях. Один из таких сайтов — интернет-магазин Kohl’s, занявший 5 место по данным исследования UX главных страниц и страниц категорий.

Данная диаграмма рассеяния позволяет сравнить UX в Kohl’s и 49 других крупнейших интернет-магазинах по 7 пунктам: главная страница (Homepage), структура каталога (Category Taxonomy), основная навигация (Main Navigation), промежуточные страницы категорий (Intermediary Category Pages), списки товаров (Product Lists), макет сайта в целом (Site-Wide Layout), навигация через сопутствующие товары и их продажа (Cross-Navigation & Selling). Каждая отметка — это сумма баллов в соответствующем разделе юзабилити. Баллы проставлялись сотрудниками Baymard вручную, всего было проставлено 3 950 оценок. (Диаграмма доступна также в интерактивной версии).

Очевидно, что достигнутый Kohl’s результат — следствие тщательной работы над сайтом, который хорош почти во всём, что касается навигации. В отличие от большинства интернет-магазинов, у Kohl’s есть только одно слабое место: перекрёстные продажи и перекрёстная навигация (об этом подробнее в конце материала).

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

На примере Kohl’s мы расскажем о результатах тестирования главных страниц и страниц категорий и объясним:

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

2. Как избежать переизбытка категорий

3. Почему полезно продвигать популярные фильтры в одном ряду с категориями

4. Как должны выглядеть акционные предложения на главной странице

5. Как сделать так, чтобы дочерние категории в главном меню не подменили родительские

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

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

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

«Ну нет… я пас. Не на сайте с такой запутанной навигацией. Я просто пойду в магазин с фотоаппаратом и выберу сумку подходящего размера. Я не стану изучать все эти варианты (253 позиции — ред.)» — сказал респондент, когда понял, что отфильтровать сумки по размеру нельзя. Затем он конкретизировал ответ: «Мне бы пришлось смотреть то на камеру, то на экран, и сверять размеры. А ведь сумка должна ещё хорошо выглядеть…»

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

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

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

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

Последнее исследование 50 крупнейших интернет-магазинов показало, что на сайтах с большим числом товаров, связанных по принципу совместимости, соответствующая навигация отсутствует в 30% случаев. (К счастью, с конца 2013 года ситуация сильно изменилась: тогда сочетающиеся товары отсутствовали у 60% магазинов.)

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

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

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

Подробнее о поиске совместимых товаров в статье «6 примеров использования баз данных по совместимости товаров в интернет-магазинах» — 6 Use Cases for Compatibility Databases on E-Commerce Sites.

Не допускайте переизбытка мелких категорий и подкатегорий (ошибка характерна для 54% интернет-магазинов).

На сайте Best Buy категория компактных цифровых фотоаппаратов (Point & Shoot Camera) некорректно разбита на несколько подкатегорий: универсальные камеры, длиннофокусные объективы, объективы для съёмки в условиях слабого освещения, камеры с Wi-Fi и т.д. В результате такого деления получить полный список фотоаппаратов стало невозможно. Пользователи вынуждены выбирать слишком узкую подкатегорию. Задача усложняется ещё и тем, что подкатегории часто пересекаются. Назначение устройства важно для покупателей, тем не менее, его следует реализовать как фильтр в рамках общей категории «Компактные цифровые фотоаппараты».

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

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

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

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

• Пользователей загоняют в рамки слишком узкой группы товаров

• Интересные покупателям товары из более широкой категории могут остаться без внимания

• Пользователи не могут искать то, что точно соответствует их предпочтениям, среди товаров сразу нескольких типов

Правильная реализация категории «Матрацы» на сайте Kohl’s: в неё попадают несколько разных типов матрацев, представленных 3 опциями фильтра: матрацы, воздушные матрацы, хлопчатобумажные матрацы. Наряду с ними мы видим фильтры по размеру и бренду — не категории. Пользователей не подталкивают к преждевременному решению о типе товара, но предлагают подобрать такую комбинацию фильтров, которая удовлетворит всем их требованиям.

Несмотря на явный ущерб, описанную ошибку совершают 54% интернет-магазинов (хотя в 2013 году этот показатель был ещё выше: 64%). В Kohl’s же очень активно используют фильтры по типу товара.

Подробнее об этой теме читайте в статье «Измельчание категорий: старайтесь не использовать товары разных типов в качестве категорий (ошибка характерна для 54% интернет-магазинов)» — Over-Categorization: Avoid Implementing Product Types as Categories (54% Get It Wrong).

Продвигайте популярные фильтры на уровне категорий (80% этого не делают).

У большинства сайтов с грамотным делением на категории и корректным использованием фильтров можно наблюдать следующее: некоторым значениям фильтра (как правило это фильтр по типу товара и бренду) соответствуют товары, ради которых большинство и приходит в магазин. Например, в магазине спортивной одежды, в категории «Обувь» многие пользователи ищут обувь для бега Nike. Таким образом, опция «беговая обувь» и опция «Nike» приобретают в данном контексте особое значение. Но если эти фильтры будут располагаться только в сайдбаре на странице со списком товаров, у некоторых пользователей поиск вызовет трудности — чекбоксы в сайдбаре появляются позднее в поисковом сценарии, и нужные опции могут легко затеряться среди других. А кто-то и вовсе не заметит нужные фильтры. И это при том, как популярны эти товары!

На сайте Kohl’s популярный «тип товара» — спортивная одежда — продвигается на странице категории «Женщины» наряду с обычными категориями (скриншот слева). Обратите внимание, что после клика по ней появляется страница со списком товаров и галочкой в пункте «Спортивная одежда» (и кастомным заголовком для SEO). Эта страница в свою очередь продвигает новый набор популярных опций, таких как топы для тренировок и бренд Under Armour.

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

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

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

Для лучшего понимания этой идеи рекомендуем изучить статью «Продвигайте популярные фильтры (80% сайтов этого не делают)» — Consider ‘Promoting’ Important Product Filters (80% Don’t).

Старайтесь не размещать на главной странице акционные предложения (ошибка 60% сайтов).

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

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

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

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

Пользователей, оказавшихся на сайте Costco в поисках телевизора, вероятно, заинтересует изображение двух телевизоров (скриншот слева). Это, конечно, не проблема. Проблема появится, если посетитель не обратит внимание на мелкий текст: «Телевизоры — лидеры продаж». Скорее всего, он будет разочарован ассортиментом из 22 штук, которые предложит следующая страница (изображение справа). Не имея ни малейшего указания или ссылки на полный ассортимент телевизоров в Costco’s (а их здесь 46), этот пользователь, вероятно, решит, что 22 телевизора — это всё, что может предложить магазин.

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

На сайте Kohl’s акционные сценарии также продвигаются на главной странице — но обратите внимание, куда они ведут: к списку товаров с выбранной опцией «Распродажа». Во время тестирования такой подход показал себя гораздо лучше, чем демонстрация посадочной страницы с товарами по акции. Во-первых, пользователям дают понять, что перед ними только товары со скидкой. Что ещё важнее, им предлагают простой способ посмотреть все доступные товары — надо лишь убрать галочку в чекбоксе «Распродажа».

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

1. ННаправлять пользователей на страницу категории с активным фильтром «Распродажа»

2. Выносить на главную только категории, и уже на страницах этих категорий выделять товары со скидкой

Согласно исследованию, 60% интернет-магазинов не используют ни один из описанных подходов. На сайте Kohl’s используется фильтр «Распродажа».

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

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

Группирование подкатегорий в выпадающем меню упрощает управление сайтом и делает его более наглядным для пользователей. Логично, что почти все сайты с большим числом подкатегорий в выпадающем меню собрали их в группы. Однако у 14% интернет-магазинов ссылками служили узкие группы товаров, а не родительские категории. Такое решение входило в противоречие с ожиданиями пользователей: последние предполагали, что кликабельными будут заголовки. Большинство респондентов нажимали на них несмотря на то что курсор показывал отсутствие ссылки. Участники хотели сужать круг поиска в надежде увидеть промежуточную страницу категории (пункт 6) с рекомендациями, которые помогут им выбрать дальнейший путь.

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

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

Для каждой категории товаров нужна отдельная страница с подкатегориями (отсутствуют на 22% сайтов).

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

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

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

Будучи важнейшим фактором, определяющим удобство навигации по категориям, промежуточные страницы категорий отсутствуют на сайтах 22% крупнейших онлайн-ритейлеров (по крайней мере, страницы категорий первого уровня).

Когда пользователи сайта Kohl’s ищут что-то не слишком конкретное, например, «Товары для дома» (For Home), они попадают на промежуточную страницу категории, которая предлагает им варианты подкатегорий с наглядными изображениями.

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

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

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

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

• Рекомендации, которые могут показаться покупателям особенно привлекательными (например, очень популярные товары, товары, зависимые от времени, сезонные, эксклюзивные или уценённые товары)

• Рекомендации, генерируемые в соответствии с различными алгоритмами

Подробнее о результатах исследования и о том, как использовать последнюю рекомендацию, читайте в статье «Страницы первого- или второго уровня в интернет-магазине должны быть промежуточными страницами категорий» — Implement the First 1-2 Levels of the E-Commerce Hierarchy as Intermediary Category Pages.

Размещайте на промежуточных страницах категорий ссылки на подразделы нижнего уровня (отсутствуют у 52% интернет-магазинов).

Если на крупном сайте с разветвлённым каталогом на страницах категорий присутствуют только подкатегории — налицо упущенные возможности. К сожалению, таких магазинов 52%.

Исследование Baymard Institute показало, что страницы категорий, которые содержат не только подкатегории (например, Сервировка стола — Set & Serve,), но и группы товаров уровнем ниже (например, Столовые приборы — Flatware, Для бара и вин — Bar & Wine Tools) гораздо полезнее — как для новичков, так и для постоянных покупателей.

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

• Новым посетителям ссылки на подгруппы товаров помогали даже в том случае, если они на них не нажимали: выбирая категорию, пользователи опирались на пункты внутри. Например, заметив, что родительская подкатегория «Готовим» (Prep & Cook) содержит такие подгруппы как «Мелкая бытовая техника» (Small Appliances) и «Хранение продуктов» (Food Storage) пользователи могли определиться, подходит ли она им.

• Постоянные клиенты используют ссылки на подгруппы для быстрого доступа к нужным товарам: например, так можно перейти от «Товаров для дома» к товарам «Для бара и вин», минуя подкатегорию «Сервировка стола».

Подробнее о том, в каких случаях уместен этот приём, читайте в статье «Ссылки на подгруппы товаров: крайне важная функция в навигации интернет-магазина» — Sub-Sub-Category Links: a Vital Feature in E-Commerce Navigation.

Улучшаем навигацию в интернет-магазине

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

1. Товарные страницы содержат ссылки на списки совместимых товаров (на 30% исследованных сайтов их нет)

2. Грамотное деление на категории (у 54% товары поделены на слишком мелкие группы)

3. Популярные фильтры столь же заметны, как и сами категории (у 80% — нет)

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

5. В основном меню кликабельны не дочерние категории, а родительские (у 14% всё наоборот)

6. Есть промежуточные страницы категорий (у 22% сайтов их нет)

7. На промежуточных страницах категорий присутствуют ссылки на подкатегории и подгруппы (52% их опускают)

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

Если вас интересует более детальный анализ навигации и пользовательского опыта на сайте Kohl’s, а также произошедшие с 2013 года перемены, посмотрите обзор сайта Kohl’s (Kohl’s Site Review) или одного из других 49 интернет-магазинов в нашем архиве.

Переводчик: Екатерина Заволокина.

Оригинал: https://baymard.com/blog/kohls-category-navigation-ux

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

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

Где найти ответы на конкретные вопросы

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

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

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

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

Приступим!

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

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

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

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

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

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

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

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

Меню заголовка Kinsta

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

• О нас.
• Блог.
• Связаться.
• Особенности.
• Планы / Цены.

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

Какова структура навигации на веб-сайте?

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

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

Структура навигации сайта

В этом примере страницы О , Планы , Контакты и Блог связаны из главного меню. Чтобы получить доступ к страницам Mission и Team , вам необходимо сначала посетить страницу About .

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

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

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

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

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

Существует три основных типа навигации по сайту.Их:

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

1. Глобальная навигация по веб-сайту

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

Меню глобального заголовка Kinsta

На скриншоте вы видите наше простое и понятное меню заголовка.То же самое на всех наших страницах и ведет на некоторые из наших самых важных страниц и контента.

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

Хотите узнать, как выглядит MyKinsta? Создайте демо-счет на 100% бесплатно и начните экспериментировать с ним.

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

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

Глобальные меню являются стандартными для большинства решений CMS из коробки.

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

2. Иерархическая навигация по веб-сайту

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

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

Пример иерархической навигации из NYT

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

Пример иерархической навигации

На странице Science New York Times вы вообще не видите меню верхнего уровня. Вместо этого вы видите ссылки на различные подразделы научных исследований и статей.

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

3. Навигация по локальному веб-сайту

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

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

Пример связанного контента, на который есть ссылка на странице

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

Пример локальной навигации в электронной торговле

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

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

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

Новостной сайт: New York Times

Меню домашней страницы NYT

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

Но это еще не все. NYT использует все типы навигации по сотням страниц категорий и миллионам статей.

Используемые типы навигации:

• Иерархический.
• Global.
• Местный.

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

Домашняя страница

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

Домашняя страница NYT — меню заголовков

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

Он не размывает / не использует оверлей, чтобы скрыть какой-либо контент на веб-сайте.

Домашняя страница (мобильный)

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

Домашняя страница NYT — мобильный

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

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

Расширенное меню — домашняя страница NYT (мобильный)

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

Категория Страница

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

Научная страница NYT — главное меню

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

Страница категории (мобильная)

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

Научная страница NYT — главное меню (мобильное устройство)

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

Одинарный артикул

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

статья NYT — меню заголовка

Отдельная статья (мобильная)

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

Статья NYT — меню заголовка (мобильное)

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

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

Статья NYT — нижний колонтитул

Нижний колонтитул (мобильный)

Статья NYT — нижний колонтитул (мобильное)

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

Например, если вы щелкните раздел Arts , вы сможете просмотреть следующие подразделы:

Статья NYT — расширенное нижнее меню (мобильное)

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

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

Макет содержимого

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

Домашняя страница NYT

Все выделенные элементы являются интерактивными и ведут на разные внутренние страницы веб-сайта New York Times.

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

Тема WordPress «Двадцать двадцать»

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

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

Меню заголовка

Как и любая стандартная тема WordPress, в новом официальном выпуске есть меню без излишеств в разделе заголовков.Вы можете выбрать разные места отображения, и вот как выглядит опция Desktop Horizontal Menu :

Пример меню заголовка в теме Twenty Twenty

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

Пример расширенного меню заголовка в теме Twenty Twenty

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

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

Пример нижнего колонтитула в теме Twenty Twenty

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

Что делает навигацию по сайту хорошей?

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

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

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

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

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

8 принципов улучшенной навигации по веб-сайтам

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

1. Планируйте структуру страницы и навигацию

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

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

Пример хорошего инструмента для работы с картами сайта — GlooMaps.

GlooMaps

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

GlooMaps — не единственный инструмент, который вы можете использовать. Есть еще много других, таких как Octopus, VisualSitemaps, Creately, и это лишь некоторые из них.

2. Следуйте установленным стандартам

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

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

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

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

3. Используйте свой пользовательский словарь

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

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

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

4. Используйте адаптивные меню

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

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

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

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

5. Воспользуйтесь преимуществами нижнего колонтитула

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

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

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

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

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

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

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

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

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

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

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

8. Сгладьте структуру

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

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

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

Плоская структура сайта

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

Тенденции меню навигации веб-сайта 2021

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

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

Расширяемые категории в полноэкранном мобильном меню

Uber — мобильное меню

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

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

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

Меню с плавающим заголовком

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

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

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

Наложение раскрывающихся меню на рабочем столе

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

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

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

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

Более высокий показатель отказов, более низкий коэффициент конверсии, меньше времени на сайте … Навигация по сайту является важной частью UX 💻 Узнайте, как улучшить свой, с помощью этого руководства ⚡️ Нажмите, чтобы твитнуть

Сводка

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

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

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

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

---

Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress. Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на масштабируемость, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

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

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

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

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

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

10 примеров навигации по сайту, которые вдохновят вас

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это дизайнерское агентство — прекрасный пример навигации по сайту. Ребята из 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! Это вполне себе пример навигации по сайту.Их веб-сайт яркий, красочный, дружелюбный и все, что представляет собой сам ресторан. Он демонстрирует не только продукты питания, но и людей, которые работают над этим, — это как полный обзор компании.

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

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

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

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

Лучшие практики навигации по веб-сайту — 7 советов и предупреждений по дизайну навигации по веб-сайту

Мелочи имеют большое значение. Навигация по вашему сайту — отличный пример.Структура и метки вашей навигации могут иметь огромное влияние на результаты. Вот почему:

• Навигация влияет на трафик: насколько высокий ваш рейтинг, сколько трафика вы получите от поиска
• Навигация влияет на конверсии: насколько легко использовать сайт, какой процент посетителей превращается в потенциальных клиентов и клиентов

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

1. Будьте информативны

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

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

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

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

Внимание! Избегайте таких ярлыков, как «услуги» и «решения».

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

Никто не ищет «продукты» или «услуги», поэтому эти ярлыки не улучшают ваш рейтинг.

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

Для получения дополнительной информации прочтите, как сделать карту сайта.

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

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

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

---

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

---

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

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

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

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

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

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

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

4. Ограничьте количество пунктов меню семью

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

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

Пример: Если ваша домашняя страница имеет авторитет 38 в соответствии с Open Site Explorer, то она имеет как раз этот объем полномочий для передачи на внутренние страницы.

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

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

Совет! «Калькулятор ссылок» подсчитывает количество ссылок на любой странице. Он также оценивает увеличение авторитета, которое будет передано, если вы уменьшите количество ссылок. Он использует PageRank, а не авторитет домена, но концепция та же.

• Меньше элементов в вашей навигации, полезных для посетителей
  Кратковременная память содержит только семь элементов плюс-минус два. Это из знаменитой статьи по психологии, опубликованной Джорджем Миллером в 1956 году.
  
  Более недавние исследования показывают, что, хотя мозг использует «фрагменты» как метод улучшения воспоминаний в краткосрочной памяти, их количество зависит от категории. Для чисел может быть семь, а для слов — только пять.
  
  В любом случае, чем больше элементов в вашей навигации, тем сложнее информацию запомнить и обработать для ваших посетителей.Визуально восемь — НАМНОГО больше семи. Если их слишком много, глаза посетителей могут просканировать мимо важных предметов.
  
  Если вам нужно использовать более семи элементов, подумайте о том, чтобы разбить их на группы.

Внимание! Избегайте длинных списков.

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

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

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

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

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

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

• Эффект первенства: Элементы в начале списка легче запомнить.

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

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

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

Сначала дайте посетителям то, что они хотят, а затем они могут дать вам то, что вы хотите.

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

6. Как оптимизировать навигацию по сайту

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

Есть два отчета, которые покажут вам, какие элементы навигации чаще всего используются вашими посетителями.Одним из них является «сводка навигации» или «представление на странице» в отчете о поведении. Остальные — отчеты Behavior Flow / User Flow.

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

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

Еще одно представление о том, что люди нажимают, можно найти в отчете Поведение> Поток поведения . Этот отчет идентичен отчету Аудитория> Поток пользователей . Эти отчеты идентичны, если вы не отслеживаете события. Отслеживание событий добавляется к данным отчета «Поток поведения».

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

Совет! Для получения дополнительной информации о том, как использовать отчет User Flow, прочтите основные пути на вашем веб-сайте.

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

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

• Удалите элементов, на которые редко нажимают, если они не критичны

• Переименуйте или измените метку, на которую редко нажимают, если они важны

• Переместить элементов, которые часто нажимаются, в начало

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

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

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

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

Вот несколько примеров мобильной навигации.

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

ProTip! Для мобильных посетителей: убедитесь, что номер телефона превращается в кнопку, которая набирает номер при нажатии. Просто добавьте tel: в код href для номера телефона мобильной версии вашего сайта.Код должен выглядеть примерно так:

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

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

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

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

Есть другие идеи или вопросы? А как насчет кнопки «домой»? Это необходимо? Вы помещаете свой номер телефона в шапку? Добавьте свой комментарий ниже.

Лучшие практики, советы и примеры

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

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

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

Вот 11 советов по улучшению навигации по вашему сайту и обеспечению счастливых постоянных посетителей:

1. Спланируйте навигацию

2. Расставьте приоритеты для своих страниц

3. Придерживайтесь соглашений

4. Рассмотрите возможность создания липкого меню

5. Ограничьте количество пунктов в вашем меню

6. Создайте мега выпадающие меню, если необходимо

7. Добавьте строку поиска

8. Четко обозначьте свое меню

9. Верните логотип на главную страницу

10. Укажите, на какой странице находится пользователь

11. Убедитесь, что посетители могут перейти на любую страницу с любой страницы

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

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

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

Меню боковой панели слева или справа от веб-сайта: Это список, расположенный сбоку на вашей странице.Он может быть минимальным, а может занимать центральное место и стать неотъемлемой частью дизайна, как на веб-сайте Wix графического дизайнера Бипла.

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

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

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

01. Планируйте навигацию

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

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

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

02. Расставьте приоритеты для своих страниц

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

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

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

03. Придерживайтесь условностей

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

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

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

04. Рассмотрите возможность создания закрепленного меню.

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

Чтобы создать плавающее меню в Wix, вы можете просто нажать «Добавить» в левой части редактора, затем «Меню», чтобы выбрать стиль меню, который вы хотите использовать.Затем щелкните меню правой кнопкой мыши и выберите «Закрепить на экране».

05. Ограничьте количество пунктов в меню

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

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

06. При необходимости создавайте мега-раскрывающиеся меню.

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

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

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

07. Добавление панели поиска

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

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

08. Четко обозначьте свое меню

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

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

09. Ссылка логотипа обратно на домашнюю страницу

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

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

10. Укажите, на какой странице находится пользователь.

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

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

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

11. Убедитесь, что посетители могут перейти на любую страницу с любой страницы.

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

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

Автор: Дана Меир

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

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

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

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

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

Навигация по сайту: его важность

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

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

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

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

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

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

1). Конфликт с Конвенцией

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

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

2). Использование раскрывающихся меню

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

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

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

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

3). Использование неспецифических этикеток

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

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

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

4). Выбор слишком большого количества вариантов

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

Согласно отчету, распространенному психологом Джорджем А. Миллером, человеческий мозг пригоден для запоминания только семи вещей с точки зрения кратковременной памяти.

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

5). Неправильный порядок навигации по сайту

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

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

6). Навигация по веб-сайту не отвечает

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

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

7). Тупики

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

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

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

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

8). Использование навигации на основе кнопок

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

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

Советы по навигации по сайту для улучшения дизайна навигации по сайту

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

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

В). Отдельные классификации Ранний

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

С). Сделать все компоненты навигации интерактивными ссылками

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

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

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

E). Гарантия, что каждое интерактивное изображение имеет альтернативный контент

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

F). Гарантия вашего поиска Выделение работает

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

Это неудача, пока вы не докажете, что она работает

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

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

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

Заключение

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

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

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

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

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

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

Что вы найдете в этой статье?

Умные советы для лучшей навигации по сайту

Хотя ваш веб-сайт работает достаточно хорошо, следующие факторы могут добавить ему красоты —

Ограничьте навигацию по сайту

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

Сигнификаторы — хороший вариант

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

Сосредоточьтесь на количестве имеющегося у вас контента

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

Скрыть поле ввода поиска

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

Залипание навигации для бесконечной прокрутки

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

Используйте описательную навигацию

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

Порядок элементов — важная концепция

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

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

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

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

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

CSSChopper

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

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

Sparx IT Solutions

Простое навигационное меню, прочная структура

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

inkySoft

Изящная навигация, простая компоновка

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

Без обновления

Подпись к изображениям, беспроблемная навигация

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

HTMLPanda

Простой макет, впечатляющий стиль шрифта

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

PSDtoWordPressExpert

Хорошо продуманная навигация, чистый внешний вид

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

Nimble Tank

Хорошая навигационная система для интерактивного взаимодействия

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

Acko

Сетевое меню, трехмерное видео

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

Улучшенный график

Красивые меню и подменю, простая навигация

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

AppsChopper

навигация

Красиво продуманная навигация для легкого переключения

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

Anet Design

Традиционная панель меню, красочный подход

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

PHPDevelopmentServices

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

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

Big Apple Hot Dogs

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

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

Niketo

Превосходный фон, быстрое меню

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

Заключение

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

Какие самые лучшие советы по плавной и красивой навигации? Расскажите нам ниже или напишите нам в Твиттере!

5 эффективных примеров навигации по веб-сайту

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

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

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

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

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

• Горизонтальный заголовок — 5-7 пунктов меню (может иметь раскрывающееся меню или подменю)
• Мега-меню — раскрывающиеся списки с несколькими столбцами содержимого
• Навигация с фиксированной прокруткой — навигация выполняется при прокрутке страницы вниз
• Статическая боковая панель — левая, статическая с важными ссылками (популярна на новостных сайтах)
• The Hamburger — популярный вариант для адаптивных сайтов
• Глобально скрытые меню — без видимой навигации, можно получить доступ из бокового меню гамбургера
• Карусель новостных статей — обычно находится под горизонтальным заголовком, популярна для блогов и новостных сайтов.

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

Компания: Salesforce
Стиль: Mega Menu

В

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

Компания: Mashable
Стиль: Карусель новостей / Боковая панель

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

Компания: RadioActive Film
Стиль: Глобально скрытое меню

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

Компания: Brit + Co
Стиль: фиксированная навигация

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

Компания: Tommy Hilfiger
Стиль: статическая боковая панель навигации

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

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