Навигация на веб-сайтах

Введение

Сегодня большинство музыкальных произведений, кинофильмов, сериалов, книг, статей и многих других произведений уже стали частью Всемирной паутины. И каждый день в ней появляется новое содержание. Даже каждую секунду. Этому в немалой степени способствует модель веб 2.0, согласно которой содержание сайтов создают их посетители. Так, согласно ресурсу omnicoreagency.com, лишь на Facebook пользователи ежедневно загружают 350 миллионов фотографий. Это около 4000 фотографий каждую секунду.

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

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

Слово навигация происходит от латинского слова navigare, что означает «управлять кораблем». Но на самом деле, этот термин с самого начала означает не просто управления, а еще направления корабля к цели.

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

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

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

В контексте веб-сайтов навигация может быть:

  • внешней (это навигация вне сайта, которая помогает посетителям его находить);
  • внутренней (то есть, навигация в пределах самого сайта).

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

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

В этом материале мы сосредоточимся именно на внутренний навигации и ее средствах.

Средства навигации на сайте

Общая навигация

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

Ссылки

О ссылках (или гиперссылках) мы уже вспоминали в одном из предыдущих материалов, когда описывали типичные текстовые элементы и способы их оформления.

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

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

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

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

Меню сайта

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

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

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

  • непосещенная страница,
  • посещенная страница,
  • текущая страница,
  • состояние наведения,
  • состояние нажатия.

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

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

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

Поэтому существует понятие «глубина» сайта — то есть определение количества уровней.

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

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

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

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

Карта сайта

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

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

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

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

Примерно так выглядит карта для интернет-магазина:

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

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

Xml — это сокращенно от английского Extensible Markup Language, то есть «расширяемый язык разметки». Этот язык предложил консорциум W3C как язык разметки иерархически структурированных данных для обмена между различными приложениями.

В нем структура сайта выглядит так:

Поиск

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

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

С точки зрения оформления, поиск — это, чаще всего, элементарная форма, состоящая из простого поля и кнопки.

Навигация «хлебные крошки»

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

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

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

Локальная навигация

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

Псевдоссылки

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

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

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

Меню раздела (или страницы)

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

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

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

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

  • активный блок,
  • неактивный блок,
  • состояние наведения,
  • состояние нажатия.

Для состояния наведения характерно отображение названия как активного, так и неактивного блока.

Вкладки

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

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

В заключение

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

·
506
·
goodsuper 6
Наступна стаття
Сетки на веб-сайтах
0
Головна