DEEONE/Блог/Метод Financial Times
§ Дизайн · выбор визуала

Как выбрать график под задачу: метод Financial Times

Девять семейств · задача важнее формы · отклонение · KPI для BI

Перестаньте брать график по привычке. Сначала назовите задачу — и форма найдётся сама. Разбираем «Визуальный словарь» Financial Times и переводим его на язык управленческой отчётности.

Самый частый способ выбрать график — открыть Power BI, посмотреть на ленту визуалов и взять то, что под рукой. Обычно это столбики или круговая. Иногда линия. Результат предсказуемый: один и тот же набор диаграмм на любой случай, независимо от того, что данные на самом деле должны рассказать.

Команда визуальной журналистики Financial Times придумала, как разорвать этот рефлекс. Их «Визуальный словарь» (Visual Vocabulary) — плакат и сайт, которые отучают выбирать график по форме и приучают выбирать по задаче. Сначала вы отвечаете на вопрос «какую связь в данных я хочу показать», и только потом смотрите, какие графики эту связь показывают. Мы давно используем этот подход на проектах, поэтому разберём его и переведём на язык управленческой отчётности.

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

Главная идея: сначала задача, потом форма

Visual Vocabulary вырос из «Графического континуума» Джона Швабиша и Северино Рибекки и из работ Кливленда и Макгилла про то, как человек вообще считывает графики. FT свёл всё это к простой мысли: у графика есть работа, и работа эта — показать конкретный тип связи в данных.

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

Это меняет порядок действий. Вместо «возьму круговую, потому что она привычная» получается «мне надо показать, как бюджет распадается на статьи — это часть от целого, значит подойдёт стопка или treemap, а круговая тут проиграет, потому что доли на ней не сравнить». Выбор перестаёт быть делом вкуса и становится следствием задачи.

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

Девять вопросов, которые закрывают почти всё

Перед тем как рисовать, ответьте на один вопрос: что я показываю? Ответ почти всегда попадает в одно из девяти семейств. Вот они одной таблицей — с вопросом, на который семейство отвечает, и типичными визуалами.

СемействоЧто показываетВизуалы
ОтклонениеНасколько значение ушло от опорной точки (ноль, план, цель)diverging bar, spine, surplus-deficit line
КорреляцияСвязь двух и более переменныхscatter, bubble, connected scatter
РанжированиеМесто в списке важнее самого значенияsorted bar, dumbbell, lollipop, slope
РаспределениеКакие значения встречаются и как частоhistogram, box plot, violin
ДинамикаТренд во времениline, area, slope, calendar heatmap
Часть от целогоКак целое распадается на компонентыstacked bar, treemap, donut, waffle
ВеличинаСравнение размеровbar, column, lollipop, radar
ГеографияВажна точка на карте или узорchoropleth, bubble map, tile map
ПотокДвижение между состояниямиsankey, waterfall, chord, funnel
Один показательОдна цифра, которую видно с порога (наше дополнение для BI)KPI-карточка, gauge, bullet, variance

Лиловым в таблице — два семейства, которые в корпоративных дашбордах чаще всего проседают: отклонение и KPI-карточки. Про оба ниже отдельно.

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

Величинастолбики: кто больше
Динамикалиния: тренд во времени
Часть от целогокольцо: доли
Распределениегистограмма: разброс
Корреляцияscatter: связь двух метрик
Ранжированиесортированный bar: топ-N

Семейство, которого обычно не хватает: отклонение

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

FT предлагает для отклонения четыре инструмента, и все четыре отлично ложатся на финансовую отчётность.

Расходящаяся гистограмма (diverging bar) — обычные столбики, которые умеют уходить и в плюс, и в минус от нуля. Идеально для план-факта по статьям бюджета: вправо зелёным — перевыполнили, влево красным — недотянули. Один взгляд, и видно, где провал. Сравните сами: слева привычные «план и факт двумя столбиками», где разницу приходится считать в уме, справа — та же история через отклонение.

Так делают чаще
План и факт двумя столбикамиразницу читатель считает сам
Так читается сразу
Diverging bar отклоненияпровал в ДФО виден без арифметики

В Power BI это обычный Bar chart по знаковой мере Факт − План с условным форматированием цвета: правило «< 0 — красный, иначе зелёный». Сортировка — по величине отклонения, чтобы худшее было сразу видно.

Расходящаяся стопка (diverging stacked bar) — то, на чём строят результаты опросов и NPS. Слева «против» и «скорее против», справа «за» и «скорее за». Тональность читается мгновенно, без разглядывания процентов: чем длиннее красное крыло, тем хуже отношение. В Power BI — Stacked bar, где доли детракторов заведены отрицательной мерой.

Линия профицита-дефицита (surplus/deficit) — отклонение от плана или нормы во времени: над нулём зелёным, под нулём красным. Хорошо работает для остатков на счёте, маржи относительно нормы, плана продаж по дням. Видно не только «где минус», но и как долго он тянулся.

Хребтовая диаграмма (spine chart) — расщепляет целое на две контрастные части, растущие от центра: новые и существующие клиенты, мужчины и женщины, до и после. Удобно, когда важен не только итог, но и баланс двух половин по каждой категории.

Diverging barотклонение факт − план по округам
Diverging stackedтональность отзывов: против ↔ за
Surplus / deficitотклонение от плана по месяцам
Spineновые и существующие клиенты по округам

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

Где FT расходится с потребностями BI

Visual Vocabulary создавали журналисты для газетной графики, и это видно. Часть инструментов в управленческих дашбордах не нужна почти никогда: диаграммы Вороного, диаграммы Венна, сейсмограммы, временные шкалы Пристли, картограммы с искажением формы регионов. Они красивы в лонгриде, но в отчёте директора по продажам им делать нечего. В разговоре с заказчиком их честнее назвать «существуют, но вам вряд ли пригодятся», чем тащить в дашборд ради эффекта.

И наоборот, у FT нет того, без чего не живёт ни один управленческий экран, — KPI-карточек. Большая цифра с подписью, спарклайном и стрелкой отклонения — это операционная аналитика, а не журналистика. Мы держим карточки отдельным, десятым семейством: один показатель, который должен быть виден с порога.

Ещё несколько типов из FT мы добавили бы в управленческий контур осознанно. Веерный график (fan chart) — прогноз с расширяющимся коридором неопределённости; честный способ показать, что будущее известно хуже прошлого. Кумулятивная кривая (кривая Лоренца, она же основа диаграммы Парето) — прямая дорога к ABC-анализу запасов и клиентов. Marimekko — когда нужно показать и размер, и долю одновременно.

Как пользоваться этим на практике

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

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

Когда семейство выбрано, остаётся аккуратно собрать страницу. Здесь помогают два наших инструмента: конструктор сетки Power BI, чтобы визуалы встали по единой сетке, и генератор палитры, чтобы цвет работал навигацией, а не украшением. Про сам цвет у нас есть отдельный разбор.

Что в итоге

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

Для управленческой отчётности добавьте к девяти семействам FT две вещи: отклонение, которому план-факт и NPS обязаны лучшими своими визуалами, и KPI-карточки. А Вороного с Венном оставьте газетным лонгридам.

Источник метода — Visual Vocabulary команды визуальной журналистики Financial Times (© The Financial Times Ltd). Мы адаптировали его под управленческую и финансовую отчётность и дополнили тем, чего газетной графике не нужно, а дашборду нужно.

§ Дизайн дашбордов

Соберём дашборд,
который отвечает
на вопрос

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

Телефон+7 918 042 34 43