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

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

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

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

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

Стивен Фью выделяет три типа сигналов:

• заметные изменения в паттернах показателей (изменение трендов)
• заметные изменения в размахе/величине
• появление уже известного и заметного паттерна

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

Так где искать сигналы и как именно?

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

Сравнение по категориям:

• Изменения по категории
• Изменения во времени
• Изменения в пространстве
• Отношения между категориями

И по численным показателям:

• Изменения показателя
• Отношения между показателями

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

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

Примеры будут показаны на датасете с данными по фильмам из Кинопоиска. Этот же набор данных будет в блоке ПРАКТИКА, поэтому сейчас вы сможете познакомиться с данными, а затем самостоятельно сделать практическое задание.

Датасет содержит выгрузку по фильмам и сериалам, которые были выпущены с 1980 года и которые относятся только к наиболее популярным жанрам (драма, комедия, мелодрама…). В датасете, помимо жанра и страны производства, есть данные по длительности фильма или одной серии в сериале, среднему рейтингу, выставленному на Кинопоиске, и количеству проставленных оценок.

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

Чарты простые — на первом показана динамика количества фильмов и сериалов по времени. На втором — средний рейтинг по жанрам. На третьем — количество фильмов и сериалов по жанрам.

Чтобы создать дашборд, нужно перейти в окно Навигации и через кнопку Создать выбрать Дашборд.

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

Добавим три созданных чарта и расположим на дашборде при помощи простого перетаскивания элементов и подгонки виджетов по размеру.

Добавим заголовок и дашборд готов к показу! DataLens позволяет отображать дашборд в полноэкранном режиме. Этот режим скрывает часть интерфейсных элементов и увеличивает область отображения виджетов на экране.

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

С технической сборкой дашборда обычно все понятно. Большую часть дискуссий вызывает сам подход к композиции дашборда. Рассмотрим наиболее популярные подходы, которые зависят от поставленной перед вами задачи.

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

Больше всего внимания мы инстинктивно уделяем информации в верхнем левому углу — просто потому, что мы привыкли так делать: начинаем читать слева направо и сверху вниз и это очень базовый паттерн нашего поведения. Обратите внимание даже на верхнее меню с логотипов на этом лонгриде или в интерфейсе DataLens. Эта область наибольшего акцента и первичного внимания. Чем информация на дашборде располагается ниже и правее, тем меньше внимания ей уделяется, и это обусловлено нашим подсознанием.

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

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

Здесь важнее всего располагать элементы в порядке иерархии. Подумайте, с чего скорее всего будет начинаться анализ? Возможно, с наиболее приоритетных категорий, возможно с динамики за отчетный период. Держите в голове правило, что анализ визуального объекта начинается с верхнего левого угла. Поэтому, если вы вдруг добавите важный для анализа чарт в нижний правый угол (то есть менее приоритетную область) — не ожидайте высокого уровня взаимодействия с такой визуализацией, а возможно и с дашбордом в целом.

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

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

→ Продумайте контекст и как будут выглядеть все базовые элементы дашборда. Четкий заголовок, который подсказывает тематику, вовлекает в диалог и информирует пользователя на самых ранних этапах анализа. Используйте понятные обозначения для своей аудитории — делайте их короткими и однозначными.

→ Включайте только те данные и построенные на их основе чарты, которые поддерживают цели конечного пользователя. Все остальное лишнее. Лучшее решение: один человек — один дашборд.

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

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

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

→ Проверьте округление своих цифр — излишнее количество деталей может исказить восприятие данных.

→ Тестируйте, тестируйте и еще раз тестируйте ваши дизайны.

В добавление, пара технических советов по верстке:

→ Заголовок всегда располагается в верхнем левом углу дашборда. При открытии дашборда важно сразу же понять на что мы сейчас смотрим. Хороший заголовок как раз это и объясняет.

→ Глобальные фильтры-селекторы также располагаются в верхней части дашборда. Это значит, что они влияют на все (или почти все) чарты дашборда

→ Если селектор относится к конкретному чарту, он располагается рядом с ним. Такой принцип позволяет не запутаться в том что на что влияет и что куда относится. Основано на гештальт-принципе близости: элементы, расположенные рядом друг с другом, связаны между собой

→ Используйте текстовый блок внизу дашборда для обозначения контекста. И снова – мы должны понимать на что мы смотрим. В справочном текстовом блоке можно расшифровать аббревиатуры, дать информацию по источникам данных и дате обновления/создания отчета

Кино — самый популярный вид искусства! Давайте проанализируем сколько фильмов снимается каждый год, какие фильмы имеют самые высокие рейтинги, какие фильмы слишком длинные и соберём первый дашборд.

Мы подготовили данные с kinopoisk.ru — самого популярного портала о фильмах в России. В датасете собраны данные по фильмам и сериалам, которые были выпущены с 1980 года и относятся к наиболее популярным жанрам (то есть мы, к сожалению, исключили все нуар-фильмы). Из датасета для каждого фильма вы сможете найти рейтинг, количество выставленных оценок, длительность, дату выпуска и список жанров.

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

Давайте придумаем дашборд, на котором мы сможем удобно отслеживать, как менялась индустрия. В идеале такой дашборд должен помочь продюсерам, которым нужно определиться с тем, какой фильм стоит поддерживать и снимать. Иными словами, во что вкладывать деньги перспективнее?

Постарайтесь придумать набор графиков, которые смогут ответить на вопросы:
1. В какой год сняли больше всего фильмов? За последние 40 лет фильмов стали снимать больше или меньше?
2. Какой фильм имеет наивысшую среднюю оценку?
3. Насколько низко пали ужасы по среднему рейтингу?
4. «Самый лучший фильм» самый худший фильм?
5. Как влияет длительность фильма на его оценку?

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

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

Графики во времени дают понимание, стал ли популярнее какой-то из жанров, и помогают избежать «опасные» жанры, фильмы в которых снимают много, но оценки идут вниз. Это базовые графики, которые дают мне общее представление о том, что происходит с кино-индустрией. Например, фильмы ужасов явно «пали» в борьбе с качеством. А пик съемки всех жанров пришелся на 2018 год, и сейчас идёт спад. Но основной график в этом дашборде — точечная диаграмма справа. Он позволяет детально проанализировать конкретные фильмы и увидеть общую картину. На нём сразу видны выбросы фильмов и основные кластеры. Видно, что в целом чем длиннее фильм, тем выше рейтинг. Этот график сразу провоцирует изучать данные, хочется навести курсор на каждый выброс. Также, я добавил фильтр по жанру, чтобы уменьшать выборку и более детально изучать конкретный жанр. О фильтрах мы поговорим завтра!

Основы типографики от Павла Шайкина

1. Не используйте слишком много шрифтов
2. Не злоупотребляйте декоративными шрифтами
3. Оставьте немного воздуха
4. Не меняйте пропорции шрифта
5. Будьте осторожны с цветом
6. Не используйте эффекты на шрифтах