Графическая нотація документування інформаційної архітектури та взаємодій користувача з веб-сайтом

Графическая нотація документування інформаційної архітектури та взаємодій користувача з веб-сайтом

Джесс Джеймс Гарретт Одним із засобів уявлення інформаційної архітектури та взаємодій користувача з веб-сайтом є використання діаграм. Документ представляє деякі аспекти моделювання інформаційних систем, основні графічні символи документування інформаційної архітектури та способів взаємодії користувача з веб-сайтом як діаграм, а як і методику створення і видів використання таких диаграмм.

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

Версия 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) для здобуття права описати високому рівні абстракції інформаційну архітектуру і/або процес взаємодії користувача з веб-сайтом.

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

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

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

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

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

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

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

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

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

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

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

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

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

Информационная архітектура і дизайн взаємодій як способи моделювання інформаційної системи — це дві сторони однієї монети (див. елементи структури «Досвіду Користувача», є визначення цих термінів тому, де вони використані тут.) Створення діаграм структури сайту пов’язані з обома типами моделювання. Проте цілі діаграм кожному за типу будуть злегка отличаться.

В обох випадках діаграми представляють макроструктуру, із необхідним мінімумом деталей у тому, щоб розробники могли побачити картину повністю. Тому завдання архітектора у тому, щоб заздалегідь визначити необхідний рівень деталізації діаграми. Мікроструктура (структура окремо взятому сторінки) описується за іншими документах і найшвидше, не архітектором (а дизайнером — прим. пер.).

Диаграмма інформаційної архітектури повинна представляти концептуальну структуру і організацію змісту сайту. Зауважимо, що концептуальна структура — не те саме, що структура навігації. Мета діаграми ІА не у тому, щоб уявити повну специфікацію системи навігації сайтом, це зробити в іншому документі, де можна дозволити собі більший рівень детализации.

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

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

Пользователь взаємодіє зі системою у вигляді шляхів (paths).

Пользователь переміщається дорогами з допомогою дій (actions).

Эти дії можуть змусити систему згенерувати події (результати) (results).

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

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

.

Рис. 1а (лево): сторінка і файл Рис. 1б (право): набір сторінок, і файлов Набор сторінок (pagestack) представляє з діаграми групу функціонально ідентичних сторінок, навігаційні властивості яких несуттєві стосовно макроструктуре сайту. Аналогічно, набір фалів (filestack) представляє з діаграми групу файлів, доступом до якій здійснюється по спільної всіх системі навігації і який то, можливо класифікована як одне безліч (наприклад, колекція ігор чи бібліотека PDF документов).

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

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

Отношения між елементами з діаграми зображуються у вигляді простої лінії, або зв’язки (connector). Зв’язки неодмінно будуть трансформовані в навігаційні відносини, але не навігаційні відносини може бути відбиті на диаграмме.

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

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

Заметим, що стрілки з діаграми взаємодій немає семантичного значення «рух лише цього напрямі». Стрілки, зазвичай, представляють найбільш ймовірне собі напрямок руху пользователя.

.

Рис. 2а (верхня діаграма): проста деревоподібна структура Рис. 2б (нижня діаграма): той самий структура, що й діаграмі 2а, але представлена иначе Если по будь-яким причин необхідно заборонити спрямування напрямку (якщо справді мав місце необоротне дію, наприклад, видалення записи з убозівської бази даних), використовується перечеркивающая лінія (просто вертикальний штрих на протилежному кінці стрілки). Що стосується комплексної архітектури іноді може з’явитися потреба у тому, щоб додати додатковий покажчик напрями (голівку стрілки, arrowhead) близько елемента, розташованого з діаграми в висхідному потоці (вище), щоб чіткіше уявити собі напрямок руху.

.

Рис. За (лево гору): Стрілка показує напрям вниз по потоку, у напрямку до виконання задачи Рис. 3б (лево низ): Вертикальне штрих символізує заборона рух назад по пути Рис. 3 В (право): Безліч покажчиків полегшують розуміння диаграммы.

Связям і стрілкам може бути надано ярлики, але обмежити використання ярликів тих елементів тими випадками, коли необхідно позначити певна конкретна дію користувача, трохи більше. Якщо ярлики стають задовгими і заважають іншим елементам з діаграми, краще винести в легенду чи приложения.

.

Рис. 4а (лево): Приклад неправильного ярлыка Рис. 4б (центр):Пример правильного ярлыка Рис. 4 В (право): Посилання на ярлык Параллельный набор Символ паралельного набору (concurrent set) на діаграмі змальовується півколом, використовують у тому випадку, коли дію користувача генерує кілька одночасних подій (наприклад, запуск нового вікна разом з завантаженням документа в основне вікно, чи відображення сторінки разом з діалогом завантаження файла). САМІ Як і стрілки, символ паралельного набору має напрям. Елементи діаграми, розташовані вищої шляху поєднано з аналітичними дугою символу, нижче — з пласкою частиною (підставою) символа.

.

Рис. 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, З і D взаємно виключають одне одного, тобто. якщо є шлях B, то шляху З і D нет.

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

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

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

.

Рис. 13: Умовний селектор Например, символом умовного селектора можна з діаграми список сторінок із результатом пошуку пошукової машині. І тут сторінки результат розташовуватимуться вгору від селектора, умовою служитиме критерій пошуку, спадний шлях від селектора вестиме на проіндексовані машиною сторінки. Хоча це й умовна гілка, умовний селектор може згенерувати порожній шлях збереження та народних обранців необхідно відбити стосовно диаграмме.

Одно рішення, багато шляхів: кластеры

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

.

Рис. 14: Кластер Структура, зображена малюнку 14 функціонує як звичайна умовна гілка, але для однієї з умов уявляємо довше шляху. Тобто, якби значенням атрибута стане «X» користувач побачить шлях на сторінку B, і якщо значенням буде «Y», то користувач побачить шляху на сторінку З і 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» (internet є конкретним прикладом діаграми інформаційної архітектури та способів взаємодії користувача з веб-сайтом (автор ні втягнутий у розробку цього сайту). Ця нотація — це тільки перший крок у розробці уніфікованого візуального мови моделювання інформаційної архітектури та способів взаємодії користувача з веб-сайтом. Будь-які й зауваження і доповнення розглядаються за адресою [email protected].

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

Для підготовки даної роботи було використані матеріали із російського сайту internet.