Структура узла и система навигации

Структура узла

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

http://www.citforum.ru/internet/cgi/

и попадет туда, куда надо. Но вот если он захочет узнать о Domino Go Webserver Pro компании Lotus Development, он никогда не догадается, что нужно набрать в строке запроса:

http://www.lotus.com/home.nsf/tabs/lotusgopro

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

Базовые структуры

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

Плоская структура

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

Такую структуру имеют многие домашние страницы и корпоративные узлы "визитки". Под узлом "визиткой" подразумевается некий узел имеющий типичные страницы: "о компании", "наши услуги", "как с нами связаться", "наши партнеры", "наши клиенты". Из вышесказанного ясно, что такая структура имеет смысл для узла, насчитывающего не более 5-9 документов.

Линейная структура

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

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

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

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

Древовидная структура

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

Комбинированная структура

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

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

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

Навигация по узлу

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

Организация домашней страницы

Одним из основных элементов навигации является домашняя страница узла. Это та страница, которая показывается при запросе корня сервера (слеша), например:

http://www.webclub.ru/

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

Существует два основных вида домашних страниц: презентационная и информационная.

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

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

Независимо от вида домашней страницы, существует несколько основных правил ее организации:

• самая актуальная информация должна быть видна в первом экране, а если ее много, то хотя бы ее начало или заголовок;
• элементы навигации (меню) должны быть очевидны и заметны, посетитель мог прийти к вам в первый раз, и ему не знаком ваш стиль;
• желательно, чтобы элементы навигации помещались в один экран, если конечно у вас не мегаузел;
• домашняя страница должна ясно говорить, чему посвящен этот узел, или же как то привлекать внимание посетителя;
• не делайте страницу полностью графической - что бы вы там ни думали, всегда найдется причина, чтобы в будущем добавить туда текст: экстренное сообщение, новости, анекдот дня и т.п.;
• следите за ее "весом" - посетитель согласен ждать только если знает, зачем он это делает, а новый посетитель еще не знает, куда и зачем он попал; на данный момент маргинальным является размер в 70-90 килобайт; если она все-таки очень "тяжелая" - минимизируйте количество графики, разбейте таблицу (если в нее заключена вся страница) на куски - сделайте так, чтобы посетитель увидел хотя бы ее часть, пока не подгрузится все остальное;
• на первой странице вы ничего еще не знаете о посетителе, поэтому не помещайте на страницу никакие нестандартные элементы: Java-апплеты, звук, Flash и т.д. - это считается плохим тоном; если это так критично, предупредите об этом заранее на странице-заставке.

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

Принципы построения системы навигации

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

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

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

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

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

Что делать, если разделов очень много? Как выбрать, что именно поместить в подсистему глобальной навигации? Существует три подхода (хотя вы вольны придумать четвертый):

1. Поместить в нее ссылки на те разделы или документы, которые важны для вас, с точки зрения важности их посещения посетителем; одной из таких ссылок, например, может являться ссылка на бланк оформления заказа.
2. Поместить в нее ссылки на наиболее популярные у посетителей разделы. Популярность определяется со временем путем долговременного анализа статистики посещаемости. В первый раз можно сделать собственное предположение о том, что будет наиболее интересно, но лучше об этом спросить хотя бы у пятерых друзей (но не коллег по работе) и обобщить результат.
3. Объединить в некоей пропорции два предыдущих способа.

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

Статьи по теме

Гигантская подборка сервисов для веб-дизайна. Логотипы, фотобанки, иконки, шрифты и прочее

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

2023-12-28

Дизайн сайта: особенности творческого процесса

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

2019-08-07

Создание логотипа: семь сервисов в помощь

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

2019-01-30

20 ценных уроков дизайна от "Мстителей"

Может это и звучит как-то странно, но марвеловские супергерои могут не только скрасить наш досуг своими приключениями, но и дать нам нес...

2015-05-11

15 трендов веб дизайна в 2014-2015 году

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

2014-06-05

Как не надо верстать сайт или 7 ошибок начинающего веб-мастера

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

2011-12-27

Факторы, определяющие хороший логотип

Если вы решили создать логотип, то нужно подумать о том, где он может использоваться. Существует пять факторов, которые определяют наско�...

2011-12-27

Борьба поисковиков и оптимизаторов

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

2011-04-13

Почему не стоит скачивать шаблоны с варезников

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

2011-04-13

О пользе точности темплейтов

Лирическое отступление: Темплейты для сайта (сториборды, вайрфреймы) - спроектированные проволочные схемы страниц сайта. Темплейты пок...

2011-04-07

Методы веб-дизайна и юзабилити

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

2011-04-07

Шаблонные решения для web-сайтов

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

2011-04-07

Как сделать картинки в стиле Карсона

Самое модное сейчас в дизайне — шрифты. Их в работе должно быть как можно больше. Неважно, ЧТО вы этими шрифтами пишете, главное — раск�...

2011-04-07

Переживания должны передаваться

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

2011-03-29

Про заказчиков

Сегодня наш выпуск посвящён не дизайну или дизайнерам, а тому, с кем они имеют дело — заказчикам. Заказчики делятся на несколько групп. Т...

2011-03-29