SlideShare ist ein Scribd-Unternehmen logo
1 von 34
Downloaden Sie, um offline zu lesen
Сторителлинг в проектировании взаимодействия
Битва мух
и котлет
Антипаттерны
Дизайнер думает картинками, а не состояниями
В ходе разработки теряется консистентность

(интерфейс зарастает мхом и исключениями)
Экраны не демонстрируют ценность

(которую мы пытаемся создать)
Пользователь натыкается на дыры в сценарии
Проблема
Человек-
Экран
Человек-
Воронка
Визуальный язык:
– Интерфейсные
паттерны
– Сетка
– Структура экрана
– Визуальный стиль
– Палитра приемов
Слова и цифры:
– Отслеживание
метрик
– Unit-экономика
– Подбор
ключевых фраз
Дизайнер Траффик-менеджер
Человек-
Экран
фигачит
экраны
Человек-
Воронка
фигачит
сегменты
Каждый из участников
сконцентрирован 

на своем фрагменте
Опыт пользователя непрерывен, 

а работа дискретна
Каждый из участников
сконцентрирован 

на своем фрагменте
Опыт пользователя непрерывен, 

а работа дискретна
Надо менять метафору
и думать про людей
Человек-
человек
UX-дизайнер
Человек-
Экран
Человек-
Воронка
Визуальный язык:
– Интерфейсные
паттерны
– Сетка
– Структура экрана
– Визуальный стиль
– Палитра приемов
Слова и цифры:
– Отслеживание
метрик
– Unit-экономика
– Подбор
ключевых фраз
Дизайнер Траффик-менеджер
Истории людей:
– Впечатления
– Поступки
– Обстоятельства
– Состояния
– Сценарий
– История
Нарратив –
это круто
Нарратив –
это круто
Восстанавливает контекст
Заставляет говорить конкретикой
Насыщает содержанием
Дает поводы для креатива
Лечит дыры в сценарии
Перипетия
внутренняя трансформация
внешние обстоятельства
Барьер
Мечта
Проблема
Попытка
Бездействие
Неожиданная
помощь
Барьер
Мечта
Проблема
Самостоятельная
попытка
Наш
интерфейс
Бездействие
Он хочет…
Он пытается…
Он меняется…
внутренняя трансформация
внешние обстоятельства
Gamism 
игра ради победы, соревнования, достижения целей
Simulationism 
игра ради процесса исследования и моделирования чего-либо
Narrativism 
игра ради создания и развития красивой истории
мира / персонажа / сюжета
Нарративные
игры
Задача – залезть в чужую шкуру,
захотеть того, чего должен хотеть наш герой
Ситуация до: что я делал прямо перед проблемой
Проблема: что плохо (осознанное или нет)
Мотив: к чему я стремлюсь
Барьер: что мне мешает получить желаемое прямо сейчас
Осведомленность: что и откуда я знаю про предмет
Генерация
персонажа
Наследник королевства
Есть белый конь
Красив
Влюблен без памяти
Хорошо танцует
Галантен
Верен
Готов прощать шалости
Будет красиво ухаживать
Игра в принцессу
и принца
Наследник королевства
Есть белый конь
Красив
Влюблен без памяти
Хорошо танцует
Галантен
Верен
Готов прощать шалости
Будет красиво ухаживать
Гол как сокол
Ходит пешком
Урод
Не обращает на меня внимания
Не умеет танцевать
Хам
Кобель
Ревнивец
Не будет ухаживать
Игра в принцессу
и принца
Наследник королевства
Есть белый конь
Красив
Влюблен без памяти
Хорошо танцует
Галантен
Верен
Готов прощать шалости
Будет красиво ухаживать
Гол как сокол
Ходит пешком
Урод
Не обращает на меня внимания
Не умеет танцевать
Хам
Кобель
Ревнивец
Не будет ухаживать
Игра в принцессу
и принца
Разбирается в камнях
Живет в Екатеринбурге
Сразу платит
Покупает регулярно
Готов потратить больше 300000
Приведет друзей
Привык покупать в интернете
Знает чего хочет
Покупает по картинке
Ничего не понимает в камнях
Живет в другой стране
Платит через год
Купит один раз
Не готов платить
Никому не расскажет
Никогда не покупал в интернет
Не умеет выбирать
Нужно несколько визитов
Игра в принцессу
и принца
На примере ювелирки
Разбирается в камнях
Живет в Екатеринбурге
Сразу платит
Покупает регулярно
Готов потратить больше 300000
Приведет друзей
Привык покупать в интернете
Знает чего хочет
Покупает по картинке
Ничего не понимает в камнях
Живет в другой стране
Платит через год
Купит один раз
Не готов платить
Никому не расскажет
Никогда не покупал в интернет
Не умеет выбирать
Нужно несколько визитов
Игра в принцессу
и принца
На примере ювелирки
Микроскоп
Человечество
начинает новую
жизнь среди
звезд
Чужаки
захватывают
многочислен-
ные звездные
системы
Массовое
заселение
чужой сферы
дайсона
Человечество
угасает
изолированное
и одинокое
Исследовательский
корабль находит
сферу дайсона
Солнечные
вспышки
уничтожают
человеческие
поселения
События
Сцены
Эпохи
Расстроилась
Конверсия в в
открытие
Кончились все
памперсы
Найду в
интернете
Сегодня никто
не доставляет
Нашла сайт,
гарантирующий
доставку в
течении двух
часов
CTR
Листинг Карточка
товары
Метрики
Экраны
История
Кто я такой, и что
я здесь делаю?
Что он увидит?
Что он должен 

понять / сделать?
Что нам нужно
на выходе?
Как человек
попал сюда?
Какой у него
мотив?
Кто я такой, и что
я здесь делаю?
Что он увидит?
Что он должен 

понять / сделать?
Что нам нужно
на выходе?
Как человек
попал сюда?
Какой у него
мотив?
Трансформация
Типовой
сценарий
Типовой
сценарий
Герой
Обычная жизнь (бездействие)
Проблема (иногда неосознанная)
Самостоятельная неудачная попытка решения
Узнает о нас (волшебная альтернатива)
Пробует пользоваться
Профит! Жизнь меняется! (получается ценность)
Хэппиэнд
Долго и счастливо
Мечта
Герой
Обычная жизнь (бездействие)
Проблема (иногда неосознанная)
Самостоятельная неудачная попытка решения
Узнает о нас (волшебная альтернатива)
Пробует пользоваться
Профит! Жизнь меняется! (получается ценность)
Хэппи-энд
Долго и счастливо
Мечта
Типовой
сценарий
Дельта =
ценность
Герой
Обычная жизнь (бездействие)
Проблема (иногда неосознанная)
Самостоятельная неудачная попытка решения
Узнает о нас (волшебная альтернатива)
Пробует пользоваться
Профит! Жизнь меняется! (получается ценность)
Хэппи-энд
Долго и счастливо
Мечта
Типовой
сценарий
Алексей Кулаков
kulakov@gmail.com
+7 912 688 81 19

Weitere ähnliche Inhalte

Andere mochten auch

Исследовательские проекты в жизненном цикле и рутинных процессах компании
Исследовательские проекты в жизненном цикле и рутинных процессах компанииИсследовательские проекты в жизненном цикле и рутинных процессах компании
Исследовательские проекты в жизненном цикле и рутинных процессах компанииJetStyle
 
CPC-трафик в unit-экономике, Полина Бынова
CPC-трафик в unit-экономике, Полина БыноваCPC-трафик в unit-экономике, Полина Бынова
CPC-трафик в unit-экономике, Полина БыноваJetStyle
 
Управление - это игра. Алексей Кулаков, JetStyle
Управление - это игра. Алексей Кулаков, JetStyleУправление - это игра. Алексей Кулаков, JetStyle
Управление - это игра. Алексей Кулаков, JetStyleJetStyle
 
MVP (минимальный жизнеспособный продукт): как не потерять деньги на разработк...
MVP (минимальный жизнеспособный продукт): как не потерять деньги на разработк...MVP (минимальный жизнеспособный продукт): как не потерять деньги на разработк...
MVP (минимальный жизнеспособный продукт): как не потерять деньги на разработк...dkalaev
 
Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"
Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"
Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"JetStyle
 
Разработка MVP. Зачем это нужно и как это делать?
Разработка MVP. Зачем это нужно и как это делать? Разработка MVP. Зачем это нужно и как это делать?
Разработка MVP. Зачем это нужно и как это делать? JetStyle
 
Разработка через тестирование в Python и Django #pyconru
Разработка через тестирование в Python и Django #pyconruРазработка через тестирование в Python и Django #pyconru
Разработка через тестирование в Python и Django #pyconruJetStyle
 
Алексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному тексту
Алексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному текстуАлексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному тексту
Алексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному текстуJetStyle
 
Разработка сайта как создание мультфильма #oseminar
Разработка сайта как создание мультфильма #oseminarРазработка сайта как создание мультфильма #oseminar
Разработка сайта как создание мультфильма #oseminarJetStyle
 
Илья Седов: Как заставить программу под iOS шевелиться? #uwdc
Илья Седов: Как заставить программу под iOS шевелиться? #uwdcИлья Седов: Как заставить программу под iOS шевелиться? #uwdc
Илья Седов: Как заставить программу под iOS шевелиться? #uwdcJetStyle
 
Алексей Кулаков: Теория ограничений Голдратта #oseminar
Алексей Кулаков: Теория ограничений Голдратта #oseminarАлексей Кулаков: Теория ограничений Голдратта #oseminar
Алексей Кулаков: Теория ограничений Голдратта #oseminarJetStyle
 
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdcСергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdcJetStyle
 
Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015
Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015
Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015JetStyle
 
DUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.js
DUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.jsDUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.js
DUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.jsJetStyle
 
Постановка задачи на сайт. Алексей Кулаков
Постановка задачи на сайт. Алексей КулаковПостановка задачи на сайт. Алексей Кулаков
Постановка задачи на сайт. Алексей КулаковJetStyle
 
Петли в проектировании интерфейсов, DUMP 2014
Петли в проектировании интерфейсов, DUMP 2014Петли в проектировании интерфейсов, DUMP 2014
Петли в проектировании интерфейсов, DUMP 2014JetStyle
 
Как узнать о ваших покупателях все?
Как узнать о ваших покупателях все?Как узнать о ваших покупателях все?
Как узнать о ваших покупателях все?JetStyle
 
Как создать зарабатывающее приложение, UIN 2014
Как создать зарабатывающее приложение, UIN 2014Как создать зарабатывающее приложение, UIN 2014
Как создать зарабатывающее приложение, UIN 2014JetStyle
 
Особенности MVP в Enterprise / Владимир Васильев (Почта России)
Особенности MVP в Enterprise / Владимир Васильев (Почта России)Особенности MVP в Enterprise / Владимир Васильев (Почта России)
Особенности MVP в Enterprise / Владимир Васильев (Почта России)Ontico
 
Интерфейсы для Smart TV #uxsreda
Интерфейсы для Smart TV #uxsredaИнтерфейсы для Smart TV #uxsreda
Интерфейсы для Smart TV #uxsredaJetStyle
 

Andere mochten auch (20)

Исследовательские проекты в жизненном цикле и рутинных процессах компании
Исследовательские проекты в жизненном цикле и рутинных процессах компанииИсследовательские проекты в жизненном цикле и рутинных процессах компании
Исследовательские проекты в жизненном цикле и рутинных процессах компании
 
CPC-трафик в unit-экономике, Полина Бынова
CPC-трафик в unit-экономике, Полина БыноваCPC-трафик в unit-экономике, Полина Бынова
CPC-трафик в unit-экономике, Полина Бынова
 
Управление - это игра. Алексей Кулаков, JetStyle
Управление - это игра. Алексей Кулаков, JetStyleУправление - это игра. Алексей Кулаков, JetStyle
Управление - это игра. Алексей Кулаков, JetStyle
 
MVP (минимальный жизнеспособный продукт): как не потерять деньги на разработк...
MVP (минимальный жизнеспособный продукт): как не потерять деньги на разработк...MVP (минимальный жизнеспособный продукт): как не потерять деньги на разработк...
MVP (минимальный жизнеспособный продукт): как не потерять деньги на разработк...
 
Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"
Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"
Создание нового стиля, дизайна и шрифта для "Батенька, да вы трансформер!"
 
Разработка MVP. Зачем это нужно и как это делать?
Разработка MVP. Зачем это нужно и как это делать? Разработка MVP. Зачем это нужно и как это делать?
Разработка MVP. Зачем это нужно и как это делать?
 
Разработка через тестирование в Python и Django #pyconru
Разработка через тестирование в Python и Django #pyconruРазработка через тестирование в Python и Django #pyconru
Разработка через тестирование в Python и Django #pyconru
 
Алексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному тексту
Алексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному текстуАлексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному тексту
Алексей Кулаков: Доклад о ненависти к рыбе...и любви к осмысленному тексту
 
Разработка сайта как создание мультфильма #oseminar
Разработка сайта как создание мультфильма #oseminarРазработка сайта как создание мультфильма #oseminar
Разработка сайта как создание мультфильма #oseminar
 
Илья Седов: Как заставить программу под iOS шевелиться? #uwdc
Илья Седов: Как заставить программу под iOS шевелиться? #uwdcИлья Седов: Как заставить программу под iOS шевелиться? #uwdc
Илья Седов: Как заставить программу под iOS шевелиться? #uwdc
 
Алексей Кулаков: Теория ограничений Голдратта #oseminar
Алексей Кулаков: Теория ограничений Голдратта #oseminarАлексей Кулаков: Теория ограничений Голдратта #oseminar
Алексей Кулаков: Теория ограничений Голдратта #oseminar
 
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdcСергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
 
Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015
Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015
Нарративные игры как метод прототипирования, Алексей Кулаков, UWDC 2015
 
DUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.js
DUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.jsDUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.js
DUMP-2013 - Frontend: Преимущества разработки средствами BEM+Python+node.js
 
Постановка задачи на сайт. Алексей Кулаков
Постановка задачи на сайт. Алексей КулаковПостановка задачи на сайт. Алексей Кулаков
Постановка задачи на сайт. Алексей Кулаков
 
Петли в проектировании интерфейсов, DUMP 2014
Петли в проектировании интерфейсов, DUMP 2014Петли в проектировании интерфейсов, DUMP 2014
Петли в проектировании интерфейсов, DUMP 2014
 
Как узнать о ваших покупателях все?
Как узнать о ваших покупателях все?Как узнать о ваших покупателях все?
Как узнать о ваших покупателях все?
 
Как создать зарабатывающее приложение, UIN 2014
Как создать зарабатывающее приложение, UIN 2014Как создать зарабатывающее приложение, UIN 2014
Как создать зарабатывающее приложение, UIN 2014
 
Особенности MVP в Enterprise / Владимир Васильев (Почта России)
Особенности MVP в Enterprise / Владимир Васильев (Почта России)Особенности MVP в Enterprise / Владимир Васильев (Почта России)
Особенности MVP в Enterprise / Владимир Васильев (Почта России)
 
Интерфейсы для Smart TV #uxsreda
Интерфейсы для Smart TV #uxsredaИнтерфейсы для Smart TV #uxsreda
Интерфейсы для Smart TV #uxsreda
 

Mehr von JetStyle

Frontttalks nov2013
Frontttalks nov2013Frontttalks nov2013
Frontttalks nov2013JetStyle
 
Мобильное приложение для бизнеса: взгляд со стороны разработчика
Мобильное приложение для бизнеса: взгляд со стороны разработчикаМобильное приложение для бизнеса: взгляд со стороны разработчика
Мобильное приложение для бизнеса: взгляд со стороны разработчикаJetStyle
 
Алексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdc
Алексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdcАлексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdc
Алексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdcJetStyle
 
Борис Касавин: Big data для нужд реального российского бизнеса #uwdc
Борис Касавин: Big data для нужд реального российского бизнеса #uwdcБорис Касавин: Big data для нужд реального российского бизнеса #uwdc
Борис Касавин: Big data для нужд реального российского бизнеса #uwdcJetStyle
 
Алексей Иванов: немного о grunt.js #FrontTalks
Алексей Иванов: немного о grunt.js #FrontTalksАлексей Иванов: немного о grunt.js #FrontTalks
Алексей Иванов: немного о grunt.js #FrontTalksJetStyle
 
Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)
Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)
Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)JetStyle
 
Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)
Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)
Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)JetStyle
 

Mehr von JetStyle (7)

Frontttalks nov2013
Frontttalks nov2013Frontttalks nov2013
Frontttalks nov2013
 
Мобильное приложение для бизнеса: взгляд со стороны разработчика
Мобильное приложение для бизнеса: взгляд со стороны разработчикаМобильное приложение для бизнеса: взгляд со стороны разработчика
Мобильное приложение для бизнеса: взгляд со стороны разработчика
 
Алексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdc
Алексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdcАлексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdc
Алексей Кулаков: Суеверия vs научный подход в проектировании интерфейсов #uwdc
 
Борис Касавин: Big data для нужд реального российского бизнеса #uwdc
Борис Касавин: Big data для нужд реального российского бизнеса #uwdcБорис Касавин: Big data для нужд реального российского бизнеса #uwdc
Борис Касавин: Big data для нужд реального российского бизнеса #uwdc
 
Алексей Иванов: немного о grunt.js #FrontTalks
Алексей Иванов: немного о grunt.js #FrontTalksАлексей Иванов: немного о grunt.js #FrontTalks
Алексей Иванов: немного о grunt.js #FrontTalks
 
Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)
Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)
Александр Устинов: Работа с существующими клиентами (бизнес-завтрак)
 
Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)
Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)
Сергей Наймушин: Управление привлечением новых клиентов (бизнес-завтрак)
 

Битва мух и котлет. Сторителлинг в проектировании взаимодействия.