1999.02.243932 прочтений

В начале было... информационное проектирование

Теги: Web designer Publish

В начале было... информационное проектирование
Взрывной потенциал ИП
Зачем нужно ИП?
Преемственность ИП
Добро пожаловать: Volkswagen
Новости от CNN
CDNow: громко, но невнятно

Дрю Миллер

{ Чтобы создавать выдающиеся узлы Web, следует освоить основы информационного проектирования }

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

Информационное проектирование (information design), или ИП — это процесс организации содержания и представления его в наиболее удобной для целевой аудитории узла форме. Речь идет не о создании привлекательных логотипов и выразительных корпоративных лозунгов, а об улучшении ясности и функциональности узла Web. Информационное проектирование является неотъемлемым элементом Web-дизайна; без него любой узел Web — пусть даже сделанный с использованием новейших технологий и очень дорогой — обречен стать всего лишь памятником бесцельно потраченному времени, денег и полосы пропускания канала.

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

Организация
Каким образом будет упорядочена информация? В алфавитном порядке? Пространственно? По времени или по разделам?
Представление
Как информация выражается? Словами, диаграммами, иллюстрациями, фотографиями, звуком, видео или (чаще всего) сочетанием некоторых из этих элементов? Сколько должно быть страниц: одна или несколько; либо страницы, разбитые по разделам; либо потребуются даже подузлы с собственными URL?
Навигация
Каким образом посетители будут находить то, что им нужно? Как они будут перемещаться в пределах узла и просматривать его содержимое? И, что еще важнее, как они смогут узнать, где находятся?
Изменения
Каким образом будут сопровождаться различные элементы узла? Должна ли выбранная структура поддерживать рост узла? Не ухудшит ли навигацию по узлу добавление или удаление содержимого?

Задача информационного проектировщика — найти лучшие ответы на все эти вопросы, и задача эта часто не имеет простого решения. В этой статье рассматривается, как в трех очень различных узлах Web — Volkswagen, CNN и CDNow — реализуются четыре основополагающих принципа, и почему при проектировании узла этим принципам следует уделять максимум внимания.

Взрывной потенциал ИП

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

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

  • Профили пользователей (user profiles) — это описания предполагаемых групп целевой аудитории. Как правило в профили включают оценку технической «вооруженности» посетителей (операционные системы, браузеры, дополнительные модули, пропускные способности каналов, размеры мониторов), учитывают расположения их терминалов (откуда они заходят в Web: с работы, из дома или школы?) и степень их понимания механизмов Сети (новички, пользуются Web регулярно или «живут» Сетью). Профили пользователей нужны для того, чтобы обосновать выбор определенных технологий или решить, каким образом обслуживать аудиторию с различными уровнями подготовки (например, для новичков нужно более явное сопровождение при помощи кнопок помощи и четких текстовых инструкций).
  • Пользовательские сценарии (user scenarios) — это описания (они создаются на основе информации из профилей пользователей), которые дают четкую картину того, как, по мнению проектировщика, посетители будут взаимодействовать с узлом. Такие сценарии хорошо подойдут для анализа того, как будет работать новая или сложная функция, поскольку в них обычно описывают причины, по которым посетители заходят на узел, а также предполагаемые точные пути прохождения узла по шагам.
  • Списки содержания (content lists) (их называют также списками возможностей — features lists) представляют собой документированные описания всего содержимого узла, от текста до графики и сценариев JavaScript. Список содержания является своеобразным «посевным» материалом, из которого впоследствии вырастет вся архитектура узла.
  • Информационные архитектуры (information architectures) — это виртуальные «синьки» узла. Представляемые обычно в виде набора диаграмм (подробнее см. ниже), архитектуры включают в себя все страницы узла, явно детализируя их иерархию на уровне «родительская-дочерняя». В соответствии с архитектурами узел часто разделяется на секции по пунктам или назначению.
  • Систематики (taxonomies) — это упорядоченные системы категорий, используемых для организации информации. Систематики можно представлять в виде деревьев, начиная с общих групп (стволов) и разделяя их на меньшие, более узкие группы. Поскольку систематики хорошо подходят для узлов с разнообразными типами информации, на них основываются Yahoo и другие Web-справочники, что позволяет пользователям легко перемещаться вверх и вниз по ветвям различных результатов поиска.
  • В списках задач (task lists) детально описываются все операции, возможные на узле. Эти списки особенно полезны при разработке узлов, которые имеют прикладное значение или ориентированы на выполнение различных операций: например, узел intranet компании, где работники могут знакомиться с руководящими документами или проверять количество неиспользованных дней отпуска.
  • Блок-схемы (flowcharts) — это диаграммы, иллюстрирующие архитектуру узла. Они являются аналогом дорожных карт и показывают все страницы узла, включая любые ответные сообщения (например, результаты поиска, благодарности за заполнение форм или сообщения об ошибках). Блок-схемы часто претерпевают несколько редакций.
  • Диаграммы технологического процесса (workflow diagrams) похожи на блок-схемы, но с одним важным отличием: вместо того, чтобы показывать все страницы, диаграмма технологического процесса показывает только те из них, которые прошел пользователь. Такая диаграмма особенно полезна для динамически генерируемых узлов (например, электронного магазина или узла для ведения личного банковского счета), где в результате решения посетителя в каждом сеансе создается уникальное содержание.
  • Сценарные панели (storyboards) демонстрируют структуру и навигацию. В отличие от сценарных панелей для дисков CD-ROM или коммерческих телепрограмм, в них не делается попытки представить все содержимое визуально. Сценарные панели для узлов Web обычно выглядят более прозаично; в них заносится только текст и простые геометрические фигуры (прямоугольники, окружности), которые показывают размещение кнопок и изображений. Сценарные панели хорошо подходят для демонстрации того, как структура и навигационные средства узла работают на различных страницах.

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

Зачем нужно ИП?

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

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

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

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

В наше время лучшие решения в области ИП (как и в жизни) принимают наиболее образованные и коммуникабельные специалисты. Многие заказчики просто не понимают специфики Web-дизайна, поэтому проектировщик должен помочь им принять правильные решения. Но нельзя объяснить им, почему нежелательно непосредственно связывать с домашней страницей все остальные, если дизайнер не понимает этого сам.

Преемственность ИП

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

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

Дрю Миллер (drue@vivid.com) — главный информационный проектировщик компании Vivid Studio (www.vivid.com) из Сан-Франциско.


Добро пожаловать: Volkswagen

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

У компании Volkswagen всегда был очень демократичный, дружественный имидж (помните лозунг «Герби любит Жука»?). Поэтому и узел Web компании также построен без излишней претенциозности; таким образом, хотя www.vw.com набит информацией до отказа, он остается весьма презентабельным и обладает удобным механизмом навигации. Замечательно то, что на узле посетители могут почувствовать себя владельцами и водителям «фольксвагена», а не только полистать и почитать рекламную брошюру.

Узел Volkswagen разделен на шесть общих категорий, каждая из них содержит свои подразделы: «Автомобили» (отдельные модели), «Вождение» (предполагаемые маршруты), «Владельцы» (информация из магазинов и клубов, часто задаваемые вопросы и торговля, связанная с VW), «Мир VW» (календарь автовыставок и событий), «Контакт» (форма запроса и поиск дилеров) и «Брошюра» (литература по продажам). Шесть категорий, вместе взятые, составляют достаточно гибкую структуру, в которую можно вместить всю информацию компании и, при необходимости, добавить новую. Преимущество такой структуры состоит в том, что узел может органически эволюционировать, поскольку дизайнеру легко выбрать подходящий способ для добавления нового содержания. Однако свободная структура не означает отсутствия структуры вообще; для правильной организации содержания необходима четкая система.

Узел VW организован четко. Для всех страниц выбран яркий или серый текст на белом фоне; значки навигации небольшие и простые, а расположены они всегда на одних и тех же местах. Освещение большинства фотографий на узле подобрано очень тщательно, размещены они со знанием дела, особенно снимки в «Галерее» для каждой модели. В области «прихожей» на домашней странице узла разделы выделены текстом и графикой. Это самая большая и заметная часть информации на странице: здесь все максимально упрощено, поскольку очень важно, чтобы посетители сразу могли понять, с чего им следует начать. Функция «Сделай сам» — это умный способ заострить внимание на интерактивной природе Web: можно выбрать модель, цвета окраски кузова и салона, плюс любые дополнительные устройства, а затем оценить общую стоимость (пока узел не позволяет связаться с продавцами машин электронным способом, но, возможно, это будет реализовано в следующем году).

Через исходную страницу узла можно сразу перейти к карте узла или к основным категориям. Навигационные команды второго уровня показываются серым шрифтом в панели навигации, расположенной в нижнем фрейме каждого раздела (текущая страница показывается красным цветом). Поскольку панель навигации помещена во фрейм, она всегда видима.

Функции навигации поддерживаются цветами: для каждого раздела выбран собственный оттенок, а название раздела или подраздела отображается текстом такого же цвета.

Заголовки для страниц (в теге TITLE) хорошо выделены, хотя не во все из них включено название VW. Это может несколько смутить тех пользователей, которые несколько позже обнаружат в меню закладок загадочные страницы под названием Driving (Вождение) или Owners FAQs (Часто задаваемые вопросы владельцев).

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

Еще одна приятная возможность заключается в том, что узел приглашает своих посетителей принять участие в его обновлении — в подразделе Favorite Roads (Любимые маршруты) можно поместить собственные рассказы. Кроме описания маршрута, посетителя попросят порекомендовать отели, рестораны, интересные места, развлекательные заведения и выбрать «цвет местности» — иногда такие рассказы довольно интересны, а главное, всегда есть причина вернуться на узел еще раз.


Новости от CNN

Узел Web CNN — один из самых популярных электронных источников новостей. Поскольку на узле размещается огромный объем постоянно меняющейся в течение дня информации, для него необходима особенно устойчивая архитектура, которая, с одной стороны, должна быть достаточно гибкой для быстрого обновления «горячих» новостей, а с другой стороны — быть понятной многочисленным посетителям.

Содержание узла разбито на 14 основных категорий, включая «Мир», «США», «Местные», «Политика», «Погода», «Бизнес», «Спорт», «Наука и техника», «Развлечения» и т.д. Подразделы находятся в соответствующих разделах. Такая структура, основанная на рубриках, сразу понятна, поскольку категории уже знакомы читателям из газет и журналов. Некоторые статьи, например о природных катастрофах, попадают более чем в одну категорию; когда происходит такое событие, краткая аннотация статьи помещается во всех подходящих рубриках, но полный ее текст есть только в одном месте. Такие множественные ссылки на статью — отличный способ сделать акцент на популярные рубрики.

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

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

Крошечный значок видеокамеры рядом с текстом статьи, который представляет собой ссылку на видео, облегчает поиск видеофрагментов. Некоторые видеофрагменты представлены в формате Apple QuickTime; другие — по выбору в форматах RealMedia компании RealNetworks или Windows Media, оптимизированных для скоростей передачи 28,8 или 56 Кбит/с (что может иметь важное значение для пользователей не самых лучших каналов). Подобные значки обозначают также фрагменты аудио и QuickTimeVR.

Страницы CNN содержат довольно много графической информации, включая рекламные объявления нескольких размеров. К счастью, разработчики приложили немало усилий, чтобы отделить содержание от рекламы, выделив для баннеров несколько строго определенных мест (низ и верх каждой страницы, а также область под панелью навигации), а также визуально отделив их линиями и цветными ячейками таблиц.

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

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

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

Важные новости, независимо от того, к какому разделу они относятся, помещаются наверху страницы. Ко всем статьям, чтобы показать, когда они были размещены в Web, добавляются дата и время, а более старые статьи помещаются в архив, откуда их можно легко извлечь. Один из самых примечательных инструментов узла — функция заказа информации. Заполнив личный профиль на странице CNN Custom News, посетитель может выбрать только те разделы, которые его интересуют, например, погоду или спорт.


CDNow: громко, но невнятно

Организация такого узла — большая и сложная задача. Интуиция подсказывает, что начать следует с музыкальных стилей, но семь разделов в левой колонке навигации (Рок/Поп, Джаз/Блюз, Мировая/Нового поколения, Городская/Электронная, Кантри/Народная, Классическая, Детская) слишком широки, а отсутствие подразделов вносит еще больше путаницы. Здесь была бы очень полезна глубокая систематика.

Если необходимо найти продукт, то информационная структура узла практически заставляет воспользоваться для этого механизмом поиска, что иногда оказывается слишком сложно. Единственные альтернативы этому — Lexicon (огромный набор списков, в которые включены все исполнители, записи, песни, футболки, видеокассеты или обложки альбомов со ссылками на внутреннюю опись CDNow) и Album Advisor (Советчик по альбомам), чье назначение — порекомендовать выборки в соответствии с музыкальным вкусом посетителя.

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

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

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

Все страницы построены на основе таблиц шириной 590 пикселов, что довольно удобно для просмотра на мониторах с разрешением 640 Ё 480 пикселов. Однако при более высоких разрешения в окне распахнутого на весь экран браузера с правой стороны оказывается обширное белое пространство. Использование таблиц с переменной шириной стало бы более гибким решением; даже простое центрирование таблиц в какой-то степени устраняет дисбаланс.

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

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

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

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

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

Архив журналов в свободном доступе.

На ту же тему:
  • КПД кооперации
    Время исполнителей-одиночек прошло. Самым действенным способом создания эффективного web-сайта компании - не просто "визитной карточки", а сложного инструмента взаимодействия с клиентами и партнерами, органично сливающегося с общим фирменным стилем -
  • "Aqua-подобный" интерфейс средствами CorelDRAW
    В этой статье я расскажу о том, как можно создать кнопки интерфейса Aqua средствами CorelDRAW (названия команд и элементов меню относятся к десятой версии редактора).
  • Технологии векторной графики в Сети
    "Меня кормят идеи", - именно этой крылатой фразой часто заканчивал Остап Бендер свои рассуждения о жизни. За прошедшее с тех пор время ценность новаторских идей многократно возросла, что особенно заметно в таких высокотехнологичных областях, как...
  • Flash и анимация в Интернете
    Небольшая программа для создания и оживления векторной графики со временем выросла во Flash - незаменимый инструмент для создания Web-анимации...
  • Xara X
    В августе 2000 года компания Xara опубликовала пресс-релиз, согласно которому месяц спустя на ее сайте можно было ознакомиться с новой версией популярного векторного редактора Corel Xara под псевдонимом "Xara X".
  • Сад расходящихся посетителей
    Мало кто задумывается о том, что список ключевых слов Internet, состоящий из ⌠Информации■, ⌠Интерактивности■ и ⌠Скорости■, неполон без слов ⌠Упущенная Прибыль■.

comments powered by Disqus