Slide 1

Slide 1 text

Академия Бындюсофт Андрей Шапиро 1 Мышление историями. Текстовые модели поведения в работе дизайнера <Тот-то> 
 <тогда-то> 
 <действует так-то>, преобразуя <это> в <то> для <цели действия>

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

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

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 Когда поступил новый заказ Продавец 1. Звуковой сигнал в веб-приложении + информация о содержании и времени на обработку Заказ: содержание, время на обработку Заполучить заказ до того как его отдадут конкурентам Ситуация Формы реализации Объекты оперирования Способ действия Незамедлительно узнаёт о заказе и оставшемся на его обработку времени Пропуск речи заказчика через КРИ Продавец получает мгновенное уведомление о поступившем заказе 2. Сообщение в чат-боте

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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