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

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

Что значит красиво?

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

Дизайнера нет - будем править сами


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

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

Если смотрится криво - ищи изъяны в логике

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

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

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

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

Хочешь получать актуальные статьи о визуализации данных?