23 примера использования Ролловера в письмах

Интерактивный контент - это любой элемент email-рассылки, который требует от получателя активного действия: кликнуть, навести курсор, коснуться экрана смартфона и т.д.

С каждым годом спрос на такие элементы возрастает, но почтовики не спешат поддерживать фантазии отправителей и многие из интерактивных фишек пока работают только в вебе. В свою очередь маркетологи не сдаются, стараясь использовать максимум “вау-блоков” и в письмах объясняют подписчикам: “Если вы хотите увидеть это письмо интерактивным - жмите веб-версию”. А стоит ли игра свеч, если получатель даже не удосужится перейти по этой ссылке?

Идеи для использования ролловера в рассылках

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

Держите идеи для чего можно использовать интерактивные картинки.

Ролловер в карточках товаров:

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

1.Выделите один товар в списке

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

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

2. Покажите товар на модели

Бывает, что товары на картинках и во время примерки кардинально отличаются и покупка клиента становится воплощением популярного демотиватора “Ожидания/ реальность”. Немного помочь с выбором помогут фотографии, которые покажут товар в действии.

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

3. Покажите товар с разных сторон

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

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

4. Дайте возможность рассмотреть поближе

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

В емейл-рассылке proskater.ru представлены пуховики с тремя разными видами карманов, которые так важны в холодную зимнюю пору.

5. Покажите ассортимент

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

Ролловер в текстовых блоках

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

6. Показывайте цены самым любопытным

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

Подход похож на оффлайн магазин, когда вы прогуливаетесь по павильону, подходите к понравившемуся товару и только потом видите бирку с ценой.

7. Давайте подробную информацию

Компания freshinbox.com привела интересный пример рассылок DirecTV Cinema. Получатель может навести курсор на заголовок фильма и картинка изменится на информацию о фильме:

• пользовательские рейтинги,

• продолжительность,

• устройства, на которых можно воспроизвести фильм.

Или ещё один вариант - спрятать под картинку длинное текстовое описание, которое обычно находится в карточке товара.

8. Разнообразьте блоговые статьи

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

9. Покажите функциональность

Как говорится: «Лучше один раз увидеть, чем сто раз услышать». А тем более - подписчик не будет тратить время на прочтение длинного текста о возможностях и фишках товара. Да и драгоценного места текст может занять довольно много. Чтобы долго не описывать функциональность, иногда достаточно показать её в нескольких картинках.

Попробуйте несколькими словами описать фанатам разборной молот Тора. Согласитесь, интерактивная картинка в письме ThinkGeek решила эту проблему лучше. Поэтому иногда лучше заменять текстовые описания на одну “говорящую” картинку.

Использование ролловера на баннерах

Баннер - это один из самых ярких элементов без которого сложно представить любую проморассылку. Попробуйте и их немного разнообразить.

10. Объединяйте баннера

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

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

11. Сохраняйте интригу

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

12. Запускайте анимацию

Rollover подразумевает смену двух картинок, но для разнообразия можно “оживлять” картинку с помощью анимации.

Также использование подмены поможет решить проблемы, когда гифка:

• Запускается сама по себе и клиент видит кадры непоследовательно.

• Не зациклена и она уже полностью проигралась, когда клиент долистал до неё.

• Находится рядом с другими анимированными элементами.

Теперь только клиент будет решать когда сработает гиф-анимация.

Ролловер и кнопки призыва к действию

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

13. Спрячьте призывы к действию

Как вариант, можно скрыть кнопки в карточках товаров, используя ролловер.

Таким образом клиент увидит кнопку только если наведёт курсор на интересующий товар и ваше письмо не будет перенасыщено лишними элементами.

14. Усиливайте кнопки СТА

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

Согласитесь, кнопка так и зазывает кликнуть по ней и перейти к игре Super Mario.

15. Давайте несколько кнопок

Пусть они будут одинаковыми по форме и внешнему виду, но при наведении на кнопку происходит настоящая магия.

Следует помнить, что кнопки с Ролловером - это тоже картинки. СТА не нужно будет верстать, но важно позаботиться какой Альт-текст или кнопка отобразится при отключенных изображениях.

Делайте коллажи

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

16. Разнообразьте коллажи

Если вы делаете коллаж одной цельной картинкой, то можно поиграться с его затемнением/осветлением при наведении.

17. Делайте интерактивным каждый элемент

Если же у вас под каждой картинкой в коллаже спрятана отдельная ссылка и этот блок свёрстан в редакторе, то здесь уместным будет другой подход. Добавить интерактивность можно на каждый элемент отдельно. Например, как в письме компании Virtus.

При наведении курсора картинка становится цветной и по клику можно перейти на страницу конкретного товара.

18. Используйте несколько ролловеров

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

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

Используйте ролловер для любого элемента письма

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

19. Побудите посмотреть видео

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

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

20. Собирайте отзывы

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

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

21. Расскажите, что за QR-кодом

Qr-код довольно часто можно встретить в письмах рядом с кнопками мобильного приложения. Подробную информацию о выгодах после установки добавляют разве что только в выделенных рассылках, посвящённых исключительно приложению.

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

22. Играйте с клиентом

С помощью ролловер можно добавить небольшой элемент геймификации:

• провести викторину прямо в письме

• добавить опросник со скрытыми ответами

• загадать загадку и т.д.

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

23. Сделайте кнопки соцсетей более привлекательным

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

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

Как в eSputnik добавить Ролловер в письмо?

Можно найти немало примеров о том, как добавить Rollover через код. Когда мы тестировали такие “заготовки”, оказалось много подводных камней - один пример заточен только под gmail, другой наоборот не воспроизводится в этом почтовике.

Для наших пользователей мы добавили возможность размещать ролловер-эффект прямо в редакторе без работы с кодом.

То есть при работе с любым изображением вам будет предложена возможность включить эту функцию, соблюдая простые условия:

• Rollover применяется только для картинок. Текстовые блоки, кнопки и т.д. тоже придётся делать картинками. В противном случае придётся добавлять дополнительные стили через CSS.

• Используйте для подмены только два изображения: основную и ту, которая будет показывать при наведении мышкой.

• Соблюдайте пропорции. Соотношение сторон второстепенной картинки должно быть таким же, как и у основной. Иначе при наведении мыши верстка письма может нарушаться.

• Указывайте ссылку. Ссылка на сайт проставляется одна общая для обеих картинок.

• Задавайте альтернативный текст один раз в соответствующем поле и он автоматически подставится обеим картинкам.

Важно помнить, что функция работает в ограниченном количестве почтовых сервисов: Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, MacOS Apple Mail. Если почтовик не поддерживает такую интерактивность - будет просто статичный блок, который не сменится при наведении.

А как насчет мобильного?

Ограничение ролловера в том, что он не будет работать на мобильных устройствах, точнее будет, но не совсем так как вы задумали:

• Если ссылка указана - ролловер сработает слишком быстро и пользователь отправится на целевую страницу.

• Если для изображения не указана ссылка - нажатие на него откроет альтернативное изображение.

Как вариант, можно использовать разные блоки для мобильных и десктопов

Для смартфонов можно задать блок, который будет меняться при клике:

А под блоком разместить кнопку с призывом к действию - купить на сайте. Если же пользователь откроет письмо на ПК - у него будет картинка меняться при наведении мышкой.

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

По умолчанию указано значение "Нет", то есть блоки не скрываются. Нажатие на иконку с монитором скроет блок для десктопов, а иконка с телефоном соответственно для мобильных.

Возможно, у вас есть свои идеи или секреты по использованию такой интерактивности в письмах - делитесь в комментариях.

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