Строка темы — как подойти к дизайну электронной почты

Значительный процент потребителей — 99% — проверяют свою электронную почту каждый день. Некоторые демографические группы, в том числе миллениалы, предпочитают общение по электронной почте от компаний другим формам общения, таким как телефонные звонки или текстовые сообщения. А с более чем 5 миллиардами активных учетных записей электронной почты по всему миру электронная почта является неотъемлемой частью любой стратегии цифровых продуктов.

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

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

Важность мобильного дизайна электронной почты

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

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

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

Сосредоточение внимания на содержании

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

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

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

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

Усиление брендинга

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

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

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

Брендинг Everlane по своей сути прост в их электронных письмах и на веб-сайте. Их логотип, размещенный на видном месте в верхней части этого электронного письма, усиливает этот брендинг.

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

Привлечение внимания с помощью цвета

Цвет оказывает сильное влияние на человеческий разум, способный влиять на эмоции, восприятие и даже поведение. Эффективное использование цвета в электронных письмах может повысить кликабельность и коэффициент конверсии. В некоторых тестах разница в цвете кнопок может привести к более чем 20-процентной разнице в коэффициентах конверсии.

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

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

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

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

Использование потрясающих изображений

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

Телевизионные шоу, кажется, имеют преимущество в категории «потрясающие изображения», и в этом электронном письме Netflix используется яркий, но загадочный кадр из « Очень странных дел» . Сочетание привлекающего внимание изображения с призывом к действию «Воспроизвести» сразу под ним имеет смысл с точки зрения UX, поскольку это позволяет читателям сразу же посмотреть рекламируемое шоу.

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

В этом электронном письме « Смертельный улов », рекламирующем серию документальных фильмов Discovery Channel, отображается потрясающее изображение заголовка, которое сливается с содержимым под ним. Это полезный прием, побуждающий зрителя продолжать чтение.

Эксперименты с нестандартными макетами

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

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

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

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

Работа со шрифтами

Большинство популярных почтовых клиентов поддерживают веб-шрифты, но, к сожалению, не все — Gmail является наиболее заметным исключением (хотя Gmail поддерживает Roboto и Google Sans как часть интерфейса Gmail). Тем не менее, дизайнеры по-прежнему могут использовать веб-шрифты, если они помнят, что большое количество почтовых клиентов будут использовать резервные шрифты.

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

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

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

Развлекайтесь с анимацией

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

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

Использование анимированных GIF-файлов, чтобы донести мысль или лучше проиллюстрировать контент, представленный в увлекательной форме, является фантастическим дополнением к дизайну электронной почты, как в этом примере электронной почты от Product Hunt.

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

Призывы к действию

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

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

Использование яркого цвета для призыва к действию, как это сделал Litmus, выделяет его среди остального контента. Дизайнерам следует подумать о том, чтобы поэкспериментировать с разными цветами, чтобы увидеть, какие из них лучше всего подходят для их аудитории, применяя A/B-тесты при отправке кампаний по электронной почте.

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

Обратите внимание на лучшие практики дизайна электронной почты

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

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

Есть несколько служб тестирования электронной почты, которые дизайнеры могут использовать, чтобы увидеть, как их электронные письма будут выглядеть на различных почтовых платформах. Litmus — один из самых популярных, но другие варианты, такие как Mailgun, Email on Acid, Mailtrap и Preview My Email, также заслуживают внимания, чтобы увидеть, какой из них лучше всего соответствует потребностям каждого проекта.

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Опыт — это все — Полное руководство по UX
• Все ли тренды того стоят? Топ-5 самых распространенных ошибок UX, которые допускают дизайнеры
• UI vs. UX — исследуйте основные различия [инфографика]
• Принципы мобильного UX-дизайна и лучшие практики
• Фундаментальное руководство по удобству использования мобильных устройств