Наталья Устименко

02 июня 2017

12 мин

3.61

Три принципа GIF-анимации в письмах

Емейл-маркетологи всегда работают над улучшениями своих email-рассылок - находят новые способы удивить и заинтересовать своих подписчиков. Одним из таких вау-эффектов считается gif-анимация. Столько уже о ней написано и сказано, но оказалось, что у нас в блоге не было отдельной статьи на эту тему:) Быстро исправляем ситуацию.

Как добавить анимацию в письмо?

Никаких особых знаний и навыков для этого не нужно - точно так же как и обычную картинку. Так это будет выглядеть в редакторе.

Добавление анимации в письмо

Куда сложнее будет выбрать, создать и определиться, а для чего в письме вообще нужна гифка и стоит ли заморачиваться?

Особенности использования gif-анимации в рассылках

Помните о весе. Анимация будет воспроизводиться только после того, как полностью загрузится. Для этого она должна быть лёгкой. Если для обычных картинок допустимый размер 2 МБ, то для gif - 125 -800 кб.
Первый кадр делайте самым информативным. Некоторые операционки и почтовики не показывают анимацию, а останавливаются на первом скрине.
Не пестрите анимашками. Придерживайтесь правила: в одной прокрутке - одна анимация. Бывают исключения, когда это выглядит неплохо, но нужно постараться:

Использование Гиф в письмах

Качество анимации. Любая картинка в плохом качестве вряд ли будет побуждать к покупке, скорее она вызовет противоположные эмоции.
Таймеры. Счётчики лучше не делать gif - не очень приятно, когда до конца акции два часа, даже если ты зайдёшь в письмо через неделю :) Используйте сервисы типа motionmail, которые ведут отсчёт в реальном времени и по окончанию заданного срока таймер обнуляется.
Анимировать можно и текст. Опять же, не переусердствуйте с этим. Пример gif-текста от Розетки заменяет тысячи слов: интрига есть; оформление письма яркое, но приятное; смотреть интересно и даже забавно.

Пример рассылки магазина Розетка

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

Анимированные категории

Эффективный email-маркетинг с eSputnik

Зачем использовать gif-ки в письмах?

Если вы заметили, сейчас всё больше брендов добавляют в письма анимацию. Не стоит считать, что после добавления гифки в емейл-рассылки у вас резко взлетят продажи, переходы или открытия писем. Это набирает популярность благодаря тому, что так можно больше внимания привлечь к своему товару\услуге. Три принципа анимации:

#1 Развлечение

Пример рассылки Bonobos. Вряд ли две едва заметные анимированные акулы повысят продажи и ещё меньше вероятность того, что на реальной рубашке они тоже будут двигаться. Зато такая простенькая анимашка делает письмо более живым.

Пример анимации в рассылке Bonobos

Включить в игру

Правильная анимированная картинка поможет побудить пассивного читателя к действию. Например, можно сыграть на чём-то известном, что не оставит равнодушным большинство ваших подписчиков. Мне понравилась рассылка магазина 220 вольт, которая заставила меня улыбнуться. Ну кто же в детстве не играл на Денди в игру "Охота на уток" или хоть раз слышал о ней? Баннер даже сохраняет пиксельную атмосферу детства:) Помимо ностальгии, эта анимация вызывает желание нажать на кнопку “Старт”

Gif-анимация для промоакции

#2 Обучение

Вместо тысячи слов лучше показать как что-то работает наглядно. Чтобы анимация воспринималась легко, постарайтесь уместить её в 10-20 секунд. Как вариант, можно разбивать инструкцию на небольшие этапы. Например, как сделали ПриватБанк - коротенькая демонстрация их приложения, с основными шагами, которые нужно выполнить для оплаты коммунальных услуг.

Инструкция ПриватБанк

Посмотрите, теперь оплачивать вашу коммуналку можно быстрее и удобнее. Точно так же можно иллюстрировать любые другие инструкции:

Использование промокода
Оформление заказа в корзине
Технические характеристики какого-нибудь товара
Как установить приложение
Особенности пользования сервисом или сайтом и т.д.

#3 Вовлечение

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

Заинтересовать товаром

Не знаете что такое биван - тогда загляните в емейл-рассылку к компании MadRobots. Смотрите, как просто воспользоваться надувным диваном и насколько он компактный.

Анимированный пример использования Биванов

Заменить длинные описания

Что беспокоит каждую девушку? Конечно же её красота. Эйвон на этом и сыграл в письме. Было бы скучно просто написать: скачай приложение и посмотри, как ты можешь легко и просто выбрать себе мейкап, а вот показать в письме как за секунду меняются разные образы - куда круче.

Анимация в письме Avon

Дополнительный акцент на одном элементе

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

Анимация в письме TopMan

Общепринятая практика в шапке письма выделять блок с акциями. В интернет-магазине детских товаров Kideria пошли немного дальше и добавили в кнопку с акциями небольшую анимацию в виде солнышка.

Kideria, пример анимированного элемента

Показать товар со всех сторон

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

Last post

Где взять анимацию?

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