Распределение материала

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

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

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

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

Определение навигационной структуры

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

Способы реализации навигационной системы: текстовая навига­ция; поисковая система; панель с кнопками; меню; выпадающее список меню (вертушка); раскрываемое оглавление; карта сайта; перебор страниц.

Расположение навигации

Привычнее всего выглядит вертикальное (как правило, слева от основного содержимого) расположение панели ма­териалов и горизонтальное (вверху или внизу страницы) — панели инструментов. Иногда на панель инструментов доба­вляют ссылку, ведущую с подчиненных страниц на первую страницу сайта («В начало» или «К началу»), и кнопку со ссылкой на почтовый адрес автора или владельца сайта («Feedback», «Contact Us» или «Пишите нам»). Если эти две кнопки при­сутствуют, то они обычно занимают в панели крайне левое и крайне правое положение соответственно. Чаще, впрочем, почтовая ссылка включается не в навигационную панель, а в состав блока подписи внизу страницы; для ссылки же на первую страницу сайта нередко «по совместительству» используется изображение логотипа сайта или фирмы, ко­торое большинство сайтов размещают в одном и том же положении на каждой странице.

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

Семантика

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

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

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

Иногда на панель инструментов доба­вляют ссылку, ведущую с подчиненных страниц на первую страницу сайта («В начало» или «К началу»), и кнопку со ссылкой на почтовый адрес автора или владельца сайта («Feedback», «Contact Us» или «Пишите нам»). Если эти две кнопки при­сутствуют, то они обычно занимают в панели крайне левое и крайне правое положение соответственно.

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

Разновидность навигационной панели

Текстовая навига­ция

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

Поисковая система.

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

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

Панель с кнопкам

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

Для сайтов или фрагментов сайтов с линейной структурой необходимый минимум навигации — пара ссылок, ведущих к предыдущему и следующему доку­менту в цепочке. Чаще, однако, линейная навигационная панель включает в себя строку ссылок на все страницы цепочки, указывая в этом ряду место текущей страницы. Сходно устроены панели управления на сайтах, входящих в тематические «кольца» (web rings), с помощью которых можно перейти на следу­ющий или предыдущий сайт кольца, посмотреть полный список сайтов и выбрать один из них.

Меню

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

К сожалению, действительно удобным можно считать только такое меню, где перечислены все страницы сайта, но для ресурса объемом более 50 страниц это уже предоставляется малореальным. Частично решить эту проблему помогает раскрывающиеся системы меню, основанные на относительно простом Java скрипте, но даже и в этом случае предел наступает в районе 100-120 страниц сайта. Одним из вариантов использования меню является горизонтальная линейка в самом верху сайта. Небольшое знание Jav'ы способно превратить эту строку во вполне привычную каждому пользователю систему навигации в windows-приложении. Однако эргономически это решение не слишком удачно, так как одна строка меню уже есть в окне - это меню непосредственного самого браузера, куда и будет непроизвольно тянуться рука пользователя.

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

Выпадающий_список_меню­_(вертушка).

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

Раскры­ваемые оглавления

Динамический HTML делает возможным еще более эффек­тивное представление двухуровневых иерархий — раскры­ваемые оглавления (expandable outlines). Сразу после загрузки страницы такое оглавление представляет собой список раз­делов верхнего уровня, каждый пункт в котором в ответ на щелчок мыши раскрывается, выводя список относящихся к нему подразделов и сдвигая вниз расположенные ниже разделы. Раскрытие другого раздела, как правило, возвраща­ет в исходное состояние предыдущий; иногда предусматри­вают также ссылку, позволяющую раскрыть одновременно все разделы. Этот прием, обеспечивающий компактное и обозримое представление большого количества информа­ции на ограниченной площади страницы, незаменим для контент-сайтов. В браузерах, не поддерживающих динами­ческий HTML, все списки подразделов будут видны сразу же в раскрытом виде.

Карта сайта.

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

Перебор_страниц.

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

Пиктографическая_система.

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

Лекция №5 (2 часа)