2 заметки с тегом

дашборд

Шаблоны верстки дашбордов

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

Условно я делю дашборды по решаемой ими задаче:
— Узнать что-то про определенную сущность (заранее знаю что хочу увидеть).
— Получить какой-то инсайт, не зная что именно ищу. Или сделать выводы, имея в голове определенный алгоритм поиска.
— Отслеживать операционные данные на «ежедневной» основе.

Шаблон «Страница сущности»
Задача: Узнать что-то про определенную сущность (заранее знаю что хочу увидеть)

Эта задача может быть в двух вариантах. Первый — когда сущность, которой вы интересуетесь можно определить в один клик (например, конкретный город из списка), или это какая-то сложносоставная сущность, для которой потребуется выделить несколько срезов (оборот продаж в определённом городе, определенного товара в определенный месяц, то есть потребуется применить несколько фильтров). Примером из обычной жизни будет поездка в другой город. Если вы турист и едете туда впервые, вы хотите узнать сводную информацию по этому городу и смотрите путеводитель — «страницу», где описана вся основная информация про этот город. Чтобы попасть на такую страницу вам было бы достаточно выбрать город из списка. Второй вариант задачи — вы уже были на каком-то курорте, но хотите посмотреть температуру воды за конкретные даты. Здесь вам понадобится выбрать и город, и даты, и саму метрику — температуру воды.

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

Рецепт: «лонгрид» или «сайт с закладками», в которых есть всё про выбранную вами сущность в разных разрезах. Первый этаж или вкладка с овервью, остальные с детальной информацией по каким-то разрезам. Основных фильтров мало и они живут в шапке дашборда, есть доп. фильтры на каждом этаже/вкладке для тонкой настройки. Интерактивность такого отчета лучше сделать средней и в основном с помощью фильтров. Если система позволяет делать асинхронную загрузку и якорные ссылки на отдельные этажи «лонгнрида», то я бы выбрал «лонгрид». Если система так не умеет (например, Табло), то лучше делать «сайт с вкладками», желательно умещая каждую вкладку на один экран (но и лонгрид можно делать, нужно смотреть конкретные кейсы). Классно иметь такие страницы на разные бизнес сущности и делать кросс-линки между собой.

«Лонгрид»
«Сайт с закладками»

Когда мы хотим изучить какой-то узкий срез и выбрать его в один клик не получается, то лучше использовать другой подход. Часто пример такого среза — сочетание метрика-«место»-время: хочу посмотреть прирост продаж год к году в городе Б за месяц X. В таком случае хорошо работает шаблон: «утром деньги, вечером стулья», когда мы просим пользователя сначала выбрать какие-то параметры и после этого показываем ему данные. Фильтры располагаем слева, справа результат (согласно направлению чтения). Пока пользователь ничего не выбрал, можно показывать общие данные по тоталу или другую полезную информацию, например топ-10 чего-то с наибольшим изменением к предыдущему периоду и т. п. Примером из обычного мира будет сайт с билетами в кино: вы выбираете фильм → время → место в зале.

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

«Утро деньги, вечером стулья»

 
 
Шаблон «Аналитический инструмент»
Задача: Получить какой-то инсайт, не зная что именно ищу. Или сделать выводы, имея в голове определенный алгоритм

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

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

Ещё очень похожей задачей будет, если у вас в голове уже есть алгоритм, которым можно воспользоваться для того, чтобы сделать вывод. Тогда нужен или просто удобный инструмент, чтобы это сделать быстро и наглядно, или всевозможные инструменты what-if анализа. Их тоже очень класно показывать через визуализацию данных, особенно если вы следите сразу за несколькими сложными сценариями с несколькими переменными.

Рецепт (краткая версия): Разбираемся в бизнес-задаче и какими метриками описывается эта задача. Здесь важно идти от того, что происходит в реальности, к тому как это превращается в метрики и срезы. Если можем, то выбираем главные и вспомогательные метрики. Хорошо, если можем следить за изменением какой-то одной метрики, чтобы понять общий ход событий, а на остальные смотреть, если нужно прокопать причинно-следственные связи. Делаем несколько визуализацией в разных срезах. Чем мельче детализация, тем лучше (вместо средних продаж, показываем значения продаж каждого магазина и т. п.). Слева основные визуализации, справа доп. информация и различные срезы по основной метрике (если есть). Много интерактива — графики фильтруют друг друга, возможно проваливаемся в другие дашборды или показываем доп. графики и срезы при наведении. Сам «шаблон», по сути, не шаблон, а подстраивается под каждую задачу.

Рецепт (полная версия) — задачи такого класса ИМХО хорошо описаны в алгоритме Лаборатории данных Тани Бибиковой. Подробнее в статье на Хабре или на учебном курсе .

«Аналитический инструмент»

 

 
Шаблон «Приборная панель»
Задача: Отслеживать операционные данные на «ежедневной» основе

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

Рецепт: Разрабатывая дашборд для операционного мониторинга точно придется разбираться с иерархией метрик и выбрать что-то, за чем хотим следить в первую очередь. Важно давать контекст, а не только текущие значения (спарклайны с динамикой, значки приростов, средние и референсные значения). Хорошо работают регулярные структуры и small multiples, если пользователь отвечает за группу метрик. Такие отчеты должны быть наименее интерактивны, но могут вести на более детальные отчеты в виде «страниц сущностей» и т. п.

«Приборная панель»

Вместо вывода

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

 Нет комментариев    1334   7 мес   дашборд   теория

Что такое визуализация данных: какая она бывает и не бывает

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

  • Графики и диаграммы,
  • Инфорграфика и схемы,
  • Презентация и анализ данных,
  • Интерактивный сторителлинг,
  • Бизнес аналитика и дашборды,
  • Научная и медицинская визуализация,
  • Карты и картограммы.

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

Графики и диаграммы

Наверное самый привычный для нас вид визуализации данных. Используется как для презентации данных, так и для анализа. Встретить их можно и на работе, и в журнале и в научном отчете. Обычно знания о существующих типах диаграмм и графиков мы получаем из школы или из стандартного набора в экселе. Однако, мало кто знает, что мир графиков и диаграмм не ограничивается точечным графиком, столбиковой и круговой диаграммой. Существуют порядка 15 общеизвестных типов диаграмм, а всего их более 60, при этом их количество увеличивается с каждым днём — люди придумывают новые типы для визуализации сложных и необычных данных. Подробно типы графиков и диаграмм мы рассмотрим в одной из следующих заметок.

Типы графиков и диаграмм. Источник: datavizcatalogue.com

Ящичная диаграмма Точечная матрица Хордовая диаграмма Диаграмма стебель-листья График с областями и накоплением

Инфорграфика и схемы

Инфографика стала очень популярна в последние годы, хотя существуют уже давно. Инфографика относиться к журналистике данных, где графики и схемы объясняют какие-либо факты по выбранной теме. Обычно инфографика статична и представляет собой длинную «простыню» с картинками и текстом. Отличительной особенностью инфографики является то, что в ней приводятся уже готовые выводы, то есть читателя проводят за руку по выбранной теме и при этом приправляют это все цифрами и картинками. Часто используется рисованный или мультяшный стиль. Некоторые СМИ выпускают инфографику на ежедневной основе, например АиФ. Бум инфографики вызвал снижение общего уровня её качества. Часто используется не к месту или «для красоты», хотя конечно же есть замечательные и интересные примеры.

Примеры инфографики

Численность Наполеоновской армии во время русской компании, 1869 г.
Численность населения разных стран, 1912 г.
10 заповедей типографики
Взмах крыльев
Вегетарианцы в цифрах

Презентация и анализ данных

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

При анализе данных с помощью визуализации используют так называемое быстрое прототипирование — то есть создание большого количества различных визуальных представлений одних и тех же данных. Делается это для возможности нахождения скрытых, на первый взгляд, взаимосвязей и зависимостей, а также первичной оценки набора данных для возможности применения в дальнейшем более сложных инструментов анализа. Этот подход называется Eploratory data analysis (EDA), что на русский можно перевести как разведочный анализ данных. Основное отличие от презентации данных — визуализация здесь может быть «черновой» и некрасивой, но выполняется быстро и одним человеком или небольшой рабочей группой. Для этого чаще всего используют эксель, R или матлаб

EDA — один из инструментов data mining’a, по его проведению есть даже учебники

Примеры визуализации для EDA

Интерактивный сторителлинг

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

Интерактивные визуализации активно развиваются в наше время. Сильные примеры можно встретить в крупных СМИ или в виде отдельных проектов.

Примеры инетрактивного сторителлинга (переход на сайт при клике на картинку)

Анализ бросков в баскетболе
Сравнение индекса читабельности для речей американских президентов
Частота употребления слов в выступлениях американских президентов
Московский марафон

Бизнес аналитика и дашборды,

Визуализация активно используется в бизнесе. Принцип «говорите с данными» помогает компаниям зарабатывать больше, а клиентам получать лучший сервис. Для разового анализа обычно используется эксель или R. Однако это не удобно если необходимо следит за какими-то показателями (KPI) на постоянной основе. Для отслеживания рутинных KPI используют дашборды — дисплеи на которых выведены все необходимые показатели в одном месте в виде графиков, диаграмм и таблиц.

Анализ проводимый один раз, также называют ad hoc анализом).

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

Примеры дашбордов (переход на сайт при клике на картинку)

Дашборд с количеством твитов по заданной тематике
Дашборд генерального директора компании

Научная и медицинская визуализация

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

Примеры научной и медицинской визуализации

Расчет магнитных полей из моей диссертации
Результаты исследования сердца

Карты и картограммы.

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

Примеры картограмм (переход на сайт при клике на картинку)

Оборот наличности в России
Возраст зданий Москвы
Карта падения метеоритов

Подводя итоги

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