Design of navigation panels as a key component of the web-site visual organisation
Беляев Александр Ашотович
аспирант кафедры техники газетного дела и средств информации факультета журналистики МГУ имени М.В. Ломоносова, 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) Дерек Поважек особо выделяет важность ориентационной функции: «Если навигация напоминает пользователям, где они находятся, они никогда не испытают панического ощущения потерянности»3. Ориентационная функция решает эту задачу, указывая пользователю, какое место в структуре сайта занимает открытая в данный момент страница. Эта функция часто недооценивается. Нередко разобраться в том, в каком узле дерева сайта он находится, пользователь может только с помощью вспомогательного ориентационного средства, в качестве которого выступает адресная строка браузера.
Простейшим примером реализации этой функции может служить визуальное выделение текущего документа в навигационном меню. При разветвленной структуре сайта может потребоваться сразу несколько способов подобной акциденции, соответствующих уровням иерархии. Так, Дерек Поважек указывает целых пять возможных стилей оформления раздела навигационного меню для сайта с всего лишь одноуровневой глубиной иерархии4: стандартное оформление, оформление при наведении мыши - на домашней странице; стандартное оформление на главной странице раздела (оформление при наведении мыши и ссылка отсутствуют); стандартное оформление и оформление при наведении мыши - на страницах материалов, входящих в раздел. Сайт «Репубблики» на странице подраздела «Персоны» (Persone) раздела «Спектакли и культура» (Spettacoli&Cultura) выделяет в навигационном меню особым стилем оформления как текущий подраздел (красный цвет шрифта), так и уровнем выше - раздел (белый фон, голубая обводка). Тем не менее, подход дизайнеров «Репубблики»
к стилизации разделов демонстрирует непостоянство, переход по ссылке, ведущей на следующий подраздел, «Стар Контрол» (StarControl), приводит посетителя на страницу с меню, оформленным и организованным иначе. В этом можно увидеть частное проявление проблемы, касающейся любого стремительно разрастающегося веб-ресурса: неупорядоченности, немасштабируемости структуры сайта и, вследствие этого, отсутствии четко организованной системы оформления. Особенно сильно эта проблема затрагивает всевозможные тематические приложения или региональные подсайты. Произвольное изменение состава, порядка или положения навигационного блока от одной страницы к другой оказывает негативное воздействие на восприятие структуры сайта непостоянство элементов интерфейса лишает пользователя ориентира в графическо-информационной системе координат сайта.
Для того, чтобы сохранять у пользователя «чувство места», как прием используют так называемую «историческую» навигацию (англ. breadcrumb) - навигационный блок, показывающий «координаты» текущего документа в иерархии сайта в форме последовательного ряда ссылок, начиная с домашней страницы5. Он помогает посетителю (в том числе попавшему на страницу с другого ресурса, допустим, поисковика) сориентироваться, принять решение о да
Русский
English