Изображения в информационных бюллетенях

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

Перевод статьи UX специалиста Ким Флаэрти.

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

Мы изучали информационный бюллетень и удобство его использования для рассылок по электронной почты в течение 15 лет. За это время мы опубликовали шесть версий нашего отчета, «Маркетинговая электронная почта» и «Удобство использования рассылок».

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

Использование изображений в электронной почте и в интернете в целом значительно изменилось за последние годы. Иллюстрации в веб-дизайне больше не являются дополнительными или декоративными — они стали ключевым инструментом для многих веб-сайтов. Эта тенденция просочилась к маркетингу электронной почты и информационных бюллетеней.

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

Лишь несколько лет назад в информационных бюллетенях использовались небольшие изображения в паре с текстом двухколоночного макета. Ниже по тексту представлена предыдущая версия формата информационных бюллетеней (компания Fodor’s).

Эта рассылка отражает то, как изображения использовались в электронных письмах прошлого. Сравните это с большими и наглядными иллюстрациями в текущем информационном бюллетене Crate & Barrel. Один участник исследования, получивший это сообщение, прокомментировал: «На странице есть четыре аккуратных и простых рисунка, которые облегчают просмотр. Изображения были действительно хорошо сделаны».

Для сравнения, плотные, многоколоночные электронные письма, заполненные крошечными изображениями, считались пользователями «загроможденными» и «устаревшими» в нашем последнем исследовании. Один из участников отметил, что информационный бюллетень Университета Цинциннати был «немного дезорганизован и […] в нем слишком много информации, маленьких картинок и случайных блоков».

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

Один пользователь, получивший информационный бюллетень American Airlines, заметил: «Это письмо бесполезно, больше похоже на спам. Я никогда не проявлял интереса к поездке в Новую Зеландию. Картинка тоже была неудачной, это всего лишь стоковое изображение серфера, который мог быть где угодно. Просмотр этого письма был для меня пустой тратой времени».

Другой пользователь, получатель следующего маркетингового сообщения от ValueMags, жаловался на изображения, используемые в сообщении: «На самом деле я не вижу ничего, что могло бы привлечь меня. Изображения не впечатляют, а описание расплывчатое. Это письмо совсем не заманчивое».

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

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

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

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

Один пользователь, получивший электронное письмо от MAC Cosmetics, прокомментировал: «Я едва могу прочитать слова. Некоторые из них трудно увидеть из-за фона. Кроме того, я хотел видеть предлагаемый товар — кисти, но они не были хорошо отображены».

Отсутствие типографической иерархии. Обработка листового стиля обычно приводила к макетам, в которых не было типографической иерархии для текста. Например, в сообщении от MLB.com ниже используется жирный шрифт для всего текста, а не для приоритетной информации. Различные фрагменты текста и цветов конкурировали друг с другом, делая сообщение не удобным для чтения.

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

Рассмотрим ниже пример из Everlane. В строке темы сообщения были слова «Рекомендовать друзьям. Получить скидки». Но весь первый экран информационного бюллетеня был большой графикой, которая ничего не говорила о том, как приглашать друзей и заработать скидку. Только после того, как пользователи прокрутили вниз до конца изображения, они увидели информацию о международной реферальной программе.

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

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

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

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

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

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

И все эти усилия могут быть напрасными — потому что некоторые электронные письма, например, из Лос-Анджелеса Рамс ниже, не имеют ссылки на сайт вообще!

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

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

Сравните этот дизайн с электронной почтой Nespresso ниже. Nespresso правильно включил кнопку в электронном письме. Нажатие на неё приводит к праздничным товарам с ограниченным тиражом . Пользователи могут также щелкнуть по различным ароматам, указанным в электронном письме, и перейти непосредственно к ним, для изучения деталей продукта.

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

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

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

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

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

Новая версия нашего полного отчета об использовании электронной почты и удобстве использования бюллетеней с 199 советами по разработке бюллетеней доступна для скачивания.

#дизайн