CC BY
37Навигация как ключевой компонент визуальной организации веб-сайта
Posted June 5th, 2009 by Editor
Беляев Александр Ашотович о Выпуск №2. 2009г. о Техника СМИ
Design of navigation panels as a key component of the web-site visual organisation
o
Беляев Александр Ашотович
аспирант кафедры техники газетного дела и средств информации факультета журналистики МГУ имени М.В. Ломоносова, sashabe@rambler.ru
Alexander A. Belyaev
Doctoral student, chair of mass media technology, Faculty of Journalism, Moscow State University, sashabe@rambler.ru
Аннотация
Статья посвящена специфике дизайна навигационных комплексов на страницах вебсайтов на материале интернет-версий итальянских периодических изданий. Ключевым моментом в понимании предмета статьи является неразрывная связь графического оформления навигационных блоков и элементов со структурой сайта, первое призвано следовать за вторым, представляя в четкой и доступной форме принципы, по которым построен ресурс.
Ключевые слова: веб-дизайн, информационная архитектура, навигация, гиперссылка, веб-сайт.
Abstracts
The article is devoted to the specifics of navigational design for websites and is based on the material of italian periodicals’ online versions. The key issue of the article is the connection between designing the navigation and developing the structure of a website; design mirrors the information architecture and visualizes in a legible and accessible form principles of the site architectonics.
Key words: web-design, information architecture, navigation, hyperlink, web-site.
Навигационная часть играет первостепенную роль в интерфейсе веб-сайта. Ее важность обуславливается тем фактом, что в подавляющем большинстве случаев под сайтом понимают систему взаимосвязанных документов. Навигация представляет собой визуализацию принципов организации сайта и вместе с тем инструментом пользователя в работе с ним. Можно говорить о конструируемой при помощи навигации внутренней навигационной инфраструктуре, в свою очередь интегрируемой в глобальную информационную систему сети интернет. Целью данной статьи является теоретическое обобщение и анализ различных способов визуальной организации навигации и вспомогательных навигационных элементов. Анализ производится на примере интернет-версий крупнейших итальянских периодических изданий, в том числе «Ла Репубблика» (La Repubblica - http://www.repubblica.it), «Коррьере делла Сера» (Corriere della Sera -http://www.corriere.it), «Иль Соле 24 Оре» (Il Sole 24 Ore - http://www.ilsole24ore.it), «Гадзетта делло спорт» (Gazzetta dello Sport - http://www.gazzetta.it), «Ль'Эспрессо» (L'Espresso - http://espresso.repubblica.it).
Конвергентные процессы в медиасфере обогащают интернет-версии в самых различных аспектах, превращая бывшие аналоги газеты или журнала в «порталы», масштабные медийные проекты, соединяющие уникальные особенности интернета, в том числе расширенный технологический потенциал, с возможностями и своеобразием контента других СМИ. Как следствие, увеличивается спектр приемов, используемых для визуализации структуры сайта. Такие изменения имели место и в итальянском секторе интернета, поскольку онлайн-версии национальных и некоторых крупных региональных периодических изданий перешли к портальной модели еще с начала 2000-х г., что проявилось через укрупнение структуры, изменение схем поставки контента, освоение новых видов информации, укрепление обратной связи с читателем и т.д.1
Как и в случае с печатным изданием универсального профиля, пользователь набирает адрес интернет-версии чаще не с целью прочитать какой-либо конкретный материал, а скорее получить обзор последних событий по интересующему его спектру тем, «быть в курсе». Интернет-версии ежедневных газет, особенно национальных, изначально стремятся быть каждодневным спутником интернет-пользователя, с которого начинают рабочий день и с помощью которого получают информацию самого разного характера -
как серьезного новостного и аналитического, так и развлекательно-рекреативного. Такая направленность требует от сайта четкой и прозрачной структуры, а это в свою очередь требует особого подхода к разработке и оформлению навигации.
Навигационный каркас портала в целом можно охарактеризовать как систему линейных вертикальных и горизонтальных связей. Задачей дизайнера является организовать эти связи максимально удобным для посетителя, «прозрачным» образом. Вертикальные связи
- «лифты» - обеспечивают перемещение по разделам, рубрикам и подрубрикам, а горизонтальные - «переходы» - по видам медиаконтента. С отправной точки - домашней страницы, «первого этажа» - посетитель может перейти к чтению конкретной статьи или новостной заметки, а потом просмотреть фотоматериалы по теме, или наоборот. После этого он может вернуться к отправной точке или, например, перейти на страницу раздела. Быстрота, связность и гибкость веб-серфинга являются главными приоритетами для посетителя.
В этом плане веб-дизайн тесно идет об руку с информационной архитектурой, занимающейся разработкой и организацией сложных информационных систем. Применительно к онлайн-медиа информационная архитектура занимается целым комплексом технологических, эстетико-психологических и дизайнерских проблем, однако одна из первостепенных ее задач - создание логически правильной, интуитивно понятной и масштабируемой, т.е. обладающей потенциалом к расширению, навигационной структуры для сайта. Само понятие «навигация» - очень многоплановое. В этой статье под навигацией мы понимаем комплекс постоянных визуальных элементов (их, соответственно, можно обозначить как «навигационные»), служащих для ориентации в структуре веб-сайта и перемещению по ней пользователя. Под контентом в данном случае можно понимать «полезное» наполнение сайта, ту информацию, которую он предлагает посетителю.
Навигация на веб-сайте выполняет две основные функции - перехода и ориентирования. Первая функция дает пользователю возможность перейти к другой странице внутри сайта, определенному фрагменту текущей или выйти за его пределы. Мельчайшей навигационной единицей является гиперссылка. Гиперссылки группируются по своему назначению в навигационные блоки. При этом внутренняя структура некоторых навигационных блоков и их построение могут быть достаточно сложными. Так называемые навигационные меню - самый распространенный и обязательный компонент
структуры сайта: он содержит гиперссылки, выстроенные по уровням (разделы, подразделы, секции, подсекции и т.д.). Они принимают различные формы: это могут быть статические списки («Ла Репубблика»), выпадающие меню («Гадзетта делло Спорт» или «Милано Финанца» (Milano Finanza - http://www.milanofinanza.it)). Часто гиперссылки объединяются в комплексы по тематике или типу контента, что позволяет сократить путь пользователя от домашней страницы до искомой публикации. Не обошла эта тенденция и интернет-версии итальянских газет: почти все они размещают специальные навигационные блоки со списками опубликованных недавно, наиболее читаемых материалов или же, например, всех фото- и видеорепортажей за последний месяц (онлайн-версия газеты «Коррьере делла Сера» выделяет их в особый раздел «КоррьереТВ» (CorriereTV) и ставит анонсы этого раздела в специальный модуль на домашней странице издания). При этом дизайн таких блоков может варьироваться. Блоки, содержащие ссылки на самые популярные статьи и на самые свежие (рубрика «На первом плане» (In primo piano)), «Коррьере делла Сера» оформляет по-разному - в одном случае это модуль с прокруткой и возможностью выбора временного отрезка, в другом просто список.
Стремление агрегировать в краткой форме актуальный контент сайта на домашней странице приводит к высокой концентрации анонсов2, выполняющих анонсирующую и навигационную роль. Так, анонс свежего видеорепортажа на главной странице онлайн-версии журнала «Ль'Эспрессо» предлагает ознакомиться с затронутой темой, прочитать краткое описание, увидеть отдельные кадры и перейти непосредственно к странице, где можно просмотреть ролик целиком.
Вторая важнейшая функция навигации - ориентационная. Для пользователя знать, где он находится, не менее важно, чем знать, куда он может направиться. Колумнист авторитетного веб-журнала «Э Лист Эпарт» (A List Apart - http://www.alistapart.com) Дерек Поважек особо выделяет важность ориентационной функции: «Если навигация напоминает пользователям, где они находятся, они никогда не испытают панического ощущения потерянности» . Ориентационная функция решает эту задачу, указывая пользователю, какое место в структуре сайта занимает открытая в данный момент страница. Эта функция часто недооценивается. Нередко разобраться в том, в каком узле дерева сайта он находится, пользователь может только с помощью вспомогательного ориентационного средства, в качестве которого выступает адресная строка браузера.
Простейшим примером реализации этой функции может служить визуальное выделение
текущего документа в навигационном меню. При разветвленной структуре сайта может потребоваться сразу несколько способов подобной акциденции, соответствующих уровням иерархии. Так, Дерек Поважек указывает целых пять возможных стилей оформления раздела навигационного меню для сайта с всего лишь одноуровневой глубиной иерархии4: стандартное оформление, оформление при наведении мыши - на домашней странице; стандартное оформление на главной странице раздела (оформление при наведении мыши и ссылка отсутствуют); стандартное оформление и оформление при наведении мыши - на страницах материалов, входящих в раздел. Сайт «Репубблики» на странице подраздела «Персоны» (Persone) раздела «Спектакли и культура» (Spettacoli&Cultura) выделяет в навигационном меню особым стилем оформления как текущий подраздел (красный цвет шрифта), так и уровнем выше - раздел (белый фон, голубая обводка). Тем не менее, подход дизайнеров «Репубблики»
к стилизации разделов демонстрирует непостоянство, переход по ссылке, ведущей на следующий подраздел, «Стар Контрол» (StarControl), приводит посетителя на страницу с меню, оформленным и организованным иначе. В этом можно увидеть частное проявление проблемы, касающейся любого стремительно разрастающегося веб-ресурса: неупорядоченности, немасштабируемости структуры сайта и, вследствие этого, отсутствии четко организованной системы оформления. Особенно сильно эта проблема затрагивает всевозможные тематические приложения или региональные подсайты. Произвольное изменение состава, порядка или положения навигационного блока от одной страницы к другой оказывает негативное воздействие на восприятие структуры сайта непостоянство элементов интерфейса лишает пользователя ориентира в графическо-информационной системе координат сайта.
Для того, чтобы сохранять у пользователя «чувство места», как прием используют так называемую «историческую» навигацию (англ. breadcrumb) - навигационный блок, показывающий «координаты» текущего документа в иерархии сайта в форме последовательного ряда ссылок, начиная с домашней страницы5. Он помогает посетителю (в том числе попавшему на страницу с другого ресурса, допустим, поисковика) сориентироваться, принять решение о дальнейших действиях и к тому же в ненавязчивой форме усвоить схематику построения ресурса. Этим приемом пользуются, в частности, интернет-версии газет «Коррьере делла Сера» и «Иль Соле 24 Оре».
Универсальным «ключом» к структуре ресурса может быть карта сайта. Келли Гото,
известный специалист в области информационной архитектуры, в книге «Веб-редизайн» определяет карту сайта как хребет всего проекта6. Так, карта сайта газеты «Ла Репубблика» позволяет усвоить принципы его организации, поскольку навигационная схема сайта и его структура аналогичны друг другу. Тем не менее далеко не всегда это так, структуры разделов в главном навигационном меню и на карте сайта могут различаться по причине нечастого или неаккуратного обновления. Подобным образом дело обстоит с интернет-версиями газет «Ла Репубблика» и «Коррьере делла Сера». Интернет-версии некоторых крупных итальянских изданий вообще не располагают картой
- например, «Ла Стампа» (Ьа Stampa - http://www.lastampa.it). Отсутствие ее может привести к тому, что пользователь, не разобравшись в структуре, не найдет желаемого и покинет сайт.
Способы навигации можно классифицировать по различным основаниям. Это могут быть цели, которые преследует конкретный навигационный элемент или комплекс элементов: дать возможность ознакомиться с относящимся тематически или иным образом к текущей странице контентом, помочь сориентироваться во внутренней организации сайта, предоставить ссылки на дополнительные услуги или на страницы помощи. Часто рассматривают классификацию навигационных блоков по способу размещения: располагаются ли они на всех страницах сайта (первичная) или только на каких-либо конкретных (вторичная). Типичными видами вторичной навигации могут являться результаты поиска по сайту или разбитые на страницы документы (как на страницах интернет-версии «Ль'Эспрессо»). Чаще всего она воплощается в виде т.н. пейджинга -навигационного комплекса, позволяющего перейти к определенной странице текущего материала, используя нумерацию, директивные ссылки «Вперед» и «Назад» и т.д. Надо сказать, что «Ль'Эспрессо» представляет единственный пример постраничной разбивки материалов среди взятых нами для анализа интернет-версий, что, по всей видимости, связано с типом издания (журнал) и свойственной ему объемностью публикаций. Вторичная навигация также используется на страницах мультимедийных материалов, например, фоторепортажей, оформляющихся чаще всего в виде слайдшоу или виртуальных фотовыставок, которые «устраивают» все более-менее крупные итальянские интернет-версии.
Гиперссылки как базовый навигационный элемент также иногда подразделяют на статические и динамические. Тип динамических гиперссылок активно внедряется по мере монетизации интернет-версий, основной доход зачастую получающими от рекламы. Они
активно используются интернет-версиями для экономии места, особенно дорогого в верхней части главной страницы: благодаря технологиям динамической подгрузки данных становится возможным разместить на ограниченной площади количество информации в несколько раз большее, чем обычно, не вступая в соперничество с дорогостоящими рекламными площадями. Практическое применение этот вид навигации находит в анонсных блоках, например, на главной сайта «Ла Репубблика», вспомогательной деловой информации различного рода («Ла Стампа», «Иль Соле 24 Оре»), выборках новостей за определенные периоды - на сайте «Гадзетта делло спорт». На домашней странице интернет-версии «Коррьере делла Сера» для размещения партнерской информации и видео- и фотоанонсов применяют вкладки, на сайте «Иль Соле 24 Оре» -многостраничные блоки, навигация по которым осуществляется при помощи директивных ссылок.
О месте навигационной части в макете веб-сайта нельзя говорить с полной определенностью. Среднестатическая графическая модель сайта состоит из типовых блоков макета, обычно четырехчастна и состоит из колонки контента, дополнительной колонки, титульного комплекса и «подвала». Несмотря на то, что за каждым из таких блоков закреплено определенное назначение (логотип обычно можно увидеть в «шапке», «полезная нагрузка» страницы, контент, находится в основной колонке, и т.д.), практически все крупноразмерные элементы макета выступают «носителями» навигационных комплексов. Так, в «Гадзетта делло Спорт» в «шапку» подверстывают гиперссылки на страницу входа в защищенную область сайта и контактов с редакцией.
Так же поступают и в «Коррьере делла Сера», добавив только гиперссылку, ведущую на страницу регистрации нового пользователя. Логотип издания, ссылаясь на главную страницу сайта, становится важным навигационным ориентиром. Как правило же, навигация концентрируется в отдельной колонке, иногда даже двух. Однако здесь требуется последовательность: в случае, если в навигационную колонку подверстываются блоки, содержательно относящиеся к другой части макета, допустим, выжимка из статьи, способность ориентироваться в устройстве страницы может нарушиться.
Размещение в определенной части макета в некоторой степени катеригоризует навигационный блок. Так, в дизайне интернет-версий главное навигационное меню обычно можно увидеть в нижней части «шапки» сайта. Это меню визуализирует верхний уровень в иерархии сайта (обычно это уровень разделов). Однако иногда в «шапке» размещаются сразу несколько меню, соответствующих разным уровням, в том числе и
внешним: так, «шапка» сайта газеты «Иль Соле 24 Оре» содержит два меню, содержащих ссылки на проекты медиагруппы и подсайты, а также меню разделов, при этом все трое выстроены сверху вниз по месту в структуре (проекты, подсайты, разделы). Ссылки в главных навигационных меню используют визуальную модель «ленты», в которой названия разделов даны горизонтально и отделены друг от друга вертикальной чертой либо просто отступами. «Ль'Эспрессо» комбинирует «ленту», используемую для представления системы разделов первого уровня, с всплывающим меню (см. ниже) для прочих групп ссылок, которые заслужили свое место в «шапке» - «Даль Нетворк» (Dal Network) - прочие интернет-проекты медиагруппы, «Участвуй» (Partecipa) и «Сервисы» (Servizi). Другой моделью визуальной организации навигационного меню могут быть вкладки, которые позволяют решить проблему размещения второго уровня навигационной структуры - вкладки размещаются в два ряда, нижний содержит в себе ссылки подчиненного текущему разделу уровня («Ла Репубблика», «Коррьере делла Сера») и меняется в зависимости от того, какому разделу принадлежит текущая страница.
Для более глубоких навигационных структур, содержащих три уровня или больше, прибегают к выпадающим меню, служащим для размещения на ограниченной площади разветвленной и обширной навигационной системы. Если для их реализации применяются специальные технологии (обычно JavaScript или Flash), то при их недоступности или отключении пользователь оказывается в тупике - будучи лишен навигации, он с большой вероятностью уйдет с сайта. «Гадзетта делло спорт» использует в чрезвычайно сложном навигационном меню (что неудивительно - ее иерархия как спортивной газеты широкого профиля отражает десятки различных видов спорта) технику вложенных выпадающих списков, появляющихся при наведении мыши на родительский элемент. Такой метод хорош тем, что, экономя площадь страницы, дает возможность ясно и быстро представить структуру ресурса на всех уровнях, не прибегая к отсылке пользователя на карту сайта. Кроме того, реализованы меню на сайте «Г адзетта делло спорт» с помощью не вышеупомянутых технологий, а стандартных средств стилевого оформления, что означает доступность меню независимо от того, включены ли прочие технологии или присутствует ли их поддержка в браузере или нет. Однако с точки зрения норм юзабилити (термин, определяющий меру удобства и эффективности использования интерфейса) этот метод все же не очень удачен. Признанный специалист в области веб-дизайна Джеффри Зельдман считает, что необходимость в выпадающих меню - лишний повод задуматься над структурой сайта8. Учитывая значительное количество пунктов в списках, наличие нескольких уровней вложенности и малый кегль шрифта, работа с меню становится
затруднительной для обычных пользователей и практически невозможной для некоторых категорий людей с нарушениями двигательного аппарата. Не говоря уже о том, что длинные списки порой просто не помещаются целиком на экране.
В «подвале» страницы пользователь ожидает найти гиперссылки, ведущие на страницу контактной информации, рекламных расценок, карту сайта, адреса RSS-лент и т.д. Поэтому нередко даже уже «засветившиеся» в иных частях макета гиперссылки дублируются в «подвале» (так, на домашней странице «Ла Репубблика» встречаются дважды ссылки на подкасты и RSS-канал). В центральную колонку включают контекстную навигацию (навигационные комплексы, связанные с содержанием конкретного материала или позволяющие манипулировать им тем или иным образом). Ее можно разделить по двум часто встречающихся типам гиперссылок: контекстнофункциональным и контекстно-тематическим. Наиболее типичный пример контекстнофункциональной гиперссылки, представляющей собой буквально инструмент для работы с материалом, - это ссылка на версию для печати. Прошедшая недавно через частичный редизайн интернет-версия журнала «Ль'Эспрессо» в качестве одного из обновлений внедрила именно дополнительные средства манипулирования материалом, размещенные в блоке контекстно-функциональной навигации. Многие интернет-версии добавляют на страницы с преобладанием текстового контента специальные кнопки, позволяющие регулировать размер шрифта. Процесс обновления модулей контекстно-функциональной навигации идет постоянно, и в «Ль'Эспрессо» с недавних пор для группировки однотипных гиперссылок даже используют выпадающее меню. Гиперссылками здесь чаще всего служат иконки, а не текстовые надписи; с одной стороны, это акцентирует прикладной характер навигационного комплекса, а с другой, позволяет экономить место в узких колонках. Обычной практикой является размещение контекстно-функциональных ссылок перед началом текста; в то же время «Иль Соле 24 Оре» ставит их и в начале, и в конце статьи, а «Ла Стампа» располагает всю контекстную навигацию в блоке слева от текста материала с обтеканием. Служа средствами навигации по схожим по тематике или близким по дате выхода статьям, контекстно-тематические гиперссылки обычно даются сразу после контента, акцентируя возможность продолжить знакомство с предметом по прочтении текста. На страницах сайта «Ла Репубблика» контекстно-тематические гиперссылки даются не только после статей, размещенных на собственных страницах с постоянными адресами, но и после анонсов новостей на главной странице. Они маркируются соответствующим типом медиа, журналистским жанром или названием раздела, к которому принадлежат «Блоги» (Blog), «Интервью» (Interviste), «Видео»
(Video) и т.д. при помощи разнообразных оформительских средств, например, цвета или иконок. Кое-где иконки служат только для указания на мультимедийные материалы.
«Г адзетта делло Спорт» иконок не использует, но нужные ссылки акцентирует, набирая их прописными буквами; так же, многие из рассматриваемых изданий экономят место на главной странице и ставят ссылки друг за другом в одну строку, что не добавляет удобства чтению. В макете интернет-версии журнала «Ль'Эспрессо», принадлежащего той же медиагруппе «Эспрессо» (Espresso Spa), весь контекстный блок «перекидывают» вправо, объединяя контент и контекстную часть правой колонки общим белым фоном по контрасту с темно-бежевым для прочей навигации.
Таким образом, навигация в интернет-версиях, формируя скелет структуры сайта, тесно взаимосвязана с контентом. Одновременно она выступает главным инструментом пользователя для работы с материалами сайта, сопровождая читателя в его путешествии по электронной версии издания и предлагая различные способы осуществить это путешествие. Задача дизайнера состоит в том, чтобы снабдить навигацию четким и прозрачным визуальным образом, отражающим ее важнейшее место в информационной системе веб-сайта и способствующим оптимальному выполнению ее функций.
1. См. подробнее: Bettini A. Giornali.it: La storia dei siti internet dei principali quotidiani italiani. Catania. 2006.
2. Это можно считать особенностью новостных изданий в интернете: главным товаром для СМИ и одновременно способом привлечь «покупателя» является контент, поэтому домашняя страница у них служит прежде всего витриной этого товара. Подробнее о принципах дизайна домашних страниц см.: PowazekD. // Home Page Goals. A List Apart #211 // http://www.alistapart.com/articles/homepagegoals/
3. Powazek D. Where Am I? A List Apart #221. // http://www.alistapart.com/articles/whereami
4. Там же.
5. См. подробнее Kalbach J. Designing Web Navigation: Optimizing the User Experience. Sebastopol. 2007. P. 60-63.
6. Гото К., Котлер Э. Веб-редизайн. Книга Келли Гото и Эмили Котлер. СПб, 2001. С. 142.
7. Подробнее см. в статье: Вукс Т. CMS - модели навигации для веб-сайта // http://www.nundesign.com/st/cms-navigation.html.
8. См. статью: Zeldman J. Architectural Digest vs. This Old House // http://www.zeldman.com/daily/0604f.shtml.
