Интерактивные email-рассылки. Есть ли у них будущее?

Письма всё больше становятся похожи на мини-сайты не только в плане оформления, а и по возможности добавлять разный интерактивный контент. Сейчас можно прийти в ужас от того, что называют интерактивностью - это и гифки, и таймеры, и обычные кнопки…. Нет. Это элементы, с которыми подписчик может так или иначе взаимодействовать в письме без перехода на сайт. Давайте расставим все точки над “ё” и заодно узнаем стоит ли возлагать большие надежды на интерактивность.

Тестирование интерактивных элементов в email-рассылках

Я отправила тесты на все мои адреса (да, у меня их много) и различные устройства с разными вариантами интерактивности.

Подопытными были выбраны:

• самые популярные почтовики в нашем сервисе
• нативные почтовики на мобильных
• мобильные устройства с ОС: IOS, Android, Windows
• зарубежные инструменты для создания интерактивного контента

Пока разные интерактивные элементы в email-рассылки добавляются только через код. Давайте посмотрим, что можно уже использовать и оправдают ли затраченные усилия ожидания.

Смена картинок при наведении

Реализуется с помощью: freshinbox, emailmonks и т.д.

Такой результат достигается с hover-эффектом, протестировать как это работает можно с помощью rollover, который работает только в Gmail, Thunderbird, Apple mail.

Следует так же учитывать, что на мобильных нет курсора - наведение и щелчок будет приравниваться к одному и тому же действию. Однозначно, не все такие пользователи как я, но на мобильном у меня по умолчанию открывается ссылка по клику. Я даже не заметила, что в письме был такой блок :)

В большинстве писем отображается просто статичный кадр и даже в моих тестах на Outlook mobile и web. Также в статье указано, что Gmail не поддерживает rollover, но это касается конкретного примера - можно найти отдельные решения для рассылок в Gmail и они работают довольно неплохо )

Подстановка такого изображения в разных сервисах осуществляется только вручную, прописав код в письмо. В eSputnik вы можете добавлять такие элементы в несколько кликов без вмешательства в код.

Смотреть инструкцию по добавлению Ролловера в письмо >.

Карусель

Реализуется с помощью: freshinbox, emailmonks и т.д.

Выглядит это как полоса изображений, которые можно переключать вправо/ влево.

Чтобы добавить на сайт такую ленту - есть разные плагины, чего не скажешь о письмах. Проблема в том, что некоторые типы CSS не поддерживаются и пользователь увидит только главное изображение. На сайте freshinbox.com есть разные заготовки - можно прописывать их примеры или отправлять с сайта. Взглянем на результаты:

Карусель даже не отображается толком в почтовиках - только главное изображение. Через раз справился с отображением Outlook, но порадовали стандартные почтовики iPhone и Android, хотя не уверена, что ими часто пользуются :)

В списке почтовиков не указан Yahoo! Mail, ведь он не слишком популярен среди отечественных пользователей, но теста ради нужно было проверить и его. На ПК карусель отработала, а вот на мобильном - нет.

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

Форма опроса в теле письма

Реализуется с помощью: google forms, emailmonks и т.д.

Чтобы добавить форму опроса - чаще всего размещают кнопку и под неё прописывают ссылку с Google Docs. Можно пойти более хитрым путём и добавить форму прямо в письмо. Каково же было удивление, когда наша форма показалась на всех устройствах и во всех почтовиках. И только Outlook, как обычно, отличился нестабильностью.

Популярные почтовики порадовали корректным отображением формы:

• внешний вид чекбоксов и шрифтов не изменились
• возможно заполнение формы
• отправка сработала

Клиент Mail.ru даже перенёс по слогам слово “подарки” :)

В Gmail на Android включился режим “смотреть, но не трогать” - форма показалась, но она не активна для заполнения. Хуже ситуация в Outlook 2010/13 и Mobile

Изменились шрифты, сломалась кнопка, но главное - чек-боксы не работают. Хотя, в ранних версиях всё было отлично.

В нашем случае - с 1 из 10 устройств нельзя было заполнить форму, поэтому, чтобы перестраховаться лучше добавлять и ссылку на опрос. И да, если у вас 15 вопросов, вероятно, тоже не стоит их все сразу добавлять в письмо. Таки пошаговая форма будет куда удобнее.

Поисковик в письме

Реализуется с помощью: emailmonks и т.д.

Вероятно, вы встречали в письмах подобные поисковики:

Ничего особенного - просто картинка, ссылка под которой ведёт на поисковик на сайте. В emailmonks есть готовый поисковик, в котором можно прямо в письме прописывать запрос. Можно использовать гугл-поиск или строку поиска с вашего сайта.

На сайте emailmonks даётся готовое решение для встраивания кода в письмо и указано, что такой поиск будет работать на Apple Mail, Yahoo Desktop, AOL, Lotus Notes, Outlook 2007+, Outlook.com, Mobile App (Gmail App, Yahoo App) etc.

При тестировании же скрин практически во всех почтовиках выглядел одинаково "Упс, ваш емейл клиент не поддерживает поиск в письме?":

Эта ситуация повторялась практически везде:

• В Gmail App форма подгрузилась строка поиска только в веб-версии.
• Почтовый клиент Inbox на IOS нас тоже особо не порадовал, не отобразив форму.
• Зато в Apple Mail наконец-то форма заработала!

Если почитать на сайте, разработчики опять добавляют ложку дёгтя: “Поскольку Apple имеет ограниченную поддержку текстового поля, пользователи Apple не смогут заполнить поле или ввести «пробел» между словами. Однако «Alt + Space» может решить проблему.” Хотя, в наших тестах форма легко заполнялась, даже если ввести три слова.

В Yahoo! поисковик сработал, но это скорее радостная весть для тех, кто отправляет рассылки зарубеж, в силу непопулярности Yahoo mail среди наших пользователей.

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

Например, пару слов о другой функции - фиксированная кнопка СТА в письме. При скроле кнопка всегда должна быть видимой внизу письма:

В общем, из всех отправленных тестов, отработала у меня кнопка только на нативном почтовике Android. Доверяйте, но лучше проверяйте :)

Интерактивность в письмах для гиков

Реализуется с помощью: волшебника вёрстки Justin Khoo, гиков table tr td :)

Примеры того, что можно сверстать вручную, но это действительно нужно быть фанатиком.

1) Freshinbox

Для “не верстальщика” придумать и внедрить такие активности в письмо довольно сложно. Главным образом их волнует Safari и iOS, чтобы там всё красивенько смотрелось. По ссылке можно поиграться с примерами от freshinbox и это впечатляет.

• Интерактивная ёлка

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

• Паззл

Задача подписчика - кликать на ячейки с буквами и вычислить правильное слово-код. Есть готовые комбинации при сборе которых будут появляться определёные фразы. Спойлер: только при вводе ACID появится кнопка “Получить купон”

В блоге можно найти гораздо больше примеров, это только те, что мне понравились :)

2) Table tr td

На сайте можно подписаться на рассылку, чтобы получать свежую порцию вдохновения или просматривать готовые примеры. Кусков кода или полностью описанных механик я не нашла, да и особо не хотелось тестировать) Если у нас видео не воспроизвелось нигде, кроме iPad, тогда о чём может быть речь с более сложным кодом?

Примеры, которые мне понравились на сайте:

• Раскраска

Немного ребячества и отличного настроения на ближайшие минут 15-20. Выбирайте цвет в палитре и нужный элемент на картинке окрасится в нужный цвет.

• Сапёр в письме

Кто же из нас не играл на старенькой Винде в игру “Сапёр”. Оказывается, такое можно добавить и в письмо. Правда, долго не поиграешь - размещение бомб на поле не меняется и флажки нельзя расставлять. Но если получить такое на почту - впечатляет.

• Мастер пиццы

На готовый корж по клику можно накидывать оливки, соус, сыр и т.д.Почему ингредиенты добавляются только в определённой последовательности? Мне, например, нравится, когда сыр сверху :)

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

Видео в письме

Реализуется с помощью: vidyard.com, realtime и т.д.

Графический контент в письмах лучше, чем 1000 слов. Тем более, эксперты вроде eMarketer.com прогнозируют будущее за видеоматериалами. А можно ли добавить видео в письма? Если вы собираетесь добавлять видео, интернет говорит, что видео корректно отработает только на HTML 5.

Как было обещано: cтандартные клиенты iOS, Apple Mail и Outlook.com, позволят получателям воспроизводить ваше видео в самом почтовом клиенте, не переходя по ссылке. Все остальные клиенты, устройства Android и Windows, будут отображать статичное изображение. Начинаем тестировать:

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

Письмо выглядит довольно неплохо. Но не уверена что стоит тратить много усилий на то, чтобы в итоге всё равно получить в письме статичный скрин. И даже полюбившийся мне за время тестов Yahoo, решил, что воспроизведение видео в письме будет лишним.

Итого. Из всех протестированных инструментов отработала только форма-опроса. Остальные пока не готовы к массовым рассылкам. Возможно, у вас есть свои наблюдения на эту тему - расскажите. С удовольствие восполню знания и протестирую что-то новое :)

До новых встреч!