Работа с цветом
17
/21
О чем мы поговорим сегодня
Прочитаем историю успеха InfoVizion и узнаем, как в команде используют возможности встроенной аналитики Qlik, познакомимся с принципами выбора и настройки цвета на диаграммах, научимся задавать цвет функциями.
ИСТОРИЯ УСПЕХА
От инсайта к действию: встроенная в InfoVizion аналитика Qlik
InfoVizion — разработчик и интегратор систем аналитики и инцидентного реагирования в ритейле и производстве. Среди решений InfoVizion аналитика компании, Ситуационный центр, финансовая аналитика, цифровые помощники магазина и офиса. Клиенты InfoVizion — торговые сети и производственные компании в России, Казахстане, Киргизии.
Олег Костерин
соучредитель и директор InfoVizion
“
Наш путь достаточно длительный. Мы начали взаимодействовать с компанией Qlik в 2014 году с построения стандартной аналитики и до начала 2019 года в этом направлении достаточно сильно преуспели. Мы являемся монопартнёром Qlik и разрабатываем свои решения только на платформе Qlik Sense.
В жизненном цикле InfoVizion можно выделить два этапа:
Первый этап — процесс от разработки в 2014 году базовой аналитики (%OOS и упущенная прибыль, ликвидность товаров, факторный анализ, уровень сервиса поставщика, анализ промо-акций) до внедрения в 2018 году процессной аналитики (аналитика автозаказа и в дальнейшем аналитика по динамическому ценообразованию).
Второй этап — переход в 2019 году к OEM-продукту и создание Ситуационного центра компании, цель которого генерировать задачи сотрудникам по инсайтам, которые диагностируются на основе данных, накопленных в существующей системе аналитики.
За годы работы у InfoVizion появилось отдельное web-приложение со следующими особенностями:
Первый этап — процесс от разработки в 2014 году базовой аналитики (%OOS и упущенная прибыль, ликвидность товаров, факторный анализ, уровень сервиса поставщика, анализ промо-акций) до внедрения в 2018 году процессной аналитики (аналитика автозаказа и в дальнейшем аналитика по динамическому ценообразованию).
Второй этап — переход в 2019 году к OEM-продукту и создание Ситуационного центра компании, цель которого генерировать задачи сотрудникам по инсайтам, которые диагностируются на основе данных, накопленных в существующей системе аналитики.
За годы работы у InfoVizion появилось отдельное web-приложение со следующими особенностями:
➜ Общий каталог показателей и измерений во всей модели
➜ Автоматическая генерация показателей: сравнение с прошлыми периодами (LFL, неделя, месяц, год, 2 года), остатки на конец дня, недели или месяца и т. д.
➜ Расширенный набор библиотек и объектов визуализации Qlik + HighCharts + Аgg-Grid
➜ Интеграцией с внешними системами BPMS, ERP, мобильным приложением.
➜ Автоматическая генерация показателей: сравнение с прошлыми периодами (LFL, неделя, месяц, год, 2 года), остатки на конец дня, недели или месяца и т. д.
➜ Расширенный набор библиотек и объектов визуализации Qlik + HighCharts + Аgg-Grid
➜ Интеграцией с внешними системами BPMS, ERP, мобильным приложением.
Платформой для решения была выбрана платформа Qlik Sense по целому ряду причин. С технической точки зрения она позволяет обрабатывать множество записей и получать быстрый отклик. В силу внутренних особенностей запросов Qlik Sense в 4 раза производительнее других систем, поскольку один запрос может сразу возвращать четыре типа данных (итоги, среднее, максимальное и минимальное значения). Еще одним преимуществом Qlik Sense стал самый функциональный на сегодняшний момент API.
В настоящий момент web-приложение InfoVizion автоматически запрашивает данные из Qlik, «на лету» формирует все показатели, генерирует для них необходимые объекты визуализации
В арсенале InfoVizion более 40 функциональных блоков в аналитике и это только в решении для ритейла. По сути, созданное сегодня решение позволяет оценить эффективность практически всех бизнес-процессов розничной компании.
Кейс компании Umai Group + InfoVizion
Один из успешных кейсов — кейс киргизской компании Umai Group. Umai Group управляет тремя разно-форматными сетями магазинов: Globus, «Достор» и «Народный». В настоящее время компания насчитывает более 80 магазинов, следующих форматов: гипермаркеты, супермаркеты, магазины «у дома» и дискаунтеры.
Компания прошла вместе с InfoVizion путь внедрения коммерческой, чековой и финансовой аналитики. BI-система качественно улучшила понимание показателей, но сотрудники продолжали работать в полуручном режиме: отправляли отчёты и задания по электронной почте, делали распечатку в магазинах, осуществляли выборочный контроль исполнения.
Компания прошла вместе с InfoVizion путь внедрения коммерческой, чековой и финансовой аналитики. BI-система качественно улучшила понимание показателей, но сотрудники продолжали работать в полуручном режиме: отправляли отчёты и задания по электронной почте, делали распечатку в магазинах, осуществляли выборочный контроль исполнения.
Ситуационный центр собирает обратную связь об исполнении задач, и директор понимает, как быстро магазины справились с текущими операциями
В 2021 году стартовал проект внедрения Ситуационного центра. Ситуационный центр собирает и анализирует данные из всех систем, которые внедрены у ритейлера — от ERP и кассовых серверов до систем адресного хранения товаров на складах, данных по закупкам, систем лояльности и т. д. Для отработки разных сценариев система отбирает нужную информацию и ищет отклонения.
Сейчас магазины ежедневно до 08:00 получают в мобильное приложение 20−30 интеллектуальных подсказок по проблемным товарам из выбранных бизнес-инцидентов:
· Доступность товара на полке;
· Неликвидные товары;
· Актуализация остатков;
· Подтверждение промо: вход и выход из ПРОМО;
· Актуальные цены после переоценки;
· Возвраты поставщикам;
· Проверки в течение дня.
· Доступность товара на полке;
· Неликвидные товары;
· Актуализация остатков;
· Подтверждение промо: вход и выход из ПРОМО;
· Актуальные цены после переоценки;
· Возвраты поставщикам;
· Проверки в течение дня.
Четыре инцидента, связанные с доступностью товара на полке, сохранили компании 0,7% РТО. При этом в магазине появился цифровой след, которого зачастую ритейлерам очень не хватает, чтобы оптимизировать продажи и закупки, повысить лояльность покупателей и т. д.
Олег Костерин
соучредитель и директор InfoVizion
“
Раньше в процесс работы с данными был вовлечен 1 человек, который мог делать 100 проверок в день или порядка 3 тысяч в месяц. При использовании ситуационного центра и мобильного приложения Быстродел в процессы актуализации выкладки, цен и остатков ежедневно вовлечено более 700 сотрудников, которые суммарно проводят 200 тыс. проверок в месяц. Таким образом, за счет вовлечения персонала в работу системы компания ставит под контроль более 3 млн проверок в год, а ее руководство получает уверенность, что в магазине клиент увидит корректную цену и товар на полке.
Аналитика в действии: как запустить цифровые процессы магазина из BI
ТЕОРИЯ
Основы цвета на визуализациях
Неправильное использование цвета в визуализациях может полностью погубить ваш труд. Цель использования цвета может быть разной: от простого визуального форматирования, до привлечения внимания и кодирования дополнительных переменных.
Применение цвета различается для разных типов данных, в первую очередь для числовых мер и для отдельных категорий.
Применение цвета различается для разных типов данных, в первую очередь для числовых мер и для отдельных категорий.
Цвет для категорий
Цвет используют для показа небольшого количества категорий — в идеале не более 5−6 значений отдельных значений. Контрастные цвета идеально помогут отличить такие категории друг от друга одним взглядом.
При раскраске категорий, цвет должен помогать различать категории между собой, а не смешивать и затруднять их восприятие. Человеческий мозг не способен держать в уме и визуально сравнивать большое количество разных цветов.
Цвет используют для показа небольшого количества категорий — в идеале не более 5−6 значений отдельных значений. Контрастные цвета идеально помогут отличить такие категории друг от друга одним взглядом.
При раскраске категорий, цвет должен помогать различать категории между собой, а не смешивать и затруднять их восприятие. Человеческий мозг не способен держать в уме и визуально сравнивать большое количество разных цветов.
Цветовой акцент
Иногда, цвет может не выражать прямое значение показателя, а помогать формировать акцент на определенной категории. Для создания акцента нужный элемент окрашивается контрастным цветом. Добавление контрастного значка рядом с нужными категориями (например, красную точку) тоже отлично работает в качестве визуального акцента.
Иногда, цвет может не выражать прямое значение показателя, а помогать формировать акцент на определенной категории. Для создания акцента нужный элемент окрашивается контрастным цветом. Добавление контрастного значка рядом с нужными категориями (например, красную точку) тоже отлично работает в качестве визуального акцента.
Цвет для чисел
Цвет для числовых данных нужен для того, чтобы передать величину показателя. Если показатель принимает только положительные значения (население страны, количество проданных товаров, прибыль), используйте однотонную палитру. Где тон насыщеннее, там показатель больше.
Если значение может быть как положительным, так и отрицательным, например, выполнение плана, выручка, которая может быть в минусе, соотношение с референс-значением, используйте двухцветные палитры. Они также визуально сообщат дуальность показателя благодаря наличию двух цветов. И все значения выше нуля будут одного цвета, а ниже нуля — другого.
Цвет для числовых данных нужен для того, чтобы передать величину показателя. Если показатель принимает только положительные значения (население страны, количество проданных товаров, прибыль), используйте однотонную палитру. Где тон насыщеннее, там показатель больше.
Если значение может быть как положительным, так и отрицательным, например, выполнение плана, выручка, которая может быть в минусе, соотношение с референс-значением, используйте двухцветные палитры. Они также визуально сообщат дуальность показателя благодаря наличию двух цветов. И все значения выше нуля будут одного цвета, а ниже нуля — другого.
Алена Шинкаренко
ведущий разработчик BI, First BIT
Цвет на диаграммах и графиках — это носитель информации. И если мы закладывали информацию в цвет, а цвет не очевиден, то считать эту информацию сложно. У людей очень сильная взаимосвязь между цветами и представлениями о мире — цвет должен поддерживать наши шаблоны в голове.
Если цвет противоречит выработанным шаблонам — например, вы использовали красный цвет на диаграмме «просто так», то человек, видя красные столбцы, воспримет данные как негативные, т. е. приносящие отрицательный эффект. Пользователь даже не успеет посмотреть на реальные цифры, говорящие об обратном. Это один из способов манипуляции.
Если цвет противоречит выработанным шаблонам — например, вы использовали красный цвет на диаграмме «просто так», то человек, видя красные столбцы, воспримет данные как негативные, т. е. приносящие отрицательный эффект. Пользователь даже не успеет посмотреть на реальные цифры, говорящие об обратном. Это один из способов манипуляции.
“
В дизайне есть правило 60−30−10. Его можно отнести и к принципам дизайна дашбордов. 60% выделено на основной цвет, 30% - на второстепенный, и 10% – это акцентный цвет.
В моей практике я нигде не использую чистый черный цвет — он очень контрастный. Однако, более светлые «оттенки» черного (#353 534 или #565 656) выглядят все еще довольно контрастно, чтобы выделяться на дашборде, но не так сильно режут глаза на белом фоне.
В Заголовках визуализаций лучше не использовать различные цвета, придерживаясь единого стиля. Кроме того, заголовок — это вспомогательная информация, а все внимание пользователей должно быть обращено на данные на визуализации, поэтому, заголовок не должен «кричать».
В Заголовках визуализаций лучше не использовать различные цвета, придерживаясь единого стиля. Кроме того, заголовок — это вспомогательная информация, а все внимание пользователей должно быть обращено на данные на визуализации, поэтому, заголовок не должен «кричать».
В Qlik Sense заголовкам по умолчанию применяется корректный темно-серый цвет. Причем, если речь идет о заголовке диаграммы, то у нее серый цвет темнее, чем цвет пометки внизу диаграммы. Таким образом поддерживается иерархия.
Советы по работе с цветом
➜ Цвета на вашем мониторе могут отличаться от цветов на мониторе других людей
➜ Цвета на экране компьютера и на напечатанном листе могут различаться
➜ Черно-белая печать может изменить внешнее восприятие визуализации
➜ Корпоративные цвета вашей компании могут плохо смотреться на визуализациях
➜ Если вы хотите сделать на чем-то цветовой акцент — это правда должно иметь особое значение
➜ Цвет не должен использоваться для «украшения» данных — тогда он не вызовет у людей отклика
➜ Одни и те же данные должны быть постоянны в своем цвете на протяжении всей визуализации
➜ Ваши данные могут сами подсказать вам какой цвет выбрать (яблоки — зеленые, ягоды — красные)
➜ Цвета на вашем мониторе могут отличаться от цветов на мониторе других людей
➜ Цвета на экране компьютера и на напечатанном листе могут различаться
➜ Черно-белая печать может изменить внешнее восприятие визуализации
➜ Корпоративные цвета вашей компании могут плохо смотреться на визуализациях
➜ Если вы хотите сделать на чем-то цветовой акцент — это правда должно иметь особое значение
➜ Цвет не должен использоваться для «украшения» данных — тогда он не вызовет у людей отклика
➜ Одни и те же данные должны быть постоянны в своем цвете на протяжении всей визуализации
➜ Ваши данные могут сами подсказать вам какой цвет выбрать (яблоки — зеленые, ягоды — красные)
Настройка цвета в Qlik Sense
Алена Шинкаренко
ведущий разработчик BI, First BIT
Анна Климкова
ведущий разработчик, Qlik
На цвет диаграмм в Qlik Sense может влиять две характеристики:
1
Тема приложения Qlik Sense. Тема определяет, как будут выглядеть визуализации и сам стиль приложения. Темы содержат в себе преднастроенные палитры цветов, которые вы применяете к визуализациям.
2
Собственные настройки для визуализаций. Мы можем сами задавать правила раскраски диаграмм и графиков.
Есть четыре темы Qlik Sense: Sense Classic, Sense Focus, Sense Breeze и Qlik Horizon. Вы можете самостоятельно создавать темы на основе стандартов компании.
Темы позволяют задавать стиль приложения, меняя цвета, добавляя картинку на задний фон, задавая размер и цвет шрифта как для всего приложения, так и для отдельных типов визуализаций. Также можно задать в них свои цветовые палитры и настраивать отступы.
Темы позволяют задавать стиль приложения, меняя цвета, добавляя картинку на задний фон, задавая размер и цвет шрифта как для всего приложения, так и для отдельных типов визуализаций. Также можно задать в них свои цветовые палитры и настраивать отступы.
Если не задавать цвета диаграмм внутри мастер-мер или мастер-измерений или не использовать вычисления, то цвет визуализаций будет изменяться вместе с темой приложений
К одной и той же диаграмме (например, столбиковой диаграмме), можно применить разные алгоритмы к раскрашиваю столбцов.
1
Единый основной цвет — все столбцы покрашены одним цветом, чаще всего синим или серым. Здесь важно выбрать нейтральный цвет.
2
На основе измерения, по категориям. В этом случае, каждая категория (страны, наименования) будет иметь свой уникальный цвет. При этом, значение цвета может выбираться как из палитры темы приложения, так и в настройках мастер-измерения — или же задаваться кодом.
3
На основе меры, по значениям показателей. Аналогично, значение цвета может выбираться как из палитры темы приложения, так и в настройках мастер-меры, или задаваться кодом.
Вы можете написать комплексное условие по определению цветового правила с помощью выражений. Например, можно подсветить выполнение плана. Если план выполнен, то столбцы зеленые, если нет — красные.
Выражение для цвета
if ( [Выполнение плана] >=0, '#6EB9AB','#CC397B')В комбинированной диаграмме в свойствах каждой меры можно задать свой цвет, как постоянный, так и по выражению.
В таблицах можно также раскрасить ячейки по какому-то условию.
При этом, можно задавать как значение для покраски фона, так и для покраски текста ячейки.
При этом, можно задавать как значение для покраски фона, так и для покраски текста ячейки.
Цвет по формулам можно задать в форматах:
HEX = ‘#6795d7'
RGB = RGB (159,211,202)
ARGB (100, 159,211,202), первый аргумент — это прозрачность (0−255), где 255 отвечает за полностью непрозрачный цвет
HSL = HSL (0.33, 1, 0.5)
Есть также предопределенные функции цвета, например:
Red (), Green (), Blue (), Grey (), White ()
Также полезные функции colormix1() и colormix2() — они используются для задания градиента.Описание этих функций с примерами можно найти в онлайн-справке Qlik.
HEX = ‘#6795d7'
RGB = RGB (159,211,202)
ARGB (100, 159,211,202), первый аргумент — это прозрачность (0−255), где 255 отвечает за полностью непрозрачный цвет
HSL = HSL (0.33, 1, 0.5)
Есть также предопределенные функции цвета, например:
Red (), Green (), Blue (), Grey (), White ()
Также полезные функции colormix1() и colormix2() — они используются для задания градиента.Описание этих функций с примерами можно найти в онлайн-справке Qlik.
ПРАКТИКА
Расширенная аналитика в Qlik Sense
Практическое задание
Посмотрите запись вебинара от Datanomix Academy по работе с цветом.
Скачайте готовое приложение от Datanomix.pro по управлению цветом, загрузите его в свой Qlik Sense и исследуйте!
Скачайте готовое приложение от Datanomix.pro по управлению цветом, загрузите его в свой Qlik Sense и исследуйте!
Управление цветом. Datanomix Academy
Запись вебинара по работе с цветом в Qlik Sense
Полезные ссылки
Если вам интересно узнать больше, переходите по ссылкам для дальнейшего изучения тем и расширения кругозора
Телеграм-сообщество Qlik
Приглашаем вас присоединиться к телеграм-чату Qlik, чтобы общаться с коллегами, задавать вопросы экспертам и оставаться в курсе новостей Марафона.
@qlikbi_chat
@qlikbi_chat
Обзор дня и встреча с экспертом: День 17
Виталий Тренкеншу, Chief Qlik Officer, Datanomix.pro
2022