Стандарты
Рассуждаем над визуальным минимализмом
Сегодня мы разберем термины, связанные с визуальной информативностью диаграмм и графиков, посмотрим на примеры визуальных стандартов и узнаем, как воплощать их в программном продукте. Услышим еще несколько советов и подходов к проектированию из личного опыта наших экспертов и закончим день заданием с добавлением эмоций.
Найти баланс между красотой и информативностью
Иногда с дизайном данных можно перестараться. Для этого, Эдвард Тафти — американский статистик и очень заметная фигура в информационном дизайне — ввел специальный термин junk chart. Дословно его можно перевести как «мусорный график» или «диаграмма, полная барахла», то есть на ней много всех тех элементов, которые вообще-то не нужны для передачи информации.
... слишком большое количество штриховок, которые отвлекает от данных
Термин описывает все визуальные элементы на диаграммах, которые не только излишни для понимания информации, но и наоборот — отвлекают зрителя от ее понимания. Примеры ненужных элементов включают в себя тяжелые/насыщенные или слишком контрастные линии фоновой сетки, ненужный текст, чрезмерные, сложные или неуклюжие шрифты, орнаментированные оси диаграммы, лишние изображения или значки в графах данных, 3D-графики, а также шумные фоны.

Но с другой стороны… Использование изображений и образов может привлечь внимание и заинтересовать аудиторию.
Яркие образы привлекают внимание публики… главное, чтобы данные не затерялись среди изображений
Для широкой публики и в медиа часто используют экстра-эмоциональный подход с использованием ярких метафор и образов — ведь нужно сражаться за внимание зрителя, конкурировать с другими медиа-площадками и социальными сетями.

В инфографике вполне можно стилизовать все диаграммы под планеты, звезды и ракеты, если она посвящена Дню Космонавтики. В более спокойной среде, ни с кем конкурировать не нужно и эмоциональность вместе с визуальными метафорами можно приглушить, поставив на первый план информативность визуализации.
Известный пример, как цвет и расположение графика может влиять на эмоциональное восприятие визуализации. В медиа таким подходом часто провоцируют на эмоциональное вовлечение — важно зацепить зрителя
Как найти баланс? Для этого, Тафти вводит понятие Data-ink.

Показатель Data-ink ratio обозначает соотношение полезных «пикселей» с информацией (data) и графического оформления (ink) на визуализации. Красочный фон, использование текстурных заливок, изображений, активных визуальных метафор — все это увеличивает ink-составляющую (и понижает долю полезной информации). Это может привести к действительно захламлению диаграммы.

В медиа, ink-составляющая может быть выше, чем в бизнесе и тем более в науке.
В вопросе поиска золотой середины между двумя полярными видами визуализаций, мы возвращаемся к ключевому вопросу — «кто ваша аудитория?». Определите ключевые характеристики тех, для кого вы создаете визуализацию, и вы сможете выбрать подходящее соотношение между данными и эмоциями.
Минимализм в визуализациях

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

Но мы говорим о скетчинге. Здесь, визуальные стандарт могут помочь вам определить свой стиль, зафиксировать шрифты и цвета, выбрать необходимые инструменты для работы, формат и цвет бумаги или фона. Вот как выглядели наши собственные наброски стиля для иллюстраций Марафона:
На большом потоке, стандарты облегчают понимание отчетов и презентаций, устанавливая правила их концептуального и визуального дизайна. Отчеты и презентации легче понять с помощью четкого сообщения, хорошо структурированной сюжетной линии, одинакового вида похожих объектов и более высокой плотности информации. Люди привыкают считывать символы, цвета и элементы определенным образом — и в последствии быстрее понимают визуальные объекты.

Одним из качественных примеров современных стандартов является немецкий стандарт IBCS — International Business Communication Standart.
IBCS представляет собой практические предложения по разработке отчетов, презентаций, информационных панелей и диаграмм и таблиц, содержащихся в них.
Концептуальные правила помогают четко передавать контент, используя подходящие шаблоны. Они построены по мотивам работ таких авторов, как Барбара Минто.

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

Семантические правила помогают четко передавать контент, используя унифицированную систему обозначений IBCS.

Пример дашборда по стандарту IBCS и комментарии редактора Марафона
Как визуализировать данные по стандарту IBCS в Qlik Sense
Анна Климкова
Ведущий эксперт, Qlik Россия и СНГ
Посмотрим на несколько примеров создания визуализаций согласно стандарту IBCS.

Для воплощения рекомендаций IBCS в QlikView и Qlik Sense существуют расширения партнеров Qlik HighCoordination и ks quadrat. Но придерживаться принципов IBCS можно и без расширений.

Графики внутри таблицы
Для отображения полосы нужной длины в прямой таблице берем символы Unicode, либо URL ссылки на картинки.

Вертикальный водопад
Для создания вертикального водопада используем сводную таблицу и символы Unicode (квадрат, пробел и вертикальную черту).


Две столбчатых диаграммы в одной
Берем комбинированную диаграмму (версия Qlik Sense August 2021 и выше).
Все три меры План, Факт и Отклонение делаем полосами, но Отклонение отделяем на вторую ось.

Общие рекомендации можно выделить следующие:

→ Сверху дашборда предлагается всегда помещать описание идеи, которую вы хотите донести вашим отчетом.
→ Динамические заголовки и подзаголовки (поля title и subtitle) заполняем для каждой диаграммы. В заголовок помещаем самую важную информацию, которую несет данная диаграмма, в подзаголовок — описание мер и срезов.
→ Для абсолютных значений мер используем полосы, закрепляем постоянные цвета для факта, плана и прогноза, а также за «плохим» и «хорошим» отклонением.
→ Для отклонения в % берем тонкие полоски с квадратиком в конце.
→ Выбираем представление данных столбцами и полосами вместо круговых диаграмм и датчиков.
→ Динамику показываем вертикальными столбцами, все остальное — горизонтальными полосками.
Пример стандартизации диаграмм и графиков
Советы от Газпром нефти
Дана Бугумбаева
Руководитель направления по аналитике данных, Управление организации работы с данными БЛПС, Газпром нефть
В компании мы выстраиваем рекомендации по работе с визуализациями на нескольких уровнях. Большое внимание уделяется созданию диаграмм и графиков, в том числе — выбору подходящего способа визуализации тех или иных данных. Кроме этого, мы накапливаем свои правила сборки и компоновки дашбордов.

Мы делаем акцент на едином расположении элементов в рамках всего приложения: например, фильтры по дате всегда наверху экрана, а по категориям — всегда слева. Отмечаем, что нужно придерживаться единого стиля шрифта для всех текстовых подписей и заголовков; использовать логические блоки и правила распределения внимания пользователей.
Ольга Иваненко
Руководитель Направления инфографики, Газпром нефть
Вот еще несколько советов и подходов, которые мы популяризируем внутри компании.
1
Структурируйте ваш дашборд: идите от общего к частному
2
Если у вас нет идей, то за вдохновением вы можете отправиться на Pinterest, Dribbble и Behance.
3

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

4

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

5

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

Картинки можно использовать как в названии дэшборда, так и в каком-то из блоков.

6

Придерживайтесь стандартных правил верстки: выравнивайте текст и фигуры на дэшборде друг относительно друга вдоль одной прямой, чаще всего — по левому краю.

Как работают с прототипами в Win Solutions
Fast Board — внутренний инструмент для быстрого прототипирования информационных панелей и дашбордов, который используется компанией Win Solutions. Пользователи легко собирают прототипы нужных им дашбордов, создавая свою палитру цветов и подписи данных, и передают их на реализацию.

Fast Board не требует загрузки данных для создания дашборда, что позволяет еще быстрее создавать необходимый макет. Палитры и темы оформления можно создавать самостоятельно, причем тема оформления запоминает палитру и применяет ее при создании следующих работ.
FastBoard – это внутренняя разработка, но вы можете посмотреть на то, как он работает в онлайн-демо и видеозаписях.
FastBoard позволяет пользователям самостоятельно максимально подробно передать свои пожелания в виде макета и тем самым сократить время воплощении своей идеи в жизнь.
Процесс создания дашборда в инструменте
Видео от Win Solutions
Задание: создайте свою эмоциональную визуализацию
О чем задание
В сегодняшнем дне мы много говорили о стандартах и дата-минимализме… Но чтобы привлечь внимание, вам надо делать что-то непохожее и смелое.

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