1 2 1160x620 - Как мы вдохнули жизнь в «Сердце» Spotify

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

Каждый день миллионы людей используют Spotify для прослушивания любимой музыки и подкастов. И мы стремимся обеспечить приятные впечатления для наших пользователей. Микровзаимодействия и восторг могут сыграть в этом большую роль.

Как написал Вэл Хэд в книге «Designing Interface Animation: Improving the User Experience Through Animation»: «Статические интерфейсы расстраивают и кажутся сломанными. Хорошо спроектированная анимация становится неотъемлемой частью сложного, современного и заслуживающего доверия дизайна».

Выбор иконки сердца

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

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

И мы захотели это изменить.

Экспериментируя с движением

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

Стиль Spotify

Мы добавляем движение в наши продукты, вдохновляясь ритмом музыки. Он характеризуется импульсами и сиянием света и цвета.

Руководящие принципы проектирования:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как мы вдохнули жизнь в «Сердце» Spotify
Использование движения с целью: движение обеспечивает ориентацию и стимулирует взаимодействие. Показывая, что что-то происходит, оно помогает уменьшить разочарование.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как мы вдохнули жизнь в «Сердце» Spotify
Обеспечение фидбека: анимация и переходы побуждают пользователей исследовать приложение. Движение – это способ показать, что интерфейс реагирует.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как мы вдохнули жизнь в «Сердце» Spotify
Добавление восторга: Движение помогает оживить интерфейс. Это маленькие штрихи и внимание к деталям, которые могут сделать приложение красивее.

Изучение разных тем

Использование языка дизайн-системы Spotify (Encore) помогло нам провести мозговой штурм и изучить различные концепции. Это обеспечило большую игровую площадку, на которой мы могли изучить, как эти концепции могут выглядеть в микровзаимодействии продукта.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как мы вдохнули жизнь в «Сердце» Spotify
Несколько ранних концептов

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

Теперь начинается самое интересное

Мы создаем микровзаимодействия в After Effects. Он обеспечивает максимальный контроль на стороне анимации и позволяет удобно изменять тайминги и типы форм. Поскольку исторически After Effects – это в основном пост-продакшн фильма, мы использовали Inspector Spacetime. Этот удобный плагин отображает продолжительность в миллисекундах вместо кадров в секунду или длительность по умолчанию.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как мы вдохнули жизнь в «Сердце» Spotify
Различные варианты, рассмотренные в ходе исследования

Как мы применили этот дизайн в продукте

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

Мы также использовали этот полезный список поддерживаемых функций Lottie для After Effects, чтобы убедиться, что использовали правильные формы и стили, поддерживаемые iOS и Android.

Изучив различные концепции, мы нашли желаемый вариант. Вот он:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как мы вдохнули жизнь в «Сердце» Spotify
Обновленное микровзаимодействие в мобильном приложении

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

Выводы и планы на будущее

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

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

Следите за следующими улучшениями приложения!

Свежие вакансии
                        Geoscan Geoscan Технический дизайнер Офис Санкт-Петербург 60 000 - 80 000 ₽
                        Eiter-mortgage Eiter-mortgage Директор по UXUI дизайну Офис Ереван
                        Intermedia Intermedia Intermedia Офис Санкт-Петербург
                        Perfluence Perfluence Perfluence ищет UX/UI-дизайнера Удаленно Москва От 90 000 ₽
                        Кометрика Кометрика Кометрика ищет Middle UI/UX Полная Москва, Казань, Нижний Новгород от 100 000 ₽
Все вакансии

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

1
  1. Совершенно не понятно из статьи почему выбрали именно этот вариант. Как именно он повышает качество и узнаваемость бренда и какие метрики улучшает.

Добавить комментарий
Похожие записи

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

Введение в новую систему Motion Material Design, паттерны переходов

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

Nielsen Norman Group о роли анимации и микровзаимодействий в UX дизайне

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