Павел Лебедев, бывший руководитель отдела веб-дизайна Лаборатории Касперского и спикер №1 по дизайну, рассказал, какую пользу приносит инфографика и поделился списком книг для новичков.

Что такое инфографика

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

Программа обучения: «Инфографика: искусство презентации данных»

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

Карта Джона Сноу

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

Что нужно для создания инфографики

Визуализация данных в интерфейсах

Чтобы научиться делать такие макеты, нужно действовать по схеме:

Универсальная схема создания дизайн-макета, применимая и к инфографике

Что нужно для эффективной инфографики:

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

Программа обучения: «Продуктовый дизайнер»

Как правильно визуализировать данные

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

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

Как видно на графике, в Белоруссии и России самый низкий пенсионный возраст, но если посмотреть на цифры — «58» в Казахстане почти в два раза выше, чем «55» и «60» в Белоруссии

Если убрать искажение и добавить к сравнению данные о других странах, график не меняется:

Кажется, что пенсионный возраст в Японии в восемь раз больше, чем в Белоруссии

Если привести график к единой оси, окажется, разница не такая большая:

Данные не менялись, столбики графика почти сравнялись

Сравним объективный показатель — статистические данные о средней продолжительности жизни на пенсии:

Картина другая: показатель средней продолжительности жизни на пенсии у женщин в России близок к Польше и Германии

Если не знать, как визуализировать данные, можно привести пользователя к неправильному выводу.

Какую пользу приносит инфографика

1. Помогает верно и в правильной последовательности доносить информацию

Например, этот дорожный знак поймут только испаноговорящие:

Водитель может решить, что на знаке указано расстояние до населенного пункта, и прибавит скорость, хотя знак предупреждает о крутом повороте

Дорожный знак с визуализацией означает крутой поворот через 500 метров. Понятен даже иностранцам:

2. Социальная польза — то, чем можно поделиться

Полезной и красивой инфографикой хочется делиться с друзьями.

Пример инфографики с сайта adme.ru

3. Помогает донести эмоции и переживания

Инфографика позволяет читателю осознать и прочувствовать сухие статистические цифры. Например, инфографика «Большой просчет» о масштабе конфликта в Ираке в 2003 году:

Открыть инфографику в полном размере

Согласно опросам, 44% британцев считают, что в трагедии погибло меньше 5 000 жителей Ирака — это в 200 раз меньше, чем на самом деле. На инфографике заблуждение выделили красным.

4. Решает бизнес-задачи

Инструкция по сборке мебели Икеа

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

Для сравнения, пример инструкции по сборке мебели российского производителя:

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

5. Помогает быстрее принимать решения

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

Сколько весит мозг и сколько потребляет энергии: 3% от массы тела и 35% от всей энергии

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

Инфографика подталкивает к действию без решения сложных задач.

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

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

Инфографика не иллюстрирует реальность, а искажает её для упрощения восприятия.

Книги для создания сильной инфографики

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

Читать ещё: «Как сделать инфографику для статьи: 3 простых способа»

Визуализация данных:

Текст и типографика:

Пиши, сокращай, Максим Ильяхов
Новая типографика, Ян Чихольд
Живая типографика, Александра Королькова
Типографика и верстка, Артем Горбунов

Психология принятия решений:

Ловушки мышления, Чип Хиз
Джедайские техники, Максим Дорофеев

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.