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

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

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

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

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

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

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

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

Общности: области и повторяющиеся (итеративные) области

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

Рис. 7: Область, объединяющая страницы по признаку «показываются в выпадающем окне»

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

Рис. 8: Повторяющаяся область, представляет множество продуктов в каталоге

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

Многократно используемые компоненты: потоковые области и ссылки на потоковые области

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

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

Рис. 9а (лево): Ссылка на потоковую область «Процедура»

Рис. 9б (право): Потоковая область «Процедура»

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

Ссылки на потоковые области функционируют сходным образом с точками входа и выхода. Назначение этих элементов одно — позволить архитектору разбить диаграмму на несколько страниц.

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

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

Система следит за состоянием своих атрибутов (attribute). Эти атрибуты могут иметь отношение к:

Пользователю (например, тип пользователя)

Сессии (например, статус пользователя в системе)

Типу содержания, к которому получен доступ

Реальному миру (например, время и дата)

Атрибуты имеют значения (values) («3 Р.М.» одно из возможных значений атрибута «дата и время»)

Ассоциация атрибута с определенным значением называется условием (condition)

Система отслеживает (evaluates) изменения условий

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

Чтобы диаграмма оставалась «чистой» условия, как правило, описываются либо в приложении, либо в легенде.

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

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

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

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

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

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

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

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

Выбор «один из многих»: условные ветви

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

Рис. 12: Условная ветвь

Пример на рисунке 12 на первый взгляд похож на пример, изображенный на рисунке 10, но поведение системы, моделируемое на рисунке 12, сильно отличается от поведения на рисунке 10. В точке принятия решения только один путь (или навигационный элемент) будет представлен пользователю; место, в которое пользователь будет перемещен в этом случае, определяется конкретным условием. На рисунке 12 система принимает похожее решение, но происходит это до того, как пользователь предпринял какие-либо действия. Условная ветвь показывает, что система принимает решение о том, какой путь представлять пользователю. Пути со страницы А на страницы B, C и D взаимно исключают друг друга, т.е. если существует путь B, то пути C и D нет.

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

Выбор «один или много»: условные селекторы

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

Рис. 13: Условный селектор

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

Одно решение, много путей: кластеры

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

Рис. 14: Кластер

Структура, изображенная на рисунке 14 функционирует как обычная условная ветвь, но для одного из условий мы представляем больше одного пути. То есть если значением атрибута станет «X» пользователь увидит путь на страницу B, а если значением будет «Y», то пользователь увидит пути на страницу C и D.

Ограничения: условные области

Когда одно или несколько условий применяется к группе страниц, эта группа изображается на диаграмме как условная область (conditional area) (прямоугольник с закругленными углами пунктирной линией).

Рис. 15: Пример условной области, где требуется безопасное соединение

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

Загружаемые библиотеки символов

Stencil file для Visio 2000

Stencil file для Visio 5

Stencil file для Visio 4

PowerPoint file

Library file для Adobe InDesign

Illustrator EPS file

набор EPS файлов, содержит один элемент на файл, для импорта в другие приложения (1.1 MB)

Заключение

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

Список литературы

Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/