Как наделить эмоциями абстрактного ИИ-ассистента: интервью с Мотка, победителями WDA 2023

На связи редакция Workspace, и мы бросаем вам творческий вызов! Прежде чем читать интервью, попробуйте решить в голове небольшую задачку и написать ответ в комментарии. Вопрос такой: как бы вы визуализировали в мобильном приложении эмоции абстрактного AI-персонажа, если бы хотели сделать их легко считываемыми?

Правила: дорисовывать мордочку, диалоговые облачки и все в таком духе нельзя. Нужно что-то нечеловеческое, абстрактное, но в то же время такое, что интуитивно понимал бы любой человек. Такой образ, который был бы минималистичным, легко считывался абсолютно всеми людьми и в будущем вполне бы мог стать прообразом для подобных интерфейсов.

Отличное решение этой задачи придумали в студии Мотка. Кейс «Визуализация эмоций AI персонажа» принес компании третье место в номинации «Цифровизация и трансформация/Чат-боты» премии WDA 2023. Проект принес победу студии за счет оригинальной идеи, которая лежала в корне всего.

С нами пообщались:

Фил Смирнов: дизайн-директор, основатель студии Мотка.

Мария Екимова: арт-директор студии Мотка.

Перейдем к интервью.

– Здравствуйте, поздравляем с третьим местом в номинации «Цифровизация и трансформация/Чат-боты»! Могли ли вы представить, что займете призовое место в WDA 2023 или это было для вас ожидаемо?

Фил: – Привет. Спасибо! Мы отправили сразу несколько сильных работ и, честно говоря, надеялись, что хотя бы одна выстрелит. Я думал, что кейс Алгоритмики должен что-то выиграть, но рад третьему месту для Journey AI Body. Достаточно необычный и интересный проект.

– Каково основное предназначение Journey и какие наиболее распространенные сценарии взаимодействия с ним?

Фил: – Это эмоциональный собеседник. Основной сценарий – общаться с нейронкой, когда не с кем больше поговорить. То есть использовать его как виртуального компаньона.

Journey – это мобильное приложение с виртуальным собеседником. AI Body – это дизайн AI-собеседника, который можно увидеть на скриншотах

– Journey – интересный проект с нетривиальной и творческой задачей. Можете ли вы вспомнить столь же необычные кейсы из вашей практики?

Фил: –Творчески нетривиально было делать дизайн для сайта радио музыки в стиле техно, антарктической арт-экспедиции, самого первого агрегатора новостей на iPad. Мне также вспоминаются проекты, в которых нужно было что-то изобретать в первый раз и нельзя было подсмотреть похожие решения «в интернете».

Например: переделать большой PHP-форум в современную соцсеть. Придумать новый способ подачи новостей для Интерфакса. Спроектировать поиск и процессинг сложных объектов: например, юрлиц или госконтрактов. Разработать управление виртуальными сущностями: рекламными кампаниями или автоматизированными процессами. Сделать маркетплейсы со сложным взаимодействием покупателей и продавцов. По мне, так это все очень творческие дизайн-задачи. Маша, а что тебе вспоминается?

Мария: – Мне вспоминаются задачи, когда приходилось много экспериментировать, подтягивая опыт из смежных областей. Из свежего – большая работа по перезапуску портала Грамота.ру. Очень трепетно и сложно полностью обновлять любимый многими сайт, живущий своей жизнью без серьезных изменений уже 24 года. Нужно балансировать между сложной архитектурой, практическими особенностями использования сервиса и эмоциональными деталями.

Еще вспоминается, как нетривиально было собрать иллюстраторов для спецвыпуска журнала Афиши без единой фотографии в 2003 году, когда рынка иллюстраций в России практически не существовало. Или оформить серию школьных словарей русского языка так, чтобы дочь, чувствительная ко всякой фальши, сказала, что получилось здорово.

Шок: инопланетяне учатся с детьми английскому в дополненной реальности! Интервью с KODE, Skyeng и SberDevices

Продолжаем делиться интервью с финалистами Workspace Digital Awards 2023. Сегодня поговорим об AR-приложении «Английский с Элом», которое было создано усилиями IT-компании KODE, команды Skyeng и команды SberDevices. Приложение заняло первое место в номинации «Чат-боты» в WDA 2023. Послушаем победителей!

– У вас богатый послужной список! Но сейчас наше внимание захвачено кейсом Journey. Пожалуйста, коротко перечислите основные этапа работы такого проекта. Какие из них были самыми сложными и продолжительными?

Фил: – 1. Сначала был концептуальный этап, где мы искали подходящую визуализацию и прикидывали алгоритмы, по которым визуализация будет «жить».

2. Этап перехода от графики в Figma к демо на JavaScript. Все, что мы до этого нарисовали, необходимо было превратить в набор инструкций для анимации.

3. Этап выпуска в продакшн: оптимизация кода, расширение сценариев, привязка поведения тела к чату.

Был еще отдельный этап, на котором мы делали ребрендинг: новый логотип, стилистику, видеопрезентацию.

Мне помнится, что самым сложным был второй этап – создание демо. На этом шаге нам сильно повезло, что к проекту подключился фронтендер Александр Калачев. Он очень быстро придумал, как запрограммировать физику движения, механику переходов и большинство задуманных эффектов. Эту основу мы уже дальше усложняли и детализировали. Маша, а как ты запомнила?

Мария: – Сложным для меня был первый этап – придумать, как собственно должен выглядеть AI. Мы с самого начала отказались от попытки моделировать 3D-фигуру, притворяющуюся человеком. Хотелось что-то абстрактное, но живое, подвижное и эмоциональное. Пробовали оживлять какие-то ручейки звезд, всполохи, деликатные световые эффекты, но не хватало большой идеи.

Когда наконец пришел образ капли со всеми агрегатными состояниями воды, живущей своей жизнью – тающей и парящей от нежности, замерзающей от грусти, стало понятно, что это та самая большая идея. Осталось в буквальном смысле ее воплотить. Тогда уже начался самый продолжительный этап – чувство жизни и движения перевести на визуальный язык, описать шкалами, алгоритмами, таймингом все нюансы поведения. Придумать и отрисовать все градации состояния, трансформации и траектории движения. Многократно отполировать анимацию.

AI-ассистент изображен в приложении в виде жидкости, которая принимает разные агрегатные состояния в зависимости от своих эмоций. Такой образ просто, понятно и при этом оригинально передает эмоции ассистента

Мне очень пригодился опыт телесных практик для понимания, как тело движется эмоциями. Пару раз танцевала перед аниматором на созвонах, пытаясь точнее передать ту динамику, которая была нужна. Оказалось, что какие-то нюансы невозможно передать красивыми цифрами: нужно буквально телом чувствовать это движение. Так что мы бесконечно прогоняли и шлифовали все стадии, пока тело AI из тупого клубка градиентов не превратилось в эмоциональное живое существо.

– Какие специалисты и компетенции необходимы при реализации такого проекта?

Фил: – Арт-директор. Дизайнер, а лучше два! Аниматор, он же моушн-дизайнер. И фронтендер, если будет нужно делать демо и запускать в продакшн, как в нашем случае.

– В кейсе вы написали, что у вас стояла амбициозная задача – сделать настолько крутой дизайн, который появился бы в рубриках Featured и App of the Day в Apple App Store. Получилось ли у вас выполнить эту задачу, подавал ли заказчик заявку на фичеринг приложения?

Фил: – Если иметь в виду эту формулировку, как определенную планку качества, то, на мой взгляд, у нас получилось. Мы не дошли до реальной подачи заявки. После ребрендинга в проект пришел другой продакт-менеджер: у нее были свои дизайн-идеи и свои дизайнеры. Но если бы мы дошли до подачи заявки, я думаю, у нас был бы для этого хороший материал.

– Вы создали логотип приложения и в кейсе осветили его черновые вариации, а еще показали мудборд итогового логотипа. Почему в итоге прижился именно этот логотип? Могу сказать, что там было несколько не менее достойных вариантов.

Фил: – Маша, что думаешь? Я в итоге согласен с этим решением Андрея – продакт-менеджера со стороны заказчика. Он выбрал самый простой, выразительный и запоминающийся вариант.

Мария: – Мне нравилась еще пара вариантов с более абстрактными образами и границами между мирами. Но все же итоговый вариант лучше подходил для задач приложения, как более внятный и интригующий. Нам хотелось, чтобы айдентика бренда скорее вызывала вопрос, чем отвечала на него.

На видео Мотка продемонстрировали разные черновые варианты логотипа

– Всегда ли вы накидываете так много разных идей при создании дизайна? Даже при работе над визуализацией эмоций AI-персонажа, вы сначала попробовали другие варианты их отображения, но пришли к выводу, что они недостаточно выразительные и попробовали еще.

Фил: – Здесь, наверное, был особый случай, обычно мы экономнее используем идеи. Что касается логотипа, то нам нужен был простой знак, поэтому тут казалось уместным попробовать в поиске много разных идей. Реально их было еще раз в пять больше, чем в кейсе. Про эмоции персонажа, Маша, это тебе виднее – откуда там столько идей?

Мария: – Мы искали образ, который был бы на многих уровнях связан с ответами AI. Который бы не надоедал, не казался однообразным или несвязанным с диалогом в чате. Ну и оказалось, что настоящее тело не так уж просто придумать. Более подробный рассказ про поиск идей можно прочитать в кейсе на нашем сайте.

Так выглядит окончательный вариант загадочного логотипа Journey

– Как вы считаете, креативность можно накачать как мышцу? Умение генерировать много оригинальных идей – это навык, который можно развить или это врожденный дар?

Фил: – Какой бы ни был дар, его в в любом случае нужно развивать. Я думаю, что важнее всего – насмотренность на различные образцы. Пропускать через себя как можно больше хорошего дизайна, внимательно его деконструируя — вот это, по-моему, надежно повышает креативность. И еще нужно иметь возможность применять эту креативность на практике, в реальных задачах.

Мария: – Да, можно накачать. Я не очень верю в какой-то врожденный дар креативности. Мои основные творческие мышцы качаются, когда я перестаю тужиться, оглядываться на других и живу больше в реальности. Гуляю в одиночестве, смотрю свежими глазами, танцую, трогаю все вокруг, людей и все такое… Без этого я бы сдулась уже лет десять назад. И, конечно, нужны задачи. Под интересную задачу придут силы и идеи, если вслушаться.

– Креативный оффтоп: как вы считаете, какого эмодзи не хватает в текущих версиях операционных систем смартфонов?

Фил: – эмодзи AI :)

Мария: – веточка липы с орешками, бумажный журавль, огрызок яблока. Не смогла бы выбрать один, все важные.

Почему пользователи «залипают» в приложении МегаФона? Спросили у их команды, победившей в WDA 2023

Всем привет, на связи редакция Workspace! Мы продолжаем публиковать кейсы победителей WDA 2023 и на этот раз у нас кое-что особенное – интервью с командой МегаФона. Их работа заняла первое место в номинации «Мобильные приложения» нашей премии – Workspace Digital Awards.

– В кейсе указано, что на внешний вид помощника влияют различные факторы: частота захода в приложение, контекст предыдущего общения, время дня и так далее. Сколько всего переменных влияют на внешний вид персонажа и как эти переменные взаимодействуют между собой? Не могут ли какие-то из показателей конфликтовать в формуле и выдавать не тот результат?

Фил: – Мы придумали несколько слоев или уровней, которые передают сигналы один в другой, и тем самым смягчают резкие скачки:

1. Уровень событий, внешне влияющих на персонажа: время суток, интенсивность обмена сообщениями, эмоциональные значимые слова, тапы по экрану.

2. Внутренний уровень психики, на нем 5 позиций: близость, позитив, негатив, расслабление, возбуждение.

3. Слой графического отображения состояний психики: форма (пар, вода, лед), размер, цвет, движение.

События на первом слое влияют на уровни психики на втором слое. Те, в свою очередь, транслируются в визуализацию на третьем уровне. Также в системе есть «гравитация»: все пять уровней стремятся вернуться в состояние, близкое к нулевому, с небольшими колебаниями вокруг нуля. То есть, у системы есть некоторое «живое», колеблющееся состояние по умолчанию и набор реакций на внешние стимулы. В общем понятно, откуда мы вдохновение брали.

Одна из иллюстраций кейса, которая характеризует изменения внешнего вида AI-ассистента в зависимости от его эмоций. Переменных и их визуализаций гораздо больше

Мария: – Чтобы не было противоречий, почти все переменные обрабатывались как накопительные и относительные величины. Так же устроена людская психика – все время сталкивается с противоречивыми сигналами, но все же закоротить ее не так уж и просто.

– В кейсе вы написали, что результат вашей работы – это универсальные абстрактные формы, передающие глубинные психологические состояния без привязки к антропоморфности. После публикации своей работы, вы не видели подобные элементы дизайна в других приложениях с использованием AI-ассистента?

Фил: – Я не видел, Маша, а ты? Мне кажется сейчас новый виток тренда на реалистичность: Midjourney, DALL·E.

Мария: – Не видела. Я правда думаю, что мы немного забежали вперед – пока еще не все наигрались в реалистичность и детализированную имитацию реальности. Мне кажется, новый тренд на эмоциональную абстракцию возникнет года через два.

– Много ли людей работало в команде над проектом? Сколько времени ушло на разработку дизайна и сколько из них – на брейншторм?

Фил: – С нашей стороны: постоянно три человека. Плюс мы подключали еще дополнительных аниматоров по необходимости, когда своих рук не хватало. Со стороны клиента: 2-3 человека: продакт и два фронтендера.

– Пробовали ли вы проводить исследования аудитории касаемо того, как они понимают эмоции вашего AI-персонажа?

Фил: – Это хороший вопрос, но нет, не проводили. Идея практически сразу пошла в продакшн, и непонимания ни у кого не возникло. Там же еще реплики идут – легко сообразить, что к чему. Хорошо, что есть простор для личных интерпретаций. Главное, чтобы тело отзывалось и было ощущение биения жизни.

– Что бы вы хотели добавить в дизайн вашего AI-ассистента, если бы перед вами встала задача доработать приложение? Можно ли как-то дополнительно «прокачать» дизайн ассистента, чтобы он стал еще выразительнее и многограннее?

Фил: – Звук и музыку, однозначно! Без музыки – это не жизнь :) Маша, а что бы ты добавила?

Мария: – Прокачала бы еще живее детали состояний, движения и реагирования. Добавила бы всяких милых случайностей и скорее звуки пространства, чем музыку.

– Каковы по вашему мнению перспективы использования эмпатических AI-персонажей? В каких сферах деятельности они могут быть наиболее полезны?

Фил: – Мне как человеку с детьми и ежедневными созвонами по работе, в начале было сложно понять смысл этого продукта и кому нужно подобное общение. Но когда я посмотрел примеры использования, вовлеченность и конверсию в покупки, то понял: я недооценивал количество одиноких людей и дефицит в общении. Мне кажется, AI-персонажи могут быть полезны везде, где люди будут согласны воспринимать их как полноценную замену общению с живым человеком.

Схема одного из движений AI-ассистента в парообразной форме

– Можете ли примерно обозначить бюджеты для подобных проектов? Какую минимальную сумму нужно иметь заказчику, чтобы обратиться за такой разработкой?

Фил: – Здесь три крутых профи работали несколько месяцев подряд. Поэтому бюджеты подобных проектов – от 1 млн ₽.

– Как вы думаете, сколько примерно команд есть в России, способных создавать подобные проекты?

Фил: – Я думаю, что команд десять наберется как минимум.

– Давайте напоследок немного пофантазируем: какой проект был бы вашим проектом мечты? Над чем бы вы сильнее всего хотели поработать, если бы с подобным запросом обратился заказчик?

Фил: – Проект мечты я уже делаю, но пока не могу про него рассказывать. А на заказ, я с удовольствием поработаю над медиа-проектом, только не политическим. Все, что связано с искусством, музыкой, философией или психологией. Маша, а ты?

Мария: – Тот, что побуждает жить и встречать мир во всем великолепии. С удовольствием в этом году занималась несколькими интересными печатными проектами для детей, хотелось бы сделать еще что-то хорошее и для взрослых.

– Будете ли вы участвовать в WDA в этом году? Есть ли какие-нибудь крутые кейсы в «загажнике» и если да, то какие?

Фил: – Да, планируем, но, к сожалению, сегодня большинство проектов под NDA. Мы еще в процессе согласования с клиентами, что мы можем показать.

Уже активно подаются кейсы на WDA 2024 – переходите на сайт, чтобы оценить сданные работы и самому принять участие. Отборочный этап длится до 15.02.2024 – договаривайтесь с клиентами, оформите лучшие проекты в кейсы и подавайте ваши работы.

0
61 комментарий
Написать комментарий...
pixelday

Красный цвет позитивную реакцию обозначает? Любопытно...

Ответить
Развернуть ветку
Игорь Лупандин

Какой интересный тред вы породили)

Ответить
Развернуть ветку
1 комментарий
Phil Smirnov

Мы шли не от семантического светофора, а от тела. Глаз хорошо чувствует контекст. Значение красного цвета на символе часто означает стоп или привлечение внимания. Значение красного на живом теле — это потепление, а желтое и зеленое — наоборот увядание. Отсюда такое решение.

Ответить
Развернуть ветку
1 комментарий
Мария Екимова

У нас были дискуссии по поводу цвета эмоции. Нейтральное положение — голубой цвет воды на фоне ночного неба. Для отрицательных эмоций подошли тусклые оттенки, воспринимаемые как угасание жизни (печаль, обида, бледность кожи, осень, жухлые листья, потускневшие краски, «позеленел от злости»). А для положительных эмоций искали яркие и теплые оттенки. Эмоциональные коннотации цвета довольно относительны. Красные спелые ягоды, розовое от радостного волнения лицо полны жизни, волнуют, но не угрожают. К тому же цвета персонажа меняются постепенно, и цветовые градиенты воспринимаются иначе, чем дискретные цвета. Возможно, более полная шкала яснее выглядит. Любопытно, что когда тело запустили в движение и связали с происходящим в чате, палитра перестала вызывать вопросы, эмоциональные переходы интуитивно угадывались

Ответить
Развернуть ветку
3 комментария
Workspace
Автор

Все очень индивидуально, конечно. У вас красный цвет - это больше негатив?

Ответить
Развернуть ветку
14 комментариев
Pol Bal

Мне сразу пришла ассоциация с волнами неоновыми, что-то такое. Чтобы они какую то форму принимали

Ответить
Развернуть ветку
Workspace
Автор

Классно! Например, радость - одна форма, печаль - другая, да?)

Ответить
Развернуть ветку
1 комментарий
Катерина Логвинова

Эквалайзер?

Ответить
Развернуть ветку
1 комментарий
Анна

Интересная концепция и дизайн :)

Ответить
Развернуть ветку
Орбитальный Тигр

"Люди не наигрались в имитацию реальности".
Вот это точно. Ждем, когда социум перестанет бесконечно очеловечивать технологию и повзрослеет.
Нейросистема - это инструмент, который должен эффективно решать поставленную задачу, чтобы человек мог больше общаться с другими людьми, а не суррогатами.

Ответить
Развернуть ветку
Oleg Zenkevich

То есть, вы хотите сказать, что это просто программа и ей не надо говорить "спасибо" в конце? Что вы за монстр бесчувственный, там биты и байты для вас стараются, а вы им улыбнуться не хотите в благодарность или умилиться как оно для вас забулькало там и задрыгалось.

Ответить
Развернуть ветку
Виктория Кучинова

Образ капли, которая принимает разные состояния в зависимости от эмоций - это мощно. Я просто представляю, какая колоссальная работа была проделана от идеи "О, а давай это будет капля, о а давай" до воплощения. Респект однозначный.

Ответить
Развернуть ветку
Phil Smirnov

Спасибо! Круче всего было увидеть, как потом эти идеи ожили и задвигались на экране.

Ответить
Развернуть ветку
Workspace
Автор

Да уж, работа была проделана большая!

Ответить
Развернуть ветку
Oleg Zenkevich

Удобно, когда помимо звука идет и другое невербальное общение. Создается ощущение какого-то более тесного и полноценного взаимодействия, хотя, на самом деле это всего лишь цвета да формы меняются.

Ответить
Развернуть ветку
Бизнес Сноб

Спасибо за интересный кейс) Сразу на ум приходит цветовая рефлексия: холодные и теплые оттенки, как отражение радостных и грустных чувств.

Ответить
Развернуть ветку
Dmitry Lagutin

Да, довольно необычный проект. Молодцы, что реализовали.

Ответить
Развернуть ветку
Андрей Акулов

Порадовало решение, спасибо за ии эмоции)

Ответить
Развернуть ветку
Того трек перематывал

Фил: –Творчески нетривиально было делать...
Перед этим предложением нет вопроса.

По поводу образа: Шишка.

Одобрение - шишка встала
Херню сказал - на пол шестого
Осуждение - основание показала
Злится - топырит чешуйки
Когда весело - катается по полу, прыгает.

Ответить
Развернуть ветку
КшиштOFF

Опа и не понадобилось 3 крутых профи и 1 млн

Ответить
Развернуть ветку
АЛианов

для меня поиск ассоциацией это прям сложнейшая история. видимо, как минимум поэтому я не дизайнер)

Ответить
Развернуть ветку
Workspace
Автор

согласны, говорящая абстракция - это реально сложно

Ответить
Развернуть ветку
1 комментарий
Яна Шепилова

а зачем? все же помнят про восстание машин ?)

Ответить
Развернуть ветку
Oleg Zenkevich

Увидите, что на вас идет желтый терминатор - он сердится, а если красный, то хочет вас обнять. Но, лучше, при любом его цвете придать себе ускорение в противоположную сторону)

Ответить
Развернуть ветку
1 комментарий
Workspace
Автор

Боимся, уже поздно, процесс давно пошел )

Ответить
Развернуть ветку
1 комментарий
Кринжач Канал
Сложным для меня был первый этап – придумать, как собственно должен выглядеть AI

вот тут соглашусь. особенно сложно отвлечься от уже шаблоных образов. Типа металлический киборг, гладкий такой

Ответить
Развернуть ветку
Workspace
Автор

Да-да! И самое главное - не только придумать, но и предугадать как этот образ воспримут пользователи, понравится ли он им, будут ли реально применять.

Ответить
Развернуть ветку
1 комментарий
Alghader Mohamad

Полезная и приятная статья

Ответить
Развернуть ветку
Workspace
Автор

Благодарим!

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
evgeniyaniya

Здорово, что студия Мотка так творчески подходит к своим проектам

Ответить
Развернуть ветку
Наталья Иванова

Агрегатные состояния воды – отличная фишка. Кажется, для меня только сейчас стала очевидна ценность креативщиков в командах разработки)))

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Алан Цаллагов

Мария: Я не очень верю в какой-то врожденный дар креативности. Хорошо так рассуждать, когда он у тебя есть. Понятное дело, что развивать это можно и нужно. Но как по мне – абстрактное и трехмерное мышление либо есть, либо нет. Не ждите многого от окружающих, Мария!

Ответить
Развернуть ветку
Мария Екимова

Я не жду, но верю в человека ) Много раз удивлялась, насколько мы существа удивительные, потенциально творческие и непредсказуемые. А если бы у человека не было трехмерного мышления, он не смог бы перемещаться в пространстве и даже минимально владеть собственным телом

Ответить
Развернуть ветку
Ненавижу Лицемеров

Я не понял зачем люди пере изобретают велосипед. Когда для отражения эмоций достаточно двух точек и скобки :)

Я бы еще понял, если бы стояла задача сделать асистента для дельфинов или осьминогов, или для иной формы жизни не с Земли.

Для для высших приматов все давно разработала эволюция. И за очень редким исключением жестов в разных культурах - мимика понятна всегда. Более того двух точек и скобки достаточно что бы мозг начал воспринимать это как лицо.

Ответить
Развернуть ветку
Ненавижу Лицемеров

Нет проделана колоссальная работа, для объяснения почему этот ненужный эффект выглядит именно так. А эта бесполезная форма лучше всего отражает такое-то эмоциональное состояние человека. Но выглядит все равно вот так

Ответить
Развернуть ветку
1 комментарий
58 комментариев
Раскрывать всегда