Софт для порядка
В области организации мыслей в виде заметок существует огромное количество ПО. Наибольшее распространение получили три подхода и соответственно три вида программ:
- Вики — гипертекстовые заметки
- Многоуровневые списки — программы-аутлайнеры (англ. outliners)
- «Интеллект-карты» (ментальные карты, «карты ума», майндмапы, mind maps)
Для текстовой информации (план, список задач, подборка ссылок) хватает многоуровневого списка. Список визуально однороден, его легко сканировать. Но стоит поместить в текст картинку, как она тут же перетягивает на себя внимание и разбивает поток чтения.
Майндмапы реализуются в виде дерева, листья которого могут содержать не только текст, но картинки. Текст должен быть коротким а картинки — маленькими, иначе структура испортится. Если иллюстрировать каждый элемент, то при большом объеме данных порядка на диаграмме не будет. Майндмап легко и интересно рисовать, но довольно тяжело читать.
Поставим задачу разработать еще один способ представления коротких заметок (мыслей, идей) в виде диаграммы, которая читалась бы не хуже списка или майдмапа.
Редизайн
Будем идти сверху вниз, от высшего иерархического уровня к низшим. Итак, есть элемент, состоящий из заголовка и описания. Газетные заголовки набираются гораздо большим кеглем, чем основной текст; сделаем и мы так же:
В такую конструкцию можно вставить иллюстрацию; независимо от реальных размеров ограничим ее по ширине.
Иерархия визуально представляется текстом качественно разного размера, поэтому сделаем заголовки вложенных элементов тем же кеглем, что и описание верхнего элемента.
Вложенные элементы покажем ниже, так, чтобы они не нуждались в соединительных линиях. Расположить элементы можно в строку, столбцом, в несколько строк (подобно словам).
Если дополнить структуру межэлементыми связями, — то также в виде матрицы или графа.
Устройство многоуровневой системы легко читать, приближая и отдаляя карту. Для навигации не обойтись без изменения масштаба. У полученного способа отображения гораздо больше общего с обычной картой, чем у «интеллект-карт». Назовем этот способ системной картой, или тектограммой (греч. ?????????? — относящийся к строительству).
Преимущества: визуальная однородность, четко видны уровни, одновременно взглядом можно охватить 2-3 иерархических уровня. По сравнению с майндмапами — легче читается; по сравнению со списками — большая гибкость.
Главный недостаток формата в том, что для активной работы удобен только в интерактивном цифровом виде. Карандашом в блокноте такое не нарисуешь. Зато можно распечатать в виде плаката, только для чтения. На бумаге имеет смысл печатать тектограммы систем глубиной до 5 уровней. На формате А4 хорошо читаются двухуровневые тектограммы, А2 — трехуровневые, А1 — четырехуровневые.
Тектограф
Тектограф — это инструмент для создания системных карт. Можно взглянуть на демо, а можно взять исходный код.
Сейчас это инструмент для индивидуальной работы. Система сохраняется в localstorage, может экспортироваться в файл формата JSON и импортироваться из него.
Есть «упрощенный редактор», в котором вся система представлена в текстовом виде в одном поле. В таком формате отсутствуют некоторые элементы форматирования систем. Сделано это для того, чтоб можно было фиксировать мысли «в потоке» и не тратить времени на оформление. Удобно накидать диаграмму в целом, затем понемногу править отдельные элементы.
Акцент сделан на работу с содержанием тектограммы, стилизация сведена к выбору одного из предустановленных стилей. Нужна красота — можно экспортировать в SVG и доводести до кондиции в векторном редакторе или сверстать как веб-страничку.
Работают горячие клавиши, отмена и возврат действий.
Как у любого другого инструмента, у тектографа есть свои ограничения. Лучше всего он подойдет для конспектирования, систематизации мыслей, моделирования программ, планирования статей и выступлений — всего, что имеет иерархическую структуру.
Пара примеров (картинки кликабельны):
Для списков дел, таблиц, блок-схем, иллюстраций Тектограф скорее всего не подойдет. Для каждого из этих типов данных есть свои удобные инструменты. Впрочем, никто не мешает попробовать. Вот так может выглядеть чеклист:
Библиотека на Гитхабе
Демо
Работает в Chrome и Firefox. С IE есть проблемы. Жду отзывов и замечаний в комментариях.
Комментарии (33)
Delphinum
18.12.2015 16:34+3По своему опыту скажу, что в вопросе представления информации наибольшую роль играет классификация и группировка данных (логическая структура, если можно так сказать), а не способ представления этих групп. Так, хорошо сгруппированная информация может прекрасно читаться и в виде сплошного полотна текста с оглавлением.
PavelSandovin
18.12.2015 19:39+1В этих вопросах полагаться на свой опыт нельзя. Разные люди воспринимают и обрабатывают информацию по-разному.
PavelSandovin
18.12.2015 19:43+1Изобретатель майнд-мапов Тони Бьюзен в книге «Супермышление» приводит достаточно много аргументов против структурирования информации в виде списков, настаивая на ествественности именно радиальной схемы.
Уменьшение текста по мере углубления в проблему — спорное решение. Для лиц с ослабленным зрением это может быть серьезной проблемой.
Botkin
18.12.2015 20:42+2Так там всё зумится.
Насколько я понял, в этом и фишка. Ты «не вдаёшься в подробности», пока не приблизишься. Охватываешь взглядом суть и приближаешь то место, которое тебя заинтересовало. По аналогии с яндекс.картами, когда ты не видишь названия мелких улиц до того как не «приблизишься»PavelSandovin
19.12.2015 13:28-1Так вот проблема в том, что я даже 2-й уровень не вижу без зума. Точнее вижу, а распознать, что написано — не могу.
Flammar
18.12.2015 21:18+1Изобретатель майнд-мапов Тони Бьюзен в книге «Супермышление» приводит достаточно много аргументов против структурирования информации в виде списков, настаивая на ествественности именно радиальной схемы.
Всё равно не понимаю, чем «классическая» майнд-мапа (не беру в расчёт всякую «экзотику» типа Compendium) по своей сути отличается от «многоуровневого списка на стероидах с украшательствами», кроме возможности, в некоторых разновидностях, делать «горизонтальные» связи между узлами. Тот же список, только в виде радиально структурированной картинки.PavelSandovin
19.12.2015 13:34Ага, я тоже задавал этот вопрос себе, пока читал книжку Бьюзена. Прочитав ее до конца, сформулировал ответ: ничем не отличаются, кроме радиальности. По мнению Бьюзена, радиальность — это архиважно.
Danov
20.12.2015 11:12Есть же простое объяснение:
Мозг эволюционировал для эффективной работы с картами местности и очень хорошо ассоциирует объекты с направлением на него и его положением относительно соседних объектов.
В предложенном в статье методе отображения используется аналогичная способность мозга. Мы очень хорошо запоминаем связи ЧТО и ГДЕ_НА_КАРТЕ. Даже в книгах мы запоминаем ЧТО на левой или правой странице и положением по вертикале (сверху, в середине или внизу).
Сравните это с линейным текстом или списком неразбитым на страницы.
skiedr
18.12.2015 20:11В целом идея интересная, как дополнение уровня представления к картам памяти. То есть если на основе идеи разработать язык описания преставления для карты, то получится посмотреть авто0генерируюмую тектограмму для данного узла карты памяти.
Flammar
18.12.2015 21:40Подозреваю, конвертер из формата FreeMind в автономный SVG подобного плана можно написать даже на XSLT.
Flammar
18.12.2015 22:43Графическое оформление интересное и новаторское. Стиль «многоуровневое горизонтальное меню в сочетании с многоуровневыми вертикальными меню начиная с некоторого уровня», «хитрый» SVG в качестве основы (вещь, по-моему, до сих пор не оценённая из-за недостаточной межбраузерной совместимости ранних версий), идея «уместить всё на одной странице». В качестве «ещё одной обёртки для многоуровневых списков» более чем пойдёт.
zim32
19.12.2015 00:28Отличная идея. А есть подобный софт только с графикой и текстом? Что бы просто векторное полотно на которм можно зумить до посинения
dobriykot
19.12.2015 01:09Выглядит круто. Похоже на допиленный OneNote. Если будет удобный редактор, то цены не будет.
Balaka
19.12.2015 10:47+1У Джефа Раскина есть целый концепт операционной системы, построенной по такому же точно принципу. Полностью этот принцип описан в его книге «Интерфейс».
Taoorus
19.12.2015 11:10+1Не нашел ни одного упоминания Раскина или сервиса Prezi.
Taoorus
19.12.2015 11:13+1а по делу — мне очень страшно вести свои заметки где-либо из-за боязни их потерять если с сервисом что-либо случится. поэтому все храню в плейн тексте. Мне кажется это самый важный аспект который должна учитывать программа. И маркдаун в этом плане лучик надежды.
icefall
19.12.2015 12:22Тоже не очень доверяю веб-севисам. Самый важный принцип любой программы (раз уже вы вспомнили Раскина) — данные пользователя священны. В текущей реализации работает автосохранение в localstorage, возможность экспорта данных в файл.
Программу можно поднять у себя локально (это статичный html+скрипты). Полноценного веб-сервиса пока не планировалось.
icefall
19.12.2015 12:26От Prezi взял идею режима показа презентации — последовательное приближение к разным элементам некоторой последовательности (пока не реализована).
shrimpsizemoose
19.12.2015 14:59А Раскина читали? Он в книге своей описывает очень похожую систему для управления госпиталем, кажется. Мне кажется, оттуда можно много чего хорошего подцепить. Его сын потом на тех же идеях сделал просмотр вкладок в файрфоксе (ctrl-shift-E)
icefall
20.12.2015 12:31Раскина читал. Интерактивная тектограмма (как и любая другая интерактивная карта) похожа на zoomable user interface, но это не одно и то же.
Vorchun
19.12.2015 11:16Напомнило realtimeboard.com
Я активно пользуюсь mindmap для разных целей. В основном в режиме мозгового штурма — накидываю все. Потом легко структурировать. Часть ваших тезисов, как минимум спорна. Но я за то, чтобы каждый нашел то, что ему удобно.
Ваш инструмент, как мне показалось, для разбора и аналитики. Т.е. есть, условно, много материалов и надо собрать один.
Мне кажется, как веб сервис — вполне. На маленьких экранах — не очень понимаю как.
akardapolov
19.12.2015 20:22А это сложно — реализовать скроллинг и, одновременно, выравнивание текста блока — чтобы весь текст блока был виден, а не обрезался когда идет чуть глубокое скроллирование широких абзацов? А то приходится мышью двигать чтобы весь текст был на виду.
Очень интересный, и на первый взгляд, перспективный подход, кмк.icefall
20.12.2015 12:33К сожалению, не понял, о чем вы. Опишите по-другому: как мне воспроизвести проблемную на ваш взгляд ситуацию?
rumkin
Вы бы гифку или видео прикрутили и все стало бы ясно без текста. А вообще концепция мне нравится, круто!