Урок на тему "Организация навигации на сайте"

Виды навигации между страницами сайта

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

Ход урока

I.       Организационный момент

II.      Актуализация знаний

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

-       Какой из этапов наиболее значимый и почему? (Наиболее значимым этапом является первый этап, когда анализируется и проектируется будущий ресурс. Именно здесь закладываются основные требования к веб-ресурсу и фактически задается тон всей работе.)

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

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

III. Теоретический материал урока

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

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

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

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

< Вперед | Назад > « Предыдущая страница | Следующая страница »

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

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

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

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

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

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

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

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

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

IV. Закрепление изученного материала

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