Как создать инфографику, которая расскажет историю за вас?

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

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

Когда цифры говорят сами за себя

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

Кроме того, хорошая инфографика:

• Согласно актуальному исследованию HubSpot, на 50% повышает вовлеченность, и, как следствие – конверсию портала. Любому человеку нравится изучать данные, представленные в таком виде.
• Лучше запоминается пользователями. Это особенность восприятия человека: наш мозг в 60 000 раз быстрее обрабатывает картинку, чем текст, и запоминает графические данные на 80% лучше.
• Увеличивает охваты. Качественной картинкой проще поделиться в соцсетях. Если вы действительно позаботились о том, как создать красивую инфографику, практически бесплатный трафик не заставит себя ждать.
• Улучшает SEO-продвижение вашего ресурса. Краулеры поисковых систем благосклонно воспринимают такой контент, ведь посетители уделяют ему больше внимания. Это позволяет сайту занять более высокое место в выдаче.

Какой бывает инфографика?

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

Статистическая

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

Хронологическая

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

Процессная

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

Сравнительная

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

Географическая

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

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

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

Как создать инфографику? 6 простых шагов к привлекательному контенту

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

Шаг 1. Определяем цель

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

Шаг 2. Собираем данные

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

Шаг 3. Выбираем тип инфографики

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

Шаг 4. Создаем структуру

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

• Придумайте цепляющий заголовок, который заставит пользователя внимательней взглянуть на изображение (например «Как на организм влияет 1 чашка кофе в день»);
• Кратко изложите контекст. Сформулируйте всего 1–2 предложения, которые передадут основную мысль представленных данных;
• Визуализируйте информацию выбранным ранее способом;
• Очень коротко подведите итоги своего сообщения. Если на графике отображено количество ваших довольных клиентов, достаточно будет пригласить пользователя стать одним из них.

Шаг 5. Подбираем визуальные элементы.

Не нужно использовать большое количество оттенков: 2–3 контрастных цветов вполне будет достаточно. Избегайте декоративных начертаний шрифтов и не переборщите с типографикой: используйте один шрифт для заголовка, а второй – для основного текста.

Шаг 6. Тестируем

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

Топ–5 сервисов для создания инфографики

Рисовать графики и диаграммы вручную совсем не обязательно: большинство платформ для графического дизайна отлично справляются с этой задачей, сводя ваши усилия к минимуму. Что использовать?

Canva

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

Piktochart

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

Visme

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

Easel.ly

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

Adobe Spark

Если вы работаете в Photoshop или Illustrator, то этот сервис от Adobe, «заточенный» под презентации и инфографику, точно вам понравится. Благодаря обширной библиотеке графических компонентов, создавать контент здесь – просто и быстро. Однако если вы – новичок, придется потратить время на то, чтобы разобраться с функционалом программы, а в бесплатной версии доступны только ограниченные возможности.

Как не «убить» интерес пользователей?

Итак, ваша первая «визуальная история» почти готова. Как сделать так, чтобы она пришлась по вкусу посетителям ресурса?

• Добавьте микроанимации. Даже банальное плавное появление графиков при скролле страницы повышает вовлеченность;
• Проверьте мобильную версию. Инфографика должна одинаково хорошо читаться с любых устройств и экранов;
• Продумайте содержимое метатегов alt. Подписывая изображение, вы повышаете шансы своего сайта попасть в топ поисковой выдачи;
• Ссылайтесь на источники данных. Даже если вы добавите информацию мелким шрифтом и без гиперссылки, это кратно повысит доверие читателей;
• Тестируйте расположение инфографики. Простые A/B тесты покажут, где такой контент воспринимается лучше: в начале, середине или конце страницы;
• Не перегружайте визуал данными. 10 графиков на одной картинке – гарантия того, что пользователь ничего не запомнит;
• Соблюдайте логику повествования. Если она отсутствует, то зритель попросту не поймет, куда на вашем графике смотреть. Это значит что время, которое вы потратили на создание такого визуала, растрачено впустую.

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

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