Ко мне в личку пришёл Владимир Шилов из Ростелекома и попросил взять в рубрику «переверстка» дашборд (точнее темплейт) в Power BI. Сначала я хотел отказаться, но потом решил «WTF, hold my beer!». Впервые переделал дашборд в этой BI-системе. Получился очень интересный лично для меня опыт. Решил собрать в этой заметке, что заметил на счет конкретно этого дашборда и Power BI в целом.

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

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

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

Выравнивание по центру

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

Подробнее про выключку по центру (это так называется выравнивание в типографике):
— Заметка Игоря Штанга
— Совет Михаила Нозика про смену выравнивания и ещё один, про выравнивание по ширине
— Памятка верстальщика

Правило контраста и иерархии

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

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

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

Видео про контраст от Михала Нозика
 

Правило близости, правило внутреннего и внешнего

Расстояния от края блока до элементов внутри него получились очень маленькими. Из-за этого элементы смотрятся слипшимися. Чтобы исправить это — нужно дать больше пространства между блоками.

Подробнее:
— Разъяснение этого правила от Артёма Горбунова
— Как теория близости работает в интерфейсе?

Фильтры без аналитики

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

Применив принципы, которые описал выше, у меня получился вот такой результат:

Что я изменил:
— Выровнял всё по левому краю
— Сделал меньше контрасты между заголовком и фактоидами, унифицировал заголовки
— Сделал весь полу-черный текст черным
— Добавил больше пространства между блоками и убрал серую сетку (так как её сложно сделать при верстке в PBI)
— Фильтры выделил отдельной плашкой и кнопки заменил на мини бар-чарты
— Сделал пастельные цвета для тримапа
— Лого переместил на право, так как оно текстовое и плохо стыковалось с заголовком
— Сделал пропорции графиков более подходящими под их тип (да, графики были только примерами, но надо чтобы разработчики запоминали такие вещи из примеров)
— Убрал странные индикаторы в виде восклицательного знака в фактоидах

Power BI vs Tableau

Я занимался только версткой и оформлением, поэтому сравню именно эти аспекты.

Сам подход к верстке — отличается координально. С одной стороны, в Power BI, он гораздо более прост и привычен — полное ощущение, что работаешь с Power Point. А с другой, сразу ставит крест на нормальной адаптивности под разные экраны ноутбуков. Табло в этом плане круче.

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

Ещё выписал для себя список фич, которым прям позавидовал:
— Офигенные фильтры, которые при снятии всех галочек догадываются, что нужно показывать всё. Это очень удобно
— Крутая визуализация для факторного анализа (дерево метрик). Я такую в Табло два месяца делал, а тут бац и в два клика =(
— Копи-паст форматирования работает шикарно, а не как в Табло
— Группировки блоков на дашборде с помощью одной кнопки. Какой же кайф!
— Очень неплохие бар-чарт таблицы с правильным выравниванием цифр
— Можно вставить нормально ссылку в текст
— Умные подписи внутри тримапа при иерархии

Выводы

Power BI не удалось меня в себя влюбить, всё равно продукт прям так и предлагает тебе сделать плохо. Попробуйте сделать стиль таблицы «Броские строки», просто вырвиглаз 🤦‍♂️
Но в целом у меня от него сложились гораздо более приятные впечатления, чем три года назад. И оказывается, в нём можно делать очень даже неплохие по оформлению дашборды без миллиарда цветом и с аккуратным выравниванием. ;-)