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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Антипаттерны Дизайнер думает картинками, а не состояниями В ходе разработке теряется консистентность  (интерфейс зарастает мхом и исключениями) Экраны не демонстрируют ценность  (которую мы пытаемся создать) Пользователь натыкается на дыры в сценарии Проблема

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Человек- Экран фигачит экраны Человек- Воронка фигачит сегменты

Slide 6

Slide 6 text

Каждый из участников сконцентрирован   на своем фрагменте Опыт пользователя непрерывен,   а работа дискретна

Slide 7

Slide 7 text

Каждый из участников сконцентрирован   на своем фрагменте Опыт пользователя непрерывен,   а работа дискретна Надо менять метафору и думать про людей

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Нарратив – это круто

Slide 10

Slide 10 text

Нарратив – это круто Восстанавливает контекст Заставляет говорить конкретикой Насыщает содержанием Дает поводы для креатива Лечит дыры в сценарии

Slide 11

Slide 11 text

Перипетия

Slide 12

Slide 12 text

внутренняя трансформация внешние обстоятельства

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Барьер Мечта Проблема Попытка Бездействие Угроза Неожиданная помощь Неожиданная проблема

Slide 15

Slide 15 text

Барьер Мечта Проблема Самостоятельная попытка Наш интерфейс Бездействие

Slide 16

Slide 16 text

Он хочет… Он пытается… Он меняется…

Slide 17

Slide 17 text

внутренняя трансформация внешние обстоятельства

Slide 18

Slide 18 text

Gamism игра ради победы, соревнования, достижения целей Simulationism игра ради процесса исследования и моделирования чего-либо Narrativism игра ради создания и развития красивой истории мира /персонажа / сюжета Нарративные игры

Slide 19

Slide 19 text

Задача – залезть в чужую шкуру, захотеть того, чего должен хотеть наш герой Ситуация до: что я делал прямо перед проблемой Проблема: что плохо (осознанное или нет) Мотив: к чему я стремлюсь Барьер: что мне мешает получить желаемое прямо сейчас Осведомленность: что и откуда я знаю про предмет Генерация персонажа

Slide 20

Slide 20 text

Наследник королевства Есть белый конь Красив Влюблен без памяти Хорошо танцует Галантен Верен Готов прощать шалости Будет красиво ухаживать Игра в принцессу и принца

Slide 21

Slide 21 text

Наследник королевства Есть белый конь Красив Влюблен без памяти Хорошо танцует Галантен Верен Готов прощать шалости Будет красиво ухаживать Гол как сокол Ходит пешком Урод Не обращает на меня внимания Не умеет танцевать Хам Кобель Ревнивец Не будет ухаживать Игра в принцессу и принца

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Разбирается в камнях Живет в Екатеринбурге Сразу платит Покупает регулярно Готов потратить больше 300000 Приведет друзей Привык покупать в интернете Знает чего хочет Покупает по картинке Ничего не понимает в камнях Живет в другой стране Платит через год Купит один раз Не готов платить Никому не расскажет Никогда не покупал в интернет Не умеет выбирать Нужно несколько визитов Игра в принцессу и принца На примере ювелирки

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Микроскоп

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Расстроилась Конверсия в в открытие Кончились все памперсы Найду в интернете Сегодня никто не доставляет Нашла сайт гарантирующий доставку в течении двух часов CTR Листинг Карточка товары Метрики Экраны История

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Типовой сценарий

Slide 31

Slide 31 text

Типовой сценарий Герой Обычная жизнь (бездействие) Проблема (иногда неосознанная) Самостоятельная неудачная попытка решения Узнает о нас (волшебная альтернатива) Пробует пользоваться Профит! Жизнь меняется! (получается ценность) Хэппиэнд Долго и счастливо Мечта

Slide 32

Slide 32 text

Герой Обычная жизнь (бездействие) Проблема (иногда неосознанная) Самостоятельная неудачная попытка решения Узнает о нас (волшебная альтернатива) Пробует пользоваться Профит! Жизнь меняется! (получается ценность) Хэппиэнд Долго и счастливо Мечта Типовой сценарий Дельта = ценность

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Алексей Кулаков kulakov@gmail.com +7 912 688 81 19