Полезные советы при создании аналитических панелей.

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

Ниже предлагаю небольшой мануал по созданию симпатичных панелей.

Шаг 1.  Создайте образ панели.

 Для начала ответьте себе на вопросы.

- Какую мысль я хочу донести людям, в чем ценность этой панели ? 

(от этого будет зависеть наполнение панели информацией)

- Кто будет пользоваться этой информацией, кто целевая аудитория ? 

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

- Какой тип панели это будет ?

 (стратегическая, оперативная, в виде истории,  детализация)

Подсказка : представьте вашу панель создайте ее в голове , если есть возможность нарисуйте набросок карандашом.

Шаг 2.  Выберите макет.

От выбора макета зависит количество информации которое можно разместить на панели , следите за тем чтобы было достаточно места между блоками

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

Подсказка: В интернете есть разные варианты макетов на выбор, попробуйте создать свой макет в каком-нибудь онлайн дизайнере или используя Gridstack.js

                          

                          

Шаг 3.  Разместите элементы.

Определите где на макете будут располагаться ваши элементы, обязательно добавьте заголовок , разместите условно кнопки управления, датчики , KPI индикаторы, графики и таблицы

Подсказка: Выберите правильные графики для своей истории.  Основные приемы для выделения информации:

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

      - выделение трендов для показателей ( я их называю прогнозные ,  по ним можно отследить , рост выручки, падение производительности, волатильность на рынке, в общем понять куда движемся),

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

      - состав (для анализа общего вклада в итоговой показатель, в какой то степени аналог распределения)

      - взаимосвязь  (для наглядного понимания зависимости одного показателя от другого, например среднего чека от размера магазина, или количество заказов от температуры на улице)

На сайте Infographer.ru есть схема подсказка как выбрать нужную диаграмму в зависимости от данных, аналогичный помощник есть у juiceanalitics

Шаг 4.  Определите цветовую схему.

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

Больше инструментов найдете  тут.

Шаг 5.  Выберите шрифты.

Определите шрифт для панели ,  поверьте он может стать определяющим при чтении данных с вашей панели,

для этого можете воспользоваться популярными шрифтами или подобрать любым доступным инструментом

Сделайте акцент в виде контрастных элементов  если необходимо выделить конкретный блок или группу элементов или используйте контраст для разделения блоков Группируйте блоки  визуально в группы, это поможет создать визуальную связь между информацией

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

Ну а в дополнение рекомендую небольшую книгу Dashboards_People_Love_To_Use_Whitepaper_v2.pdf  , ее легко найти в интернете.