Графическая нотация для документирования информационной архитектуры и взаимодействий пользователя с веб-сайтом (стр. 1 из 3)

Джесс Джеймс Гарретт

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

История развития документа

Версия 1.1b (06 Марта 2002)

OmniGraffle 2.0 - первое приложение, которое поставляется с встроенной поддержкой VisVocab. Сейчас OmniGraffle предустанавливается на все ApplePowerMacs и PowerBooks. Можно так же загрузить с сайта Omni.

Версия 1.1 (31 Января 2001)

Добавлен элемент «набор файлов»

Добавлен элемент «условный селектор»

Модифицирован элемент «стрелка», можно использовать несколько указателей (arrowheads)

Модифицирован элемент «кластер», теперь этот элемент используется только в нисходящем потоке от условной ветви или селектора

Модифицирован элемент «условная ветвь», элемент может принимать значение «пусто» (null)

Улучшения в библиотеках символов

Новая библиотека для AdobeInDesign

Версия 1.0 (17 Октября 2000)

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

Предисловие переводчика

Большое влияние на перевод этого текста оказала книга А.Леоненкова «Самоучитель UML», многие термины и словарные конструкции использованы мной в том же смысле, что и А. Леоненковым. Вообще, эта книга является ключом к правильному пониманию графической нотации для моделирования ИА и способов взаимодействия пользователя с сайтом.

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

Предисловие

Графическая нотация — это набор символов, используемых для визуального моделирования чего-либо (обычно системы, структуры или процесса). Нотация, представленная здесь, может быть использована информационным архитектором или дизайнером взаимодействий (InteractionDesigner) для того, чтобы описать на высоком уровне абстракции информационную архитектуру и/или процесс взаимодействия пользователя с веб-сайтом.

Эти описания (диаграммы) разрабатываются для пяти основных аудиторий:

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

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

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

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

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

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

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

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

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

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

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

Моделирование статичной информационной системы

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

В обоих случаях диаграммы представляют макроструктуру, с необходимым минимумом деталей для того, чтобы разработчики могли увидеть картину целиком. Поэтому задача архитектора состоит в том, чтобы заранее определить необходимый уровень детализации диаграммы. Микроструктура (структура отдельно взятой страницы) описывается в других документах и, скорее всего, не архитектором (а дизайнером — прим. пер.)

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

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

Эта нотация основана на простой концептуальной модели, представляющей информационную архитектуру и способы взаимодействия пользователя с сайтом (системой) вместе:

Пользователь взаимодействует с системой посредством путей (paths)

Пользователь перемещается по путям при помощи действий (actions)

Эти действия могут заставить систему сгенерировать события (результаты) (results)

Простые элементы: страницы, файлы и наборы страниц и файлов

Основная структурная единица любого веб-сайта — это, конечно, страница (page). На диаграмме страница изображается простым прямоугольником. Заметим, что страница на диаграмме - это единица представления, а не реализации. Например, одна страница на диаграмме может представлять в действительности несколько HTML файлов (например, страница содержит набор фреймов) или несколько разрозненных фрагментов кода (когда используются включения на стороне сервера (SSI) или базы данных).

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

Рис. 1а (лево): страница и файл

Рис. 1б (право): набор страниц и файлов

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

Используйте ярлыки (labels) чтобы идентифицировать страницы и файлы. Ярлыки должны быть уникальными для каждой страницы или файла на диаграмме и не должны представлять реальные имена файлов или значения тегов <title>, например. Уникальные числовые идентификаторы и префиксы типа файла могут быть успешно использованы в качестве ярлыков на диаграмме.

Отношения: связи и стрелки

Отношения между элементами на диаграмме изображаются в виде простой линии, или связи (connector). Связи обязательно будут трансформированы в навигационные отношения, но не все навигационные отношения могут быть отражены на диаграмме.

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