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

Что такое ментальные карты

Ментальные карты (mindmap) – графический инструмент облегчающий мыслительную деятельность. Человеку неудобно воспринимать длинные структурированные тексты и иерархические списки и их можно заменить более удобной для восприятия схемой.

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

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

Мой алгоритм работы с МК обычно такой:
1. Наброски элементов карты на бумаге в выходной день в офисе, где можно разложить большие листы и никто не мешает, наброски во время совещания или в метро и прочих неудобных местах, где настигла мысль, на клочках бумаги
2. Перенесение с бумаги в электронную форму, оформление и детализация
3. Распечатка карты на цветном принтере А3, чтобы в любой момент делать пометки или использовать как конспект для обсуждения. Ценные карандашные пометки переносятся затем в электронную версию и распечатываются

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

Программное обеспечение для создания ментальных карт

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

FreeMind

Бесплатная с открытым кодом, кросс платформенная (требует Java-machine), очень быстрая и легкая. В мае 2008 вышла новая версия - FreeMind 0.9.0 beta.

Достоинства программы:
• Приятный легкий дизайн и удобный интерфейс.
• Использует открытый формат для хранения МК (.mm)

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

Если есть потребность просто работать с ментальными картами FreeMind 0.8.1 – отличный удобный инструмент, но дополнительные функции: организация материала и управление проектами развиты слабо.

MindJet MindManager7 Pro

Монстрообразный комплекс с интерфейсом в стиле MSOffice2007. Есть версии под Win и Mac. Интерфейс сложный и неудобный, но спасает то, что основная работа делается с использованием небольшого количества горячих клавиш и правой кнопки мыши. Чтобы воспользоваться некоторыми из функций программы надо предварительно изучать инструкцию.

Достоинства:
1. К каждому пункту карты можно приложить неограниченное количество дополнительных материалов, сделать пометки с форматированием, иллюстрациями и гиперссылками. Весь материал по проекту, как относящийся к разработке (включая старые версии), так и содержательный материал сайта может быть прикреплен к карте и доступен по одному клику.
2. Развитые средства управления проектом. Я использовал только значки степени готовности задачи и маркировку ключевых контрольных точек. Это позволяет с одного взгляда понять состояние дел по проекту в целом и увидеть узкие места.
3. Интеграция с Microsoft Visio и Microsoft Project
4. В системе заявлены средства управления ресурсами – построение временных графиков и диаграмм Ганта.

Недостатки:
1. Цена примерно $560, есть версия Lite за ~ $150 и бесплатный MindManager Viewer
2. Требовательность к ресурсам. Долго открывается даже пустая программа, а когда в ней был разработан сайт со сложной структурой (до сотни страниц с парой сотен документов и фотографий общим объемом 1,1 Гб) время открытия на PIV 2,6GHz/512Mb перевалило за 7 минут. Впрочем, основные манипуляции с картой отрабатывались после загрузки довольно быстро и только на некоторых операциях программа сильно тормозила.
3. Не очень удобный интерфейс.

На русском языке достаточно информации для того, что бы начать работать с ментальными картами, а для глубокого изучения и выработки своего стиля придется копать Интернет англоязычный или купить/скачать книги на русском языке.

Использование ментальных карт для вебразработки

Получение материалов от заказчика

На начальных этапах работы над сайтом требуется получить материалы от заказчика и понять каким заказчик хочет видеть свой сайт.

Как обычно получают материалы:
1. Самый частый вариант. Если структура сайта не сложна и понятна заказчику и исполнителю заранее (нормальное явление для простых сайтов) можно рисовать структуру и строить сайт , а уже потом наполнять его силами исполнителя или заказчика.
   Недостаток: в процессе наполнения могут выявиться «забытые» группы материалов, важные, но не вписывающиеся в придуманную структуру
2. Система папок с материалами и описаний страниц и структуры. Достаточно трудоемко, как для заказчика на этапе сбора материала и формирования описаний, так и для исполнителя при попытке расшифровать логику заказчика.
3. Предварительный прототип сайта с возможностью заказчику добавлять материалы или указывать при пересылке куда тот или иной материал прикреплять. Трудоемко и неудобно.

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

Как организовать сбор материала при помощи ментальных карт
1. Установить MindJet MindManager. Стоит программа дорого, но есть trial и Lite версии. Ну и кряки тоже есть.
2. Нарисовать в присутствии заказчика простую структуру (5-10 мин)
3. Обучить заказчика работе с программой. На данном этапе требуются только простейшие манипуляции, обучение обычного пользователя Windows займет 10-20 минут.

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

4. Получить представления заказчика о структуре сайта.

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

• на верхнем уровне структуры может быть не более 5 (7) разделов
• на вводных и структурных страницах должно быть не более чем 3 абзаца по 3 предложения
• не должно быть «висящих» (на которые нет ссылок) страниц и документов
• вся важная информация должна быть не далее 1-2 (3) уровня
• другие 1000 и 1 обязательное требование к структуре вебсайта

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

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

Работа с информационной архитектурой

Предварительные наброски логики сайта

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

Примеры оформления ментальных карт
с сайта mindjet.com

Работа с заказчиком

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

Выясняются вопросы:
1. Цель и задачи сайта.
   Конечно, цель и задачи желательно знать до начала работы, но возвращаться к этому вопросу стоит на каждом этапе. Когда заказчику задаются вопросы: «Как материал N помогает решать задачи сайта?» и «Какие из страниц/разделов служат главной цели сайта?» не только материал находит свое место в структуре, но иногда сами цели и задачи переформулируются или меняются
2. Процесс наполнения и развития сайта после его создания
3. Представление заказчика о структуре сайта

Обсуждение и согласование структуры сайта.
Весь материал и структура даже очень сложного сайта легко помещаются на 1 странице формата А3, тк любая программа позволяет сворачивать дочерние ветки.
К встрече с заказчиком стоит подготовить 3-4 листа с разным уровнем детализации и разными предварительными вариантами структуры сайта.
Пометки цветными карандашами прямо на карте и сделать легче, и воспринимаются они лучше пометок в блокноте.

Разные этапы обсуждения одного и того же сайта с заказчиком

Разработка информационной архитектуры

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

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

Подготовка материалов для вебразработчиков

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

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

Ментальная карта как схема сайта.
По количеству специальных обозначений ментальная карта, конечно, чуть уступает нотации Гаррета, зато разницу в легкости ее восприятия человеком словами описать нельзя – смотрите пример:

Ментальная карта (слева) была автоматически конвертирована из MindManager в Visio

Прототипирование и функциональность страниц

Большинство страниц имеют одинаковую структуру и функциональность, обычно на сайте используется 4-5 видов страниц. Структуру страницы можно отобразить графическим эскизом сделанным любым способом (Visio, Illustrator, от руки), а функциональность описать в приложенной к соответствующей ветви МК заметке для вебмастера.

Реальный опыт

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

Резюме

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

Что почитать:

Что такое «хорошее» ТЗ на сайт?

Прототипирование web-сайтов. Собирая воедино.

Русскоязычные материалы о методе ментальных карт.