Визуализация проекта ИС

Инструменты визуализации ТЗ Ментальная карта (mindmap) – инструмент создания графических схем для помощи мыслите тельному процессу автора или группы. Графическая нотация

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

Базовые пресуппозиции Ментальных карт В основе Ментальных карт лежит предположение, что для человеческого мозга естественно: – Ассоциативное (радиантное) мышление. – Иерархическое мышление. А также предположение, что для структурирования, понимания, обработки и запоминания информации лучше всего подходит: Визуальное мышление. Даже для "аудиалов" и "кинестетиков", у которых визуальное мышление не столь сильно развито. Т.е. в большинстве случаев "слабая" визуальная система лучше справится с обработкой и структурированием информации, чем "сильная" аудиальная или кинестетическая.

Законы интеллект-карт Законы интеллект-карт разделяются на – законы содержания и оформления и – законы структуры фрагмент из книги Тони Бьюзена «Супермышление»:

Законы содержания и оформления Используйте эмфазу – Всегда используйте центральный образ. – Как можно чаще используйте графические образы – Для центрального образа используйте три и более цветов. – Чаще придавайте изображению объем, а также используйте выпуклые буквы – Пользуйтесь синестезией (комбинированием всех видов эмоционально-чувственного восприятия). – Варьируйте размеры букв, толщину линий и масштаб графики. – Стремитесь к оптимальному размещению элементов на интеллект-карты. – Стремитесь к тому, чтобы расстояние между элементами интеллект-карты было соответствующим. Ассоциируйте – Используйте стрелки, когда необходимо показать связи между элементами интеллект-карты. – Используйте цвета. – Используйте кодирование информации. Стремитесь к ясности в выражении мыслей – Придерживайтесь принципа: по одному ключевому слову на каждую линию. – Используйте печатные буквы. – Размещайте ключевые слова над соответствующими линиями. – Следите за тем, чтобы длина линии примерно равнялась длине соответствующего ключевого слова. – Соединяйте линии с другими линиями и следите за тем, чтобы главные ветви карты соединялись с центральным образом. – Делайте главные линии плавными и более жирными. – Отграничивайте блоки важной информации с помощью линий. – Следите за тем, чтобы ваши рисунки (образы) были предельно ясными. – Держите бумагу горизонтально перед собой, предпочтительно в положении «ландшафт». – Старайтесь располагать слова горизонтально. Вырабатывайте собственный стиль.

Законы структуры Соблюдайте иерархию мыслей. Используйте номерную последовательность в изложении мыслей.

Как рисовать 1.Центральный образ (символизирующий основную идею) рисуется в центре листа. 2.От центрального образа отходят ветки первого уровня, на которых пишутся слова ассоциирующиеся с ключевыми понятиями, раскрывающими центральную идею. 3. От веток первого уровня при необходимости отходят ветки 2 уровня разукрупнения, раскрывающие идеи написанные на ветках 1-го уровня. 4.По возможности используем максимальное количество цветов, для рисования карты. 5. Везде, где возможно, добавляем рисунки, символы, и другую графику, ассоциирующиеся с ключевыми словами. 6. При необходимости рисуем стрелки, соединяющие разные понятия на разных ветках. 7. Для большей понятности нумеруем ветки и добавляем ореолы. 8.По материалам сайта:

1.Центральный образ (символизирующий основную идею) рисуется в центре листа.

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

3. От веток первого уровня при необходимости отходят ветки 2 уровня разукрупнения, раскрывающие идеи написанные на ветках 1-го уровня.

4. По возможности используем максимальное количество цветов, для рисования карты.

5. Везде, где возможно, добавляем рисунки, символы, и другую графику, ассоциирующиеся с ключевыми словами.

6. При необходимости рисуем стрелки, соединяющие разные понятия на разных ветках.

7. Для большей понятности нумеруем ветки и добавляем ореолы.

Пример 1. История Сингапура 600 школьников из 15-ти сингапурских школ нарисовали самую большую интеллект-карту в мире - размером с два бадминтонных корта, которую вывесили на здании Сингапурского Института Менеджемента:

Разработка информационной архитектуры Главным достоинством метода ментальных карт при разработке информационной архитектуры является способность визуализировать «многомерность» вебсайта. Под «многомерностью вебсайта» здесь понимается различное представление одного и того же материала для разных целей и с разных точек зрения: контент-менеджер видит структуру материалов; PR- специалист помечает яркие точки для формирования образа сайта или организации; специалист по юзабилити думает над возможными путями пользователя по сайту. В реальной жизни работу по всем вебспециальностям часто выполняет один человек и разумный компромисс обычно достижим.

Пример 2. Ментальная карта ТЗ на разработку ИС

Пример 3. Ментальная карта на разработку сайта

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

Основные аудитории 1.Спонсоры проектов и менеджеры проектов используют диаграммы, чтобы получить общее представление о структуре и форме проекта. 2.Редакторы используют диаграммы, чтобы определить требования к содержанию (информационному наполнению) проекта. 3.Дизайнеры и дизайнеры интерфейсов используют диаграммы, чтобы определить количество типов страниц с уникальным дизайном, а так же для того, чтобы получить общее представление о системе навигации и требованиях к интерфейсу. 4.Веб-Технологи используют диаграммы, чтобы определить функциональные требования. 5.Информационные архитекторы и проектировщики интеракций используют диаграммы для дальнейшей разработки более детализованных документов, представляющих навигацию и интерфейс отдельных страниц.

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

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

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

Рис. 1б : набор страниц и файлов Рис. 1а: страница и файл Рисунок 1

Отношения: связи и стрелки Отношения между элементами на диаграмме изображаются в виде простой линии, или связи (connector). Связи обязательно будут трансформированы в навигационные отношения, но не все навигационные отношения могут быть отражены на диаграмме. В случае моделирования информационной архитектуры, отношения чаще всего отображаются через иерархическую организацию страниц (в виде деревьев). Однако это не всегда требуется и в некоторых случаях вообще не рекомендуется. На диаграмме взаимодействий связи должны быть направленными, чтобы представлять пути пошагового выполнения пользователем той или иной задачи. Для этого используются стрелки (arrows). Далее термины выше (восходящий, upstream) и ниже (нисходящий, downstream) в потоке (пути) определяют расположение элемента на диаграмме. Заметим, что стрелки на диаграмме взаимодействий не имеют семантического значения «движение только в этом направлении». Стрелки, как правило, представляют наиболее вероятное направление движения пользователя.

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

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

Нотация ДЖ. Гаррета Графическая нотация для документирования информационной архитектуры и взаимодействий пользователя с веб-сайтом A visual vocabulary for describing information architecture and interaction design автор: © Джесс Джеймс Гарретт перевод: © 2001 Филипп ЧудиновДжесс Джеймс ГарреттФилипп Чудинов