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

  1. 1. Планирование навигации
  2. 2. Дружественный язык
  3. 3. Не изобретайте колесо (используйте веб-соглашения)
  4. 4. Основная навигация
  5. 5. Привязать логотип обратно на домашнюю страницу
  6. 6. Отзывчивая навигация
  7. 7. Жирные колонтитулы
  8. 8. Липкая навигация
  9. 9. Укажите, где вы находитесь
  10. 10. Когда использовать мега-меню
  11. Заключение
  12. Источники блога и вдохновение

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

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

1. Планирование навигации

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

Документ Google или Excel:

Документ Google или Excel:

Стиль диаграммы:

Стиль диаграммы:

Список документов Word:

Список документов Word:

2. Дружественный язык

Также важно учитывать язык меню навигации и маркировку. С такой большой конкуренцией в сети, не удивительно, что мы пытаемся проявить креативность с нашим копирайтингом, но иногда это происходит за счет ясности. Ваш сайт может быть отраслевым, однако важно не забывать о пользователе и о том, как он будет интерпретировать или понимать, что вы делаете. Например, если вы должны были обозначить область магазина как «Торговая площадка», это не тот термин, с которым знакомы пользователи, и, следовательно, он оставляет возможность для интерпретации. Любая ссылка, для определения которой требуется больше секунды, или язык, который заставляет пользователя нажимать, чтобы узнать, что доступно, ставит под угрозу пользовательский опыт. Если вы хотите увидеть, какая формулировка будет работать лучше для вашей основной навигации, вы можете поставить некоторые A / B тестирование на место. Чаще всего лучше, чтобы ваша основная навигация была простой и понятной, а если вы хотите добавить персонализацию, то почему бы не попробовать это с помощью всплывающих окон и уведомлений? Приведенный ниже пример из Spread Shirt иллюстрирует умный копирайтинг, чтобы побудить пользователей оставлять отзывы.

Рубашка

Рубашка

3. Не изобретайте колесо (используйте веб-соглашения)

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

Плоский или нет

Плоский или нет

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

Строй Амстердам

4. Основная навигация

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

Zeis Excelsa

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

Los Angeles Times

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

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

Cadbury Сбор средств

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

Auberge Handfield Country Inn

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

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

Город Мельбурн

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

Gify

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

)

5. Привязать логотип обратно на домашнюю страницу

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

6. Отзывчивая навигация

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

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

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

Blue Cross мобильный

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

Дети родителей с психическим заболеванием

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

7. Жирные колонтитулы

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

YMCA NSW

YMCA NSW

8. Липкая навигация

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

огромный

огромный

9. Укажите, где вы находитесь

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

Мельбурн Эмпориум

Мельбурн Эмпориум

Artspace

Artspace

Chifley

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

IWSML

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

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

BlueCross

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

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

10. Когда использовать мега-меню

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

Заключение

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

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

Источники блога и вдохновение

http://blog.htc.ca/2013/09/03/web-design-conventions/
http://designbit.co.uk/2009/02/27/design-with-web-conventions/
http://www.bkmediagroup.com/blog/item/116-web-conventions-creating-a-user-friendly-navigation
http://netaccountant.net/website-design-for-accountants/web-design-conventions/
http://blog.teamtreehouse.com/popular-web-design-trends-for-responsive-navigation
http://bradfrostweb.com/blog/web/responsive-nav-patterns/#top
http://frankchimero.com/talks/what-screens-want/transcript/
http://www.smashingmagazine.com/web-design-navigation-showcases/

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