Hi-Tech

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

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

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

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

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

Изображения стали основным инструментом

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

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

Sunkist.com использовал полноразмерные изображения по всей длине домашней страницы и внутренних страниц

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

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

Прошлое против настоящего: (слева) Бюллетень от Fodor’s является представителем использования изображений в прошлом. (Справа) недавний информационный бюллетень Crate & Barrel, заработавший положительные отзывы от получателей, которые оценили большие высококачественные иллюстрации

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

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

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

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

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

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

Большие изображения блюд ValueMags не впечатлили получателя бюллетеня

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

Письма в стиле флаер являются обычным явлением

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

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

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

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

Слева: сообщение от Nespresso Club использовало темный фон и низкоконтрастные фиолетовые заголовки, что затрудняло чтение текста. Справа: этот бюллетень MAC Cosmetics был почти неразборчив из-за плохой контрастности и стилистических шрифтов

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

Бюллетень в стиле флаеров от MLB.com был слишком массивным без типографской иерархии

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

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

Everlane: Слева: В папке «Входящие» показаны источники, через которые можно «поделиться» на соответствующий контент. Справа: Когда сообщение было открыто, пользователям мобильных устройств нужно было пролистывать до той информации, которая рекламировалась в e-mail рассылке

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

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

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

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

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

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

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

Письмо в стиле флаера из Лос-Анджелеса Рамс уделяло слишком много внимания графическому дизайну и не уделяло внимания тому, как клиенты могут взаимодействовать с ним. Ничего не было кликабельным вообще, даже логотипы или URL-адреса, встроенные в текст. Получатель прокомментировал: «Они не предоставили мне ссылку, я попытался нажать по множеству разных мест в письме, но ничего не происходило, поэтому я не буду использовать это предложение».

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

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

Щелчок в любом месте этого бюллетеня в стиле флаер привел к той же странице

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

Информационный бюллетень Nespresso включал основной призыв к действию (кнопка «Order now»), а также ссылки на их различные праздничные ароматы (Sachertorte, Linzer Torte, Apfelstrudel)

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

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

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

Вывод

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

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

Полный отчет

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

#дизайн

Показать больше

Похожие статьи

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть