Тектограммы — новое поколение майндмапов

Картинка кликабельна
TextBeauty

Софт для порядка


В области организации мыслей в виде заметок существует огромное количество ПО. Наибольшее распространение получили три подхода и соответственно три вида программ:

  1. Вики — гипертекстовые заметки
  2. Многоуровневые списки — программы-аутлайнеры (англ. outliners)
  3. «Интеллект-карты» (ментальные карты, «карты ума», майндмапы, mind maps)

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



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



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

Редизайн


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



В такую конструкцию можно вставить иллюстрацию; независимо от реальных размеров ограничим ее по ширине.



Иерархия визуально представляется текстом качественно разного размера, поэтому сделаем заголовки вложенных элементов тем же кеглем, что и описание верхнего элемента.



Вложенные элементы покажем ниже, так, чтобы они не нуждались в соединительных линиях. Расположить элементы можно в строку, столбцом, в несколько строк (подобно словам).



Если дополнить структуру межэлементыми связями, — то также в виде матрицы или графа.



Устройство многоуровневой системы легко читать, приближая и отдаляя карту. Для навигации не обойтись без изменения масштаба. У полученного способа отображения гораздо больше общего с обычной картой, чем у «интеллект-карт». Назовем этот способ системной картой, или тектограммой (греч. τεκτονικός — относящийся к строительству).

Преимущества: визуальная однородность, четко видны уровни, одновременно взглядом можно охватить 2-3 иерархических уровня. По сравнению с майндмапами — легче читается; по сравнению со списками — большая гибкость.

Главный недостаток формата в том, что для активной работы удобен только в интерактивном цифровом виде. Карандашом в блокноте такое не нарисуешь. Зато можно распечатать в виде плаката, только для чтения. На бумаге имеет смысл печатать тектограммы систем глубиной до 5 уровней. На формате А4 хорошо читаются двухуровневые тектограммы, А2 — трех­уровневые, А1 — четырехуровневые.

Тектограф


Тектограф — это инструмент для создания системных карт. Можно взглянуть на демо, а можно взять исходный код.

Скриншот


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

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

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

Работают горячие клавиши, отмена и возврат действий.

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

Пара примеров (картинки кликабельны):

42 Development Ltd.


javascript


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

Checklist


Библиотека на Гитхабе
Демо

Работает в Chrome и Firefox. С IE есть проблемы. Жду отзывов и замечаний в комментариях.
Поделиться публикацией

Комментарии 34

    +6
    Вы бы гифку или видео прикрутили и все стало бы ясно без текста. А вообще концепция мне нравится, круто!
      +3
      По своему опыту скажу, что в вопросе представления информации наибольшую роль играет классификация и группировка данных (логическая структура, если можно так сказать), а не способ представления этих групп. Так, хорошо сгруппированная информация может прекрасно читаться и в виде сплошного полотна текста с оглавлением.
        +1
        В этих вопросах полагаться на свой опыт нельзя. Разные люди воспринимают и обрабатывают информацию по-разному.
          0
          Не всегда. Мне вот нагляднее в виде схемы или рисунка, я «визуал».
          +1
          Изобретатель майнд-мапов Тони Бьюзен в книге «Супермышление» приводит достаточно много аргументов против структурирования информации в виде списков, настаивая на ествественности именно радиальной схемы.

          Уменьшение текста по мере углубления в проблему — спорное решение. Для лиц с ослабленным зрением это может быть серьезной проблемой.
            +2
            Так там всё зумится.
            Насколько я понял, в этом и фишка. Ты «не вдаёшься в подробности», пока не приблизишься. Охватываешь взглядом суть и приближаешь то место, которое тебя заинтересовало. По аналогии с яндекс.картами, когда ты не видишь названия мелких улиц до того как не «приблизишься»
              0
              Именно так.
                –1
                Так вот проблема в том, что я даже 2-й уровень не вижу без зума. Точнее вижу, а распознать, что написано — не могу.
                +1
                Изобретатель майнд-мапов Тони Бьюзен в книге «Супермышление» приводит достаточно много аргументов против структурирования информации в виде списков, настаивая на ествественности именно радиальной схемы.
                Всё равно не понимаю, чем «классическая» майнд-мапа (не беру в расчёт всякую «экзотику» типа Compendium) по своей сути отличается от «многоуровневого списка на стероидах с украшательствами», кроме возможности, в некоторых разновидностях, делать «горизонтальные» связи между узлами. Тот же список, только в виде радиально структурированной картинки.
                  0
                  Ага, я тоже задавал этот вопрос себе, пока читал книжку Бьюзена. Прочитав ее до конца, сформулировал ответ: ничем не отличаются, кроме радиальности. По мнению Бьюзена, радиальность — это архиважно.
                    0
                    Есть же простое объяснение:
                    Мозг эволюционировал для эффективной работы с картами местности и очень хорошо ассоциирует объекты с направлением на него и его положением относительно соседних объектов.

                    В предложенном в статье методе отображения используется аналогичная способность мозга. Мы очень хорошо запоминаем связи ЧТО и ГДЕ_НА_КАРТЕ. Даже в книгах мы запоминаем ЧТО на левой или правой странице и положением по вертикале (сверху, в середине или внизу).

                    Сравните это с линейным текстом или списком неразбитым на страницы.
                0
                В целом идея интересная, как дополнение уровня представления к картам памяти. То есть если на основе идеи разработать язык описания преставления для карты, то получится посмотреть авто0генерируюмую тектограмму для данного узла карты памяти.
                  0
                  Подозреваю, конвертер из формата FreeMind в автономный SVG подобного плана можно написать даже на XSLT.
                  0
                  Графическое оформление интересное и новаторское. Стиль «многоуровневое горизонтальное меню в сочетании с многоуровневыми вертикальными меню начиная с некоторого уровня», «хитрый» SVG в качестве основы (вещь, по-моему, до сих пор не оценённая из-за недостаточной межбраузерной совместимости ранних версий), идея «уместить всё на одной странице». В качестве «ещё одной обёртки для многоуровневых списков» более чем пойдёт.
                    0
                    Отличная идея. А есть подобный софт только с графикой и текстом? Что бы просто векторное полотно на которм можно зумить до посинения
                    0
                    Выглядит круто. Похоже на допиленный OneNote. Если будет удобный редактор, то цены не будет.
                      0
                      Редактор есть куда развивать. Что вы вкладываете в понятие «удобный»?
                        0
                        Ну, эээ, сравнимый с тем же OneNote. И чтобы тектограммы можно было смотреть/править на всех ОС и устройствах.
                          0
                          Понятно :)
                      +1
                      У Джефа Раскина есть целый концепт операционной системы, построенной по такому же точно принципу. Полностью этот принцип описан в его книге «Интерфейс».
                      +1
                      Не нашел ни одного упоминания Раскина или сервиса Prezi.
                        +1
                        а по делу — мне очень страшно вести свои заметки где-либо из-за боязни их потерять если с сервисом что-либо случится. поэтому все храню в плейн тексте. Мне кажется это самый важный аспект который должна учитывать программа. И маркдаун в этом плане лучик надежды.
                          0
                          Тоже не очень доверяю веб-севисам. Самый важный принцип любой программы (раз уже вы вспомнили Раскина) — данные пользователя священны. В текущей реализации работает автосохранение в localstorage, возможность экспорта данных в файл.
                          Программу можно поднять у себя локально (это статичный html+скрипты). Полноценного веб-сервиса пока не планировалось.
                          0
                          От Prezi взял идею режима показа презентации — последовательное приближение к разным элементам некоторой последовательности (пока не реализована).
                            0
                            А Раскина читали? Он в книге своей описывает очень похожую систему для управления госпиталем, кажется. Мне кажется, оттуда можно много чего хорошего подцепить. Его сын потом на тех же идеях сделал просмотр вкладок в файрфоксе (ctrl-shift-E)
                              0
                              Раскина читал. Интерактивная тектограмма (как и любая другая интерактивная карта) похожа на zoomable user interface, но это не одно и то же.
                          0
                          Напомнило realtimeboard.com

                          Я активно пользуюсь mindmap для разных целей. В основном в режиме мозгового штурма — накидываю все. Потом легко структурировать. Часть ваших тезисов, как минимум спорна. Но я за то, чтобы каждый нашел то, что ему удобно.

                          Ваш инструмент, как мне показалось, для разбора и аналитики. Т.е. есть, условно, много материалов и надо собрать один.

                          Мне кажется, как веб сервис — вполне. На маленьких экранах — не очень понимаю как.
                            0
                            Отличная идея для сбора слабо структурированной инфы в одном месте!
                              0
                              А это сложно — реализовать скроллинг и, одновременно, выравнивание текста блока — чтобы весь текст блока был виден, а не обрезался когда идет чуть глубокое скроллирование широких абзацов? А то приходится мышью двигать чтобы весь текст был на виду.

                              Очень интересный, и на первый взгляд, перспективный подход, кмк.
                                0
                                К сожалению, не понял, о чем вы. Опишите по-другому: как мне воспроизвести проблемную на ваш взгляд ситуацию?

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое