Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать

Слайды с выступления на Дизайн-выходных в Казани, 31 мая 2025.

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

Transcript

1. Андрей Шапиро, арт-директор Бындюсофт 1 Мышление историями. Текстовые модели поведения в работе дизайнера Д-в. 2025 · Казань
2. Академия Бындюсофт —19 лет управляю разработкой и проектирую цифровые системы как дизайнер продукта и интерфейса —Автор методик проектирования: Карта процесса-опыта, Карта реализации историй, Дерево гипотез развития, Метод ключевых действий —Автор книги «Карта процесса-опыта» —Арт-директор, методолог, соучредитель Бындюсофт Андрей Шапиро
3. Бындюсофт — 13 лет на рынке Создаём убер-сложные ИТ-продукты с гарантией достижения целей заказчика. Стартуем с анализа, разрабатываем, внедряем продукт и обеспечиваем его поддержку и эволюцию
4. Академия Бындюсофт К чему сей спич? 4
5. Академия Бындюсофт 5 Творческий поиск, который нас так радует Created by Barracuda from the Noun Project
6. Академия Бындюсофт 6 Может сильно расстраивать заказчика Created by Barracuda from the Noun Project Легко не суметь «дожить» до следующей итерации после очередного промаха
7. Академия Бындюсофт 7 А что если можно сразу вот так? Created by Barracuda from the Noun Project Можно с практикой записи историй как моделей поведения потребителей
8. Академия Бындюсофт О каких историях речь? 8
9. Академия Бындюсофт 9 Речь не о истории как процессе развития человечества
10. Академия Бындюсофт 10 «Каждая из [историй] рождается в своего рода путешествии. <…> Идея путешествия определяет выход за границы обыденного. <...> За любой историей стоит путешествие, любое путешествие выражается в какой-нибудь истории» Владимир Воловик, «Мышление в мусорной куче»
11. Академия Бындюсофт 11 Сумма историй вбирает в себя знание о неком мире. Например, о мире человеческой жизнедеятельности
12. Академия Бындюсофт 12 История как сюжет 🙈 Через пару минут Кристи предстоит защищать свой проект. В зале сотни инвесторов, расписание насыщенное — по пять минут на выступление. Кристи понимает, что нет времени на обмен бумажными визитками. Перед началом питча она «открывает» свою электронную визитку всем, кто поблизости. Несколько инвесторов берут её электронные визитки. Через пару месяцев, один из них выходит на Кристи, несмотря на то, что она сменила номер телефона.
13. Академия Бындюсофт 13 История как текстовая модель поведения Спикер, вместо того чтобы раздавать каждому бумажные визитки, которые теряют актуальность и не вовремя заканчиваются, массово раздаёт электронные.
14. Академия Бындюсофт 14 Сюжетный текст Через пару минут Кристи предстоит защищать свой проект. В зале сотни инвесторов, расписание насыщенное — по пять минут на выступление. Кристи понимает, что нет времени на обмен бумажными визитками. Перед началом питча она «открывает» свою электронную визитку всем, кто поблизости. Несколько инвесторов берут её электронные визитки. Через пару месяцев, один из них выходит на Кристи, несмотря на то, что она сменила номер телефона. Спикер, вместо того, чтобы раздавать каждому бумажные визитки, которые теряют актуальность и не вовремя заканчиваются, массово раздаёт электронные Удобнее проектировать с бессюжетными текстами, они о том как что-то устроено Бессюжетный текст Это и есть история
15. Академия Бындюсофт Передача понимания в текстах 15
16. Академия Бындюсофт 16 Сюжет известной басни
17. Академия Бындюсофт 17 Для понимания важны оба слоя: фабулы и смысла, конкретного и отвлечённого
18. Академия Бындюсофт 18 Работа на двух слоях Любая история должна работать на двух слоях: смысла и конкретики
19. Академия Бындюсофт Какие истории используют 
 в цифровом дизайне 19
20. Академия Бындюсофт Шаблон пользовательской истории Шаблон Коннекстры установил важную структуру и стал классическим. Без этих частей история больше не считалась историей 20 Я, как рекламодатель, хочу привлекать для своих баннеров только трафик конкретных тематик, чтобы эффективно использовать рекламный бюджет Я, как <роль, персона>, хочу <функциональность>, чтобы <основание, мотив> как тот-то Я хочу именно таким способом прийти к такому-то результату
21. Академия Бындюсофт Шаблон истории на изменение Шаблон схватывает структуру шага развития как часто встречающийся паттерн проектной деятельности 21 Вместо проценивания по одному получаю за раз оценку стоимости для группы артикулов запчастей Вместо того, чтобы 
 <старый способ д ействия>, <новый способ действия> Прежний способ делать Новый способ делать
22. Академия Бындюсофт Шаблон Job Story Шаблон сфокусирован на выявлении потребности 22 Во время простоев между задачами я хотел бы видеть как изменилось состояние дел, чтобы делать лучший выбор о следующем действии Когда <обстоятельства, задающие контекст ситуации>, я хочу <мотивация>, чтобы <ожидаем ы й результат> мотив, стимул ситуация ожидаемые последствия
23. Академия Бындюсофт 23 Можно ли обойтись одним единым шаблоном? 🤔
24. Академия Бындюсофт Шаблон рабочей истории и Карта реализации историй 24
25. Академия Бындюсофт Способ действия 25 5 элементов шаблона рабочей истории <Кто-то или что-то>, <в такой-то ситуации> <действует таким-то образом>, преобразуя <такие-то вещи и данные на входе шага> в <такие-то на выходе> для обеспечения <такой-то ценности на уровне деятельности> Новая структура истории. «Рабочая» означает, что относится к деятельности целиком, а не только к пользователю Носитель действия Ситуация Объекты оперирования Цель действия
26. Академия Бындюсофт Для обеспечения <такой-то ценности на уровне деятельности><кто-то или что- то>, <в такой-то ситуации> <действует таким-то образом>, преобразуя <такие-то вещи и данные на входе шага> в <такие- то на выходе> с помощью 
 <таких-то форм решений в инструменте> и <таких-то форм UI> 26 Каждый элемент шаблона на отдельном слое. Так карта требует своего заполнения
27. Академия Бындюсофт 27 Пример рабочей истории Обладатель браслета, когда важно не проспать в пределах получаса-часа, перед тем как лечь спать, определяет желаемый объём сна, управляя минимальным числом фаз сна и его продолжительностью, чтобы успеть к назначенному времени и выспаться лучше за счёт учёта фаз сна Мин. число фаз, общая продолжительность сна Определяет желаемый объём сна Когда важно не проспать в пределах получаса-часа, перед тем как лечь спать Обладатель браслета Успеть к назначенному времени и выспаться лучше за счёт учёта фаз сна В КАРТЕ РЕАЛИЗАЦИИ ИСТОРИЙ В ФОРМЕ ПРЕДЛОЖЕНИЯ
28. Академия Бындюсофт Слои карты 28
29. Академия Бындюсофт 29 Кейс. Подсчёт товаров
30. Академия Бындюсофт 30 Рабочая история Сотрудник склада, когда товара немного и он крупный, организует счёт по одному, преобразуя набор экземпляров одного вида товара в их количество, чтобы зафиксировать количество товаров на палете физического мира в цифровом двойнике ИТ-системы В КАРТЕ РЕАЛИЗАЦИИ ИСТОРИЙ В ФОРМЕ ПРЕДЛОЖЕНИЯ Когда товара немного и он крупный Сотрудник склада Упаковки товара на палетах → Количество упаковок на палете Фиксировать количество товаров на палете физического мира в цифровом двойнике ИТ-системы Организует счёт по одному
31. Академия Бындюсофт 31 1. Цель шага деятельности Смысл слоя: Фиксирует ценность, смысл происходящего на уровне деятельности. 
 Ключевой вопрос: Зачем? Фиксировать количество товаров на реальной палете в цифровом двойнике Цель шага
32. Академия Бындюсофт 32 2. Носитель действия Смысл слоя: Фиксирует субъекта или машину, кому вменены операции на шаге 
 
 Ключевой вопрос: 
 Кем/чем? Сотрудник склада Машина с компьютерным зрением Носитель действия
33. Академия Бындюсофт 33 3. Ситуация Смысл слоя: Фиксирует описание контекста ситуации, условия входа в неё 
 Ключевой вопрос: Когда? Когда товара немного и он крупный Когда товар расфасован порциями и подсчёт ведёт несколько человек Ситуация
34. Академия Бындюсофт 34 4. Способ действия / вариант поведения Смысл слоя: Фиксирует процедуру, вариант формы процесса 
 Ключевой вопрос: 
 Как делается? Организует счёт по одному Корректирует итоговое количество на размер порции, вместо того чтобы считать в уме Способ действия
35. Академия Бындюсофт 35 5. Объекты оперирования Смысл слоя: Фиксирует совокупность и структуру вещей, задействованных в действии до его начала и в результате 
 Ключевой вопрос: 
 С чем? Упаковки товара на палетах → Количество упаковок на палете Объекты оперирования
36. Академия Бындюсофт 36 6. Форма/вариант решения Смысл слоя: Фиксирует образцы типовых технических решений, то чем мы оснащаем шаг 
 Ключевой вопрос: 
 С помощью чего? Ручной счётчик с кнопками +/−, влияющими на итоговое значение Форма решения Ручной счётчик с изменяемым размером порции. Редактируемое поле размера порции с операциями +/− порции
37. Академия Бындюсофт 37 7. Структура экранных блоков Смысл слоя: Блоки визуализации и манипуляции, их смысловые группировки в UI 
 Ключевой вопрос: 
 Как организовано? Структура экранов UI
38. Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 38 Когда товара немного и он крупный Сотрудник склада Ручной счётчик с кнопками +/−, влияющими на итоговое значение Упаковки товара на палетах → Количество упаковок на палете Фиксировать количество товаров на палете физического мира в цифровом двойнике ИТ-системы Ситуация Форма реализации Объекты оперирования Процедура Организует счёт по одному Пример целиком в структуре Карты реализации историй
39. Академия Бындюсофт 39 Пример реальной карты Каждая колонка — история. Этапы сверху для навигации. Отложенные варианты — чёрным
40. Академия Бындюсофт Распутывание беседы с заказчиком с историями 40 Дашборд мне запили!
41. Академия Бындюсофт 41 Структура экранных блоков Носитель действия Цель действия Продавец Ситуация Форма реализации Объекты оперирования Способ действия Получает мгновенное уведомление о поступившем заказе Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе
42. Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 42 Продавец Предотвратить <неизвестный риск>? Ситуация Форма реализации Объекты оперирования Способ действия Получает мгновенное уведомление о поступившем заказе Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе
43. Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 43 Когда поступает новый заказ Продавец Выиграть в конкурентной борьбе Ситуация Форма реализации Объекты оперирования Способ действия Получает мгновенное уведомление о поступившем заказе Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе
44. Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 44 Когда поступает новый заказ Продавец Не упустить заказ, потому что иначе система отдаст его конкурентам Ситуация Форма реализации Объекты оперирования Способ действия Незамедлительно узнаёт о заказе и оставшемся на его обработку времени Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе
45. Академия Бындюсофт Структура экранных блоков Носитель действия Цель действия 45 Когда поступил новый заказ Продавец Заказ: содержание, время на обработку Заполучить заказ до того как его отдадут конкурентам Ситуация Форма реализации Объекты оперирования Способ действия Незамедлительно узнаёт о заказе и оставшемся на его обработку времени Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе
46. Академия Бындюсофт Носитель действия Цель действия 46 Когда поступил новый заказ Продавец 1. Звуковой сигнал в веб-приложении + информация о содержании и времени на обработку Заказ: содержание, время на обработку Заполучить заказ до того как его отдадут конкурентам Ситуация Формы реализации Объекты оперирования Способ действия Незамедлительно узнаёт о заказе и оставшемся на его обработку времени Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе 2. Сообщение в чат-боте
47. Академия Бындюсофт Каскад реализации 47
48. Академия Бындюсофт 48 Каскад реализации Вещи и данные Способ действия Структура UI-блоков Форма реализации Ситация Носитель действия Цель действия
49. Академия Бындюсофт 49 Связка: цель действия — способ действия С шумом двигается по лесу, сохраняя строй в форме «подковы» После сигнала Группа людей Направить зверей в зону отлова, где их поджидает другая группа
50. Академия Бындюсофт 50 Связка: ситуация — способ действия Приезжает точно ко времени, чтобы пицца не остыла При заказе на мероприятия Доставщик пиццы Приезжает насколько возможно скоро, чтобы порадовать клиента Во всех других случаях
51. Академия Бындюсофт 51 Связка: способ действия — форма реализации Командный чат: Slack, Mattermost, … Отправляет вопрос и ждёт ответа без спешки • • • Когда нужно что-то выяснить Коллега Звонилки: Skype, Discord, … Добивается немедленного контакта • • •
52. Академия Бындюсофт Подведём итоги 52
53. Академия Бындюсофт 53 Что даёт Карта реализации историй — Шаблон рабочей истории, организующий беседу — Технику завёрстывания истории, где поиск смысла идёт параллельно с поиск решений — Слои-«линзы», помогающие перейти к решению — Приоритет в согласовании содержательной логики истории. Больше не нужно формально согласовывать предложение Носитель действия Структура UI Форма реализации 1 Объекты оперирирования Цель шага Способ действия Ситуация
54. Академия Бындюсофт 54 С чего начать 1. Записать предложенное заказчиком решение в слой формы реализации карты 2. Двигаться снизу-вверх, восстанавливая поочередно объекты, способ действия и цель действия 3. Переписывать слои пока все они не будут согласованы по смыслу 4. Проверить решение на адекватность 5. Поправлять историю и решение до согласованности Носитель действия Структура UI 1. Форма реализации 2. Объекты оперирирования 4. Цель действия 3. Способ действия Ситуация
55. Академия Бындюсофт 55 Посмотрите материалы о КРИ — Вводная статья — Видео-беседа с примером — Подкаст makeSense с Юрием Агеевым ashapiro.ru/articles/sim
56. Запись ёмких текстовых моделей описания поведения в рабочих ситуациях и подбор инструментов для них Входит в фреймворк проектирования социотехнических систем Подбор логических связей в цепочке важнейших точек потребительского опыта и рабочих ситуаций с учётом целостности потоков в ней Подбор логических связей между предпринимаемыми действиями, их воздействием на субъектов и конечной целью Карта процесса- опыта Карта реализации историй Карта гипотез 56
57. Академия Бындюсофт Спасибо за внимание, пробуйте КРИ Андрей Шапиро, арт-директор и методолог Бындюсофт ⎯ t.me/ashapiro ashapiro.ru 57 simapping Канал Карты реализации историй how2scheme Канал«Как проектировать»