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

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

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 29 средняя оценка: 4.86 (рейтинг: 97%)

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

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

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

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

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

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

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

  • Первый кадр делайте самым информативным. Некоторые операционки и почтовики не показывают анимацию, а останавливаются на первом скрине.

  • Не пестрите анимашками. Придерживайтесь правила: в одной прокрутке - одна анимация. Бывают исключения, когда это выглядит неплохо, но нужно постараться:

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

  • Качество анимации. Любая картинка в плохом качестве вряд ли будет побуждать к покупке, скорее она вызовет противоположные эмоции.

  • Таймеры. Счётчики лучше не делать gif - не очень приятно, когда до конца акции два часа, даже если ты зайдёшь в письмо через неделю :) Используйте  сервисы типа motionmail, которые ведут отсчёт в реальном времени и по окончанию заданного срока таймер обнуляется.  

  • Анимировать можно и текст. Опять же, не переусердствуйте с этим. Пример gif-текста от Розетки заменяет тысячи слов: интрига есть; оформление письма яркое, но приятное; смотреть интересно и даже забавно.

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

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

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

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

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

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

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

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

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

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

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

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

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

#2 Обучение

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

Giphy.com

Много готовых гифок, разбитых на категории. Также можно:

  • загрузить своё видео и из него получить гифку
  • создать анимированное слайдшоу
  • сделать картинку с анимированным текстом
  • отредактировать существующую гифку
  • установить дополнение к Google Chrome, чтобы гифки всегда были под рукой
  • скачать приложение и записывать гифки с экран

Gifs.com

Качество готовых гифок не всегда идеальное, зато можно создавать свои гифки, и эффекты на них, стикеры и т.д.  

iLoveIMG

Помогает сжимать анимацию почти в два раза без сильной потери качества.  

P.S. Смотрите моё обучающее видео по анимации в письмах и оставляйте комментарии:)

До новой встречи в нашем блоге! ;) 

 

 

Только для подписчиков: 
НЕ Только для подписчиков

Добавить комментарий

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