То, что началось как простое исследование, теперь доступно миллионам слушателей и добавляет очарование каждому «лайку» в приложении. В этой статье мы рассмотрим процесс проектирования и реализации микровзаимодействия для иконки сердца и покажем, как эстетика может влиять на метрики.
Каждый день миллионы людей используют Spotify для прослушивания любимой музыки и подкастов. И мы стремимся обеспечить приятные впечатления для наших пользователей. Микровзаимодействия и восторг могут сыграть в этом большую роль.
Как написал Вэл Хэд в книге «Designing Interface Animation: Improving the User Experience Through Animation»: «Статические интерфейсы расстраивают и кажутся сломанными. Хорошо спроектированная анимация становится неотъемлемой частью сложного, современного и заслуживающего доверия дизайна».
Выбор иконки сердца
В Spotify у нас есть два дня в месяц (а также ежегодная неделя хака), когда мы приостанавливаем ежедневную командную работу, и каждый может работать над чем угодно. Это фантастическая возможность проявить креативность, изучить новые идеи и узнать о различных частях Spotify. Мы (разработчик и дизайнер) решили использовать несколько дней для того, чтобы сделать приложение более веселым и увлекательным.
Мы решили обратить свое внимание на «лайк». С помощью «лайка» вы говорите Spotify, что вам нравится конкретная песня, альбом или плейлист. Найти музыку, которая волнует вас и заставляет двигаться – одно из лучших чувств в мире. Однако, смена внешнего вида кнопки «Нравится» с пустого сердца на заполненное, не передавала это волнительное чувство.
И мы захотели это изменить.
Экспериментируя с движением
Анимация в Spotify не в новинку, принципы движения уже были доступны в нашей дизайн-системе Encore, которая очень помогла на фазе формирования идей и исследования. Это дало ответ на важный вопрос – как использовать движение, чтобы сделать опыт Spotify выразительным, плавным и простым в использовании.
Стиль Spotify
Мы добавляем движение в наши продукты, вдохновляясь ритмом музыки. Он характеризуется импульсами и сиянием света и цвета.
Руководящие принципы проектирования:
Использование движения с целью: движение обеспечивает ориентацию и стимулирует взаимодействие. Показывая, что что-то происходит, оно помогает уменьшить разочарование.
Обеспечение фидбека: анимация и переходы побуждают пользователей исследовать приложение. Движение – это способ показать, что интерфейс реагирует.
Добавление восторга: Движение помогает оживить интерфейс. Это маленькие штрихи и внимание к деталям, которые могут сделать приложение красивее.
Изучение разных тем
Использование языка дизайн-системы Spotify (Encore) помогло нам провести мозговой штурм и изучить различные концепции. Это обеспечило большую игровую площадку, на которой мы могли изучить, как эти концепции могут выглядеть в микровзаимодействии продукта.
Несколько ранних концептов
После того, как мы изучили все концепты в статическом виде, мы создали статичные раскадровки, чтобы лучше донести идеи до других людей. Это также помогло нам задуматься о времени и хореографии действия. Мы стремились к продолжительности максимум 500 миллисекунд и 60fps, чтобы найти идеальный баланс между достаточно быстрым, но все же понятным движением.
Теперь начинается самое интересное
Мы создаем микровзаимодействия в After Effects. Он обеспечивает максимальный контроль на стороне анимации и позволяет удобно изменять тайминги и типы форм. Поскольку исторически After Effects – это в основном пост-продакшн фильма, мы использовали Inspector Spacetime. Этот удобный плагин отображает продолжительность в миллисекундах вместо кадров в секунду или длительность по умолчанию.
Различные варианты, рассмотренные в ходе исследования
Как мы применили этот дизайн в продукте
С технической стороны для управления анимацией мы решили использовать Lottie. Lottie – это фреймворк с открытым исходным кодом для рендеринга векторных анимаций, экспортированных из After Effects, который широко используется в мобильных приложениях. Выбор правильной анимации означал тестирование того, как она ощущалась в реальном приложении, и мы взломали инструмент быстрой отладки, который позволил нам быстро переключаться между различными анимациями.
Мы также использовали этот полезный список поддерживаемых функций Lottie для After Effects, чтобы убедиться, что использовали правильные формы и стили, поддерживаемые iOS и Android.
Изучив различные концепции, мы нашли желаемый вариант. Вот он:
Обновленное микровзаимодействие в мобильном приложении
Мы хотели пойти еще дальше и заставить пользователя на самом деле «чувствовать» ритм, когда он нажимает кнопку «Нравится». Итак, мы начали изучать тактильные отзывы. Мы экспериментировали с различными инструментами для создания индивидуального тактильного фидбека, но в итоге решили использовать встроенный фидбек iOS для лучшей обратной совместимости и простоты.
Выводы и планы на будущее
Новый опыт оценки композиций теперь используется в приложении Spotify на iOS и этим летом появится на Android. Мало того, что пользователям, кажется, это понравилось, но мы также узнали, что добавление удовольствия к подобному действию заставляет пользователей чаще взаимодействовать с кнопкой и лайкать больше контента – улучшая нашу способность давать отличные рекомендации. Это стало для нас ключевым моментом, и доказало, что восторг не только повышает качество и узнаваемость бренда, но и улучшает метрики.
Мы уже изучаем дополнительные действия в приложении и общаемся с другими командами, которые рады добавить микровзаимодействия к различным функциям и привнести больше радости в опыт Spotify.
Следите за следующими улучшениями приложения!
Топ коментарі (0)