Правило симметрии для верстки дашборда

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

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

Складывается ощущение незавершенности. Взгляд будто спотыкается на неровностях. Так и хочется позвать дизайнера, чтобы он "навел красоту" в чистовике. Красота — понятие субъективное, а вот симметрия — четкое. Человек легче воспринимает информацию, если на экране блоки одинакового размера и они находятся друг под другом с равными отступами. А легкость восприятия информации на уровне психологии и влияет на оценку "нравится".

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

1. Ключевые показатели расположены не по всей ширине листа и справа упираются в фильтр.
2. И вообще фильтры расположены справа и слева, разного размера и ширины.
3. Во втором ряду 2 графика, а в нижнем — 3 диаграммы. Как выровнять 5 блоков?

Во-первых, растягиваем по ширине область KPI, а фильтры переносим в одну сторону. Я рекомендую располагать фильтры слева. Меню, элементы управления в интерфейсах почти всегда находятся с этой стороны. Так что для пользователя это очевидное местонахождение. Бывают случаи, когда удобнее разместить фильтры сверху или справа, но это исключение из правила.

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

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

Что еще изменилось? Мы убрали рамки у каждой диаграммы. Сетка определяется не рамками, а выравниванием. Поэтому заголовки сделали по левому краю

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

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