Микроанимации в дизайне продукта как путь к сердечку пользователя

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

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

В этой статье мы рассмотрим важность микроанимаций в дизайне продукта как способа достучаться до сердечка пользователя (приблизить продукт к MLP) и повысить метрики.

Давайте поговорим о том, как микроанимации влияют на продукт в целом и на пользовательский опыт (User Experience) в частности.

Фидбэк

Анимации показывают пользователям, что их действия завершены, профили зарегистрированы или верифицированы и т.д. Это позволяет пользователям лучше контролировать свои действия и снимает тревогу или гнев при выполнении задач.

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

Улучшенная навигация

Анимации также улучшают навигацию и помогают пользователю ориентироваться в продукте. Сегодня это кажется очевидным, но анимированные переходы с текущей страницы на следующую (например, когда пользователь нажимает на ячейку для просмотра содержимого) показывают, как именно пользователь может вернуться на предыдущую страницу. Всё просто: нужно свайпнуть назад — слева направо. Именно здесь анимация предлагает решение и улучшает пользовательский опыт.

Представьте, если бы в продукте не было анимаций перехода. Здесь, в Ozon Bank, следующая страница появляется поверх предыдущей. Это может (даже на долю секунды) запутать пользователя.

Улучшенное понимание функциональностей

Микроанимации также помогают пользователям лучше понять функциональности продукта.

Анимированные онбординги демонстрируют работу продукта и привлекают внимание к новым функциям, продвигаемым стейкхолдерами (например, для увеличения метрик).

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

Продвижение премиум-функций выглядит более продающе с микроанимациями. Они информируют пользователей о ценностях, которые будут получены после активации Premium-аккаунта. Telegram продвигает свой Premium очень деликатно, чтобы пользователи могли «почувствовать вкус» его фич.

Индивидуальность и фирменный стиль

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

Эти красочные градиенты и динамичные обводки ассоциируются с Apple Music, а не с другими музыкальными стримингами. Анимации оказывают медитативное воздействие на пользователей, выглядят привлекательно и плавно.

Восторг и удивление

Микроанимации создают ощущение восторга и удивления, создавая положительную эмоциональную связь с продуктом. Например, когда вышел 4-й сезон «Очень странных дел», Spotify создал официальный плейлист сериала, который был полон анимаций, доставляющих пользователям новые эмоции от взаимодействия с интерфейсом.

Эмпатия и связь с продуктом

Не только хорошие UX-копирайтинг или дружественный UI создают ориентированный на человека пользовательский опыт в продукте (Human-Oriented User Experience). Микроанимации могут выражать сочувствие и понимание пользователям. Следовательно, они чувствуют человеческую поддержку от продукта, который они используют.

Например, если Shazam не может распознать песню, появляется очень разочаровывающее сообщение: «Мы не совсем уловили это, попробуйте еще раз» (“We didn’t quite catch that, try again”). Если бы на экране была анимация грустной улыбки, то текст не воспринимался бы как что-то формальное и неискреннее. Анимация говорила бы пользователю: «Эй, мне тоже грустно, ты здесь не один, я тебя поддерживаю. Давай ещё раз попробуем". Это могло бы уменьшить разочарование (хотя бы немного) от негативного пользовательского сценария.

Эмоционально вовлекающий пользовательский опыт

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

Например, одна из основных функций Premium в Telegram — доступ к огромной библиотеке анимаций эмодзи, реакций и статусов. На нём основана «экосистема» всего моушн-дизайна Telegram, которая успешно продается пользователям Premium.

В Beatstar, в который я играю каждый день (ахах), есть множество анимаций, делающих игровой процесс весёлым и эмоциональным. Я буквально чувствую, как открывается эта коробка и мне очень хочется прикоснуться к ней.

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

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

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

Анимация — лишь небольшая часть всего пользовательского опыта.

Чтобы оценить эффективность внедрения этой анимации, следует также учитывать:

1. Модальные окна/шторки или онбординги в приложении с акцентом на функции лайка.
2. Маркетинговые кампании, рекламирующие продукт, функцию, экосистему продуктов.
   
3. Ребрендинг в компании. Благодаря нему могло увеличиться общее количество пользователей продукта. Как следствие — общее число пользователей фичи «Лайк»
   
4. Удаление приложений конкурентов с рынков приложений, вероятно, увеличило количество пользователей продуктов-субститутов (например, когда Spotify и Apple Music ушли с российского рынка, большое количество пользователей начало пользоваться российскими музыкальными стримингами).
   

Итак, нет однозначного ответа на вопрос: «Как именно микроанимации влияют на метрики в продукте?». Всё дело в общем пользовательском опыте с множеством факторов и взаимосвязей, которые следует учитывать при подсчёте результатов реализации анимации.

tNPS

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

Retention

Будучи более лояльным или заинтересованным в продукте, пользователь охотнее возвращается к нему.

Time Spent in a Product

Также коррелирует с предыдущими пунктами. Если пользователь лоялен к продукту, то среднее время, проведенное в нём, может увеличиться.

Jobs/Tasks Success or Conversion

Иногда микроанимации помогают пользователю выполнить последние шаги текущего пользовательского пути (User Flow). Например, Mac OS через (как по мне, достаточно раздражающую) прыгающую анимацию показывает, когда задача не выполнена до конца. Таким образом, пользователь буквально вынужден завершить начатый процесс.

Activation

Благодаря микроанимациям пользователи могут лучше понять продукт, премиум функции, ценности продукта во время онбординга. Это может привести к увеличению количества регистраций.

Adoption

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

Микроанимации, интегрированные в продукт, создают как функциональный, так и эмоционально вовлекающий пользовательский опыт, что приближает продукт к минимально привлекательному (MLP).

Хорошие микроанимации требуют определенного уровня навыков в моушн-дизайне (Lottie, Json, After Effects), практики и терпения, однако результаты от их внедрения в продукт превзойдут все ожидания.

#motiondesign #design #productdesign #animations #microanimations #userexperience