Давно хотел написать про этот стандарт, а тут выдался отличный повод — Антон Жиянов сделал отличную, читаемую версию этого стандарта. Антон, большое спасибо! Ещё у Антона куча крутых статей про проектирование интерфейса.

Я решил сделать обзор этого стандарта и рассказать своих мысли про него. Как и при рецензии на любую книгу, здесь рекомендую ознакомиться с оригиналом, а не только моим «кратким» содержанием, сам стандарт классный и заслуживает внимания. У меня скорее выдержка того, что запомнило именно мне. Вы, наверняка, увидите что-то своё.

Что такое IBCS (International Business Communication Standards)

Этот стандарт разработан Рольфом Хикертом, бывшим консультантом McKinsey и CTO нишевой немецкой BI-системы MIS. Основная идея стандарта — практические советы и семантические стандарты по дизайну отчетов и графиков. Стандарт распространяется бесплатно и доступен на сайте www.ibcs.com, но сделан там в очень неудобном формате. Почему так — думаю, что для того, чтобы заработать на продаже нормальной pdf версии, которая есть на сайте =) В целом это нормально и такие организации зарабатывают как раз на материалах, сертификациях и тренингах. Но выглядит это конечно немного смешно.

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

1. Convey a message

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

2. Organize content

Эта часть стандарта посвящена последовательности изложения и структуре. Если говорить грубо, то весь раздел про применение принципа MECE, про повествование методами дедукции или индукции и визуальное отображение иерархичных структур. По мне получился ещё более «теоретизированный» раздел, чем первый. Самое полезное для дашбордов, как мне кажется, что не стоит забывать показывать полные данные по всем разрезам для полноты картины.

3. Choose proper visualization

Это раздел является классическим «чарт-чузером» для выбора подходящего типа диаграмм. Очень понравилось, что автор сводит задачи по-сути всего к двум типам — изменение во времени и сравнение категорий. В целом это реально 90% бизнесовых задач, которые можно решить и правда небольшим количеством графиков. Правда совсем не хватает точечного графика, фактоидов (KPI’s) и спарклайнов. И ещё сама стилистика графиков прям кричит на тебя тем, что рассчитана на печать и супер строгий минимализм. Я сам люблю минимализм, но тут он выглядит сильно outdated именно стилистически.

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

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

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

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

А ещё стандарт не толерантный и прям запрещает делать некоторые виды графиков. ;—)

4. Avoid clutter

Следующий раздел полностью посвящен удалению non-data-ink. Тут не знаю, что особо сказать. Хорошие примеры, но довольно очевидные — убирайте лишнее и редактируйте текст.

5. Increase information density

Следующий раздел обратный — про повышение количества data-ink на графиках.

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

Не понравилось, что предлагают делать двойные оси и не очень понятные виды графиков.

6. Ensure visual integrity

Этот раздел посвящён тому как не обмануть зрителя при помощи масштаба и осей, что не стоит использовать логарифмические оси и делать бар-чарты не от нуля и т. п. Мне больше всего понравился вот этот пример. Про то, как совместить графики с одним масштабом, но когда есть какой-то срез сильно преобладающий над другими (обычно это Москва в бизнесовых данных).

Но очень сильно смутило предложение делать что-то подобное:

7. Apply semantic notation

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

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

А вот дальше начинаются очень интересные идеи, которые мне хочется как-то попробовать применить в работе, но пока не придумал как именно.

Идея № 1. Использовать для базовых метрик (данных) и расчетных метрик разные толщины линий и бар-чартов. Затея выглядит интересной, но пока не могу понять стоит ли того. И это точно сложно реализовывать и поддерживать. Но сама идея такого деления, по-моему, очень необычная.

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

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

Идея № 3. Использовать для разных скейлов, разные ширины баров. По-моему довольно элегантно. Хотя реализация снова будет довольно сложной.

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

Идея № 5. Для стандартных бизнесовых периодов типа YTD, MAT и т. п. завести отображение символами, чтобы быстро их показывать на графиках и таблицах. Мне этая идея очень нравится, как идея. Но всё-таки в реальном использовании я бы всегда писал начало и конец периода Jan’18 … Jan’19 и т. п. Мы у себя в стандарте делаем именно так.

Выводы и общие впечатления

Стандарт мне нравится. Это отличная сводка правил и интересных находок. Очень простая и понятная подача из свода правил и карточек формата «Don’ts and Dos». Он точно не подходит в формате «как есть» для дашбордов, есть спорные моменты и рекомендации и устаревший визуальный стиль. Используется через чур мало цветом, хотя очень круто, что основной — черный (мы у себя сделали так же). В целом много интересных идей, рекомендую к прочтению.

По-мимо самого стандарта на сайте есть ещё и гайдлайны. Можно прям брать и делать внутренние рекомендации по аналогии.

Есть неполные, но довольно близкие, реализации стандарта в Табло.

И ещё есть расширения для Excel и Power BI, которые позволяют работать по этому стандарту. Вот на этой страничке можно потыкать живые дашборды. Не всё идеально, но таблицы выглядят просто отлично.

Из забавного. В том году я делал длинный лонгрид про графики план-факта. Итоговый вариант получился довольно похож на вот эти графики ниже, хотя я тогда ещё не видел такую реализацию этих графиков в виде этого стандарта, нашёл только сейчас в плагине для Power BI.