mega.genn.org

Какой способ организации информации кажется людям самым простым? На первом месте, конечно, выбросить все данные в мусор и забыть о них. На втором месте, я думаю, идут таблицы. Люди любят таблицы. Им они очень нравятся. Нравятся настолько, что компьютерам Эппл предрекали провал без программы для работы с электронными таблицами (что-то типа Numbers или Excel). И, если мне не изменяет память, именно для выполнения этой задачи был взят на работу очкастый мальчик Билл с его компанией Майкрософт, который жаждал добраться до Mac OS и вдохновиться ее идеями…

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

К чему такое длинное вступление?

Когда мы начали работать над новым дизайном сайта Инвест-газеты, ответственный за весь проект сразу предупредил меня, что нужно ощущение журнала (все время работы я потешался над тем, что журнал назвали газетой ;). Значит, без элементов визуализации информации, в какой-то мере инфографики, было не обойтись. Если со всякими гистограммами, ненавистными круговыми диаграммами, картами и прочим было все понятно, то таблицы, даже грамотно составленные и красивые, были все теми же клетками для несчастной информации. В поисках решения мы перебрали несколько вариантов и остановились на одном, который выглядел удивительно простым и в то же время самым подходящим. Так я познакомился со спарклайнами.

Что такое спарклайны?

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

Как делать удобные спарклайны?

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

Но перед тем как перейти к картинкам-примерам (я — мастер нагнетания обстановки, правда?), хочу остановиться на некоторых графических характеристиках спарклайнов. Многие из них, если не все базовые, перечислены и проиллюстрированы Эдвардом Тафти (он и придумал название спарклайнам) еще в 2004-м году в статье Sparklines: theory and practice. Многие решения и выводы у нас с ним совпали, хотя я прочитал его статью в конце работы над спарклайнами.

Как же все-таки это выглядит?

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

В этой таблице проиллюстрированы спарклайнами колонки с последней зафиксированной температурой (Last known temperature) и приятностью запаха воздуха (How likely air smells). Во втором случае используется похожее на progress bar решение, что позволяет быстро и удобно воспринимать информацию.

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

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

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

Благодаря спарклайну в колонке невыполненных домашних работ (Homeworks spoiled) можно увидеть как часто с 1 по 10 класс та или иная игра завоевывала время и мешала сделать заданное домой.

В колонке результатов (Overall result) видно как хорошо или плохо в случае с Pong проходилась та или иная игра. Чем больше палочек вверху, тем круче!

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

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

Начнем с последней колонки — уровня громкости после 21 средней дозы (Music volume after 21 average doses). Данные указаны в децибеллах, что не мешает нам показать динамику изменения по ходу приема алкологя внутрь. Фактически это тот же график, что и в первом примере — динамика изменения значения — но оформлен он в стиле колонок эквалайзера, чтобы информацию было интереснее читать.

В колонке количества выпитых друзьями за 2005–2009 годы бутылок указано значение на начало периода (2005-й год) и на конец (2009-й), а также динамика изменений, скажем, по месяцам или даже по дням. Цвет цифры указывает на то, выросла ли цифра по сравнению с предыдущим отчетным периодом (начало 2005-го года). Для удобства чтения начало и конец графиков отмечены красными точками, а также добавлен легкий градиент, улучшающий их прочтение. Сравните с графиком в первом примере, где градиент был невозможен из-за указания диапазона комфортных температур.

***

Кроме украшения и превращения таблиц из тюрем в информационные курорты спарклайны помогают во многих случаях заменить различные детальные графические визуализации данных или даже представить информацию более полно и интересно, чем какая-то ничтожная круговая диаграмма (гори в аду!!!). Например, Google Analytics и Flickr активно используют спарклайны для более наглядного представления статистики посещений в сжатом виде или даже обозначения ссылки на статистику, как в случае с фликром.

Пример использования спарклайнов на фликре (вверху) и в Google Analytics