Инфографика

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

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

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

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

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

Если вы отправитесь на Юго-Восток штата Юта (США), то сможете увидеть своими глазами легендарный Newspaper Rock, или так называемый газетный камень — исторический памятник, который представляет собой группу скал, насчитывающих более 650 петроглифов (рисунки, выдолбленные на поверхности горной породы).

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

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

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

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

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

В 1675 году шотландский картограф Джон Огилби разработал необычный дизайн для атласа дорог Британии.

В конце 18 века появились сразу несколько средств, которые мы до сих пор используем для визуализации данных — это таймлайн (линия времени), гистограмма, линейный график и круговая диаграмма. Впервые таймлайн использован британским химиком и философом Джозеф Пристли в своем графике биографий известных личностей, в котором нашли отражение порядка 2000 имен за период с 1200 г. до н. э. до 1750 г. н. э.

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

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

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

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

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

Статистическая инфографика

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

Сравнительная инфографика

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

Сравнительная инфографика на сайте Росстата, которая позволяет сравнить цены на салат оливье в 2021 и 2022 году:

Инфографика информации

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

Инфографика времени

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

Инфографика объекта

Призвана визуализировать объект в пространстве, чтобы показать его внешнее или внутреннее устройство. Частый прием — демонстрация объекта в разрезе при помощи 3D-графики с текстовыми пояснениями, стрелками, точками и линиями.

Инфографика процесса

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

Инфографика географии

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

Инфографика структуры

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

Инфографика списков

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

Инфографика текстов

Инфографика, которая работает с типографикой — цветом текста, межстрочными интервалами, абзацами, шрифтами и начертаниями.

Интерактивная инфографика

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

1. Сложность

Составить список или написать обычный текст проще, чем грамотно скомбинировать иллюстрации, визуальные и текстовые элементы.

2. Психология восприятия

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

3. Поверхностность

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

4. Емкость

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

1. Определите, для кого создается инфографика

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

2. Определите цель инфографики

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

3. Соберите всю необходимую информацию

Это могут быть различные открытые источники, интервью с владельцем бизнеса, результаты опросов или данные CRM-системы.

4. Создайте черновой вариант инфографики

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

Важные элементы структуры:

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

5. Создайте вайрфрейм

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

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

6. Подберите цветовую схему и шрифтовые пары

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

Выберите 2-3 основных цвета и продумайте, какую функцию будет выполнять каждый из них: какой цвет будет фоновым, каким цветом вы выделите заголовки, а какой — поможет расставить акценты. Следите за контрастностью — текст не должен сливаться с фоном, а сам фон — перегружать пользователя и отвлекать внимание.

Datawrapper

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

Flourish

Сервис для создания диаграмм, карт и интерактивных историй.

Infogram

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

SimpleFlow — плагин для создания user flow диаграмм с настраиваемыми темами: можно выбрать цвет, пунктирный стиль и даже кривизну линий.

Flows — плагин для создания блок-схем, диаграмм связей и user flow.

Figpie — плагин для быстрого создания круговых диаграмм.

Radial Generator — плагин, который создает радиальные диаграммы.

Table — виджет для работы с таблицами.

Figmap — плагин для создания стилизованных карт.

Table Creator — плагин, помогающий быстро и просто создавать таблицы.

Table Paste — плагин помогает переносить данные из электронной таблицы в ваш макет.

Columns to Rows — плагин для преобразования строк в столбцы и наоборот.

Eve Tabler — плагин для упрощенной работы с таблицами, с автоподбором ширины и высоты строк и столбцов.

Simple Table Generator — простой генератор таблиц.

Charts Modifier — плагин для быстрого редактирования диаграмм.

Chartline — плагин создает векторные линии для графиков.

Graphviz — плагин для создания различных графиков.

Table Master 3000 — плагин для работы с таблицами с возможностью перегруппировки столбца или строки.

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

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