Анимированная инфографика для товаров показывает характеристики и преимущества в движении: размеры появляются рядом с изделием, слои материала раскрываются по очереди, функции подсвечиваются по одной. Покупатель понимает товар быстрее, чем при чтении таблицы характеристик, а карточка выделяется среди статичных конкурентов. В клубе ВИПМИ мы делаем такую инфографику для сайтов и маркетплейсов, подробнее на странице анимированная инфографика и визуал для карточек.
Разберём, какие преимущества стоит анимировать, как не перегрузить кадр, какие форматы использовать на сайте и маркетплейсах и как делать инфографику сериями для всего каталога.
Анимированная инфографика для товаров: в чём польза
Обычная инфографика — статичная картинка с подписями. Анимированная показывает информацию последовательно, и каждая деталь получает внимание. Это особенно полезно, когда:
- у товара несколько важных преимуществ, которые сложно уместить в одно изображение;
- нужно показать процесс: сборку, трансформацию, работу механизма;
- важно сравнение: до и после, с аналогом, разные варианты;
- характеристики сложно понять без визуализации, например многослойные материалы;
- карточке нужно выделиться в ленте похожих товаров.
Важно знать. Анимация не заменяет текст и характеристики в карточке. Это способ быстро донести главное, а подробности покупатель найдёт в описании.
Что анимировать в первую очередь
Выберите три-четыре преимущества, которые важнее всего для покупателя и отличают товар от конкурентов. Удобный способ найти их — вопросы покупателей и отзывы: о чём спрашивают чаще всего, что хвалят, что вызывает сомнения. Именно эти моменты стоит показать в анимации.
| Тип информации | Как показать в движении |
|---|---|
| Размеры | Линии размеров появляются вокруг товара, рядом объект для сравнения |
| Материалы и слои | Слои раскрываются по очереди с подписями |
| Функции | Функция подсвечивается и показывается в действии |
| Комплектация | Предметы появляются по одному и собираются в набор |
| Сравнение | Переключение между вариантами или «до и после» |
Как не перегрузить анимацию
Самая частая ошибка — вместить всё. Перечень из десяти преимуществ в коротком ролике превращается в мельтешение, которое никто не запомнит. Правила простые:
- один кадр — одна мысль;
- короткий текст крупным шрифтом, читаемым на телефоне;
- достаточная пауза, чтобы прочитать подпись;
- единый стиль иконок, цветов и шрифтов;
- товар остаётся главным героем, графика его дополняет.
Осторожно. Не используйте в инфографике утверждения, которые нельзя подтвердить: «лучший», «самый прочный», «номер один». Маркетплейсы могут отклонить такие материалы, а покупатели перестают доверять.
Форматы для сайта и маркетплейсов
На маркетплейсах анимированная инфографика обычно размещается как видео в карточке или как один из слайдов. На сайте её можно встроить как видео, анимированное изображение или лёгкую анимацию на CSS и SVG, которая почти не влияет на скорость страницы. Для сайта лёгкая кодовая анимация часто выигрывает: она чёткая на любом экране и весит меньше видео.
Плюсы и минусы анимированной инфографики
| Плюсы | Минусы |
|---|---|
| Преимущества доносятся быстрее и нагляднее | Производство сложнее статичной картинки |
| Карточка выделяется среди конкурентов | Нужно учитывать требования площадок к видео |
| Удобно показывать процессы и сравнения | Перегруженная анимация отталкивает |
| Шаблоны позволяют делать серии для каталога | При смене характеристик ролики нужно обновлять |
Мнение эксперта
«Мы начинаем не с дизайна, а с вопроса: что покупатель должен понять за первые секунды? Обычно ответ умещается в три тезиса. Всё остальное — в описание. Когда клиенты просят добавить ещё пять преимуществ, мы показываем им вариант с тремя и с восемью. Почти всегда выбирают короткий.»
Эксперт клуба ВИПМИ, руководитель направления ИИ-визуала
Серийное производство для каталога
Для больших каталогов анимированная инфографика делается по шаблонам: одна структура и стиль для группы товаров, а данные, фото и подписи подставляются для каждого. Часть процесса можно автоматизировать генератором роликов, который берёт характеристики из таблицы. Так каталог получает единообразный визуал без ручной работы над каждой позицией.
Если нужна видеообложка, которая показывает товар в целом, а не только характеристики, подробнее читайте в статье видео для карточки товара на маркетплейсе. Для товаров, где важна форма со всех сторон, подходит круговой обзор, о котором рассказано в материале 3D-обзор товара на сайте.
Совет. Сделайте анимированную инфографику для нескольких товаров-лидеров и сравните показатели их карточек с похожими позициями без анимации. Так вы поймёте реальный эффект для своего ассортимента.
Как связать с остальным визуалом карточки
Анимированная инфографика должна быть в одном стиле с фото и статичными слайдами карточки. Используйте те же цвета, шрифты и иконки. Тогда карточка выглядит цельно, а бренд узнаваемо. Общий подход к анимации карточек товаров описан в обзоре анимация для карточек товаров на заказ.
Что подготовить для заказа
Чтобы работа прошла быстро, подготовьте фото товара хорошего качества, список характеристик и преимуществ, требования площадки, на которой будет размещение, и фирменный стиль, если он есть. Полезно приложить примеры инфографики конкурентов, которая нравится или не нравится. Если преимущества ещё не сформулированы, начните с анализа отзывов и вопросов покупателей: они подскажут, что важно показать.
Уточните, где будет использоваться анимация: только в карточке маркетплейса, на сайте, в соцсетях или в рекламе. От этого зависят форматы, пропорции и длительность, и лучше сразу заказать все нужные версии.
Как проверить эффективность
После публикации сравните показатели карточки с периодом до изменений: конверсию в добавление в корзину, время просмотра, количество вопросов о характеристиках. Если вопросов стало меньше, анимация справляется с задачей объяснения. Если конверсия не изменилась, возможно, выбраны не те преимущества или анимация слишком сложная. Тестируйте разные варианты на похожих товарах, чтобы найти лучший подход для вашего ассортимента.
Анимированная инфографика в рекламе и соцсетях
Ролики, созданные для карточек, хорошо работают и за их пределами. В соцсетях короткая анимация с преимуществами товара привлекает внимание в ленте и может стать основой для рекламных креативов. Для этого формат адаптируют под вертикальное или квадратное соотношение сторон, добавляют призыв к действию и при необходимости звук. Единый стиль во всех каналах помогает покупателю узнавать товар: увидел рекламу в соцсети, нашёл карточку на маркетплейсе и узнал знакомую анимацию.
Планируйте такие адаптации заранее. Если сразу заложить в производство несколько форматов, это обойдётся дешевле, чем переделывать готовые ролики позже.
Типичные ошибки в анимированной инфографике
- слишком много текста на одном кадре;
- быстрые переходы, из-за которых подпись не успеваешь прочитать;
- графика закрывает товар, и его плохо видно;
- разный стиль у товаров одной линейки;
- анимация не адаптирована для просмотра на телефоне;
- в ролике обещания, которых нет в описании товара.
Перед запуском серии проверьте несколько роликов на реальных покупателях или коллегах, не знакомых с товаром. Если они смогли пересказать главные преимущества после одного просмотра, анимация выполняет свою задачу.
Как выбрать подрядчика
Посмотрите примеры работ исполнителя на реальных карточках, а не только в портфолио. Обратите внимание, насколько читаемы подписи на телефоне, как анимация сочетается с фото товара и соблюдён ли стиль бренда. Уточните, сколько правок входит в работу, в каких форматах передаются файлы и можно ли потом самостоятельно менять тексты в шаблоне. Хорошо, если подрядчик предлагает сделать пилот на нескольких товарах перед запуском серии.
Обсудите и сроки: для сезонных товаров анимация должна быть готова до начала сезона, иначе её эффект будет меньше.
Заложите время на согласование пилота и правки.
Частые вопросы
Сколько преимуществ показывать в анимации?
Обычно три-четыре главных. Больше превращается в перегруженный ролик, который сложно воспринимать.
Можно ли сделать анимацию из существующих фото?
Да. Из качественных фото на чистом фоне можно сделать анимированную инфографику без новой съёмки.
Какой формат лучше для сайта?
Лёгкая анимация на CSS и SVG или оптимизированное видео. Кодовая анимация чётче и обычно легче по весу.
Принимают ли маркетплейсы анимированную инфографику?
Да, в виде видео или слайдов, если материал соответствует требованиям площадки. Требования нужно проверять перед производством.
Как часто обновлять инфографику?
При изменении характеристик, комплектации или упаковки товара, а также если вы находите более сильные аргументы для покупателя.
Оживим характеристики ваших товаров
Пришлите несколько товаров и их главные преимущества. Мы предложим сценарий анимации и сделаем пилот, который можно масштабировать на каталог.
