Визуализация информации, или Как выбрать и построить график

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

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

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

Все ли данные можно сравнить и какие они вообще бывают?

Графики придумали для сравнения одного значения с другим по нескольким параметрам. Но все ли данные можно сравнить? Существует 2 вида данных — количественные и качественные.

Количественные данные можно сравнить. Они делятся на дискретные и непрерывные.

Дискретные данные имеют точное значение, например 1, 20 или 1000. Например, мы можем изобразить на графике, как меняется количество обращений в скорую помощь за определенный промежуток времени.

Непрерывные — это данные из промежутка значений. Например, средняя температура летом варьируется от 25 до 32 градусов или за последний год ваш вес менялся в пределах от 64 до 72 килограмм. Количественные данные можно сравнивать, рисовать зависимости и всячески анализировать.

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

Порядковые данные — это, например, размер одежды (S, M, L, XL) или результаты опросника со шкалой от 1 до 10. Эти данные можно выразить числами, но нельзя наверняка сказать что 5 в 2 раза хуже, чем 10, или что разница между 1 и 2 такая же, как между 3 и 4, потому что эта оценка субъективная. Но сравнить такие данные можно. Например, по шкале Рихтера землетрясение с магнитудой 1 слабее, чем землетрясение с магнитудой 9, так как шкала имеет порядок.

Вот как разные типы данных выглядят на схеме:

На какой график положить данные?

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

Линейный

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

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

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

Гистограмма (Bar chart)

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

Например, давайте нарисуем график, который покажет нам, какой возраст преобладает среди всего населения Земли.

Жители на этом графике будут количественной характеристикой, а возраст — номинальной.

Участок рассеивания (Scatter Plot)

Scatter Plot объединяет два типа количественных данных. Он показывает позицию каждой точки и плотность точек. Например, можно показать соотношение роста и веса людей. Рост и вес — это две количественные характеристики.

Но если мы добавим сюда распределение по полу, то появится еще и качественная.

Диаграмма Ганта (Gantt Chart)

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

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

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

Конечно, существует еще круговая диаграмма (pie chart), которая подходит для отображения небольшого числа количественных данных (до 4-6). Больше параметров отображать с помощью круговой диаграммы нецелесообразно, потому что они сливаются и разглядеть разницу становится сложно.

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

Мои данные лежат во множестве измерений. Что делать?

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

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

Не очень наглядно, не правда ли? А что, если расположить плоскости параллельно?

Теперь стало намного понятнее.

График может показывать тренд во временном промежутке. Например, давайте сравним Мексику и Бразилию по экспорту крупного рогатого скота за последние несколько лет. Хотя нет, это будет слишком просто. Давайте предположим, что по Мексике у нас нет данных за 2014 и 2016 года. В этом случае, мы не можем соединить точку за 2015 год с точкой за 2017-й и продлить линию, потому что в таком случае линия будет восприниматься как непрерывная, хотя данных по этим годам у нас нет. Что же делать? Да просто поставить точку, вот так:

Несколько советов на заметку

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

Вот несколько советов:

1. Оси графиков нужно подписывать.
2. Подписи делают визуально отличимыми от данных, причем данные — это самое важное, их нужно выделять особенно ярко и четко.
3. Визуализация должна быть интерактивной. Чем больше интерактивности, тем лучше.
4. Детали не так важны, как сама визуализация, поэтому их можно спрятать, чтобы они не мешали общей информации и сделать доступными по требованию (например при ховере точки на графике может открываться более детальная информация).
5. Правило 1+1 = 2 — фундаментальный принцип информационного дизайна. Нарисовав две линии, разделенные негативным пространством, мы получаем уже не две линии, а три, так как белое пространство между ними также воспринимается как линия.

Вот пример из книги Эдварда Тафти «Представление информации». Перед нами инструкция подачи сигналов. Слишком толстые и яркие линии квадратов отвлекают от информации внутри них. Тексты подписей имеют тот же визуальный вес, что и вся остальная информация.

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

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

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

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

• таблицы без вертикальных линий лучше;
• тонкие линии лучше толстых линий.

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

Примеры хорошей визуализации

Перед нами приложение Nike Running Club.

Кликните на изображение

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

Интересная визуализация на сайте New York Times, показывающая трансфер заключенных тюрьмы Гуантанамо во временном промежутке.

Кликните на изображение

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

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

Кликните на изображение

Детали соревнований можно увидеть при нажатии на матч в раскрывающемся попапе.

Еще один пример с того же ресурса — график, отображающий топ миллиардеров по версии Bloomberg с распределением их активов.

Кликните на изображение

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

Пример из программы для эйчаров и руководителей компании Peakon. Это визуализация сравнения сегментов (отделов или офисов компании) по списку метрик (вовлеченность, карьерный рост, нагрузка сотрудников).

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

Кликните на изображение

Пример из поисковой консоли Google.

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

Кликните на изображение

Приложение, измеряющее уровень стресса и энергии Welltory.

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

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

Кликните на изображение

Напоследок вот вам картинка вместо тысячи слов (из книги Эдварда Тафти «Представление информации»).

Здесь изображен путь солдатов Наполеона из Франции в Москву и обратно, где коричневым показано количество людей в войске на пути туда, а черным на пути обратно.