Slide 1

Slide 1 text

Андрей Шапиро, арт-директор Бындюсофт 1 Мышление историями. Текстовые модели поведения в работе дизайнера Д-в. 2025 · Казань

Slide 2

Slide 2 text

Академия Бындюсофт —19 лет управляю разработкой и проектирую цифровые системы как дизайнер продукта и интерфейса —Автор методик проектирования: Карта процесса-опыта, Карта реализации историй, Дерево гипотез развития, Метод ключевых действий —Автор книги «Карта процесса-опыта» —Арт-директор, методолог, соучредитель Бындюсофт Андрей Шапиро

Slide 3

Slide 3 text

Бындюсофт — 13 лет на рынке Создаём убер-сложные ИТ-продукты с гарантией достижения целей заказчика. Стартуем с анализа, разрабатываем, внедряем продукт и обеспечиваем его поддержку и эволюцию

Slide 4

Slide 4 text

Академия Бындюсофт К чему сей спич? 4

Slide 5

Slide 5 text

Академия Бындюсофт 5 Творческий поиск, который нас так радует Created by Barracuda from the Noun Project

Slide 6

Slide 6 text

Академия Бындюсофт 6 Может сильно расстраивать заказчика Created by Barracuda from the Noun Project Легко не суметь «дожить» до следующей итерации после очередного промаха

Slide 7

Slide 7 text

Академия Бындюсофт 7 А что если можно сразу вот так? Created by Barracuda from the Noun Project Можно с практикой записи историй как моделей поведения потребителей

Slide 8

Slide 8 text

Академия Бындюсофт О каких историях речь? 8

Slide 9

Slide 9 text

Академия Бындюсофт 9 Речь не о истории как процессе развития человечества

Slide 10

Slide 10 text

Академия Бындюсофт 10 «Каждая из [историй] рождается в своего рода путешествии. <…> Идея путешествия определяет выход за границы обыденного. <...> За любой историей стоит путешествие, любое путешествие выражается в какой-нибудь истории» Владимир Воловик, «Мышление в мусорной куче»

Slide 11

Slide 11 text

Академия Бындюсофт 11 Сумма историй вбирает в себя знание о неком мире. Например, о мире человеческой жизнедеятельности

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Академия Бындюсофт 13 История как текстовая модель поведения Спикер, вместо того чтобы раздавать каждому бумажные визитки, которые теряют актуальность и не вовремя заканчиваются, массово раздаёт электронные.

Slide 14

Slide 14 text

Академия Бындюсофт 14 Сюжетный текст Через пару минут Кристи предстоит защищать свой проект. В зале сотни инвесторов, расписание насыщенное — по пять минут на выступление. Кристи понимает, что нет времени на обмен бумажными визитками. Перед началом питча она «открывает» свою электронную визитку всем, кто поблизости. Несколько инвесторов берут её электронные визитки. Через пару месяцев, один из них выходит на Кристи, несмотря на то, что она сменила номер телефона. Спикер, вместо того, чтобы раздавать каждому бумажные визитки, которые теряют актуальность и не вовремя заканчиваются, массово раздаёт электронные Удобнее проектировать с бессюжетными текстами, они о том как что-то устроено Бессюжетный текст Это и есть история

Slide 15

Slide 15 text

Академия Бындюсофт Передача понимания в текстах 15

Slide 16

Slide 16 text

Академия Бындюсофт 16 Сюжет известной басни

Slide 17

Slide 17 text

Академия Бындюсофт 17 Для понимания важны оба слоя: фабулы и смысла, конкретного и отвлечённого

Slide 18

Slide 18 text

Академия Бындюсофт 18 Работа на двух слоях Любая история должна работать на двух слоях: смысла и конкретики

Slide 19

Slide 19 text

Академия Бындюсофт Какие истории используют 
 в цифровом дизайне 19

Slide 20

Slide 20 text

Академия Бындюсофт Шаблон пользовательской истории Шаблон Коннекстры установил важную структуру и стал классическим. Без этих частей история больше не считалась историей 20 Я, как рекламодатель, хочу привлекать для своих баннеров только трафик конкретных тематик, чтобы эффективно использовать рекламный бюджет Я, как <роль, персона>, хочу <функциональность>, чтобы <основание, мотив> как тот-то Я хочу именно таким способом прийти к такому-то результату

Slide 21

Slide 21 text

Академия Бындюсофт Шаблон истории на изменение Шаблон схватывает структуру шага развития как часто встречающийся паттерн проектной деятельности 21 Вместо проценивания по одному получаю за раз оценку стоимости для группы артикулов запчастей Вместо того, чтобы 
 <старый способ д ействия>, <новый способ действия> Прежний способ делать Новый способ делать

Slide 22

Slide 22 text

Академия Бындюсофт Шаблон Job Story Шаблон сфокусирован на выявлении потребности 22 Во время простоев между задачами я хотел бы видеть как изменилось состояние дел, чтобы делать лучший выбор о следующем действии Когда <обстоятельства, задающие контекст ситуации>, я хочу <мотивация>, чтобы <ожидаем ы й результат> мотив, стимул ситуация ожидаемые последствия

Slide 23

Slide 23 text

Академия Бындюсофт 23 Можно ли обойтись одним единым шаблоном? 🤔

Slide 24

Slide 24 text

Академия Бындюсофт Шаблон рабочей истории и Карта реализации историй 24

Slide 25

Slide 25 text

Академия Бындюсофт Способ действия 25 5 элементов шаблона рабочей истории <Кто-то или что-то>, <в такой-то ситуации> <действует таким-то образом>, преобразуя <такие-то вещи и данные на входе шага> в <такие-то на выходе> для обеспечения <такой-то ценности на уровне деятельности> Новая структура истории. «Рабочая» означает, что относится к деятельности целиком, а не только к пользователю Носитель действия Ситуация Объекты оперирования Цель действия

Slide 26

Slide 26 text

Академия Бындюсофт Для обеспечения <такой-то ценности на уровне деятельности><кто-то или что- то>, <в такой-то ситуации> <действует таким-то образом>, преобразуя <такие-то вещи и данные на входе шага> в <такие- то на выходе> с помощью 
 <таких-то форм решений в инструменте> и <таких-то форм UI> 26 Каждый элемент шаблона на отдельном слое. Так карта требует своего заполнения

Slide 27

Slide 27 text

Академия Бындюсофт 27 Пример рабочей истории Обладатель браслета, когда важно не проспать в пределах получаса-часа, перед тем как лечь спать, определяет желаемый объём сна, управляя минимальным числом фаз сна и его продолжительностью, чтобы успеть к назначенному времени и выспаться лучше за счёт учёта фаз сна Мин. число фаз, общая продолжительность сна Определяет желаемый объём сна Когда важно не проспать в пределах получаса-часа, перед тем как лечь спать Обладатель браслета Успеть к назначенному времени и выспаться лучше за счёт учёта фаз сна В КАРТЕ РЕАЛИЗАЦИИ ИСТОРИЙ В ФОРМЕ ПРЕДЛОЖЕНИЯ

Slide 28

Slide 28 text

Академия Бындюсофт Слои карты 28

Slide 29

Slide 29 text

Академия Бындюсофт 29 Кейс. Подсчёт товаров

Slide 30

Slide 30 text

Академия Бындюсофт 30 Рабочая история Сотрудник склада, когда товара немного и он крупный, организует счёт по одному, преобразуя набор экземпляров одного вида товара в их количество, чтобы зафиксировать количество товаров на палете физического мира в цифровом двойнике ИТ-системы В КАРТЕ РЕАЛИЗАЦИИ ИСТОРИЙ В ФОРМЕ ПРЕДЛОЖЕНИЯ Когда товара немного и он крупный Сотрудник склада Упаковки товара на палетах → Количество упаковок на палете Фиксировать количество товаров на палете физического мира в цифровом двойнике ИТ-системы Организует счёт по одному

Slide 31

Slide 31 text

Академия Бындюсофт 31 1. Цель шага деятельности Смысл слоя: Фиксирует ценность, смысл происходящего на уровне деятельности. 
 Ключевой вопрос: Зачем? Фиксировать количество товаров на реальной палете в цифровом двойнике Цель шага

Slide 32

Slide 32 text

Академия Бындюсофт 32 2. Носитель действия Смысл слоя: Фиксирует субъекта или машину, кому вменены операции на шаге 
 
 Ключевой вопрос: 
 Кем/чем? Сотрудник склада Машина с компьютерным зрением Носитель действия

Slide 33

Slide 33 text

Академия Бындюсофт 33 3. Ситуация Смысл слоя: Фиксирует описание контекста ситуации, условия входа в неё 
 Ключевой вопрос: Когда? Когда товара немного и он крупный Когда товар расфасован порциями и подсчёт ведёт несколько человек Ситуация

Slide 34

Slide 34 text

Академия Бындюсофт 34 4. Способ действия / вариант поведения Смысл слоя: Фиксирует процедуру, вариант формы процесса 
 Ключевой вопрос: 
 Как делается? Организует счёт по одному Корректирует итоговое количество на размер порции, вместо того чтобы считать в уме Способ действия

Slide 35

Slide 35 text

Академия Бындюсофт 35 5. Объекты оперирования Смысл слоя: Фиксирует совокупность и структуру вещей, задействованных в действии до его начала и в результате 
 Ключевой вопрос: 
 С чем? Упаковки товара на палетах → Количество упаковок на палете Объекты оперирования

Slide 36

Slide 36 text

Академия Бындюсофт 36 6. Форма/вариант решения Смысл слоя: Фиксирует образцы типовых технических решений, то чем мы оснащаем шаг 
 Ключевой вопрос: 
 С помощью чего? Ручной счётчик с кнопками +/−, влияющими на итоговое значение Форма решения Ручной счётчик с изменяемым размером порции. Редактируемое поле размера порции с операциями +/− порции

Slide 37

Slide 37 text

Академия Бындюсофт 37 7. Структура экранных блоков Смысл слоя: Блоки визуализации и манипуляции, их смысловые группировки в UI 
 Ключевой вопрос: 
 Как организовано? Структура экранов UI

Slide 38

Slide 38 text

Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 38 Когда товара немного и он крупный Сотрудник склада Ручной счётчик с кнопками +/−, влияющими на итоговое значение Упаковки товара на палетах → Количество упаковок на палете Фиксировать количество товаров на палете физического мира в цифровом двойнике ИТ-системы Ситуация Форма реализации Объекты оперирования Процедура Организует счёт по одному Пример целиком в структуре Карты реализации историй

Slide 39

Slide 39 text

Академия Бындюсофт 39 Пример реальной карты Каждая колонка — история. Этапы сверху для навигации. Отложенные варианты — чёрным

Slide 40

Slide 40 text

Академия Бындюсофт Распутывание беседы с заказчиком с историями 40 Дашборд мне запили!

Slide 41

Slide 41 text

Академия Бындюсофт 41 Структура экранных блоков Носитель действия Цель действия Продавец Ситуация Форма реализации Объекты оперирования Способ действия Получает мгновенное уведомление о поступившем заказе Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе

Slide 42

Slide 42 text

Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 42 Продавец Предотвратить <неизвестный риск>? Ситуация Форма реализации Объекты оперирования Способ действия Получает мгновенное уведомление о поступившем заказе Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе

Slide 43

Slide 43 text

Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 43 Когда поступает новый заказ Продавец Выиграть в конкурентной борьбе Ситуация Форма реализации Объекты оперирования Способ действия Получает мгновенное уведомление о поступившем заказе Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе

Slide 44

Slide 44 text

Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 44 Когда поступает новый заказ Продавец Не упустить заказ, потому что иначе система отдаст его конкурентам Ситуация Форма реализации Объекты оперирования Способ действия Незамедлительно узнаёт о заказе и оставшемся на его обработку времени Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе

Slide 45

Slide 45 text

Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 45 Когда поступил новый заказ Продавец Заказ: содержание, время на обработку Заполучить заказ до того как его отдадут конкурентам Ситуация Форма реализации Объекты оперирования Способ действия Незамедлительно узнаёт о заказе и оставшемся на его обработку времени Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе

Slide 46

Slide 46 text

Академия Бындюсофт Носитель действия Цель действия 46 Когда поступил новый заказ Продавец 1. Звуковой сигнал в веб-приложении + информация о содержании и времени на обработку Заказ: содержание, время на обработку Заполучить заказ до того как его отдадут конкурентам Ситуация Формы реализации Объекты оперирования Способ действия Незамедлительно узнаёт о заказе и оставшемся на его обработку времени Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе 2. Сообщение в чат-боте

Slide 47

Slide 47 text

Академия Бындюсофт Каскад реализации 47

Slide 48

Slide 48 text

Академия Бындюсофт 48 Каскад реализации Вещи и данные Способ действия Структура UI-блоков Форма реализации Ситация Носитель действия Цель действия

Slide 49

Slide 49 text

Академия Бындюсофт 49 Связка: цель действия — способ действия С шумом двигается по лесу, сохраняя строй в форме «подковы» После сигнала Группа людей Направить зверей в зону отлова, где их поджидает другая группа

Slide 50

Slide 50 text

Академия Бындюсофт 50 Связка: ситуация — способ действия Приезжает точно ко времени, чтобы пицца не остыла При заказе на мероприятия Доставщик пиццы Приезжает насколько возможно скоро, чтобы порадовать клиента Во всех других случаях

Slide 51

Slide 51 text

Академия Бындюсофт 51 Связка: способ действия — форма реализации Командный чат: Slack, Mattermost, … Отправляет вопрос и ждёт ответа без спешки ● ● ● Когда нужно что-то выяснить Коллега Звонилки: Skype, Discord, … Добивается немедленного контакта ● ● ●

Slide 52

Slide 52 text

Академия Бындюсофт Подведём итоги 52

Slide 53

Slide 53 text

Академия Бындюсофт 53 Что даёт Карта реализации историй — Шаблон рабочей истории, организующий беседу — Технику завёрстывания истории, где поиск смысла идёт параллельно с поиск решений — Слои-«линзы», помогающие перейти к решению — Приоритет в согласовании содержательной логики истории. Больше не нужно формально согласовывать предложение Носитель действия Структура UI Форма реализации 1 Объекты оперирирования Цель шага Способ действия Ситуация

Slide 54

Slide 54 text

Академия Бындюсофт 54 С чего начать 1. Записать предложенное заказчиком решение в слой формы реализации карты 2. Двигаться снизу-вверх, восстанавливая поочередно объекты, способ действия и цель действия 3. Переписывать слои пока все они не будут согласованы по смыслу 4. Проверить решение на адекватность 5. Поправлять историю и решение до согласованности Носитель действия Структура UI 1. Форма реализации 2. Объекты оперирирования 4. Цель действия 3. Способ действия Ситуация

Slide 55

Slide 55 text

Академия Бындюсофт 55 Посмотрите материалы о КРИ — Вводная статья — Видео-беседа с примером — Подкаст makeSense с Юрием Агеевым ashapiro.ru/articles/sim

Slide 56

Slide 56 text

Запись ёмких текстовых моделей описания поведения в рабочих ситуациях и подбор инструментов для них Входит в фреймворк проектирования социотехнических систем Подбор логических связей в цепочке важнейших точек потребительского опыта и рабочих ситуаций с учётом целостности потоков в ней Подбор логических связей между предпринимаемыми действиями, их воздействием на субъектов и конечной целью Карта процесса- опыта Карта реализации историй Карта гипотез 56

Slide 57

Slide 57 text

Академия Бындюсофт Спасибо за внимание, пробуйте КРИ Андрей Шапиро, арт-директор и методолог Бындюсофт ⎯ t.me/ashapiro ashapiro.ru 57 simapping Канал Карты реализации историй how2scheme Канал«Как проектировать»