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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предисловие

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заметим, что стрелки на диаграмме взаимодействий не имеют семантического значения «движение только в этом направлении». Стрелки, как правило, представляют наиболее вероятное направление движения пользователя.

Рис. 2а (верхняя диаграмма): простая древовидная структура

Рис. 2б (нижняя диаграмма): та же структура, что и на диаграмме 2а, но представленная иначе

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

Рис. 3а (лево верх): Стрелка показывает направление вниз по потоку, по направлению к выполнению задачи

Рис. 3б (лево низ): Вертикальный штрих символизирует запрет на движение обратно по пути

Рис. 3в (право): Множество указателей облегчают понимание диаграммы.

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

Рис. 4а (лево): Пример неправильного ярлыка

Рис. 4б (центр): Пример правильного ярлыка

Рис. 4в (право): Ссылка на ярлык

Параллельный набор

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

Рис. 5: Параллельный набор

Точки входа и выхода

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

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

Рис. 6а (лево): Продолжение диаграммы от элемента «D» на другом листе (на рис. 6б)

Рис. 6б (право): Начало диаграммы на другом листе (на рис. 6а)

По мере необходимости, одна точка выхода может вести к нескольким точкам входа. Ориентация скобок (горизонтальная или вертикальная) принципиального значения не имеет и зависит от эстетических предпочтений архитектора[1].

Точки принятия решений

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

Рис. 10: Точка принятия решения (10а) в потоке «вход пользователя в систему»

Условные связи и стрелки

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

Рис. 11а (лево): Условная связь

Рис. 11б (право): Условная стрелка

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

Заключение

Диаграмма для сайта «MetaFilter» (http: //www.metafilter.com) является конкретным примером диаграммы информационной архитектуры и способов взаимодействия пользователя с веб-сайтом (автор не был вовлечен в разработку этого сайта). Данная нотация — это только первый шаг в разработке унифицированного визуального языка моделирования информационной архитектуры и способов взаимодействия пользователя с веб-сайтом. Любые замечания и дополнения рассматриваются по адресу [email protected].