Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 131
| Информационный Канал Subscribe.Ru |
  |
 Помощь по сайту |
   |
|
 |
 |
Добрый день, уважаемые читатели.
Сегодня завершаем тему, связанную с видами навигации, а вслед ожидается статья посвященная меню.
Адрес статьи на сайте - www.htmlbook.ru/content/220.html.
Виды навигации
Под навигацией понимают систему перехода между документами сайта. Другими словами, навигация дает пользователю представление о структуре сайта и возможность перемещаться к нужной странице. Термин «навигация» давно уже стал объемным понятием и включает в себя не только способ перехода от страницы к странице, но также вид и представление ссылок. По этой причине к навигации относят элементы страницы, которые имеют к навигации косвенное отношение, например, меню. Тем не менее, это уже связанные понятия и подразумевая навигацию по сайту, обычно упоминают и меню, с помощью которого пользователь загружает в окно браузера требуемые веб-страницы.
В зависимости от типа сайта различают несколько видов навигации, которые рассмотрены далее.
«Хлебные крошки»
Все вы, наверняка, помните сказку про Мальчика-с-пальчик, сумевшего найти обратную дорогу домой по хлебным крошкам, которые предварительно разбросал. Только не надо говорить, что хлеб съели птицы, если бы это было так, мы никогда бы не узнали про этот простой и понятный способ навигации. «Хлебные крошки» представляют собой последовательность иерархически вложенных страниц. Например, у нас есть дуб, на котором висит сундук, в сундуке — утка, в утке жираф, а в жирафе — утюг. Тогда схема вложенности будет такая.
Дуб > Сундук > Утка > Жираф > Утюг
Если применить ее к сайту, то получим более привычную модель (рис. 1).
Рис. 1. Схема организации хлебных крошек
На сайте приведенная в рисунке схема реализуется в виде последовательной строки, как показано ниже.
Пример хлебных крошекКаждая надпись, кроме последней, служит ссылкой на тот раздел или страницу, где идет описание предмета. «Главная страница», понятно, ведет к началу сайта. Последняя фраза в ряду крошек показывает, что вы находитесь на этой текущей странице, поэтому ссылка в данном случае не нужна.
Преимущества использования «крошек»
- Схема наглядна и очевидна, сразу понятно, где мы находимся в структуре сайта.
- Всегда есть возможность вернуться на предыдущий уровень или на главную страницу.
- Пользователь не может заблудиться на сайте, поскольку он понимает, где в данный момент находится и может перейти в другое место.
Несколько замечаний касательно оформления «крошек».
- В качестве разделителей лучше использовать символ больше (>), слэш (\) или обратный слэш (/). Символ вертикальная черта (|) в данном случае не годится, он плохо показывает вложенность пунктов.
- Начинать желательно всегда с главной страницы, чтобы показать начало сайта.
- Блок с «крошками» желательно размещать в верхней части страницы.
- Последний пункт должен совпадать с названием текущей страницы, при этом он не должен быть ссылкой. Если такой текст сделать жирным, то он будет выделяться на фоне остальных пунктов. В некоторых случаях такой необходимости нет, поэтому текст без ссылки оставляем обычного начертания.
Линейная навигация
Линейной называется навигация, при которой происходит последовательный переход от страницы к странице. Такой тип характерен для просмотра серии фотографий или однотипных документов (рис. 2).
Рис. 2. Типичная схема линейной навигации
Примеры линейной навигации<< Предыдущая страница | Следующая страница >>
1 2 3 4 5 6 7 8 9
1 | 2 | 3 | ... | 45 | 46
Переход не обязательно может быть последовательный, как правило, предлагается набор страниц, к которым сразу можно перейти. Например, поисковые системы показывают первую страницу результатов поиска и дают возможность перейти сразу ко второй, пятой или еще дальше.
Несмотря на простоту и наглядность, линейная навигация имеет ряд недостатков.
- Термин «Следующая страница» или подобный, дает лишь представление о том, что происходит переход на другую страницу, но, как правило, не говорит о ее содержании.
- Если показан список с номерами страниц, то представить, за какой из них скрываются нужные материалы невозможно. Так, поисковые системы сортируют результат поиска по релевантности, другими словами, на первой странице оказываются ссылки на ресурсы, наиболее удовлетворяющие условиям поиска. Предполагается, что последующие страницы показывают результат, далекий от желаемого. Однако это может оказаться не так и приходится просматривать все страницы, чтобы понять, действительно ли они содержат нужную ссылку или нет.
- Список из большого количества страниц занимает много места и неудобен для просмотра. В этом случае большую часть вариантов сокращают, заменяя их многоточием. Но тогда получается, что быстро перейти к требуемой странице невозможно, для этого придется просмотреть часть дополнительных страниц.
Несмотря на описанные минусы, линейная навигация пользуется большим успехом на сайтах, где требуется отобразить список однотипных страниц или последовательно переходить с одного документа на другой. Также линейная навигация может дополнять и другие виды навигации на сайте.
Иерархическая навигация
Это наиболее распространенный и удобный вид навигации на сайтах. Такая навигация связывает в единую схему множество документов, позволяя эффективно перемещаться с одной страницы сайта на другую. Если страниц немного (порядка 10), то имеет смысл все ссылки на них размещать на каждой странице сайта, чтобы обеспечить быстрый переход между документами. В случае, когда число страниц становится велико, их следует группировать по разделам и подразделам. При этом число ссылок первого уровня сокращается, но возрастает глубина вложения данных.
На рис. 3 показан пример навигации, где используется три раздела, помеченных символом папки. Каждый раздел может содержать подразделы или документы. Переход между документами в пределах одного раздела осуществляется с любой страницы, которая входит в текущий раздел. Чтобы попасть на страницу из другого раздела, необходимо выйти на предыдущий уровень, войти в нужный раздел, и только после этого выбрать нужную страницу. Аналогом работы с иерархической навигацией служит система папок в операционной системе.
Рис. 3. Схема иерархической навигации
С повышением общего числа документов и разделов на сайте возрастает и его сложность. Пользователю становится непросто разобраться, где найти нужную ему информацию. В этом случае следует уделить внимание разработке структуры сайта, чтобы пользователю была понятна логика его работы.
Контекстно-зависимая навигация
При использовании этого вида навигации, на текущей странице выводится список ссылок на другие разделы или документы, которые связаны с данной темой. Подобная навигация характерна для новостных лент, соединяющих однотипные новости и материалы в один блок. В этом случае для каждой страницы создается индивидуальный список ссылок, формируемый по определенному принципу. Сам принцип задает разработчик на основе той логики, которую он пытается донести до читателя. Один из примеров объединения разных материалов в контекстную систему показан ниже.
Пример контекстной навигацииСм. Сипулькарий
Другие материалы по теме Сипулька
Карта сайта
Картой сайта называют список всех разделов и документов, которые располагаются на одной странице. Карта помогает понять пользователю структуру сайта и быстро перейти к нужному документу. Обычно посетители сайта игнорируют его карту, пытаясь найти нужную страницу самостоятельно. И лишь когда им это не удается, пользователи обращаются к карте сайта. Тем не менее, для сайтов со сложной иерархической системой, рекомендуется всегда добавлять эту возможность, чтобы предоставить пользователям весь набор навигаций.
Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.
| http://subscribe.ru/
http://subscribe.ru/feedback/ |
Подписан адрес: Код этой рассылки: inet.webbuild.htmlbook |
Отписаться |
| В избранное | ||
