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

• Почему так плохо нарисовали?
• Как можно было нарисовать лучше?

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

Первая: без визуализации факты теряются. Любой текст (статья / презентация / отчет / доклад / реферат) представляет собой историю. Ее можно понять и запомнить только в том случае, если ее части будут логично связаны друг с другом, структурированы.

Один знакомый социолог говорит, что главное — это качественные разносторонние данные, а визуализация — просто способ их приукрасить. Главное — факты, а не картинки… Это заблуждение популярно у «серьезных» людей, даже доказательство их серьезности. Но я не соглашусь с этим никогда. Ниже мы увидим, как самые интересные факты теряются, «меркнут» из-за неумелой формы их подачи. История не складывается. Зритель ничего не поймет и не запомнит.

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

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

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

---

Итак, смотрим ужасные графики, встретившиеся мне в крупных сетевых изданиях.

Труд сверх нормы

Что плохо: текст подписей выровнен по центру, его сложно читать, тонкие линии диаграммы, количество — далеко от подписей, и для того, чтобы их соотнести (понять сколько чего), нужно «бегать» глазами от одного края экрана к другому. Данные не отсортированы от большего к меньшему.

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

---

2. Опасения массового дефицита

Что плохо: главная информация — распределение ответов респондентов набрана самым мелким шрифтом (справа от кольцевой диаграммы). Она почти нечитаема. Смысл диаграммы с черными и голубыми человечками понять сложно. Приходится сидеть и разбирать, что же хотели сказать авторы. Оказывается, что в инфографике человечки и круговая диаграмма обозначают одно и то же (две группы: 8 из 10 опасаются дефицита, а 2 из 10 нет) — то есть информация дублируется.

Как исправить: человечков можно было убрать, т.к. они создают визуальный шум, но информации не несут (по факту дублируют процентное соотношение), но я решил не менять кардинально идеи авторов, а «сыграть» в их же стиле. Убрал и крупную цифру — ведь это третье повторение одного и того же. Увеличил главное, шрифты, сделал ярче цвета.

---

3. Кадровый голод

Что плохо: главная проблема — трудно соотносить подписи и их значения, особенно малые. Это связано с малым размером шрифта, неудачным выравниванием и, конечно, с отсутствием сортировки данных (от большого к малому сверху вниз).

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

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

---

4. Аккаунты и подписчики

Самый неудачный вариант диаграммы везде, где я его встречал, — объемная круговая диаграмма (3D). Главная проблема в том, что ее сегменты невозможно сравнить. Сначала наш мозг должен развернуть объемную фигуру, затем сопоставить части круга. Это очень сложная когнитивная задача даже для профессиональных художников с развитым визуальным мышлением. Некоторые считают ее худшим изобретением для визуализации данных (Insider: The Worst Chart In The World).

Что плохо: попробуйте угадать проценты этих четырех сегментов на рисунке? Сколько от 100% составляет фиолетовый, голубой, красный и желтый? Я даже сделал тест, чтобы проверить сложность чтения такого типа диаграмм (в нем всего 4 вопроса и не нужно вводить никаких личных данных или адреса почты): восприятие круговой диаграммы. Потренируйтесь в визуальном мышлении, ответ будет ниже.

Ниже оригинал диаграмм с данными. Угадали проценты?

Как исправить: в идеале — выбрать другой тип диаграммы: столбцы или сравнение размеров (size comparison diagram). Но я попробовал улучшить то, что есть: убрал объем, увеличил шрифт, добавил контрасты, расположил диаграммы рядом друг с другом — так их удобнее сравнивать.

---

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

Круговые диаграммы

Излишнее упрощение

Излишнее усложнение визуализации

Неуместные образы и метафоры

Тема на форуме визуализации данных, посвященная плохой визуализации (на англ. яз.): viz.wtf. Много примеров того, как не надо рисовать графики и диаграммы.

Делитесь в комментариях своими примерами плохих графиков или присылайте мне на почту: vizual.club@mail.ru.

Продолжение следует.