На связи редакция Workspace, и мы бросаем вам творческий вызов! Прежде чем читать интервью, попробуйте решить в голове небольшую задачку и написать ответ в комментарии. Вопрос такой: как бы вы визуализировали в мобильном приложении эмоции абстрактного AI-персонажа, если бы хотели сделать их легко считываемыми?
Правила: дорисовывать мордочку, диалоговые облачки и все в таком духе нельзя. Нужно что-то нечеловеческое, абстрактное, но в то же время такое, что интуитивно понимал бы любой человек. Такой образ, который был бы минималистичным, легко считывался абсолютно всеми людьми и в будущем вполне бы мог стать прообразом для подобных интерфейсов.
Отличное решение этой задачи придумали в студии Мотка. Кейс «Визуализация эмоций AI персонажа» принес компании третье место в номинации «Цифровизация и трансформация/Чат-боты» премии WDA 2023. Проект принес победу студии за счет оригинальной идеи, которая лежала в корне всего.
Фил Смирнов: дизайн-директор, основатель студии Мотка.
Мария Екимова: арт-директор студии Мотка.
Перейдем к интервью.
Фил: — Привет. Спасибо! Мы отправили сразу несколько сильных работ и, честно говоря, надеялись, что хотя бы одна выстрелит. Я думал, что кейс Алгоритмики должен что-то выиграть, но рад третьему месту для Journey AI Body. Достаточно необычный и интересный проект.
Фил: — Это эмоциональный собеседник. Основной сценарий — общаться с нейронкой, когда не с кем больше поговорить. То есть использовать его как виртуального компаньона.
Journey — это мобильное приложение с виртуальным собеседником. AI Body — это дизайн AI-собеседника, который можно увидеть на скриншотах
Фил: —Творчески нетривиально было делать дизайн для сайта радио музыки в стиле техно, антарктической арт-экспедиции, самого первого агрегатора новостей на iPad. Мне также вспоминаются проекты, в которых нужно было что-то изобретать в первый раз и нельзя было подсмотреть похожие решения «в интернете».
Например: переделать большой PHP-форум в современную соцсеть. Придумать новый способ подачи новостей для Интерфакса. Спроектировать поиск и процессинг сложных объектов: например, юрлиц или госконтрактов. Разработать управление виртуальными сущностями: рекламными кампаниями или автоматизированными процессами. Сделать маркетплейсы со сложным взаимодействием покупателей и продавцов. По мне, так это все очень творческие дизайн-задачи. Маша, а что тебе вспоминается?
Мария: — Мне вспоминаются задачи, когда приходилось много экспериментировать, подтягивая опыт из смежных областей. Из свежего — большая работа по перезапуску портала Грамота.ру. Очень трепетно и сложно полностью обновлять любимый многими сайт, живущий своей жизнью без серьезных изменений уже 24 года. Нужно балансировать между сложной архитектурой, практическими особенностями использования сервиса и эмоциональными деталями.
Еще вспоминается, как нетривиально было собрать иллюстраторов для спецвыпуска журнала Афиши без единой фотографии в 2003 году, когда рынка иллюстраций в России практически не существовало. Или оформить серию школьных словарей русского языка так, чтобы дочь, чувствительная ко всякой фальши, сказала, что получилось здорово.
Фил:
Сначала был концептуальный этап, где мы искали подходящую визуализацию и прикидывали алгоритмы, по которым визуализация будет «жить».
Этап перехода от графики в Figma к демо на JavaScript. Все, что мы до этого нарисовали, необходимо было превратить в набор инструкций для анимации.
Этап выпуска в продакшн: оптимизация кода, расширение сценариев, привязка поведения тела к чату.
Был еще отдельный этап, на котором мы делали ребрендинг: новый логотип, стилистику, видеопрезентацию.
Мне помнится, что самым сложным был второй этап — создание демо. На этом шаге нам сильно повезло, что к проекту подключился фронтендер Александр Калачев. Он очень быстро придумал, как запрограммировать физику движения, механику переходов и большинство задуманных эффектов. Эту основу мы уже дальше усложняли и детализировали. Маша, а как ты запомнила?
Мария: — Сложным для меня был первый этап — придумать, как собственно должен выглядеть AI. Мы с самого начала отказались от попытки моделировать 3D-фигуру, притворяющуюся человеком. Хотелось что-то абстрактное, но живое, подвижное и эмоциональное. Пробовали оживлять какие-то ручейки звезд, всполохи, деликатные световые эффекты, но не хватало большой идеи.
Когда наконец пришел образ капли со всеми агрегатными состояниями воды, живущей своей жизнью — тающей и парящей от нежности, замерзающей от грусти, стало понятно, что это та самая большая идея. Осталось в буквальном смысле ее воплотить. Тогда уже начался самый продолжительный этап — чувство жизни и движения перевести на визуальный язык, описать шкалами, алгоритмами, таймингом все нюансы поведения. Придумать и отрисовать все градации состояния, трансформации и траектории движения. Многократно отполировать анимацию.
AI-ассистент изображен в приложении в виде жидкости, которая принимает разные агрегатные состояния в зависимости от своих эмоций. Такой образ просто, понятно и при этом оригинально передает эмоции ассистента
Мне очень пригодился опыт телесных практик для понимания, как тело движется эмоциями. Пару раз танцевала перед аниматором на созвонах, пытаясь точнее передать ту динамику, которая была нужна. Оказалось, что какие-то нюансы невозможно передать красивыми цифрами: нужно буквально телом чувствовать это движение. Так что мы бесконечно прогоняли и шлифовали все стадии, пока тело AI из тупого клубка градиентов не превратилось в эмоциональное живое существо.
Фил: — Арт-директор. Дизайнер, а лучше два! Аниматор, он же моушн-дизайнер. И фронтендер, если будет нужно делать демо и запускать в продакшн, как в нашем случае.
Фил: — Если иметь в виду эту формулировку, как определенную планку качества, то, на мой взгляд, у нас получилось. Мы не дошли до реальной подачи заявки. После ребрендинга в проект пришел другой продакт-менеджер: у нее были свои дизайн-идеи и свои дизайнеры. Но если бы мы дошли до подачи заявки, я думаю, у нас был бы для этого хороший материал.
Фил: — Маша, что думаешь? Я в итоге согласен с этим решением Андрея — продакт-менеджера со стороны заказчика. Он выбрал самый простой, выразительный и запоминающийся вариант.
Мария: — Мне нравилась еще пара вариантов с более абстрактными образами и границами между мирами. Но все же итоговый вариант лучше подходил для задач приложения, как более внятный и интригующий. Нам хотелось, чтобы айдентика бренда скорее вызывала вопрос, чем отвечала на него.
На видео Мотка продемонстрировали разные черновые варианты логотипа
Фил: — Здесь, наверное, был особый случай, обычно мы экономнее используем идеи. Что касается логотипа, то нам нужен был простой знак, поэтому тут казалось уместным попробовать в поиске много разных идей. Реально их было еще раз в пять больше, чем в кейсе. Про эмоции персонажа, Маша, это тебе виднее — откуда там столько идей?
Мария: — Мы искали образ, который был бы на многих уровнях связан с ответами AI. Который бы не надоедал, не казался однообразным или несвязанным с диалогом в чате. Ну и оказалось, что настоящее тело не так уж просто придумать. Более подробный рассказ про поиск идей можно прочитать в кейсе на нашем сайте.
Так выглядит окончательный вариант загадочного логотипа Journey
Фил: — Какой бы ни был дар, его в в любом случае нужно развивать. Я думаю, что важнее всего — насмотренность на различные образцы. Пропускать через себя как можно больше хорошего дизайна, внимательно его деконструируя — вот это, по-моему, надежно повышает креативность. И еще нужно иметь возможность применять эту креативность на практике, в реальных задачах.
Мария: — Да, можно накачать. Я не очень верю в какой-то врожденный дар креативности. Мои основные творческие мышцы качаются, когда я перестаю тужиться, оглядываться на других и живу больше в реальности. Гуляю в одиночестве, смотрю свежими глазами, танцую, трогаю все вокруг, людей и все такое... Без этого я бы сдулась уже лет десять назад. И, конечно, нужны задачи. Под интересную задачу придут силы и идеи, если вслушаться.
Фил: — эмодзи AI :)
Мария: — веточка липы с орешками, бумажный журавль, огрызок яблока. Не смогла бы выбрать один, все важные.
Фил: — Мы придумали несколько слоев или уровней, которые передают сигналы один в другой, и тем самым смягчают резкие скачки:
Уровень событий, внешне влияющих на персонажа: время суток, интенсивность обмена сообщениями, эмоциональные значимые слова, тапы по экрану.
Внутренний уровень психики, на нем 5 позиций: близость, позитив, негатив, расслабление, возбуждение.
Слой графического отображения состояний психики: форма (пар, вода, лед), размер, цвет, движение.
События на первом слое влияют на уровни психики на втором слое. Те, в свою очередь, транслируются в визуализацию на третьем уровне. Также в системе есть «гравитация»: все пять уровней стремятся вернуться в состояние, близкое к нулевому, с небольшими колебаниями вокруг нуля. То есть, у системы есть некоторое «живое», колеблющееся состояние по умолчанию и набор реакций на внешние стимулы. В общем понятно, откуда мы вдохновение брали.
Одна из иллюстраций кейса, которая характеризует изменения внешнего вида AI-ассистента в зависимости от его эмоций. Переменных и их визуализаций гораздо больше
Мария: — Чтобы не было противоречий, почти все переменные обрабатывались как накопительные и относительные величины. Так же устроена людская психика — все время сталкивается с противоречивыми сигналами, но все же закоротить ее не так уж и просто.
Фил: — Я не видел, Маша, а ты? Мне кажется сейчас новый виток тренда на реалистичность: Midjourney, DALL·E.
Мария: — Не видела. Я правда думаю, что мы немного забежали вперед — пока еще не все наигрались в реалистичность и детализированную имитацию реальности. Мне кажется, новый тренд на эмоциональную абстракцию возникнет года через два.
Фил: — С нашей стороны: постоянно три человека. Плюс мы подключали еще дополнительных аниматоров по необходимости, когда своих рук не хватало. Со стороны клиента:
Фил: — Это хороший вопрос, но нет, не проводили. Идея практически сразу пошла в продакшн, и непонимания ни у кого не возникло. Там же еще реплики идут — легко сообразить, что к чему. Хорошо, что есть простор для личных интерпретаций. Главное, чтобы тело отзывалось и было ощущение биения жизни.
Фил: — Звук и музыку, однозначно! Без музыки — это не жизнь :) Маша, а что бы ты добавила?
Мария: — Прокачала бы еще живее детали состояний, движения и реагирования. Добавила бы всяких милых случайностей и скорее звуки пространства, чем музыку.
Фил: — Мне как человеку с детьми и ежедневными созвонами по работе, в начале было сложно понять смысл этого продукта и кому нужно подобное общение. Но когда я посмотрел примеры использования, вовлеченность и конверсию в покупки, то понял: я недооценивал количество одиноких людей и дефицит в общении. Мне кажется, AI-персонажи могут быть полезны везде, где люди будут согласны воспринимать их как полноценную замену общению с живым человеком.
Схема одного из движений AI-ассистента в парообразной форме
Фил: — Здесь три крутых профи работали несколько месяцев подряд. Поэтому бюджеты подобных проектов — от 1 млн .
Фил: — Я думаю, что команд десять наберется как минимум.
Фил: — Проект мечты я уже делаю, но пока не могу про него рассказывать. А на заказ, я с удовольствием поработаю над медиа-проектом, только не политическим. Все, что связано с искусством, музыкой, философией или психологией. Маша, а ты?
Мария: — Тот, что побуждает жить и встречать мир во всем великолепии. С удовольствием в этом году занималась несколькими интересными печатными проектами для детей, хотелось бы сделать еще что-то хорошее и для взрослых.
Фил: — Да, планируем, но, к сожалению, сегодня большинство проектов под NDA. Мы еще в процессе согласования с клиентами, что мы можем показать.
