ЦИКЛ «МЕТОДОЛОГИЯ ПРОЕКТИРОВАНИЯ»
Ситуации проектирования на примерах дизайна в цифровой среде
Исследование особенностей ситуаций проектирования. Уровни сложности ситуаций
Данная статья была написана в 2022 году ходе работы над книгой «Как проектировать цифровые инструменты и их интерфейсы». Я разбирался с тем, когда возникает ситуация проектирования и из чего она состоит. Позже я решил исключить этот материал из книги, где она находилась в разделе «О типологии ситуаций и содержании деятельности проектирования». Публикуется в сокращении.
Различие ситуаций проектирования
В процессе работы над книгой «Как проектировать» мне захотелось разобраться с тем какие ситуации проектирования бывают на практике и из чего они состоят. Проектирование обладает всеми тремя фокусами осмысленной продуктивной деятельности, а именно — оно целеустремлено, должно быть оснащено адекватными средствами осуществления и, наконец, оно ситуативно, то есть прилаживается к конкретике отдельных ситуаций.

Поэтому я рассматривал все известные мне разновидности проектных ситуаций с точки зрения их особенностей и различий, а также характерных для них целей и средств. Вот полный свод таких ситуаций.
Разберём с примерами четыре ситуации конструирования — основное содержание созидательной работы проектировщика.
Три ситуации конструирования
Под конструированием мы будем понимать процесс составления системы, выполняющей заданный набор функций, из заданного набора элементов при помощи известного набора операций. Здесь важно, что и элементы, и операции выбираются из заранее подготовленной нормативной базы. Такая база должна существовать и быть доступна. Например, в детском конструкторе содержатся болты, гайки, шайбы, пластины и уголки с отверстиями под крепления. Юному конструктору будут знакомы либо даны в виде инструкции во-первых, операции — что можно сделать с элементами набора; во-вторых, образцы конкретных конструкций таких как краны и машины, так что, он сможет собрать их из имеющегося набора.
1. Перенастройка. Сложность: 1
Самой простой ситуацией проектирования является конструкторская ситуация, когда нужно лишь настроить известное эталонное решение под имеющуюся деятельностную ситуацию. Другими словами, речь идёт о настройке образцового решения. Примером таких ситуаций будет дизайн информационного сайта по готовому шаблону. Допустим вам заказали сайт для волнистых попугайчиков. У вас под рукой есть шаблон сайта для попугайев лори и использование шаблонов допустимо в вашей ситуации. Вы смело берёте его в работу, потому что структурно там всё уже готово. Вам достаточно чуть поправить цветовое решение и поменять содержание.

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

В ситуациях, требующих лишь конфигурирования, нет полного набора операций, свойственных проектированию, но сохраняется потребность в законченном своде знаний о будущем объекте до начала его производства. Поэтому это всё ещё проектирование, однако даётся оно сильно легче. Как следствие, здесь снижены и требования к проектировщику. У вас может быть в наличии экземпляр предыдущего проекта со всей проектной документацией по нему. Вы вносите новые входные данные, проверяете, корректируете, пока все требования не будут удовлетворены, и проект готов.
Рис. 1.2.4. Варианты конструирования в ситуации конфигурирования. Две сайта с функциональностью музыкального проигрывателя отличаются только внешней стилизацией при единой структуре и функциональности.
2. Прилаживание. Сложность: 2
Конструкторской ситуацией посложнее является ситуация, которую я называю прилаживанием. Чаще всего трудно обойтись без «допиливания» отдельной части эталонного решения под конкретную ситуацию. Например, принятые ранее технические решения при добавлении в систему нового приводят к нежелательному эффекту от которого важно избавиться, причем не путём капитуляции, то есть отказа от решения, а путём доработки этого решения при помощи его полной или частичной пересборки. Может потребоваться местное микро-изобретение, некоторый «волшебный» шаг, с которым все обнаруженные недостатки будут элегантно устранены.
Эвристика проектирования
Маркер двух проблем. Если есть два или более проблемы в одном блоке или агрегате, это явный признак того, что пришло время для его перепроектирования. Как правило, находится одно элегантное решение, которое покрывает сразу несколько уже имеющихся проблем
На картинке ниже в пункте 1 к карточкам выбора добавили символы в угол, и композиционная конструкция «сломалась»: тяжелые символы теперь перетягивают на угол, баланс и стабильность пропали. Как только мы зафиксировали эту проблему мы оказались в сутации прилаживания или необходимости адаптации. В пункте 2 дизайнеров предложены два варианта коррекции конструкции. В варианте слева явно перешли к выключке текста влево, а размеры изображений и символов уменьшили. В варианте справа оставили изображение крупным и центрированным, но символы собрали в прямоугольный блок, отделив их через низкоконтрастную вертикальную черту.
Рис. 1.2.5. Переход из пункта 1 в пункт 2 осуществлён путём прилаживания конструкции
Если читателю непонятна целесообразность таких преобразований, поясним. В примере выше в качестве конструкции приведена графическая композиция, а в качестве её стандартного критерия качества использовались эстетические критерии такие как гармоничность и уравновешенность композиции. Если рассматривать карточки с точки зрения работоспособности их как носителей инфрмации, то достаточно было бы хоть как-то разместить требуемую информацию, чтобы подать надлежащий сигнал. С этой точки зрения проблем в предложенном системе не было изначально: нужно было отобразить данные, их отобразили. Однако требования элегантности в области эстетики заставили доработать конструкцию.

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

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

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

Ниже приведён пример сборки конструкции интерфейса пользователя, эталонов которой явно не существовало прежде. Это интерфейс сервиса, в который стекается поток анкет с данными о потребностях людей в займе. Этой информацией делятся между собой и потребляют её участники рынка микрокредитных организаций. Об этой сфере известно, что если человек не получил займ в одном месте, то он его получит примерно через 7 минут у конкурента с вероятностью 95%. То есть важно очень быстро находить подходящие под профиль твоей организации анкеты, чтобы успеть позвонить и предложить свой кредитный продукт тому, кто его ищет.
Рис. 1.2.6. Анкетоприёмник. Дизайн Андрея Шапиро и Намора Вотилава, Byndyusoft
В целевые функции конструкции интерфейса входила настройка сущности, которая получила название «анкетоприёмник», управление её состоянием и визуализация — результат его работы. Сущность анкетоприемник — это контейнер-сборщик, в который засасываются как пылесосом все анкеты, соответствующие заданным параметрам. Параметры, настраивающие анкетоприёмник, указывают прямо в его теле. Тело анкетоприёмника, будучи схлопнутым, вливается в перечень своих собратьев, отображая лишь состояние активности, наименование и статистические показатели своей работы. Будучи же расхлопнутым, анкетоприёмник даёт редактировать настройки захвата анкет, подходящих по параметрам, а также состав данных небольшой выборки этих анкет для более наглядной проверки его настройщиком.

Если перчислить все элементы и операции, примененные здесь в процессе конструирования, то получится следующее.

Таблица 1.2.2. Состав эталонных элементов анкетоприёмника
Выпадающий список · Dropdown list
Способ выбора одного из нескольких вариантов
Поле ввода · Input
Способ получить текстовые данные, путём последовательного ввода отдельных символьных значений
Выбирайка · Segmented control
Способ выбора одного из нескольких вариантов. Скорость и наглядность выше чем у выпадающего списка
Кнопка · Button
Способ подачи команды
Иконка · Icon
Способ привлечения внимания и смысловой маркировки содержания за счёт предъявления рядом с ним цветового пятна и графического образа
Таблица · Table
Наилучший способ для сравнения друг с другом данных, схожих по структуре
Строка состояния · Status bar
Отображение обобщённой информации к большому набору данных. Применяется, например, вместе с таблицами
Выключатель · Toggle, toggler
Способ моментально включить-выключить какой-то механизм
Заголовок поля
Способ пояснить назначение элемента интерфейса
Заголовок текста · Header
Способ структурировать содержание путём наименования и группировки крупной «линейкой»
агрегат
Финализатор формы
Способ конструкционной сборки окончания форм
агрегат
Фактоид
Би-система, состоящая из числа и описывающего его текста
агрегат
Поле ввода с нагнетателем в форме набора тэгов · Search input + tags
Способ выбора нескольких значений путём поиска в некоторой базе и складирования их в поле. Поле при этом используется и как ввод фразы для поиска, и как хранилище выбранного
механика
Вкладыш · Inlay
Способ разворачивать содержание части таблицы или другого сложного контентного блока путём расхлапывание-схлапывания
Перечень 1.2.1. Применённые операции конструирования
  • Выбор надлежащих элементов под отдельные функции, согласно ситуации: выбранной платформы и конечного устройства, требований к интерфейсу.
  • Объединение элементов и их групп в смысловые и графически цельные связки.
  • Структурная и смысловая разметка макета за счёт применения принципов гештальта: близости, фигура-фон, похожесть, связности, продолжения и т. д. Критерии готовности здесь в смысловой ясности и достижении композиционной гармонизации всех прямоугольников макета.
  • Проверка сквозного прохода данных через весь механизма интерфейса (часть испытательной ситуации).

Возможно кто-то из опытных проектировщиков интерфейса заметит, что тех же результатов можно было бы добиться иначе. И он будет прав, ведь практически любую задачу конструирования можно свести к сборке из имеющегося арсенала, если только в техническом опыте есть соответствующие эталонные элементы-конструкции.
Например, можно было бы не искать форму анкетоприёмника в виде слитной конструкции, а разделить работу с ним на такие типичные конструкции на отдельных страницах как
  1. страница со списком названий-ссылок для перечисления и навигации по анкетоприёмникам;
  2. страница с формой для редактирования параметров каждой анкетоприёмника;
  3. страница с отчётом по состоянию и результатам работы анкетоприёмника.

При этом пример только что приведённый на замену так же будет вариантом выращивания. Конструкция в этом случае раскинется на несколько экранов, связанных между собой переходами, а не механикой схлапывания-расхлапывания.
Инженерные ситуации
Чтобы лучше понять вышесказанное, «покрутим» его на других примерах. Будем конструировать бумажный самолётик-оригами. Возьмём конкретную модель, известную нам заранее. Обратим внимание, что в этом акте «вынимания» модели из некоторого арсенала решений мы используем технический опыт человечества. Мы знаем саму модель — то есть как должен выглядеть результат, и знаем процесс конструирования этой модели, состоящий из последовательных операций гибки бумажного материала.
Рис. 1.2.7. Отношение модели, варианта и схемы сборки варианта
Изготовив самолётик, мы начнём запускать его в полёт. Представим, что он покажет сильную ограниченность в дальности полёта или будет делать петлю и возвращаться к нам как бумеранг. Представим также, что нам это не понравится, и мы захотим иного поведения от него. Например, мы захотим, чтобы самолётик летал плавно, без виражей и приземлялся на дно, а не клевал носом. В такой момент возникает инженерная ситуация — потребность в достижении конкретного практического результата, путём модификации имеющейся конструкции или создания новой. Все ситуации конструирования, приведенные выше, вызваны инженерными ситуациями.

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

В ситуацию выращивания мы попадём, когда захотим собрать «с нуля» новую модель самолета. Когда мы, оставшись со средствами конструирования, присущими оригами, будем добиваться конструирования той формы, которая обеспечит достижение, поставленных нами требований.
Изобретательские ситуации. Сложность: 4
Итак, ситуации конструирования, рассмотренные выше, имеют дело с известным набором средств для его осуществления. Однако бывают случаи когда средств и инструментов попросту не существует. В такие моменты мы имеет дело с ситуацией изобретательской.

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

Рассмотрим примеры изобретений в сфере пользовательского интерфейса. Вот окно текстового редактора SublimeText для работы с программным кодом. Нас интересует элемент информационного скроллера справа. Обычный элемент управления прокруткой содержания окна — скроллер — состоит из ползунка-«лифта» и линейки-«шахты», по которой он «перемещается». На рисунке они представлены с правой и нижней стороны скриншота. Кроме этого, рядом с вертикальным скроллером приведён миниатюрный образ всего текстового содержания страницы. Такой образ помогает сориентироваться по месту в тексте программного кода, над которым человек какое-то время работал. Основано это на том, что при достаточно долгом наблюдении, наши органы восприятия выхватывают в изображении текста случайные закономерности в конфигурации цветовых пятен и очертаниях строк. Как именно был найден этот приём, случайно или же перед разработчиками стояла какая-то задача мы не знаем. Но инфоскроллер — характерный пример совершенствования средства навигации и ориентации в тексте.
Рис. 1.2.8. Инфоскроллер в редакторе SublimeText 4
Другим примером изобретения нового элемента является гибрид поля ввода и слайдера. Например, для задач калькулятора вкладов было предложено элегантное решение, где одновременно доступны и точный ввод числовых значений, и беглый обзор диапазонов, достигаемый за счёт перетаскивания ползунков между их крайними положениями. Полученный в ходе соединения новый элемент поле-слайдер решает обе задачи. Вероятно решение было найдено при одновременной постановке нескольких целевых критериев: точность, быстрота и компактность. Без предложенного элегантного соединения пришлось бы реализовать обзорную и точную часть по отдельности, что наверняка бы усложнило конструкцию.
Рис. 1.2.9. Гибридный элемент для точного и приблизительного ввода значений. Калькулятор вкладов на сайте Связного. Дизайн — Бюро Горбунова
Нетрудно заметить, что оба примера даны как примеры появления гибридных конструкций, когда два качества известных ранее решений соединяются в одном элементе-гибриде, взявшем что-то от обоих. Однако бывают и случаи самостоятельных изобретений новых средств. Одним из ярких примеров является находка с мультикурсором в современных текстовых редакторах. Мультикурсор — это шаг в развитии средств клавиатурного ввода. Случается, что при работе с текстом приходится для каждой из десятка или сотни строчек совершать одинаковые операции. Например, обрамлять какой-то текст кавычками или приписать какой-то новый текст к каждой строке. Функция множественного курсора дала возможность вводить один и тот же текст в массу строчек одновременно, решив ряд вопросов массовой обработки текста.
Рис. 1.2.10. Мультикурсор в редакторе SublimeText 4
В зависимости от того в какое историческое время будет читаться этот текст, часть приведённых примеров изобретённых элементов могут стать обыденными и эталонными, а часть причудливыми диковинками или даже безделушками, если прогресс пойдёт по другой линии. Будучи однажды обретёнными конструкции-изобретения могут исчезнуть, лишь мелькнув в качестве средства в отдельном программном продукте, или могут быть растасканными как прекрасные примеры и образцы в другие программные продукты и тем самым постепенно пополнить арсенал человечества. Процесс накопления материала здесь пока напоминает условия естественного отбора в мире живых существ. Пополнять свой личный арсенал доказавших себя решений — задача каждого проектировщика, а также, вероятно, сверх-задача для групп проектировщиков разных сфер.

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

«Ноль» же изобретательской ситуации как будто бы затруднён отсутствием видимости. Изобретение — это обретение средства там, где ранее никому не было видно. Даже если окажется, что в итоге найденное решение, будет собрано из того же арсенала, то переход к комбинированию элементов и операций на этапе до изобретения осознаётся как не осуществимый. Вместе с тем, любая изобрететельская ситуация вне всякого сомнения является конструкторской по своей сути. Но сборка решения происходит в неочевидных на первый взгляд пространствах, а порой и в нескольких. Представим, например, что в некоторой объективно сложной системе требуется придумать концепцию, упаковывающую её сложность так, чтобы процесс настройки этой системы через пользовательский интерфейс не требовал недопустимо долгого времени. Для того, чтобы такую концепцию сконструировать нужно внимательно изучить несколько планов объекта настройки: процессный, функциональный, структурный, морфологический, материала [2]. И тогда есть шанс выстроить конструкцию, что-то сшивающую через несколько этих планов и способную дать существенный прирост скорости настройки.

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

Бытовой пример: чтобы временно закрепить подогнутые штанины брюк можно взять английские булавки, но человек будет колоться иголками, а можно использовать двусторонний скотч. Второе средство является нетипичным для сферы кройки и шитья, однако тем ни менее оно обладает рядом преимуществ, и решает задачу элегантнее и быстрее. Обретение средства, путём переноса из одной области в другую, так же причисляют к изобретательству.
Вспомогательные ситуации
Вспомогательные ситуации описаны пока только в форме заполненной таблицы, без подробностей.
Аналитическая ситуация
Исследовательская ситуация
Испытательная ситуация
Трудно представить себе инженера или проектировщика, не проверяющего своей конструкции или её проекта. Будь это мысленный эксперимент или эксперимент натурный, испытательная деятельность, как и любая другая, трубует собственных инструментов и предусмотрительности.
Подведение итогов
В реальной задаче проектирования мы всегда найдём хитросплетение различных ситуаций. По опыту автора в любой задаче проектирования первичное значение имеет анализ, в результате которого выстраивается цепочка от искомых нововведений до того как они поменяют чью-то жизнедеятельность и приведут к намеченным целям. Если такой цепочки нет, то и проектировать на уровне конструкции нечего. С другой же стороны, выработка в аналитической ситуации связки кандидатных решений с целями и есть первый шаг проектирования, только объектом проектирования является замысел.

Получается, что выделение объекта и формирование точного понимания о нём — наиважнейшая часть в проектирование. Без этого мы не можем понять даже в какой из ситуаций мы находимся. С методологической точки зрения на ситуацию нужно смотреть как на объект-конструкцию, который мы выстраиваем, возвращая всё большее понимание того, с чем имеем дело. В этом смысле то, что мы понимаем является чем-то конструируемым, получающим всё больше связей между фактами и понятиями, доказавших свою работоспособность, и лишающимся всего, что было отвергнуто как незначимое или неверное.

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

Итак, мы всегда строим конструкцию, будь то конструкция нашего понимания ситуации или же это конструкция того, что мы проектируем. И узнав точнее объект ситуации и её содержание, мы можем выбрать наиболее подходящие средства для работы с ним.
Рис. 1.2.11. Отношение между ситуациями глазами проектировщика. Размер приблизительно пропорционален частоте ситуаций в практике по наблюдениям автора
Автор рассматривал ситуацию проектирования как более широкую, вмещающую в себя остальные ситуации как вспомогательные, именно потому, что центральной его деятельностью является проектирование. Разумеется все приведённые ситуации могут быть рассмотрены как самостоятельные. Исследовательские ситуации будут превалирующими в работе исследователя, а роль проектирования либо будет второстепенной, либо будет вовсе отсутствовать.

Рассмотренные ситуации возникают в процессе проектирования и требуют применения соответствующих средств. В какой последовательности это обычно происходит и каков инструментальный состав каждой мы разберём дальше.