Привет! Мы — инициативная группа дизайнеров из Авито — загорелись идеей добавить нашей платформе отзывчивости. Расскажем, почему начали этот стрим, как выбирали элементы интерфейса, создавали анимации разных компонентов и внедряли их в нашу дизайн-систему.
Поделимся наработками по анимациям и хаптику, которые используем в Авито, а ещё поностальгируем по стилю пиксельной анимации и вспомним истоки её зарождения, используя образы Macintosh 1984.
Статья будет полезна дизайнерам, которые хотят делать интерфейсы своих продуктов отзывчивыми.
Немного об эмоциональном дизайне
Он вовлекает пользователей и создаёт связь с ними через отдельные элементы. Такие детали усиливают впечатление от использования продукта, делают его запоминающимся.
Как это работает. Представьте, что вы нажимаете кнопку-сердечко. В ответ на нажатие она пульсирует, а ваш телефон приятно вибрирует, подтверждая действие.
В 2025 году эмоциональный дизайн становится одним из важных подходов в создании интерфейсов: конкуренция растёт, и пользователи уже не удовлетворяются просто приятными продуктами — они хотят большего.
Поэтому мы решили прокачивать Авито в этом направлении и делать взаимодействие с площадкой более запоминающимся и комфортным.
Всё началось с идеи
А именно: мы решили сделать интерфейс более живым, отзывчивым и создать горизонтальный подход, который потом смогут переиспользовать и другие команды.
Начали с общей встречи, где мы поняли: нужно не точечно экспериментировать, а охватывать весь продукт. Некоторые дизайнеры из нашей инициативной группы раньше уже создавали анимации, поэтому мы приступили к делу без длительного изучения теории.
Решили, что важно будет оставить после себя «артефакты» — гайды, которые помогут другим дизайнерам нашей компании внедрять эмоциональный дизайн в их проекты. С помощью этой инициативы мы хотели:
👉 Сформировать единые стандарты по работе с анимацией и хаптиком.
Кстати, а что мы называем хаптиком?
Это инструмент, который делает взаимодействие с интерфейсом более интуитивным и «ощутимым», помогает лучше понимать отклик сервиса на действия пользователя.
👉 Создать для коллег гайды по работе с инструментами эмоционального дизайна.
👉 Собрать анимации и хаптики Авито, чтобы структурировать кейсы, которые уже есть на проде, и привести их к консистентным настройкам. Например, общим параметрам кривых для анимаций.
💡 Мы хотели не просто добавить несколько анимаций ради красивых эффектов, а создать систему, которая станет частью общей дизайн-культуры Авито.
Выбрали компоненты для анимации и синхронизировались с командой дизайн-системы Авито
Проект стартовал с простой, но важной задачи: определить, какие компоненты дизайн-системы нужно анимировать в первую очередь. Мы собрались небольшой инициативной группой и подготовили полный список компонентов: кнопки, чекбоксы, выпадающие списки. Затем выбрали те, с которых стоит начать — исходили из значимости элементов и частоты их использования.
Далее распределили задачи между собой, продумали технические детали — от выбора таймингов до подходящих кривых анимации. На этом этапе нужно было не только разработать идеи, но и согласовать их с командой, которая отвечает за дизайн-систему. Коллеги были рады, что мы взяли инициативу на себя, и предложили дополнительную поддержку для улучшения компонентов.
И согласовали элементы с командой дизайн-системы. В Авито есть отдельная команда дизайнеров и разработчиков, которая занимается поддержанием и развитием нашей объёмной дизайн-системы . Все они давали ценные правки и, основываясь на своём опыте и знаниях, помогали нам делать анимации более плавными.
Подумали, как будем оценивать результаты
Мы в компании привыкли измерять эффективность всего, что касается нашей работы и новых решений. Поэтому нужно было найти метрику и для нашего проекта.
Изучили разные подходы к оценке дизайна и редизайна. Например, рассматривали Microsoft Desirability Tool, разные подходы к оценке через семантический дифференциал и решения некоторых российских компаний.
В итоге остановились на оценке дизайна по методологии VisAWI — Visual Aesthetics of Website Inventory. Выбрали эту методологию за основу, потому что она научно обоснована.
Так как анимации влияют на восприятие продукта, мы хотим измерять их эффект с помощью адаптированной под нас метрики Design Aesthetic Metric. С помощью DAM хотим получить комплексную оценку дизайна приложения и сайта Авито:
👉 Узнать, как сейчас наши пользователи оценивают дизайн Авито.
👉 Видеть, как меняется оценка дизайна платформы.
👉 Сравнивать оценку нашего дизайна с дизайнами конкурентов.
Пока что мы обсуждаем конкретные методики для оценки, подбираем подходящие нам критерии. Поэтому в статье не пишем о результатах или конкретных тестах.
💡 Наша цель — развивать Design Aesthetic Metric, чтобы пользователи воспринимали Авито не только как удобный и быстрый сервис, но и как продукт с плавным, эмоциональным откликом. Каждый компонент интерфейса должен взаимодействовать с пользователем так, чтобы это ощущалось естественно и приятно.
Выстроили процесс создания анимаций
После утверждения списка компонентов мы приступили к созданию анимаций. В процессе опирались на опыт, накопленный ранее в других компаниях, что позволило ускорить процесс и в результате получить, что мы хотели.
Мы разделили анимации на микро- и макроуровни, чтобы эффективнее работать с разными элементами интерфейса.
👉 Микроанимации — это небольшие взаимодействия, например, плавное изменение состояния кнопок, чекбоксов.
👉 Макроанимации охватывают крупные элементы, например, появление поп-апов на экране. Для нас важно, чтобы и маленькие, и большие анимации были одинаково плавными, естественными, а не выскакивали резко из ниоткуда и не раздражали пользователей.
Показать примеры анимаций мы не можем, так как они ещё на этапе разработки. Поэтому следите за обновлениями на Авито!
Согласовали анимации для ключевых компонентов с командой, а потом протестировали их. Мы создали телеграм-канал для сотрудников Авито, чтобы распространить наши наработки внутри компании. Там собираем видео со всеми компонентами, которые мы разрабатывали.
В таком формате удобно покадрово смотреть анимации и оставлять комментарии.
После обсуждений и доработок у нас появился финальный список микровзаимодействий для различных элементов интерфейса.
Создали гайд для других дизайнеров, чтобы решения стали частью общей дизайн-культуры
В документе собрали общий обзор по всем типам анимаций. Рассказали, зачем их внедрять в наши продукты, дали инструкции с кривыми и длительностью анимаций, прописали тайминги, технические требования и примеры использования.
А в конце собрали пошаговый план, как создавать анимации.
Дополнения коснутся всей дизайн-системы. При добавлении анимации к одному компоненту изменения будут проявляться везде, где компонент используется в приложении или на сайте. Например, для одного элемента, который используется на разных этапах пользовательского пути, будет одинаковый ховер.
Так мы стараемся реализовать горизонтальный подход, о котором уже упоминали: новыми элементами взаимодействия могут пользоваться все дизайнеры компании.
Занялись хаптиком: отзывчивость — это важно
Такие отклики помогают пользователю чувствовать завершение действия, будь то добавление в избранное или удаление товара. Кроме того, хаптик — это не только про эмоции, но и про инклюзивность.
Для людей с ограниченными возможностями вибрация — дополнительный отклик, на который можно ориентироваться.
Вибрации уже использовались в некоторых сценариях Авито, но единого подхода не было, поэтому нам нужно было создавать его самим.
Сначала собрали в Фигме все рабочие кейсы, где уже был хаптик, и узнали у их создателей, какие настройки указаны в коде.
Изучили, как устроен хаптик в iOS и Android, прочитали профильные статьи. Это помогло нам понять, в каком направлении двигаться: делать кастомный хаптик или использовать нативные настройки телефонов.
Гайдлайны Apple и Material Design
Пообщались с коллегами из команды дизайн-системы и согласовали использование нативных настроек, чтобы не усложнять процесс: кастомный хаптик чаще используется в играх, чем в приложениях.
Собрали гайд, в котором структурировали ключевые подходы и прописали пошаговое руководство, которое поможет дизайнерам органично интегрировать хаптик в нужные сценарии.
Также хотим добавить в компоненты дизайн-системы свойство HapticFeedback с определёнными настройками для разных видов компонентов и их состояний. Например, для кнопок, свитчеров, ошибочных стейтов.
Распространим наработки среди коллег.
Краткий гайд для дизайнеров, которые хотят внедрить анимации в свои продукты:
Соберите энтузиастов для разработки новых подходов к созданию анимаций.
Обсудите, какие решения хотите внедрять, например, это могут быть анимации элементов, отзывчивость в виде хаптика или всё сразу. Соберите список элементов, над которыми будете работать.
Мы рекомендуем выбирать важные для вашего продукта элементы, которыми люди пользуются чаще всего, например, кнопки, чекбоксы, поп-апы.
Подумайте, как будете оценивать эффективность нововведений. Посмотрите, какие дизайн-метрики уже используются в вашей компании, а если не найдёте ничего подходящего, изучите гайдлайны других компаний. Например, Microsoft или Apple.
Проработайте анимации. Если вы пока плохо разбираетесь в этой теме — посмотрите гайды и видео по теме в интернете, и попробуйте применить эти решения в своём продукте.
Например, наш дизайнер Катя впервые анимировала элементы в другой компании, когда была стажёром, так что не бойтесь пробовать новое.
Не забывайте про согласования — обычно без этого никак в больших компаниях. Например, вы можете принести стейкхолдерам идею на этапе зарождения или утвердить с ними уже готовые решения.
Напишите гайды для всех нынешних и будущих сотрудников компании. Подробно опишите, как использовать анимации и вибрации, чтобы их мог легко внедрить любой дизайнер. Эти гайды станут базой знаний, которая поможет поддерживать единообразие продукта.
Подписывайтесь на наш телеграм-канал: «Любовь, дизайн и метрики», там рассказываем про эмоциональный дизайн, искусство, людей, показываем внутреннюю кухню Авито.
🤗 А ещё хотим выразить признательность
Мы благодарны коллегам — руководителям, дизайнерам, разработчикам, которые поддерживают проект, участвуют в его развитии и верят в успех. Без их вовлечённости, интереса и усилий мы бы не смогли добиться таких результатов и воплотить идеи в жизнь.
