Навигация по странице: Навигация по странице сайта. Якоря и их применение в WordPress

7 ключевых выводов

1. Интересы пользователей всегда стоят на первом месте. При создании навигации в первую очередь стоит учитывать данный фактор. Только после этого можно оптимизировать для эффективного поискового продвижения. Никогда не подвергайте риску пользовательский опыт.
2. Перелинковка между контентными кластерами. Релевантность контента между страницами важна для ранжирования, которая проявляется в хорошо структурированной иерархической архитектуре сайта. Тем не менее, может случиться нехватка перекрестных ссылок в том случае, если какие-то страницы расположены слишком глубоко.
3. Связь между продуктовыми страницами и контент-страницами. Создавайте высококачественный и полезный для вашей целевой аудитории контент. Если статья в блоге может помочь принять решение о покупке продукта, то обязательно сошлитесь на нее на странице (-ах) продукта.
4. Трекинговые параметры. Избегайте их. Вместо этого используйте обработчик события onClick на ссылках. Также никогда не помешает иметь автореферентный канонический тег.
5. JavaScript ссылки. Избегайте использования JavaScript для написания контента и ссылок. Если другой возможности нет, существуют способы заставить работать такие ссылки.
6. Приоритет первой ссылки. В идеале основной контент должен идти первым. Далее — боковая панель, затем — верхняя панель, и, наконец, футер.
7. Огромные веб-сайты. Сайтам с тысячами и миллионами страниц трудно выполнить все вышеперечисленное. Делегируйте задачи специальной команде, автоматизируйте их с помощью инструментов или решайте проблемы по одной за раз.

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

По материалам: searchenginejournal.com. Источник картинки: Orihuela

02-05-2017

способы размещения внутренних ссылок. — Примеры

Грамотно организованная ссылочная структура позволяет:

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

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

Если вы продвигаете http://сайт.ru/, то не ставьте внутренние ссылки на http://www.сайт.ru/.

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

Варианты размещения внутренних ссылок.

Линки в тексте статей.

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

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

site:ваш_блог название_страницы

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

Поиск по блогу.

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

Адрес внутренней страницы.

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

http://slovari.yandex.ru/~книги/БСЭ/

http://slovari.yandex.ru/~книги/БСЭ/Навигация (морск.)/

Карта блога.

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

Пункты меню.

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

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

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

«Похожие статьи.»

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

Кнопки навигации.

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

Заголовок блога.

Как правило, щелкнув на заголовок блога на внутренних страницах, вы переместитесь на Главную. Это тот случай, когда стоит принять условия большинства. Ссылка должна быть вида http://сайт.ru/, а не http://сайт.ru/inedx.php.

«Хлебные крошки».

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

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

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

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

1. Сделать ссылки внутри статьи более привлекательными [ovsyannikoff.ru]
2. В блоге seoprofy.ua ссылки выносятся в блок «Статья в тему» не после публикации, а внутри неё

4. Типы навигации — Разработка веб-навигации [Книга]

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

Также называется: глобальная навигация, основная навигация, главная навигация.

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

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

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

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

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

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

• Основная навигация придает форму сайту.Во многом основная навигация определяет границы самого сайта.

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

Рассмотрим глобальную зону навигации Университета Валенсии (www.uv.es, рисунок 4-2), например. Шесть основных вариантов навигации находятся слева под логотипом. Некоторые служебные ссылки включены справа, например, карта сайта и ссылка на поиск по сайту. Также типично включать элемент дизайна, например изображение или графику, чтобы помочь создать имидж бренда.

Рисунок 4-2. Область глобальной навигации на домашней странице Университета Валенсии

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

Размер сайта

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

Поведение пользователя и потребности

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

Цели заинтересованных сторон

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

Рабочие процессы, которые невозможно прервать

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

Сравните Рисунок 4-3, на котором показана домашняя страница туристического сайта Opodo (www.opodo.co.uk) на рис. 4-4, на котором показан первый этап процесса оформления заказа на сайте. Для оформления заказа были удалены основные вкладки навигации, чтобы обеспечить фокусировку во время процесса и избежать ошибок.

Рисунок 4-3. Домашняя страница Opodo с выделенными основными вкладками навигации

Рисунок 4-4. Проверка на Opodo, без основной навигации

Также называется: суб-навигация, навигация на уровне страниц.

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

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

Общие схемы местной навигации и основной навигации включают:

перевернутый-L

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

горизонтальный

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

Встроенный вертикальный

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

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

Рисунок 4-5. Три общих механизма основной и локальной навигации

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

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

Голландская версия веб-сайта Philips (www.philips.nl) представляет собой локальную навигацию с динамическими меню, которые сохраняют площадь экрана и обеспечивают быстрый доступ к параметрам. На рис. 4-6 динамическое меню выходит за пределы основной навигации и отображает параметры Over Philips. Щелчок по одному из этих элементов локальной навигации приводит к странице, где меню повторяется слева (рис. 4-7). Страницы, расположенные на один уровень ниже, также открываются между серыми полосами на изображении.В целом, это эффективная стратегия навигации, которая эффективно использует пространство экрана.

Рисунок 4-6. Динамические меню для локальной навигации с домашней страницы Philips

Рисунок 4-7. Встроенная вертикальная локальная навигация на Philips.nl

Доступность

Пропустить навигацию

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

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

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

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

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

Также называется: ассоциативные ссылки, ссылки по теме.

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

Как правило, контекстная навигация располагается рядом с содержимым страницы. Это создает прочную связь между смыслом текста и связанными связанными страницами.Существует два типичных варианта контекстной навигации на странице (рис. 4-8):

Встроенная навигация

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

Ссылки по теме

Контекстная навигация может отображаться в конце или сбоку от содержимого.

Рисунок 4-8. Два типа контекстной навигации: встроенные ссылки и связанные ссылки

Если навигация встроена в текст, может быть явное указание, чтобы подготовить пользователей к более разрозненному взаимодействию, например, ссылки на другой формат контента или другой сайт. Например, встроенной ссылке может предшествовать или следовать текст, указывающий, что связанный материал находится на другом сайте или в другом формате. На рис. 4-9 показана страница «Образование» на веб-сайте Института информационной архитектуры (www.iainstitute.org). Ссылки в тексте ведут на другие страницы сайта на разных уровнях структуры. Первая ссылка в последнем абзаце открывает PDF-документ, как указано в тексте. Вторая ссылка ведет на Amazon.com.

Рисунок 4-9. Встроенная контекстная навигация на веб-сайте института IA

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

Специальные возможности

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

Связанные ссылки также эффективно используются на новостных сайтах. Из одной статьи читатели могут перейти к другим связанным статьям. Например, каждая история на веб-сайте The Washington Post (www.washingtonpost.com) заканчивается соответствующими ссылками (рис. 4-10). Есть две основные части:

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

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

Рисунок 4-10. Компонент «Ссылки по теме» для статьи из The Washington Post

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

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

Адаптивная навигация наиболее широко использовалась для составления рекомендаций на сайтах электронной коммерции. Классическим примером этого является функция «Покупатели, купившие этот товар, также купили…» на Amazon.com. На рис. 4-11 показан пример этой функции с использованием книги Джеффри Зельдмана «Проектирование с использованием веб-стандартов ». ^[]

Это пример пассивной совместной фильтрации: сайт автоматически собирает данные о поведении пользователей для создания списка. При активной фильтрации участники сайта должны явно оценивать продукт, человека или услугу.Возможно, вы видели это в веб-журналах и на других сайтах, где есть список статей с самым высоким рейтингом или аналогичный. Прямоугольники и стрелки (www.boxesandarrows.com), например, позволяет читателям оценивать каждую историю внизу текста (рис. 4-12). На основании всех оценок для всех статей посетители могут просматривать самые рейтинговые истории сайта в навигации.

Рисунок 4-12. Рейтинговые статьи о прямоугольниках и стрелках

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

На Digg.com есть список самых популярных статей по каждой из основных категорий.Поскольку невозможно учесть длину заголовка статьи, дизайн должен учитывать сочетание длины (рис. 4-13).

Рисунок 4-13. Десять лучших статей в категории «Технологии» на Digg.com

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

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

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

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

Рисунок 4-14. Быстрые ссылки в раскрывающемся меню на главной странице Принстонского университета

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

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

Но навигация по нижнему колонтитулу не обязательно должна быть незначительной. Например, может быть включена часть или вся карта сайта, как упомянуто в главе 3. Также могут быть включены связанные ссылки и логические следующие шаги. eBay.com предлагает варианты задач в конце страниц товаров (рис. 4-15). Они ведут к различным областям сайта по иерархии страниц. Amazon.com даже показывает историю посетителей для данного сеанса внизу страниц продуктов. Другие элементы, которые могут отображаться в области нижнего колонтитула, включают, среди прочего, функцию «Распечатать эту страницу», ссылку «Отправить другу», справку по сайту, возможность комментировать страницу и функции оценки страницы.

Рисунок 4-15. Следующие логические шаги в навигации по нижнему колонтитулу на eBay

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

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

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

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

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

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

Существует множество типов служебной навигации, в том числе:

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

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

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

На Рис. 4-16 показана дополнительная навигация по сайту, которая находится в верхнем левом углу многих сайтов Google.com, поэтому пользователи могут легко переходить от продукта к продукту. Щелкнув ссылку на рис. 4-17, вы легко перейдете из Google Mail в Google Calendar и обратно. Затем в конце списка есть ссылка для просмотра дополнительных сервисов Google.

Рисунок 4-17. Взаимные дополнительные навигационные ссылки от Google Mail к Google Calendar и наоборот

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

На рис. 4-18 показан компонент навигации панели инструментов с веб-сайта Toyota UK (www.toyota.co.uk). Эта группа ссылок тематически не связана; вместо этого они сгруппированы вместе, потому что каждая ссылка указывает на важную функцию или инструмент сайта.

Рисунок 4-18. Набор инструментов, который можно найти на большинстве страниц веб-сайта Toyota UK

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

Поскольку параметр «Домой» часто включается в глобальную навигацию, на некоторых сайтах они объединены: логотип включен в навигацию. Apple.com был одним из первых, кто это сделал (рис. 4-19). Amazon.com также включает логотип в главную вкладку навигации, как и Toyota.com. Это эффективный способ сэкономить место и предложить постоянный визуальный брендинг по всему сайту.

Рисунок 4-19. Логотип, интегрированный в основную навигацию на Apple.com

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

Интернационализация

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

Вам также необходимо учитывать, на каком языке отображаются выбранные элементы. Отображаются ли они на языке веб-сайта, который вы в настоящее время просматриваете, или на исходных языках? Это повлияет на порядок опций. В качестве примера возьмем английскую версию многоязычного сайта. Если посетители из Франции ищут французский язык, они могут увидеть и понять близлежащий вариант французского языка.Но найдет ли кто-нибудь из Финляндии английский лейбл Finnish при поиске Suomi? Или кто-то из Испании найдет испанский язык при поиске español? Как правило, лучше отображать выбранные фрагменты на языке оригинала. Не забудьте включить диакритические знаки (диакритические знаки, умляуты и другие специальные символы), если вы выбрали этот вариант.

Специальные возможности

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

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

ВЫБОР СТРАНЫ И РЕГИОНОВ

В некоторых случаях содержимое может отличаться в зависимости от страны или рынка. Селектор страны позволяет посетителям выбрать свой рыночный регион.Обратите внимание, что выбор языка и выбор страны — разные виды деятельности. Например, все сайты eBay в США, Великобритании и Австралии отображаются на английском языке, но в каждой версии сайта доступны разные продукты. Здесь также могут быть юридические требования.

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

Селектор страны на сайте Coca-Cola (www.cocacola.com, рис. 4-20) использует двоякий подход: на карту можно щелкнуть по региону, но есть также навигация для выбора страны из алфавитного списка. список справа.

Рисунок 4-20. Селектор страны на веб-сайте Coca-Cola

Интернационализация

Многие страны говорят на нескольких языках. Если у вас многоязычный сайт, подумайте о том, чтобы разбить выбор региона по языку.На рис. 4-21 показано меню выбора страны в нижней части Новостей Google (http://news.google.com). Ярлыки появляются на языке страны. Если в стране два языка, название страны отображается на обоих. Сравните België с Belgique, а Canada English с Canada Français. Также обратите внимание на испанскую версию для США (Estados Unidos). Наконец, страны с небалфавитными языками перечислены в конце с оригинальными символами, такими как китайский и арабский. В скобках дизайнеры включают перевод на английский язык.

Рисунок 4-21. Выбор стран в Google News

Также называется: якорные ссылки, ссылки перехода.

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

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

Технические спецификации Консорциума World Wide Web (W3C, www.w3c.org) часто очень длинные, как оглавление CSS 2.1 показана спецификация (Рисунок 4-22). Эти внутренние ссылки переходят по странице без перезагрузки.

Рисунок 4-22. Внутренние ссылки на страницы для спецификации CSS 2.1 на сайте W3C

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

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

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

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

• Внутренние ссылки вверху страниц занимают ценное пространство на экране.

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

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

Навигация по веб-сайту — планирование и реализация — Smashing Magazine

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

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

Организация структуры навигации

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

Сравнение основного и дополнительного

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

SpeckyBoy

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

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

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

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

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

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

Информационная архитектура: сортировка карточек

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

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

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

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

— Эми Хиссрих

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

(Изображение: Dunk the Funk)

Есть два типа:

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

Ниже приведены некоторые ресурсы и дополнительная информация по сортировке карточек:

Есть также много приложений для сортировки карточек, некоторые настольные и другие онлайн.Сортировка карточек в Интернете может быть проще, но это не всегда правильный выбор. Отличная статья о UX для масс, в которой рассматриваются плюсы и минусы каждого подхода: «Сортировка карточек в Интернете: даже лучше, чем на самом деле?» Если вам нужны простые инструменты для сортировки карточек, обратите внимание на OptimalSort, WebSort и UserZoom.

Сгруппированный контент: схемы классификации

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

Ниже приведен список наиболее распространенных методов классификации контента, а также предложения по каждому из них:

• От самых последних к самым старым Подходит для контента, чувствительного ко времени.
• По алфавиту Отлично подходит, когда пользователю нужно что-то быстро найти. Сюда входят определения, индексы и другой контент, о котором пользователи знают, прежде чем они его найдут.
• Самый популярный или наиболее часто используемый Отлично подходит для просмотра на основе интересов, а не для контента, который нужен пользователям.
• Географический Определенный контент не имеет отношения к определенным регионам или субрегионам?
• В порядке следования Если контент каким-либо образом представляет собой процесс (например, «Как подавать налоговую декларацию»), то он может быть организован в соответствии с порядком действий, которые пользователь должен предпринять.У FeverBee есть отличный пример: «Как создать онлайн-сообщество: полный список ресурсов». Хотя веб-сайт является блогом, его содержание не обязательно зависит от времени, поэтому автор создал отличную структуру навигации, которая помещает большую часть контента в пошаговый процесс.

Подробнее о схемах классификации см. «Схемы классификации (и когда их использовать)».

Навигация и уровни пользователей

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

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

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

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

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

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

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

MailChimp

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

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

Freelance Mingle

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

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

Freelance Mingle

FreshBooks

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

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

FreshBooks

Business Catalyst

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

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

Business Catalyst

Общие соображения

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

Горизонтальная и вертикальная

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

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

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

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

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

Хорошее / Корпус

Stura TU-Chemnitz

Baltic International Bank

Аналогово-цифровой

Кембрийский дом

Дивенсис

Mellasat

Дебби Миллман

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

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

Moody International

Большой праздник

Веб-стандарты Sherpa

Квартиры в Тихуане

Unlocking.com

Культурные решения

Ремесленная обезьяна

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

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

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

Ниже представлена ​​небольшая витрина:

Вольер

Estee Lauder

Portero Luxury

Sunglass Hut

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

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

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

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

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

Заключение

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

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

Дополнительные ресурсы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10 Рекомендации по использованию навигации

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

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

1. Примите предсказуемость

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