Скетчи дашбордов
Собираем на стикерах
Сегодня мы задействуем основные блоки визуальных структур, и с помощью различного формата стикеров научимся собирать целостный дашборд или интерактивный отчёт.
Как быстро собрать информацию о проблеме которую мы решаем с помощью визуализации данных? Как расставить приоритеты? Как разбить проблему на составляющие? Как организовать разрозненную информацию в единое целое? Как отобразить сложные взаимосвязи? Все это мы с вами просмотрели в нашем дне 02, когда исследовали подходы по проведению интервью с ключевыми Заказчиками и выясняли как должен выглядеть конечный информационные продукт который мы проектируем с помощью скетчинга.
Сегодня мы посмотрим на то, как в этих вопросах нам могут помочь стикеры.
Сегодня мы посмотрим на то, как в этих вопросах нам могут помочь стикеры.
Стикеры как элемент коммуникации
Как мы с вами увидели в предыдущих днях марафона, существует множество сервисов которые переводят наши процессы физического мира в электронную форму, где мы можем беспрепятственно манипулировать бесконечным количеством объектов не полагаясь на физические свойства. К электронной и физической форме нам нужны методы, в котором можно научиться, чтобы быстро и просто дойти до сути проблемы и решить её. Итак…
Стикеры обладают тремя преимуществами, которые мы можем использовать для решения самых сложных проблем.
→
Стикеры имеют идеальный размер для того, чтобы на одном листочке поместить один элемент информации о проблеме или один визуальный блок, из которого будет строиться будущий дашборд
→
Стикеры легко приклеиваются к гладкой поверхности и могут оставаться там долгое время
→
Стикеры можно легко переклеивать с места на место много раз, меняя расположение элементов
Любая проблема может быть разложена на элементы, которые можно сформулировать короткой фразой или предложением. Например, «Проблемы с продажами». Можно фиксировать части проблем, записывая их на стикерах. Дальше нам нужно определить все элементы, классифицировать их по основным категориям, сконцентрироваться на важных моментах.
Давайте рассмотрим основные принципы использования стикеров для быстрого решения проблем.
Давайте рассмотрим основные принципы использования стикеров для быстрого решения проблем.
Если вы определите свои цели в самом начале, это поможет вам не сбиться с пути.
Как мы ставим ориентиры?
ЦЕЛИ. Описывают то, чего вы пытаетесь достичь. Антицели - то, чего вы не пытаетесь достичь.
КРИТЕРИИ. Являются отправной точкой для принятия решений. Например, инвестиционные проекты должны окупаться в 3-летнем периоде.
ВОПРОСЫ. Стимулируют и наводят на размышления.
ОГРАНИЧЕНИЯ. Сокращают количество вариантов решения.
КРИТЕРИИ. Являются отправной точкой для принятия решений. Например, инвестиционные проекты должны окупаться в 3-летнем периоде.
ВОПРОСЫ. Стимулируют и наводят на размышления.
ОГРАНИЧЕНИЯ. Сокращают количество вариантов решения.
Как мы делим информационный поток?
ФАКТЫ. То, что является правдой, которая может быть доказана.
МНЕНИЯ. То, во что вы верите, считая это правдой. Часто мнения принимают за факты.
ПРЕДПОЛОЖЕНИЯ. Необоснованные идеи или догадки.
МНЕНИЯ. То, во что вы верите, считая это правдой. Часто мнения принимают за факты.
ПРЕДПОЛОЖЕНИЯ. Необоснованные идеи или догадки.
Как мы систематизируем поток?
СПИСКИ. Простые наборы элементов, которые могут быть отсортированы в порядке важности.
ДРЕВОВИДНАЯ СТРУКТУРА. С простыми иерархическими отношениями «родитель-ребенок». Нисходящая или восходящая.
КАРТЫ. Формы с более сложной структурой связности элемента с любым другим элементом.
ДРЕВОВИДНАЯ СТРУКТУРА. С простыми иерархическими отношениями «родитель-ребенок». Нисходящая или восходящая.
КАРТЫ. Формы с более сложной структурой связности элемента с любым другим элементом.
Какие методики можно использовать?
ПОСТЕР. Составление списков. Каждый элемент информации записывается на отдельный стикер. В групповой работе все участники размещают стикеры на одной поверхности одновременно. Обсуждения не допускаются. Результат такой работы – эффективный сбор информации.
ПЕРЕСТАНОВКА. Расположение элементов в порядке важности. Сначала сократите список, объедините схожие элементы, уберите наименее важные из них. Сортируйте стикеры, сравнивая их попарно, помещая более важные выше по списку, до тех пор пока не переберёте все. Используйте один и тот же критерий при каждом сравнении.
НИСХОДЯЩЕЕ ДЕРЕВО. Составление древовидной структуры. Разбиваем проблему на составные части, когда у нас мало информации. Последовательно задаем вопросы к каждому стикеру.
ВОСХОДЯЩЕЕ ДЕРЕВО. Составление древовидной структуры когда есть много разрозненных элементов информации и вы не понимаете суть проблемы. Снизу стикеры объединяются в группу, затем группы объединяются в группы более высокого порядка. Делается так до тех пор, пока останется только одна, самая большая группа. Каждый группе присваивается название, чтобы описать, что в ней содержится.
ИНФОРМАЦИОННАЯ КАРТА. Визуализация запутанных проблем, где элементы имеют сложные взаимосвязи. Элементы, связанные друг с другом, размещаются рядом. Затем в стрелками отображаются отношения между ними.
Все примеры собраны из специального раздела с шаблонами на Miro. За последние несколько лет команда сервиса накопила и проработала целый ряд методик, с примерами работы которых можно ознакомиться здесь.
Стикеры как инструмент дизайна дашбордов
Стикеры могут помогать вам проектировать дашборды когда наполнение уже примерно понятно, а расположение или конечный вид диаграмм и графиков еще может варьироваться и изменяться.
Давайте разберем, как стикеры помогают в разборе дашборда на примере ниже. Этот дашборд — статистика с сервиса для просмотра фильмов и сериалов Кинопоиск. Здесь представлены разные диаграммы и графики: с разбивкой по жанрам и годам выпуска фильма, с распределением по длительности и среднему рейтингу.
Давайте разберем, как стикеры помогают в разборе дашборда на примере ниже. Этот дашборд — статистика с сервиса для просмотра фильмов и сериалов Кинопоиск. Здесь представлены разные диаграммы и графики: с разбивкой по жанрам и годам выпуска фильма, с распределением по длительности и среднему рейтингу.
Кликните на дашборд, чтобы увеличить изображение
Оцените визуальную форму дашборда. Комфортно ли работать с данными, представленными в таком виде? Все ли вам понятно? Как происходит ваш процесс анализа этих данных?
Кликните на дашборд, чтобы увеличить изображение
Здесь можно выделить много ошибок, которые связаны не только с визуальным форматированием диаграмм, но и выбором самих визуализаций.
→
Отсутствует главный заголовок дашборда, а также часть заголовков над диаграммами. Не все диаграммы легко считываются, не везде понятно что на них изображено. Не хватает контекста и иерархии шрифтов.
→
Отсутствует визуальная сетка. Композиция выстроена хаотично, без логики повествования. Есть пустая «дыра» под спидометром. В таблице есть горизонтальная прокрутка.
→
Цвета не продуманы. Повторение красного цвета в нескольких палитрах — потенциальный сигнал «все плохо». Перенасыщенность.
Делимся с вами более подробным списком вопросов, которые можно задать и проверить при оценке дашборда. Открывайте список ниже.
На какие компоненты проверять дашборд?
→ АУДИТОРИЯ
Для кого мы делам дашборд
На каком устройстве будет смотреть пользователь
Как будет осуществлен доступ
На какие вопросы должен отвечать дашборд
Как пользователь будет работать с дашбордом
→ ДАННЫЕ
С какими источниками мы работаем
Кто владелец данных
Нужно ли их готовить для визуализации
Каковы уровни доступа к данным
Кто отвечает за их обновление
Как часто они должны обновляться
→ КОМПОЗИЦИЯ
Расставить все элементы дашборда по сетке для получения РИТМА
Заголовок должен отражать суть дашборда
КПЭ: Какие ключевые показатели должен видеть пользователь
Дублирующиеся визы
Размещение визов на дашборде
→ ШРИФТЫ
Заголовок, Иерархия и Шрифт
Цвета заголовка
Лид
Заголовки диаграмм
Убрать дубляж осей
→ ЦВЕТ
Убрали цвет в серый
Выбрали палитру
Добавили цвет там, где он необходим
→ ВИЗУАЛИЗАЦИИ
Выбор правильной диаграммы под требуемый вопрос
Настройка элементов таблицы
Настройка КПЭ
Округления и порядки цифр
Цвета компонентов визов
→ ИНТЕРАКТИВ
Кнопки
Фильтры
Параметры
Тултипы
Переходы
Для кого мы делам дашборд
На каком устройстве будет смотреть пользователь
Как будет осуществлен доступ
На какие вопросы должен отвечать дашборд
Как пользователь будет работать с дашбордом
→ ДАННЫЕ
С какими источниками мы работаем
Кто владелец данных
Нужно ли их готовить для визуализации
Каковы уровни доступа к данным
Кто отвечает за их обновление
Как часто они должны обновляться
→ КОМПОЗИЦИЯ
Расставить все элементы дашборда по сетке для получения РИТМА
Заголовок должен отражать суть дашборда
КПЭ: Какие ключевые показатели должен видеть пользователь
Дублирующиеся визы
Размещение визов на дашборде
→ ШРИФТЫ
Заголовок, Иерархия и Шрифт
Цвета заголовка
Лид
Заголовки диаграмм
Убрать дубляж осей
→ ЦВЕТ
Убрали цвет в серый
Выбрали палитру
Добавили цвет там, где он необходим
→ ВИЗУАЛИЗАЦИИ
Выбор правильной диаграммы под требуемый вопрос
Настройка элементов таблицы
Настройка КПЭ
Округления и порядки цифр
Цвета компонентов визов
→ ИНТЕРАКТИВ
Кнопки
Фильтры
Параметры
Тултипы
Переходы
Давайте попробуем исправить этот дашборд, сделать его более читаемым и приятным для анализа. Для быстрого проектирования дашбордов мы можем зарезервировать стикеры различных размеров под основные компоненты дашбордов. Стикеры могут означать как отдельные виды визуализаций, так и управляющие элементы.
Мы нарисовали стикеры в Miro. Подумали, что график спидометра лучше заменить на обычный KPI со средним рейтингом, т.к. «выполнения плана» в этой статистике нет. Стрелками показаны интерактивные возможности: две верхних диаграммы могут фильтровать остальные и изменять показатель среднего рейтинга новой выборки.
Мы нарисовали стикеры в Miro. Подумали, что график спидометра лучше заменить на обычный KPI со средним рейтингом, т.к. «выполнения плана» в этой статистике нет. Стрелками показаны интерактивные возможности: две верхних диаграммы могут фильтровать остальные и изменять показатель среднего рейтинга новой выборки.
Затем, мы решили добавить еще три KPI и фильтры, и все диаграммы сделать интерактивными. То есть, при выборе любого сегмента на любой визуализации, все остальные перестроятся. Если выбрать жанр «комедия», то будет показана статистика только по комедиям.
Построили итоговый дашборд. Мы выстроили визуализации по сетке и иерархию шрифтов: с крупным заголовком и подписями у каждой диаграммы.
Кликните на дашборд, чтобы увеличить изображение
Использование серого цвета на дашбордах — отличный ход, когда категорий слишком много. Вы не будете отвлекать внимание от сути данных многообразием цвета. Тем более, как много оттенков серого существует сегодня…
→ Статья «оттенки серого» на Википедии
→ Подборка цветов от Tilda
→ Статья «оттенки серого» на Википедии
→ Подборка цветов от Tilda
 |  |
Как генерируют идеи
в BI Consult
в BI Consult
Виктория Козлова
Бизнес-аналитик, BI Consult
Пользователи отчета BI систем — это люди, которые далеки от технических вопросов, для них важна визуальная составляющая интерфейсов. Интерфейс должен быть понятен для пользователя, соответствовать логике бизнес-процессов и отвечать на ключевые вопросы.
Для нас скетчинг — важный навык в работе, мы начинаем общаться с клиентом по интерфейсам до начала разработки приложений. На этом этапе важно понять как клиент думает, анализирует информацию и как выстроен бизнес-процесс в компании. В потоке обсуждения делаются ключевые зарисовки со слов клиента, формируется костяк интерфейса.
Это удобно и продуктивно: имея только лист бумаги и ручку можно сделать набросок макета и сразу обсудить с пользователями логику отчета.
Для нас скетчинг — важный навык в работе, мы начинаем общаться с клиентом по интерфейсам до начала разработки приложений. На этом этапе важно понять как клиент думает, анализирует информацию и как выстроен бизнес-процесс в компании. В потоке обсуждения делаются ключевые зарисовки со слов клиента, формируется костяк интерфейса.
Это удобно и продуктивно: имея только лист бумаги и ручку можно сделать набросок макета и сразу обсудить с пользователями логику отчета.
В работе скетчинг экономит до 50% времени на проектирование и разработку дашбордов.
Покажу один пример нашей предварительной работы с дашбордом по продаже техники.
Основные пользователи отчета — ТОП менеджмент. Стояла задача создать дашборд, который позволит быстро оценивать состояние ключевых показателей и принимать решения.
Основные пользователи отчета — ТОП менеджмент. Стояла задача создать дашборд, который позволит быстро оценивать состояние ключевых показателей и принимать решения.
В процессе сбора требований, клиент начал рассказывать, как он мыслит и принимает решения используя данные. «Боль» клиента — видеть ситуацию по всем регионам сразу, а главным индикатором выступает % выполнения плана, поэтому мы взяли лист бумаги и сразу нарисовали карту и датчик.
Понимая в каких срезах компания планирует показатели, мы предложили анализировать ситуацию комплексно, так появились виджеты по проектам и направлениям. Обсуждая прототип с клиентом, появлялись идеи как можно улучшить.
Понимая в каких срезах компания планирует показатели, мы предложили анализировать ситуацию комплексно, так появились виджеты по проектам и направлениям. Обсуждая прототип с клиентом, появлялись идеи как можно улучшить.
Стикеры — наши помощники, когда есть видение, но нет понимания четкой структуры. Стикеры позволяют видеть картину сразу, т. е. понимать, как и где должны быть расположены объекты. И главный плюс — возможность вносить изменения в визуализацию, сохраняя целостность.
Задание: создайте свою версию кино-дашборда
О чем задание
Попробуйте сделать свой прототип дашборда на основе данных по фильмам и сериалам. Вы можете взять такую же общую статистику или выбрать отдельный жанр или даже разобрать один свой любимый фильм или сериал.
Вы можете воспользоваться удобными для себя сервисами, например Кинопоиск или IMDB, для понимания о том, какие данные по фильмам существуют. Точность цифр здесь не важна.
Вы можете воспользоваться удобными для себя сервисами, например Кинопоиск или IMDB, для понимания о том, какие данные по фильмам существуют. Точность цифр здесь не важна.
Что нужно сделать
Сделайте свой прототип дашборда по теме кино с использованием стикеров.
Приходите в телеграм-чат делиться своими вариантами выполнения заданий и задавать вопросы!
Присоединяйтесь к чату Марафона
Все общение по ходу Марафона будем вести в телеграм-чате @datapomodoro, присоединяйтесь, чтобы не пропускать ничего важного.
Свяжитесь с нами, если у вас есть вопросы.
thejump@datayoga.ru
DATAYOGA
2021
DATAYOGA
2021