Диаграммы и гистограммы могут заменить скучные таблицы, текст с большим объемом данных. Читатель лучше воспринимает такую информацию. В статье расскажем, как создать и добавить в письмо понятную визуализацию, которая будет корректно отображаться на любых устройствах.
Когда вместо текста лучше использовать диаграммы и гистограммы
Рассмотрим, что в email-рассылках можно заменить диаграммой или гистограммой.
| Когда лучше визуализировать | Диаграмма или гистограмма | Пример использования |
| Сравнить показатели, чтобы подсветить характеристики товара или услуги | Столбчатая диаграммаили линейная диаграмма | Сравнить тарифные планы, показать вовлеченность до и после обновления интернет-магазина |
| Продемонстрировать доли от целого, чтобы подчеркнуть полезное действие товара | Круговая диаграмма | Приложение для планирования задач может показать, как много времени клиент тратит на неэффективные действия и как приложение поможет сэкономить время |
| Показать, как распределились данные, чтобы подчеркнуть популярность товара или услуги, стимулировать эффект подражания | Гистограмма | Интернет-магазин может показать, какие модели одежды популярны, а онлайн-игра — распределение игроков по возрасту |
| Продемонстрировать тренды и динамику, чтобы сделать акцент на доверии к бренду | Линейная диаграмма | Показать рост продаж за последние 6 месяцев, отследить изменение количества подписчиков за год |
| Проиллюстрировать рейтинг или ранжирование, чтобы подчеркнуть качество товара и уровень обслуживания | Гистограмма | Показать ТОП-3 самых популярных товара, рейтинг лучших продавцов |
| Сравнить цены, чтобы подчеркнуть выгоду | Столбчатая диаграмма | Показать цену товара до и после скидки, сравнить цены на аналогичные товары от разных брендов |
Правила создания диаграмм и гистограмм
Чтобы графический визуал данных в письме был понятен и логичен, придерживайтесь этих принципов:
1. Правильный тип визуализации
Определите, что вы хотите показать: взаимосвязь между данными, проиллюстрировать тренды или продемонстрировать соотношение частей целого. После этого подберите подходящий способ визуализации.
В качестве шпаргалки можно использовать таблицу выше. Если её обобщить, то выбирайте:
- диаграмму, когда хотите сравнить отдельные категории, показать тренды, динамику или доли.
- гистограмму, если хотите показать распределение, частоту и концентрацию данных в определенных диапазонах.
Из таблицы с ситуациями применения графиков видно, что столбчатая диаграмма и гистограмма визуально похожи. Есть риск запутаться, когда что использовать. Вот принципиальная разница между ними:
- Столбчатая диаграмма сравнивает разные группы, например, продукты, регионы. Высота столбцов показывает количество чего-то: продажи, доход. Между столбцами есть промежутки.
- Гистограмма показывает, сколько раз встречаются числа в определенных группах. Например, сколько людей в возрасте от 20 до 30 лет имеют iPhone, а сколько — Android. Столбцы стоят рядом без пробелов.
2. К визуализации — контекст
Чтобы диаграммы и гистограммы легко считывались, добавляйте поясняющий текст: заголовки, комментарии. В заголовке должна быть главная мысль: что именно показывают данные и как они связаны между собой.
Комментарии должны глубже пояснять визуал. Например, если вы показываете рост числа выполненных заказов, укажите возможные причины роста: сезонность, новые маршруты, рекламная кампания.
Заголовки, подписи и комментарии помогут читателям быстро погрузиться в контекст.
Подробнее об оптимальной верстке письма рассказывали в нашем блоге: «Гайд по верстке писем для email-маркетологов: виды, возможности, проверка корректности, частые ошибки».
3. Одна диаграмма — одна идея
Чтобы сравнить продажи четырёх продуктов за последние три месяца, лучше создать диаграмму для каждого продукта. Попытка изобразить все сразу сделает график перегруженным и нечитаемым, особенно с мобильных устройств.
4. Стандарты визуализации
Располагайте визуальные элементы привычным способом, чтобы читатель интуитивно всё понял:
- Диаграмма или гистограмма читаются слева направо. Поэтому оси времени — года, месяцы, кварталы ставят горизонтально слева направо. К примеру, чтобы показать динамику продаж с января по декабрь;
- Количественные показатели должны быть расположены по вертикальной оси. Допустим, чтобы показать объем продаж в штуках или денежном эквиваленте;
- Используйте контрастные цвета без градиентов, теней и других лишних элементов, чтобы не перегружать визуал. Например, синий — для продаж продукта А, красный — для продукта В.
- Корректно используйте цветовое кодирование. Обычно зеленые, синие и желтые оттенки используют для позитивных значений роста, прибыли. Красные и серые — для негативных.
5. Оптимальный размер и вес изображения
Слишком маленькие изображения сложно читать, а слишком большие долго грузятся и часто требуют горизонтальной прокрутки влево-вправо. Всё это раздражает пользователя.
Чтобы этого не произошло, диаграмма или гистограмма в рассылке должна занимать не более 60% ширины экрана большинства устройств — около 600 пикселей. Так читатель увидит всё изображение сразу.
Высота должна быть пропорциональна ширине, чтобы сохранить читаемость и визуальную привлекательность. Слишком высокая диаграмма может плохо отображаться на мобильных устройствах.
Оптимальный вес изображения — 100–200 КБ. Более тяжёлые будут открываться не сразу, особенно при слабом интернет-соединении.
6. Тестирование
Перед финальной отправкой лучше разослать письмо с визуалом себе или коллегам. Так можно убедиться, что диаграмма или гистограмма корректно отображается на разных устройствах.
С помощью каких сервисов диаграммы и гистограммы можно сделать самостоятельно
Вот краткий обзор сервисов, которые помогут без навыков программирования визуализировать данные.
Google Таблицы (Google Sheets)
Чтобы воспользоваться этим бесплатным инструментом, нужно войти в аккаунт Google и выбрать сервис Google Sheets. Затем сделайте таблицу с данными, которые хотите визуализировать.
Выделите колонки, которые преобразуете в диаграмму или гистограмму. После этого найдите вкладку меню «Вставка» → «Диаграмма». Сервис предложит оптимальный график для ваших данных, но вы можете настроить его по своему усмотрению.
Datawrapper
Это онлайн-сервис на английском языке. Он позволяет создать столбчатые и линейные диаграммы.
Платформа импортирует данные из разных источников: Excel, CSV, Google Sheets и др. Это упрощает работу, потому что заранее не нужно ничего форматировать.
Настройки позволяют изменять цвета, шрифты, масштаб и другие параметры.
На предварительном просмотре можно проверить отображение диаграммы на разных устройствах: телефоне, планшете, компьютере. И при необходимости сразу скорректировать размер или сократить объем данных в графике, если он тяжело читается.
У сервиса есть ограниченная бесплатная и расширенная платная версии.
Infogram
На этой онлайн-платформе есть большой выбор шаблонов. Начать работу можно с редактирования демо шаблона — внести свои данные, скорректировать цвета и шрифт.
А можно сначала загрузить данные и создавать визуал сразу под них. Пользователи могут переносить информацию из разных источников: Excel, Google Таблицы, CSV. Сервис дает возможность создавать формы для сбора данных и интегрировать их с Google Sheets.
У платформы есть мобильное приложение для iOS и Android, чтобы создавать и редактировать визуал на смартфоне или планшете.
Способы загрузить визуализированные данные в письмо
Есть три способа загрузить диаграмму или гистограмму в письмо. Разберем на примере омниканальной CDP Sendsay.
Способ 1. Загрузить готовую визуализацию
У Sendsay есть интуитивно понятный блочный редактор, который работает по принципу конструктора. Для того, чтобы создать письмо, пользователь расставляет готовые блоки по своему усмотрению и наполняет их контентом. Это не требует знания кода, экономит время и средства на подрядчиков.
Слева в редакторе есть панель с блоками и настройками, справа — макет письма. Готовое изображение с диаграммой или гистограммой можно загрузить прямо в этот редактор.
Способ 2. Добавить визуализацию с помощью кода в блочный редактор
Создать диаграмму или гистограмму можно с помощью HTML-кода. Он позволяет более тонко настроить стиль диаграммы: цвет, шрифт, размер и максимально соответствовать стилю бренда. С его помощью можно добавить анимацию, интерактивность.
HTML-код генерируют и сервисы по созданию диаграмм и гистограмм: Datawrapper, Infogram и другие. Но для работы с кодом понадобится программист.
Код с готовой диаграммой или гистограммой можно добавить сразу в блочный редактор, если вы работаете в нем.
Способ 3. Сгенерировать визуал в HTML или AMP-редакторах
HTML-редактор используют, когда все письмо верстается вручную. Обычно это нужно для того, чтобы сделать брендированный дизайн, персональные подборки. К примеру, посетитель просматривал на сайте различные модели смартфонов, одну из них добавил в корзину, но так и не оформил заказ. Через какое-то время ему может прийти письмо с напоминанием о товаре. Чтобы в письмо автоматически попала информация о смартфоне, например, диаграмма сравнения с аналогичными моделями по ключевым характеристикам, необходимо написать специальный код. В блочном редакторе такого функционала нет.
В HTML-редакторе код диаграммы или гистограммы нужно добавить в код письма.
AMP-редактор нужен, чтобы пользователь совершал действия прямо внутри письма. Например, оставлял отзыв, бронировал отель, проходил опрос. Здесь также, как и в HTML-редакторе, код вставляется в рассылку.
Главное о том, как добавить диаграмму и гистограмму в рассылку
Как понятно визуализировать данные:
- Определите цель. Это поможет выбрать правильный тип визуализации.
- Задайте контекст. С помощью заголовка, комментариев, пояснений.
- Обеспечьте адаптивность. Выбирайте оптимальный размер изображения и разрешение, чтобы визуал загружался и читался с любого устройства.
Добавить график в электронное письмо можно двумя способами: загрузить готовое изображение или использовать код. В первом случае можно справиться своими силами. Вариант с кодом сложный и долгий — он требует знания HTML и JavaScript, поэтому без программиста и веб-дизайнера не обойтись.
Сложный вариант подойдет тем, кому важно строго соответствовать стилю бренда и делать автоматическую отправку по событиям: просмотр товара, брошенная корзина. HTML или AMP-редакторы предлагают гибкие настройки шрифтов, цветов и автоматизации. Блочный редактор имеет ограниченный функционал.
