Как «очеловечивали» дизайн-язык Алисы

И что это вообще значит.

Многие воспринимают виртуальных помощников просто как исполнителей голосовых команд вроде «найди», «включи», «отправь». Но у виртуального помощника «Яндекса» — Алисы — есть эмоции и характер. Их визуальное воплощение называют дизайн-языком. Чтобы понять Алису лучше, поговорили с командой, которая работает над «чувствами» виртуального помощника.

Есть несколько вариантов — понятие будет меняться в зависимости от ситуации.

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

Для TED Talks написали бы, что это визуальная интерпретация столпов, которые компания закладывает в бренд: форма, характер, способ коммуникации. Дизайн-язык Алисы — это визуальная история про технологию с человеческим лицом, которая бесшовно встраивается в повседневную жизнь пользователя и вызывает у него определённые эмоции.

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

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

В 2017 году Алиса редко показывала характер. Когда Алису выпустили, она работала только в поисковом приложении «Яндекса». Тогда она умела слышать — то есть понимать устную речь. И реагировать — то есть выполнять поисковые запросы. К ней можно было обратиться через круглую фиолетовую кнопку с микрофоном внутри, но белый медиатор отражал только системные состояния: «слушает», «думает», «говорит», «ошибка».

В 2020 году мы начали визуализировать характер Алисы. На рынке стало больше виртуальных ассистентов, умеющих «слушать и реагировать». Чтобы выделить Алису на фоне других, мы решили придумать, за счёт чего можно показать её особенность — эмоциональность.

У помощника Google нет имени — это минималистичные геометрические фигуры в корпоративных цветах.

Siri от Apple — буйство градиентов, одинаково «пульсирующее» независимо от запроса.

Мы же решили развивать Алису как персонажа с характером: она энергична (отвечает на просьбы бодрым голосом), эмпатична (поддержит, если ей пожаловаться), умеет радоваться (например, когда слышит, что она красотка) и обижаться. А ещё способна обидеться, если назвать её Siri.

В том же году Алису попробовали «поселить» в колонке. Тогда мы готовили к выпуску новую колонку «Яндекс Станция Макс». Это первое наше аудиоустройство с LED-экраном. Изначально на экране хотели просто показывать справочную информацию — погоду или время. Но позже поняли, что с его помощью Алиса способна стать ещё человечнее: на экране можно отображать её пробуждение, когда пользователь зовёт на помощь или предлагает поговорить, и реакции на эти запросы.

Создавать маскота и рисовать «гуманоидный» образ мы не хотели. Кроме того, нас ограничивал размер экрана — 25х16 пикселей. Размышляя над образом Алисы, мы рассматривали три варианта:

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

А ещё решили, что у колонки будут глаза, как в мультиках Pixar. Проработали кучу вариантов, но пользователям (все «пробные» запуски мы тестируем в сервисе «Толока») больше всего понравился результат третьей итерации. Первые глазки показались им слишком детскими, а по вторым люди не всегда считывали эмоции Алисы.

В 2022 году мы решили создать единый дизайн-язык Алисы. Она «жила» уже не только в поиске и колонках, но также в планшетах, компьютерах, телевизорах, других приложениях компании. А ещё в соцсетях, на посадочных продуктовых страницах и в офлайне — на упаковках устройств и брендированных стойках в магазинах.

Нашего тогдашнего набора фирменной графики — а это всего несколько отрисованных кнопок и палитра фиолетовых оттенков — было недостаточно.

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

Так, вместе с внешними консультантами мы окончательно определили, что фиолетовый круг — это среда обитания Алисы, или её дом, а белый медиатор — она сама. С того момента раньше скорее функциональный «центр» логотипа стал основой нашего продуктового брендинга и анимаций.

Чтобы подчеркнуть главенство Алисы на логотипе, мы увеличили размер белого медиатора, который до этого был пропорционален кругу. А ещё изменили оттенки «среды обитания» — заменили градиент на однотонный цвет. Для такого решения было несколько причин:

Сейчас однотонный фиолетовый цвет тёплого оттенка. В будущем заменим его на более холодный. Мы не стали переходить к холодному сразу, чтобы дать пользователю привыкнуть — ведь мало кто любит резкие перемены. Холодные цвета, как нам кажется, больше ассоциируются с «технологичностью», что важно, поскольку голосовой ассистент — это всё-таки технологический продукт. А «тепло» будем передавать через анимации самой Алисы.

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

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

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

После перехода к новой концепции мы продолжаем расширять спектр эмоций.

В 2023-м Алиса будет развиваться и дальше. Основной вектор будет не на развитие количества эмоций, которые понимает и выражает Алиса, а на глубину ответов. Развитие виртуального помощника зависит от возможностей устройств, где она живёт. Например, размер телевизора значительно больше: это позволит нам делать ответы более полными и содержательными.

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