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

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


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

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

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



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



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

Редизайн


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



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



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



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



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



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

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

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

Тектограф


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

Скриншот


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

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

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

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

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

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

42 Development Ltd.


javascript


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

Checklist


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

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

Комментарии (33)


  1. rumkin
    18.12.2015 16:09
    +6

    Вы бы гифку или видео прикрутили и все стало бы ясно без текста. А вообще концепция мне нравится, круто!


  1. Delphinum
    18.12.2015 16:34
    +3

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


    1. PavelSandovin
      18.12.2015 19:39
      +1

      В этих вопросах полагаться на свой опыт нельзя. Разные люди воспринимают и обрабатывают информацию по-разному.


  1. PavelSandovin
    18.12.2015 19:43
    +1

    Изобретатель майнд-мапов Тони Бьюзен в книге «Супермышление» приводит достаточно много аргументов против структурирования информации в виде списков, настаивая на ествественности именно радиальной схемы.

    Уменьшение текста по мере углубления в проблему — спорное решение. Для лиц с ослабленным зрением это может быть серьезной проблемой.


    1. Botkin
      18.12.2015 20:42
      +2

      Так там всё зумится.
      Насколько я понял, в этом и фишка. Ты «не вдаёшься в подробности», пока не приблизишься. Охватываешь взглядом суть и приближаешь то место, которое тебя заинтересовало. По аналогии с яндекс.картами, когда ты не видишь названия мелких улиц до того как не «приблизишься»


      1. icefall
        19.12.2015 12:29

        Именно так.


      1. PavelSandovin
        19.12.2015 13:28
        -1

        Так вот проблема в том, что я даже 2-й уровень не вижу без зума. Точнее вижу, а распознать, что написано — не могу.


    1. Flammar
      18.12.2015 21:18
      +1

      Изобретатель майнд-мапов Тони Бьюзен в книге «Супермышление» приводит достаточно много аргументов против структурирования информации в виде списков, настаивая на ествественности именно радиальной схемы.
      Всё равно не понимаю, чем «классическая» майнд-мапа (не беру в расчёт всякую «экзотику» типа Compendium) по своей сути отличается от «многоуровневого списка на стероидах с украшательствами», кроме возможности, в некоторых разновидностях, делать «горизонтальные» связи между узлами. Тот же список, только в виде радиально структурированной картинки.


      1. PavelSandovin
        19.12.2015 13:34

        Ага, я тоже задавал этот вопрос себе, пока читал книжку Бьюзена. Прочитав ее до конца, сформулировал ответ: ничем не отличаются, кроме радиальности. По мнению Бьюзена, радиальность — это архиважно.


        1. Danov
          20.12.2015 11:12

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

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

          Сравните это с линейным текстом или списком неразбитым на страницы.


  1. skiedr
    18.12.2015 20:11

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


    1. Flammar
      18.12.2015 21:40

      Подозреваю, конвертер из формата FreeMind в автономный SVG подобного плана можно написать даже на XSLT.


  1. Flammar
    18.12.2015 22:43

    Графическое оформление интересное и новаторское. Стиль «многоуровневое горизонтальное меню в сочетании с многоуровневыми вертикальными меню начиная с некоторого уровня», «хитрый» SVG в качестве основы (вещь, по-моему, до сих пор не оценённая из-за недостаточной межбраузерной совместимости ранних версий), идея «уместить всё на одной странице». В качестве «ещё одной обёртки для многоуровневых списков» более чем пойдёт.


  1. zim32
    19.12.2015 00:28

    Отличная идея. А есть подобный софт только с графикой и текстом? Что бы просто векторное полотно на которм можно зумить до посинения


    1. icefall
      19.12.2015 12:13

      Посмотрите PLOK


    1. VEnis
      21.12.2015 01:30

      Самый продвинутый тут — www.thebrain.com


  1. dobriykot
    19.12.2015 01:09

    Выглядит круто. Похоже на допиленный OneNote. Если будет удобный редактор, то цены не будет.


    1. icefall
      19.12.2015 12:37

      Редактор есть куда развивать. Что вы вкладываете в понятие «удобный»?


      1. dobriykot
        21.12.2015 14:55

        Ну, эээ, сравнимый с тем же OneNote. И чтобы тектограммы можно было смотреть/править на всех ОС и устройствах.


        1. icefall
          21.12.2015 15:01

          Понятно :)


  1. Balaka
    19.12.2015 10:47
    +1

    У Джефа Раскина есть целый концепт операционной системы, построенной по такому же точно принципу. Полностью этот принцип описан в его книге «Интерфейс».



  1. Taoorus
    19.12.2015 11:10
    +1

    Не нашел ни одного упоминания Раскина или сервиса Prezi.


    1. Taoorus
      19.12.2015 11:13
      +1

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


      1. icefall
        19.12.2015 12:22

        Тоже не очень доверяю веб-севисам. Самый важный принцип любой программы (раз уже вы вспомнили Раскина) — данные пользователя священны. В текущей реализации работает автосохранение в localstorage, возможность экспорта данных в файл.
        Программу можно поднять у себя локально (это статичный html+скрипты). Полноценного веб-сервиса пока не планировалось.


    1. icefall
      19.12.2015 12:26

      От Prezi взял идею режима показа презентации — последовательное приближение к разным элементам некоторой последовательности (пока не реализована).


      1. shrimpsizemoose
        19.12.2015 14:59

        А Раскина читали? Он в книге своей описывает очень похожую систему для управления госпиталем, кажется. Мне кажется, оттуда можно много чего хорошего подцепить. Его сын потом на тех же идеях сделал просмотр вкладок в файрфоксе (ctrl-shift-E)


        1. icefall
          20.12.2015 12:31

          Раскина читал. Интерактивная тектограмма (как и любая другая интерактивная карта) похожа на zoomable user interface, но это не одно и то же.


  1. Vorchun
    19.12.2015 11:16

    Напомнило realtimeboard.com

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

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

    Мне кажется, как веб сервис — вполне. На маленьких экранах — не очень понимаю как.


  1. dimkanevidimka
    19.12.2015 14:38

    Отличная идея для сбора слабо структурированной инфы в одном месте!


  1. akardapolov
    19.12.2015 20:22

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

    Очень интересный, и на первый взгляд, перспективный подход, кмк.


    1. icefall
      20.12.2015 12:33

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