Меню навигации для сайта: Горизонтальное меню для сайта

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

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



Комментарии

Оставить ответ

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

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

Добавление и редактирование левого бокового меню навигации

Добавление и редактирование левого бокового меню навигации | Управление цифровых решений ТГУ

Jump to navigation

• Выберете Структура > Меню > Добавить меню.

• Нажмите «Добавить меню» для создания нового меню или выберете нужное меню. Нажмите «Изменить меню» для переименования или «Список ссылок» для изменения, добавления и удаления ссылок, которое меню содержит. Либо «Добавить ссылку» чтобы сразу добавить новую ссылку в существующее меню.

• В открывшемся окне введите «Заголовок» — то, с каким названием будет отображаться наше меню в общем списке . После начала введения текста справа от поля появится надпись «Машинное имя [правка]». Нажмите  [Правка]. В раскрывшемся пункте пропишите машинное имя, следуя описанию – «Уникальное название, используемое для создания ссылки меню. Машинное имя должно состоять только из прописных букв, цифр и дефиса». Нажмите сохранить.

• В появившемся окне меню нажмите «Добавить ссылку».Заполните остальные разделы меню. Стоит обратить внимание, что в пункте «Путь» адрес страницы, отображаемой в этом меню, записывается как
  node/428, а не /node/428. Слэш будет использоваться только после node.
   
• Нажмите «Сохранить». Аналогично заполните другие необходимые страницы. Чтобы отображать/не отображать данный пункт в меню, нужно установить/отключить галочку в пункте «Включено». 
   
• Редактирование бокового меню. Наведите курсовр на необходмиое левое боковое меню, в верхнем правом углу которого появится значок настроек. Выберете пункт Настроить блок.

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

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

Навигационное меню (V.6) — RU-CENTER

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

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

Добавление виджета навигационного меню на страницу:

В панели виджетов откройте вкладку «Содержание» и перетащите навигационный виджет (1) на страницу сайта.

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

Подробнее: шаблон виджетов

Изменение расположения страниц, отображаемых в меню

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

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

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

Многоуровневое меню

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

• Страницы, объединенные общим признаком, например, это могут быть статьи на определенную тему, создавайте в отдельной папке с названием «Статьи».
• В главном меню создайте новую страницу (пусть ее название также будет «Статьи»).
• На этой странице добавьте виджет «Навигационное меню»; в настройках виджета в меню «Страницы» (1) укажите папку «Статьи».

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

Подробнее написано в статье «Как создать поднавигационное меню?»

Как изменить название раздела меню?

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

Для этого:

• Найдите в общем списке страницу, название которой нужно изменить в меню; перейдите в режим настройки этой страницы с помощью кнопки (1).
• Выберите раздел «Имя и URL«(2).

• Введите название меню в поле «Название меню» (3) и нажмите на кнопку «Сохранить», после чего в навигационном меню отобразится новое имя раздела.

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

Установка стиля меню

1. Нажмите на иконку редактирования навигационного виджета:

2. Перейдите во вкладку «Стили» (1):

   Здесь вы можете редактировать (2) стиль ссылок в навигационном меню:

   • стиль обычных ссылок на страницы;
   • стиль ссылок, на которые наведен курсор;
   • стиль ссылки на страницу, которая открыта в данный момент.

Как создать меню навигации в WordPress

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

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

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

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

[iframe src=”https://www.youtube.com/embed/ykEV1eBRECU”]

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

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

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

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

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

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

Чтобы перейти к редактору меню в WordPress, перейдите в Внешний вид -> Меню .

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

1. Придумайте узнаваемое имя и впишите его
2. Нажмите кнопку «Добавить меню» справа.

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

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

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

Добавлять сообщения, страницы и категории очень просто, так как вам нужно только выбрать их из списка. Но если вы добавляете настраиваемую ссылку, у вас должен быть полный URL-адрес страницы (например: http://www.google.com ). Также добавьте имя (метку), которое будет отображаться для этой ссылки (пример: Google )

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

Щелкнув значок маленькой стрелки справа от каждого элемента, WordPress откроет несколько дополнительных настроек. Затем вы можете быстро изменить метку пункта меню (имя, которое отображается в списке). Кроме того, здесь вы можете управлять расположением пунктов меню, щелкая соответствующие ссылки – например, перемещать объект вверх и вниз, отправлять его наверх или размещать под другим элементом для создания подменю.

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

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

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

Если вам просто не нравится перетаскивать элементы (и, по правде говоря, иногда бывает неприятно достичь того, что вы задумали), WordPress позволяет вам управлять элементами с помощью простых ссылок:

1. Добавьте в меню как родительские, так и дочерние элементы
2. Щелкните маленькую стрелку на элементе меню, который вы имели в виду в детстве (с отступом)
3. Нажмите ссылку «Под родительским разделом», где «родительский» будет меткой элемента над ним.

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

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

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

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

Параметры экрана

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

• Ящики – в дополнение к стандартным элементам вы можете отображать теги и форматы, которые затем можно добавлять в меню.
• Расширенные свойства меню – добавьте цель ссылки, атрибут цели, классы CSS, отношения ссылок (XFN) и описание.

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

1. Перейдите в Внешний вид -> Виджеты
2. Найдите виджет «Пользовательское меню» слева.
3. Перетащите его вправо в любую имеющуюся у вас область, готовую к работе с виджетами (например, боковую панель).
4. Выберите имя
5. Выберите меню, которое вы создали ранее
6. Нажмите кнопку «Сохранить».

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

Вывод

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

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

Источник записи: https://firstsiteguide.com

Иконка «гамбургер» для навигации меню сайта – хорошо или плохо

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

 

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

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

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

 

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

 

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

 

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

 

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

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

Какими бывают иконки «гамбургер».

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

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

 

 

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

Но самой эффективной оказалась кнопка с надписью (MENU) – эта иконка увеличила продажи на 5% по сравнению с другими кнопками.

 

• Как пример хочу привести вам эксперимент известной компании Booking.com. они использовали в своей мобильной версии два варианта кнопок «гамбургер», простые три полоски и иконка с надписью (MENU) взятой в рамку.

 

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

 

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

 

 

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

Команда AskUsers

2016-05-01 • 6 мин. читать

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

Задать порядок действий

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

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

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

Лаконичность навигации

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

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

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

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

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

Три простых правила визуального оформления

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

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

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

«Мобильность» интерфейса стоит проверить

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

Выводы

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

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

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

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

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

Закажи юзабилити-тестирование прямо сейчас

Заказать

Как зачётно оформить навигацию на сайте (хлебные крошки, обычные и выпадающие меню) с помощью Bootstrap

Главная / Как устроены сайты / Сайты на Bootstrap

10 января 2021

1. Оформляем через Bootstrap хлебные крошки
2. Как поменять разделитель в хлебных крошках?
3. Оформление меню в виде вкладок или навигационных кнопок
4. Как подготовить меню к просмотру на малых экранах?
5. Как сделать фиксированное меню средствами Bootstrap?
6. Как организовать выпадающее меню в Бутстрап 3?

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Хочу продолжить сегодня приводить примеры использования фреймворка под названием Бутстрап 3 на благо упрощения и стандартизации верстки сайтов. Конечно же, это не конструктор сайтов, где нужные элементы сайта можно перетащить мышью в нужное место и для работы с которым особых знаний не потребуется. Нет. Но эта штука позволяет верстать «зачетные сайты» всем, кто освоит небольшой набор «хитростей».

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

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

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

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

Оформляем через Bootstrap хлебные крошки

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

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

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

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

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

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

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

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

Точнее, создам заготовку я сам, а вам лишь предложу по аналогии с предыдущими статьями этой рубрики скачать файлик sait-7.html (для этого кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить как…»), чтобы уже потом вместе дописывать к этой «рыбе» нужные классы бутстрапа. Его также нужно будет поместить в папку Bootstrap (в ее корень).

Если вы посмотрите исходный код файла sait-7.html, то увидите, что в нем уже подключен Бутстрап и jquery, а также добавлен контент для имитации содержимого страницы. Да, еще папочка с используемыми на этой странице изображениями вам понадобится. Скачать ее можно отсюда — img-6.zip. Просто распакуйте архив и поместите содержащиеся в нем картинки в папку img. Структура получится такая:

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

Но не беспокойтесь, сейчас все будет. Нужно будет только нужные классы добавить к элементам этого списка (их можно будет подсмотреть в хелпе по Бутсрап 3, а заодно там и про пагинацию чуть ниже написано) и он заиграет новыми красками. Вы теги списка в коде файла sait-7.html нашли? Замечательно, теперь добавьте к тегу OL класс breadcrumb, а также отметьте классом active тот пункт LI (последний), который обозначает текущее местоположение пользователя в навигации по сайту.

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

 <ol>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Раздел</a></li>
 <li>Текущая статья</li>
 </ol>

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

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

Как поменять разделитель в хлебных крошках?

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

В общем, в файлике CSS от бутстрапа (bootstrap.css или bootstrap.min.css — в зависимости от того, какой из них вы подключили) этот самый разделитель добавляется с помощью селектора псевдоэлемента before и content, которые позволяют формировать контент страницы на лету (добавлять то, чего в Html коде нет). Например, в самом верху этой страницы вы видите ее оглавление, но не сможете скопировать слово «Оглавление» в буфер, ибо его нет в контенте (оно добавлено через CSS в качестве элемента оформления). Но не суть.

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

 .breadcrumb > li + li:before {
 padding: 0 5px;
 color: #ccc;
 content: "/\00a0";
}

Страшная конструкция, но нам требуется лишь отключить добавления слеша. Однако, советую вам не вносить правки непосредственно в bootstrap.css. Для добавления своих стилей, если помните, мы специально создали и соответствующим образом подключили (читайте каким образом в CSS работают приоритеты) файлик manual.css. Вот именно в него (в самом конце) и добавим что-то типа этого:

 .breadcrumb > li + li:before {
 content: none;
}

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

Полдела сделано. Осталось только глиф-иконки добавить. Сделать это проще простого — где должен быть разделитель, там ставите тег SPAN с классом нужной глиф-иконки. Например, так:

 <ol>
 <li><a href="#">Главная</a></li>
			 <span></span>
 <li><a href="#">Раздел</a></li>
			 <span></span>
 <li>Текущая статья</li>
 </ol>

Получилось в итоге так:

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

Оформление меню в виде вкладок или навигационных кнопок

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

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

 <div>
 <nav>
 	<ul>
 	<li><a href="#">Главная</a></li>
 	<li><a href="#">О сайте</a></li>
 	<li><a href="#">Услуги</a></li>
 	<li><a href="#">Портфолио</a></li>
 	<li><a href="#">Контакты</a></li>
 </ul>
 </nav>

Тут я, правда, извратился и вместо обычного контейнера DIV с классом строки (row) прописал тег семантической разметки NAV (обозначающий основную навигацию по сайту в спецификации Html 5). По сути это тот же DIV, но с намеком для поисковиков, что это есть менюшка. Не обращайте на это особого внимания. Данный список без должного оформления выглядит довольно-таки убого:

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

Чтобы создать меню на манер вкладок, достаточно будет добавить к тегу списка класс nav nav-tabs, ну, а к тегу LI, соответствующему текущей странице, нужно будет по традиции добавить класс active (чтобы пользователь знал ответ на вопрос: «и где я нахожуся»).

 	<ul>
 	<li><a href="#">Главная</a></li>
 	<li><a href="#">О сайте</a></li>
 	<li><a href="#">Услуги</a></li>
 	<li><a href="#">Портфолио</a></li>
 	<li><a href="#">Контакты</a></li>
 </ul> 

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

Класс, да? Мне нравится Бутстрап.

Если нужно оформить вертикальное меню, то нужно будет добавить всего лишь еще один класс: nav-stacked. Получится что-то типа:

 	<ul>
 ...
 </ul> 

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

Кстати, вариант вкладок в случае вертикальных меню смотрится в исполнении Bootstrap не айс, поэтому лучше в этом случае использовать навигационные кнопки, которые задаются заменой класса nav-tabs на nav-pills:

 <ul>
 	<li><a href="#">Адвордс</a></li>
 	<li><a href="#">Директ</a></li>
 	<li><a href="#">Трали-вали</a></li>
 	<li><a href="#">Новые материалы</a></li>
 	<li><a href="#">Карта сайта</a></li>
 </ul> 

Выглядеть на реальном сайте это может примерно так:

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

Собственно, и верхнее меню можно тоже сделать в виде навигационных кнопок простой заменой классов (nav-tabs на nav-pills) в теге списка, который и задает это самое меню в Html коде страницы. Получится, например, так:

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

 	<ul>
 	<li><a href="#">Главная</a></li>
 	<li><a href="#">О сайте</a></li>
 	<li><a href="#">Услуги</a></li>
 	<li><a href="#">Портфолио</a></li>
 	<li><a href="#">Контакты</a></li>
 </ul> 

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

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

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

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

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

Замените строки:

	<li><a href="#">Главная</a></li>
 	<li><a href="#">О сайте</a></li>
 	<li><a href="#">Услуги</a></li>
 	<li><a href="#">Портфолио</a></li>
 	<li><a href="#">Контакты</a></li> 

На «немного» доработанный вариант:

<div>
 <nav>
 <div>
 <button type="button" data-toggle="collapse" data-target="#collapse">
 <span>Toggle navigation</span>
 <span></span>
 <span></span>
 <span></span>
 </button>
 </div>
 <div>
 	<ul>
 	<li><a href="#">Главная</a></li>
 	<li><a href="#">О сайте</a></li>
 	<li><a href="#">Услуги</a></li>
 	<li><a href="#">Портфолио</a></li>
 	<li><a href="#">Контакты</a></li>
 </ul>
 </div>
 </nav>
</div> 

Давайте посмотрим что получилось, а я потом коротенько поясню, что здесь к чему. Итак, на экранах мониторов и ноутбуков пользователи будут видеть вот такое меню:

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

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

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

 <span></span>

Вообще конструкция:

<div>
 <button type="button" data-toggle="collapse" data-target="#collapse">
 <span>Toggle navigation</span>
 <span></span>
 <span></span>
 <span></span>
 </button>
 </div>

отвечает за отображение этой самой кнопки с тремя полосками при очередном коллапсе сетчатой системы Бутстрапа. Атрибуты начинающие с data отвечают за взаимодействие Html и Джаваскрипта.

Строка:

 <div>

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

Как сделать фиксированное меню средствами Bootstrap?

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

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

 <nav>

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

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

body { padding-top: 70px; }

После этого все выглядит просто замечательно:

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

Как организовать выпадающее меню в Бутстрап 3?

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

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

 <div>
 	<ul>
 	<li><a href="#">Главная</a></li>
 	<li><a href="#">О сайте</a></li>
 	<li><a href="#">Услуги</a>
			<ul>
 	<li><a href="#">Услуга 1</a></li>
 <li><a href="#">Услуга 2</a></li>
 <li><a href="#">Услуга 3</a></li>
 </ul>
			</li>
 	<li><a href="#">Портфолио</a></li>
 	<li><a href="#">Контакты</a></li>
 </ul>
 </div> 

Т.е. мы добавили в пункт «Услуги» несколько подпунктов с видами услуг. Пока что на сайте все это выглядит не айс:

Но стоит нам добавить к тегу LI (того пункта меню, из которого будут выпадать вновь добавленные подпункты) класс dropdown и … Ничего не произойдет. Просто еще чуток поколдуем, чтобы получилась подобная конструкция:

<li><a href="#" data-toggle="dropdown">Услуги <span></span></a>
			<ul>
 	<li><a href="#">Услуга 1</a></li>
 <li><a href="#">Услуга 2</a></li>
 <li><a href="#">Услуга 3</a></li>
 </ul>
			</li>

Вот тогда уже все заиграет как надо. Или нет? Все получится как надо:

Теперь немного пояснений. Для чего нужен фрагмент, показанный ниже?

<span></span>

Правильно, чтобы вот такой вот замечательный треугольничек, направленный вниз, добавить рядом с пунктом меню, который имеет выпадающие подпункты. Это поможет посетителям об этом без труда догадаться. Ну, а всю машинерию выпадания запускает атрибут тега ссылки A data-toggle="dropdown", задействуя для этого дела возможности джаваскрипта.

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

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

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

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

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

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

Мы увеличили наш трафик на 1187% с помощью WordPress.

Мы покажем вам, как это сделать.

Присоединяйтесь к 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! Ознакомьтесь с нашими тарифами

Лучшие практики навигации по веб-сайту — 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 для номера телефона мобильной версии вашего сайта.Код должен выглядеть примерно так:

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

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

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

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

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

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

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

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

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

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

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

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

1.ПЛОЩАДЬ

Уникальный дизайн

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

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

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

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

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

4. НЕПРАВИЛЬНАЯ СБОРКА

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

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

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

6. ИСКРЯ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

94% людей считают, что простая навигация является наиболее полезной функцией веб-сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Меню навигации по гамбургеру

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

Посмотрите гамбургер-меню на мобильном сайте Nettle Studio.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На основе действий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Propa Beauty

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

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

NWP

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

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

Тени

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

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

Твиттер

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

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

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

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

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

Создание навигации для вашего веб-сайта

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

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

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

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

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

Верхнее меню

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

Верхнее меню навигации на Medium.com. Изображение от Medium.

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

Ted использует семь высокоуровневых параметров навигации и открывает дополнительные параметры при наведении курсора. Изображение Теда.

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

Пример липкой верхней навигации. Изображение от Elementor.

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

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

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

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

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

Нижняя панель навигации на Apple.com в нижнем колонтитуле.

Панировочные сухари

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

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

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

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

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

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

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

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

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

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

Priority + в действии. Количество опций зависит от состояния экрана.
Изображение предоставлено Guardian через Брэда Фроста

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

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

Визуально отделить навигацию от контента

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

Stripe использует пробелы для отделения навигации от содержимого.

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

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

Dribbble использует дизайн в виде кнопок для опции «Зарегистрироваться».

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

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

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

Ограничьте количество вариантов верхнего уровня семью

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

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

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

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

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

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

Добавьте поиск, чтобы упростить веб-навигацию.

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

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

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

Выпадающий список на Amazon.com. Просмотр списка категорий утомительно и требует много времени.

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

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

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

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

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

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

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

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

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

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

Пример отчета о поведении Google Analytics.

Заключение

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

Как улучшить навигацию по сайту: 7 основных передовых практик

1. Что такое навигация по сайту?
2. Навигация по веб-сайту и иерархии контента
3. Ссылки между страницами продуктового и контент-маркетинга
4. Навигация по веб-сайту с использованием эффектов JavaScript
5. Использование параметров отслеживания в URL-адресе
6. Приоритет первой ссылки
7. Обработка навигации на больших веб-сайтах
8. 7 основных выводов

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

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

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

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

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

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

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

Реклама

Продолжить чтение ниже

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

Если у вас есть более базовая информация о навигации по веб-сайту, вы найдете эти сообщения SEJ полезными:

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

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

Навигация по веб-сайту и иерархии контента

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

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

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

Реклама

Продолжить чтение Ниже

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

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

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

Важность иерархий контента и навигации по веб-сайту

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

Проблемы, вызванные иерархиями контента

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

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

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

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

Именно здесь в игру вступает горизонтальное связывание.

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

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

Элементы действий: Связывание между категориями контента

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

Реклама

Продолжить чтение ниже

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

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

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

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

Использование этого типа горизонтальных ссылок помогает информировать пользователей о вашем продукте или услуге и повышает эффективность SEO.

Элементы действий: установление связи между страницами продукта и страницей контента

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

Реклама

Продолжить чтение ниже

Навигация по веб-сайту с использованием эффектов JavaScript

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

Хотя Google за последние годы улучшился с точки зрения чтения JavaScript, специалисты по SEO пришли к выводу, что результаты противоречивы.

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

Мир SEO разделен по поводу практического использования JavaScript.

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

Я считаю, что есть золотая середина, где можно использовать JavaScript, избегая при этом проблем с SEO.

Ссылки, отображающие и скрывающие содержимое, уже находящееся на странице

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

Реклама

Продолжить чтение ниже

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

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

Элементы действий: ссылки, отображающие и скрывающие содержимое

• Для небольших объемов содержимого удалите тег привязки и замените его обработчиком события onclick JavaScript.
  • Используйте CSS для управления курсором и перехода от стрелки к указателю в виде руки.
• Для больших объемов контента, включая одностраничные веб-сайты с параллакс-прокруткой, не весь контент должен быть предварительно загружен.
  • Предварительно загружайте только контент, непосредственно связанный с URL-адресом.
  • Для всех тегов привязки должно быть значение href и параметр onclick.
    • Это значение href ведет к новому URL-адресу, который предварительно загружает только контент, связанный с этим новым URL-адресом.
    • Функция onclick предотвратит загрузку нового URL-адреса, но позволит загружать контент с целевого URL-адреса.
    • Используйте функцию pushState для обновления URL-адреса, даже если эта страница не загружалась.

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

Реклама

Продолжить чтение ниже

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

Использование параметров отслеживания в URL-адресе

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

Это вызывает проблемы с дублированием содержимого из-за ссылки на разные URL-адреса с одинаковым содержимым. Это можно решить несколькими способами.

Действия: параметры отслеживания в URL-адресах

• Избегайте использования параметров отслеживания в URL-адресах.Вместо этого отслеживайте их с помощью обработчиков событий onclick отслеживания JavaScript для ссылок, которые будут передавать те же параметры отслеживания. При использовании Google Analytics это можно сделать с помощью отслеживания событий.
• Постоянное использование канонических тегов со ссылками на себя — это хорошая практика, позволяющая избежать многих видов проблем с дублированием содержимого.

Приоритет первой ссылки

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

Это обсуждалось на форумах и тестировалось в 2008 году рядом людей, включая Рэнда Фишкина и меня.

Приоритет первой ссылки, как показано на Moz, Рэнд Фишкин

Несколько вещей, о которых стоит упомянуть:

Реклама

Продолжить чтение ниже

• В 2014 году Мэтт Каттс, бывший глава отдела спама Google, сказал, что это больше не проблема. Я еще не проверял это снова, и в последнее время я не видел, чтобы другие специалисты по SEO тестировали это.
• Когда это было впервые протестировано и обнаружено, что это проблема, версия HTML была 4.1, XHTML 1.1 находился на подъеме, а HTML 5 еще не существовал. Сегодня HTML 5 существует с такими тегами, как
  ,

  и . Возможно, на этот раз Google обрабатывает ссылки в тегах заголовка, боковой панели и статей.

Проблемы SEO, возникающие из-за приоритета первой ссылки

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

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

Действия: Проблема с приоритетом первой ссылки

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

Реклама

Продолжить чтение ниже

Обработка навигации на больших веб-сайтах

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

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

Однако отсутствие перекрестных ссылок между разрозненными хранилищами контента может создавать расстояние между страницами.

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

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

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

Вот три решения этих проблем:

1. Делегирование в разные отделы

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

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

Объявление

Продолжить чтение ниже

2. Используйте инструменты или инструменты сборки

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

Инструменты сканирования, такие как Xenu, Screaming Frog, DeepCrawl или Botify, могут анализировать существующие ссылки, определять проблемы и предоставлять описание архитектуры сайта.

Если вы хотите визуализировать архитектуру сайта, в этом могут помочь такие инструменты, как DynoMapper и PowerMapper.

Инструменты исследования ссылок, такие как Moz’s Open Site Explorer, Ahrefs, Majestic, Sistrix, LRT и CognitiveSEO, могут анализировать, какие страницы получают больше внешних обратных ссылок, а затем добавлять перекрестные ссылки с этих страниц, ведущие на более важные страницы сайта.

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

3. Используйте поэтапный подход

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

Объявление

Продолжить чтение ниже

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

7 основных выводов

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

---

Авторы изображений

Рекомендуемое изображение: Пауло Бобита
Все скриншоты сделаны автором

Лучшие практики и новые смелые дизайны

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

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

Почему веб-навигация так важна в дизайне

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

Там я выбирал кошачий корм на сайте местного зоомагазина. Хорошо, Кот => Сухой корм => Выбор бренда => Нет в наличии => ОК, назад => Всплывающий баннер с каким-то специальным предложением => Нажмите «Условия» => Доставка и доставка… Как я оказался здесь и куда, черт возьми, я должен был идти? А логотип даже не вел на первую страницу!

Изображение: giphy.com

Это одно из естественных последствий плохого дизайна навигации по сайту. Конечная цель любой страницы — превратить потенциальных клиентов в клиентов. Вот почему ошибки в навигации обходятся дорого. Плохая веб-навигация приведет к уменьшению количества пользователей. Навигация по веб-сайту является основой UX-дизайна. Хорошая навигация увеличивает удобство использования. Как указано в опросе, проведенном Тони Хейлом из Chartbeat, поразительные 55% пользователей проводят на странице менее 15 секунд. Не так много времени, чтобы привлекать пользователя!

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

Лучшие практики навигации по сайту

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

Консистенция

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

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

jahwa.com.cn

Гамбургер-меню

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

Боковое меню с гамбургерами от Лукаса Майзлана

Простота и лаконичность

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

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

Узоры

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

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

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

— Дуглас Адамс, Долгое темное чаепитие души

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

Острые тренды навигации (с примерами)

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

Фиксированные панели веб-навигации

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

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

Что может пойти не так

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

ascensionlatorre.com

Вертикальная скользящая навигация

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

Что может пойти не так

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

sokruta.com.ua

Полноэкранная навигация

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

Что может пойти не так

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

EAGLE FILMS

Тонкая анимация

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

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

Что может пойти не так

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

Анимация панели вкладок Хоанг Нгуен

То или иное / Четыре угла

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

Что может пойти не так

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

gothamsiti.it

Одностраничная навигация

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

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

Что может пойти не так

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

Веб-дизайн и интерактивный дизайн от Вилюса Вайциуса

Нижняя навигация

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

Что может пойти не так

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

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

createdbywomen.org

Толстый нижний колонтитул

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

Что может пойти не так

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

cahnwilson.com

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

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

Что может пойти не так

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

polymachine.com

Заключение

Сегодня в сети более 1,5 миллиарда сайтов. И хотя только 10-15% из них являются активными, количество все равно огромно. На сегодняшнем глобальном рынке недостаточно присутствовать в Интернете. Чтобы воспользоваться этой возможностью и привлечь реальных клиентов, веб-сайт должен предлагать привлекательный и надежный пользовательский интерфейс.

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

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

* * *

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

.