Эстетика визуализаций
Кейс дня
Сегодня рассматриваем визуализацию с точки зрения красоты, эстетики и наглядности. Разберемся, почему важен цвет и для чего нужна иерархия шрифтов.
Тема дня
Выпечка
Директор кластера
Пермь 21
Пермь 21
Александр Семеновых
Особое внимание к деталям
Выпечка — наша собственная торговая марка, поэтому мы уделяем ей большое внимание. Глобальная цель проста: увеличить РТО на магазин и повысить долю по выпечке. К тому же, у наших конкурентов нет своей выпекаемой продукции. Ее своевременное наличие и высокое качество помогает привлечь трафик от конкурентов.
Нам важно было наглядно видеть, как магазины работают по каждой позиции, смотреть сколько позиций есть на остатках, как часто их списывают.
В созданном отчете мы отслеживаем два показателя. Первый — количество списаний. В магазине всегда должна быть представлена свежая выпечка. Если нет ежедневных списаний, то что-то не так — либо вечером пекут мало, либо, наоборот, перевыпекают.
Второй ключевой показатель — наличие остатков в магазине. Так как у нас сейчас включена централизация в учетной системе SAP, то мы убеждаемся в том, чтобы на конец дня всегда был остаток. А если магазины продают мало, то проверяем, почему нет товара на остатках.
Второй ключевой показатель — наличие остатков в магазине. Так как у нас сейчас включена централизация в учетной системе SAP, то мы убеждаемся в том, чтобы на конец дня всегда был остаток. А если магазины продают мало, то проверяем, почему нет товара на остатках.
В разных магазинах своя частота поставок, например, где-то приезжают каждый день, где-то — раз в два дня или два раза в неделю. Важно контролировать, чтобы в магазине всегда хватало переходящего остатка на эти дни без поставок. За счет анализа остатков, можно сменить дискретность поставок, увеличить или уменьшить объем закупок и повысить эффективность!
Если в магазине остаток не меняется на протяжении нескольких дней, то это виртуальные остатки. Если мы такое выявляем в отчете, то проводим локальную инвентаризацию и корректируем систему до нуля.
Если в магазине остаток не меняется на протяжении нескольких дней, то это виртуальные остатки. Если мы такое выявляем в отчете, то проводим локальную инвентаризацию и корректируем систему до нуля.
Отчетом пользуются супервайзеры. По кластеру дашбордом пользуются каждый день для операционных решений. По макрорегиону подсвечиваем главное один раз в неделю: у кого какие остатки, какая доля выпечки, кто как проработал. Далее идет точечная работа с конкретными магазинами. Экстренные решения тоже могут приниматься!
До появления интерактивного отчета, мы выгружали остатки и списания из SAP, собирали сводный из 2−4 отчетов каждый день. На это требовалось около полутора часов: сделать выгрузки, сформировать сводную таблицу, провести анализ. Сегодня весь процесс занимает менее 30 минут — данные получаем мгновенно, но для проведения анализа все равно нужно время.
Технические детали отчета
Отчет состоит из 1 таблицы, 2 диаграмм и 2 ключевых показателей эффективности.
- Отчет показывает количество магазинов, в которых не было списаний конкретной PLU в штуках, а также долю РТО в процентах в разрезе дивизионов, кластеров, магазинов.
- В отчете представлена таблица продаж по супервайзерам и магазинам, в которой можно найти информацию РТО с НДС в рублях и процентах, остатки и потери.
Этот отчет — полномерный срез всех имеющихся данных по целой группе товаров! Экономия времени, удобство и гибкость — нам важно было иметь наглядный инструмент о работе магазинов по каждому товару. Направление выпечки — одно из конкурентных преимуществ сети, важно держать уровень сервиса на высоте.
Цвет, шрифт, красота. Эстетика визуализаций
Мы как люди, привыкли видеть красивую природу вокруг нас и совершенно естественно воспринимаем красоту, правильные формы, красивых людей и поступки. Что важно при работе с данными? Важны акценты и внимание к самым главным вещам.
Цвет и шрифты управляют нашим вниманием и мы должны относиться к применению дизайнерских инструментов осознанно.
Цвет и шрифты управляют нашим вниманием и мы должны относиться к применению дизайнерских инструментов осознанно.
Работа с цветом
Неправильное использование цвета в визуализациях может полностью изменить вашу визуальную работу. Имейте в виду, что применение цвета различается для разных типов данных, в первую очередь для числовых мер (показателей) и для текстовых категорий.
Цель использования цвета может быть разной: от простого визуального форматирования, до привлечения внимания и кодирования дополнительных переменных.
Цель использования цвета может быть разной: от простого визуального форматирования, до привлечения внимания и кодирования дополнительных переменных.
Цвет для категорий
Цвет используют для показа небольшого количества категорий — в идеале не более 5−6 значений отдельных значений. Названия компаний, регионы или города, политические партии, имена участников… Контрастные цвета идеально помогут отличить такие категории друг от друга одним взглядом.
При раскраске категорий, цвет должен помогать различать категории между собой, а не смешивать и затруднять их восприятие.
При раскраске категорий, цвет должен помогать различать категории между собой, а не смешивать и затруднять их восприятие.
Цвет для чисел
Цвет для числовых данных нужен для того, чтобы передать величину показателя.
Если показатель принимает только положительные значения, т. е. население страны, количество проданных товаров, прибыль, используйте одноцветную палитру. Визуальные различия в цвете сразу подталкивают зрителя к выводам — там, где закраска насыщеннее и темнее показатель больше, чем в более бледных элементах.
Если значение может быть как положительным, так и отрицательным, например, выручка, которая может быть в минусе, используйте двухцветные палитры. Они также визуально сообщат дуальность показателя благодаря наличию двух цветов. И все значения выше нуля будут одного цвета, а ниже нуля — другого.
Если показатель принимает только положительные значения, т. е. население страны, количество проданных товаров, прибыль, используйте одноцветную палитру. Визуальные различия в цвете сразу подталкивают зрителя к выводам — там, где закраска насыщеннее и темнее показатель больше, чем в более бледных элементах.
Если значение может быть как положительным, так и отрицательным, например, выручка, которая может быть в минусе, используйте двухцветные палитры. Они также визуально сообщат дуальность показателя благодаря наличию двух цветов. И все значения выше нуля будут одного цвета, а ниже нуля — другого.
Акцентный цвет
Иногда, цвет может не выражать прямое значение показателя, а помогать формировать акцент на определенной категории. Например, стоит вам поменять цвет одного из столбцов — внимание будет приковано к выделенному объекту. Добавление контрастного значка рядом с нужными категориями (например, красную точку) тоже отлично работает в качестве визуального акцента.
Александр Ананьин
Руководитель аналитики департамента по компенсациям и льготам
Когда мы выбираем цветовое решение для наших отчетов и графиков, нам очень важно подобрать те цвета, которые увидят люди с нарушениями цветового восприятия. С помощью специального инструмента мы всегда проверяем созданный дашборд и «смотрим» на него глазами человека с цветовой слепотой. Порядка 7% людей страдают от этого — при этом, они зачастую не могут работать с дашбордами, потому что они не видят разницы между цветами.
Например, зеленый и красный — самые распространенные цвета для показа отклонений — могут выглядеть одинаково. Красный — самый опасный цвет, его мы обычно заменяем оранжевым, а зеленый — синим. Всегда проверяйте свои диаграммы и смотрите на них глазами других людей.
Например, зеленый и красный — самые распространенные цвета для показа отклонений — могут выглядеть одинаково. Красный — самый опасный цвет, его мы обычно заменяем оранжевым, а зеленый — синим. Всегда проверяйте свои диаграммы и смотрите на них глазами других людей.
Работа со шрифтом
Шрифт, как и цвет, формирует визуальное восприятие. Неудачное использование или плохой выбор шрифта могут испортить впечатление от визуальных работ.
При разработке дизайна диаграмм, используйте только один шрифт (одно семейство шрифтов) и не более 3−4 размеров шрифта.
Очень важно создавать иерархию шрифтов — она будет поддерживать общую логику работы с данными.
На дашбордах вы можете использовать элементы форматирования текста для того, чтобы выделить название показателя в заголовке или сделать небольшую сноску по одной из диаграмм.
Мы еще вернемся к теме работы с цветом и шрифтом в завтрашнем дне, когда будем разбирать корпоративные стандарты при работе с визуализацией данных.
Мы еще вернемся к теме работы с цветом и шрифтом в завтрашнем дне, когда будем разбирать корпоративные стандарты при работе с визуализацией данных.
Работа с композицией дашбордов
При создании дашборда, старайтесь уделять внимание его макету, внешнему виду и тому, как дашборд будут воспринимать люди. Куда они посмотрят в самом начале? Что затем притянет их внимание? Поймут ли они что показано на дашборде или нужны дополнительные подписи?
Больше всего внимания мы инстинктивно уделяем информации в верхнем левому углу — просто потому, что мы привыкли так делать: начинаем читать слева направо и сверху вниз и это базовая привычка нашего считывания.
Левый верхний угол — область наибольшего акцента и первичного внимания. Чем информация на дашборде располагается ниже и правее, тем меньше внимания ей уделяется.
Используйте правило восьми секунд. Ваш дашборд должен предоставить самую главную информацию примерно за 8 секунд. Это означает, что если вы просматриваете информацию в течение нескольких минут, это может указывать на проблему с визуальной композицией.
Используйте правило восьми секунд. Ваш дашборд должен предоставить самую главную информацию примерно за 8 секунд. Это означает, что если вы просматриваете информацию в течение нескольких минут, это может указывать на проблему с визуальной композицией.
Для расстановки композиции можно также использовать сетки — специальные разметки для размещения диаграмм и элементов на дашборде.
Например,
Например,
- Шаблон 2×3 — сетка из 6 одинаковых по размеру диаграмм в две строки
- Шаблон 2|1|3 — трехколоночная сетка, согласно которой слева направо показываются две, одна, а затем и три диаграммы в трех колонках
- Шаблон 1−2−3 — трехколоночная сетка, согласно которой слева направо показываются две, а затем и три диаграммы в трех строках; при этом в качестве первой строки выступает отдельная строка с четырьмя KPI
Полезные ссылки
Если вам интересно узнать больше по дополнительным темам Марафона, переходите по ссылкам для дальнейшего изучения тем и расширения кругозора
2022