Что вы думаете о нотации Гарретта?

Любая нотация требует изучения сначала разработчиком схемы, затем ее читателем. В нотации Гарретта лично я сломался на треугольничке и трапеции. Сразу вспомнил институтские мучения с блок‑схемами.

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

Заметьте также легкое улучшение места соединения стрелок, ранее упомянутое в совете о паутине на схеме.

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

Комментарии

Николай Товеровский

Мне кажется, что для такого проектирования вполне подойдет UML‑диаграмма состояний (State Chart).

Во‑первых, UML — мощная нотация, позволяющая много что показать (условия переходов, аргументы, ограничения, время…)

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

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

Алех Зибру

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

Виктор Глушенков

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

Николай Товеровский

Виктор, схема Артема (вы же ту что со скриншотами имели в виду?) мне тоже нравится. Но, отвечая на ваш вопрос, хотелось бы спросить у Артема: «А как вы делаете такие схемы?» Я думаю, что рисуют в графическом редакторе. А это, во‑первых, не каждый умеет, а во‑вторых, это долго.

Большим плюсом UML является наличие огромного количества готовых CASE‑средств. Многие даже включают средства прямого и обратного проектирования (получения кода из диаграммы и диаграммы из кода соответственно).

И, повторюсь, считаю, что UML вещь настолько распространенная, что можно считать, что ее знают все.

Дмитрий Зимин

Виктор, есть один важный нюанс. «Нотация» (если так можно выразиться) Артема хорошо подходит, по его же словам, для описания структуры сайта. И только структуры. Преимущества же стандартных нотаций в другом. Они позволяют описывать ещё и процессы. При этом «понятность» такой схемы не так сильно зависит от способностей человека, разрабатывающего её. Артем и его команда в этом спецы, им проще выбрать наиболее подходящий способ для каждой конкретной ситуации. А представьте каково, например, С++ программисту, который в интерфейсах не очень‑то силен. Ему нужны готовые средства (все равно что АКП для обычного непрофессионального водителя).

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

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

Виктор Глушенков

Дмитрий, если взглянуть на перечисленные Артемом элементы: «прямоугольник, он же со скругленными краями, стрелки, возможно, легкие объединяющие плашки или рамки», то этот набор кажется лишенным специфики веб‑дизайна. Линия, связывающая два объекта, изображает связь; стрелка — переход; плашка группирует объекты — это естественные образы для человека. Здесь используются скорее изобразительные приемы. А в более формализованных нотациях часто встречаются элементы, смысл которых неочевиден, если не прочитать документации. Например, что означает трапеция на гриле из нотации Гаррета?

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

Также по своему опыту могу сказать, что существующие CASE‑средства ужасны. Вот в них как раз делать что‑то долго, они требуют очень большой детальности описания и работают по заложенному в них сценарию. Шаг влево‑вправо, и они начинают мешать, а не помогать. К тому же, на мой взгляд, практически невозможно с пользой применять генерацию кода по модели и обратно, это просто не работает.

Проверим теорию Николая: Артем, вы знаете УЯМ?

Артем Горбунов

Виктор, по крайней мере, я понимаю, о чем вы, даже когда‑то рисовал диаграмму классов :‑)

Сейчас нотацию не читаю, это точно.

Иван Неслуховский

У меня есть предложение поэкспериментировать. Давайте каждый нарисует и пришлет комментарием схему, описывающую эту вот страницу с советом в виде нотации Гарретта (‑;

Интересно, насколько результаты будут разными, и насколько способны такие схемы внести ясность в понимание структуры страницы и её взаимоотношения с другими страницами и компонентами, допустим, для программиста или дизайнера.

Сергей Долгов

Соглашусь с Иваном: недавно мы поставили в коллективе педагогов одной школы эксперимент на выявление умения пользоваться граф‑схемами. Мама дорогая! Кто только что под этим ни понимает — и немудрено, у нас даже разработчики, которые «в хвост и в гриву», и те не могут договориться. Тогда мы сделали эксперимент «на понимание» — дали текст, попросили его представить в виде граф‑схемы и потом восстановить текст. Как, думаю, вы догадались, результат сильно отличался от источника.

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

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

Что касается нотаций — наиболее близко к решению этого подошли, на наш взгляд, Макинзи, к их принципам я рекомендую обращаться в первую очередь.

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

Иван Неслуховский

На мой взгляд, это очень «слабая» нотация. Она не помогает уяснить главное ни дизайнеру, ни программисту. И тому, и другому тут нужны компоненты, из которых страницы состоят, нужно хорошее понимание общей структуры, подгружаемых страниц, потоков данных, перенаправлений. Всего этого в нотациях Гарретта нет. Мне сложно представить нормальный сложный сайт в этой нотации.

Посмотрите на пример (http://www.jjg.net/…/files/metafilter_ia.pdf, PDF), который автор нотации дает на своей странице, этот пример ничего не объясняет, многие обозначения так и остались «за кадром», хотя и так одолевают сомнения в их необходимости. В нотации акцент ставится на конкретную страницу, увязать ее в сложную структуру почти невозможно без избыточного увеличения информационного шума.

Комментарии

Рекомендуем другие советы

Свежак

Текст

Дизайн

Вёрстка

Визуализация

Текст

Бирман пилит таблицы

По следам Эдварда Тафти