Дашборды: композиция
16
/21
О чем мы поговорим сегодня
Подробно остановимся на пользовательском опыте разрабатываемых дашбордов — узнаем историю проектирования в Novartis и прочитаем подборку ценных советов по композиции и адаптации дашбордов под разные целевые форматы.
ИСТОРИЯ УСПЕХА
Пользовательский опыт в Novartis
Илья Орехов
аналитик BI, Novartis
При разработке BI вы формулируете специальные фреймворки (алгоритмы действий и процессов), а также генерируете матрицы ключевых концепций, которым необходимо следовать в проекте. Мы пользуемся следующим фреймворком — если ему следовать вы обязательно создадите отличное BI-решение. Для этого оно должно быть Полезным, Удобным, Привлекательным и Устойчивым.
Полезность
Нет смысла использовать BI-отчетность, если она не имеет смысла, не отвечает на вопросы. Для глубокого понимания пользователя и его потребностей мы всегда проводим интервью, иногда составляя Customer Journey Maps (карты «пути» пользователя).
Прототипирование и тестирование — то, о чем многие забывают во время разработки приложения. На самом деле, этот этап экономит большое количество времени, потому что прототипы позволяют проверить идею приложения, показать функционал и ограничения инструмента BI, протестировать логические и цветовые решения еще до начала трудозатратной разработки. Прототипирование — это способ расширить восприятие данных и вести дискуссию более творчески и эффективно, показывая на наглядном примере, как могут выглядеть данные.
Прототипирование и тестирование — то, о чем многие забывают во время разработки приложения. На самом деле, этот этап экономит большое количество времени, потому что прототипы позволяют проверить идею приложения, показать функционал и ограничения инструмента BI, протестировать логические и цветовые решения еще до начала трудозатратной разработки. Прототипирование — это способ расширить восприятие данных и вести дискуссию более творчески и эффективно, показывая на наглядном примере, как могут выглядеть данные.
Мы делаем прототипы в Figma, потому что там можно выстроить точный интерфейс (UI) Qlik Sense и показать пользователям, как будет выглядеть окончательная версия.
Привлекательность
Красивая вещь приятнее в использовании. Даже если это бизнес-приложение.
Никто не научит вас быть дизайнером, но путь к этому очень простой. Вы видите красоту — пытайтесь скопировать что-то красивое, пока не можете сделать тоже самое с нуля. Есть три основные платформы, где можно смотреть примеры или получать вдохновение — Behance, Dribble, Pinterest.
Никто не научит вас быть дизайнером, но путь к этому очень простой. Вы видите красоту — пытайтесь скопировать что-то красивое, пока не можете сделать тоже самое с нуля. Есть три основные платформы, где можно смотреть примеры или получать вдохновение — Behance, Dribble, Pinterest.
Устойчивость
User Experience (UX) в BI должен быть устойчивым. Это значит, что данные в приложении должны быть достоверными, а сам отчет — ориентирован на пользователя. Также мы проводим тренинги и составляем инструкции, снимаем видео и т. д. — поддерживаем долговечность и актуальность разработанного приложения.
Удобство
Нет смысла использовать BI-инструмент, если это не сделает жизнь его пользователей проще.
С помощью BI мы не просто заменяем отчеты в Excel одним интерактивным приложением, а заменяем множество шагов по сбору, сведению и обработке данных на один — открытие готового отчета по ссылке.
С помощью BI мы не просто заменяем отчеты в Excel одним интерактивным приложением, а заменяем множество шагов по сбору, сведению и обработке данных на один — открытие готового отчета по ссылке.
ТЕОРИЯ
Основы композиции на дашбордах
Принципы и правила разработки приложения это примерно половина успеха. Вторая половина — правильная композиция и оформление диаграмм, которое сделает их чтение простым и эффективным.
Начинайте проектирование дашборда и работу с данными с четкого понимания вашей задачи. От этого зависит как выбор диаграмм, так и итоговая композиция дашборда.
Начинайте проектирование дашборда и работу с данными с четкого понимания вашей задачи. От этого зависит как выбор диаграмм, так и итоговая композиция дашборда.
Ключевое правило, которое работает не только на любых типах дашбордов, но и вообще на любом продукте визуального опыта — это точки притяжения человеческого внимания
Больше всего внимания мы инстинктивно уделяем информации в верхнем левому углу — просто потому, что мы привыкли так делать: начинаем читать слева направо и сверху вниз и это очень базовый паттерн нашего поведения. Левый верхний угол — область наибольшего акцента и первичного внимания. Чем информация на дашборде располагается ниже и правее, тем меньше внимания ей уделяется, и это обусловлено нашим подсознанием.
Второй важный аспект — правильное наполнение элементами и их расположение на листе. Композиция представляет собой сочетание элементов — визуализаций дашборда. Главное правило — дизайн должен располагать к себе. Не отвлекать пользователей от той проблемы, которую они надеются решить благодаря дашборду. Присутствие композиции человек ощущает на интуитивном уровне — это ощущение «простоты, удобства и красоты».
Золотые советы проектирования
1
Используйте правило восьми секунд. Ваш дашборд должен предоставить самую главную информацию примерно за 8 секунд. Это означает, что если вы просматриваете информацию в течение нескольких минут, это может указывать на проблему с визуальной композицией.
2
Применяйте правило минимализма — меньше да лучше. Каждый дашборд должен содержать не более 5−9 визуализаций.
Некоторые дизайнеры дашбордов считают необходимым добавить как можно больше деталей, чтобы обеспечить более полную картину. Хотя в теории это может звучать хорошо, когнитивная психология говорит, что человеческий мозг может воспринимать только около 7 ± 2 объекта в единицу времени — это количество элементов, которые вы можете разместить на своей панели инструментов.
Вы можете избежать визуального беспорядка, используя фильтры и иерархии или просто разбив панель мониторинга на две или несколько отдельных панелей.
Некоторые дизайнеры дашбордов считают необходимым добавить как можно больше деталей, чтобы обеспечить более полную картину. Хотя в теории это может звучать хорошо, когнитивная психология говорит, что человеческий мозг может воспринимать только около 7 ± 2 объекта в единицу времени — это количество элементов, которые вы можете разместить на своей панели инструментов.
Вы можете избежать визуального беспорядка, используя фильтры и иерархии или просто разбив панель мониторинга на две или несколько отдельных панелей.
3
Применяйте правило третей. Попробуйте разделить страницу на девять равных частей, проведя две горизонтальные и две вертикальные линии, после чего следуйте фактам — люди фокусируются именно на точках пересечения линий, поэтому самые важные показатели предпочтительно располагать на этих точках.
Золотое сечение
4
Можно использовать подход золотого сечения. Макет, в основе построения которого лежат сочетание симметрии и золотого сечения, способствует наилучшему зрительному восприятию и появлению ощущения красоты и гармонии. Целое всегда состоит из частей, части разной величины находятся в определенном отношении друг к другу и к целому.
5
Оставляйте свободное пространство. Главное правило любого дизайна — наличие воздуха — свободное пустое пространство. Пустое пространство помогает разделять группы элементов между собой, формируя логические блоки. Это помогает нашему взгляду более комфортно считывать и без того насыщенный экран с информацией.
Необходимо стараться не нагружать страницу. Если у вас очень много элементов на странице — вы пошли по плохому пути и стоит заняться «уборкой», отправив лишнее в «мусорку». Вы можете сказать что лишних элементов на дашборде нет, но, чаще всего — лишние элементы есть всегда. Иногда может понадобиться переработать всю структуру дашборда, но оно того стоит — результат удовлетворит потребности пользователя и сделает вас счастливым
Необходимо стараться не нагружать страницу. Если у вас очень много элементов на странице — вы пошли по плохому пути и стоит заняться «уборкой», отправив лишнее в «мусорку». Вы можете сказать что лишних элементов на дашборде нет, но, чаще всего — лишние элементы есть всегда. Иногда может понадобиться переработать всю структуру дашборда, но оно того стоит — результат удовлетворит потребности пользователя и сделает вас счастливым
Павел Краснопольский
ведущий разработчик, Qlik
“
Логичная структура дашборда служит «невидимым» навигатором, показывая с чего начать и куда идти дальше. То, каким образом вы решите представить данные, формирует путь, по которому целевая аудитория понимает как общую картину, так и то, как мелкие элементы дашборда сочетаются друг с другом.
Чеклист по разработке дашборда
Мы подготовили быстрый чеклист для проверки дашборда на его понятность, лёгкость восприятия и удобство.
Смысл
- Достаточно 5-ти секунд, чтобы понять смысл дашборда
- Заголовок из 4−12 слов и начинается в левом верхнем углу
- Подзаголовок детализирует смысл заголовка и несет новую информацию
- Размеры текста выстроены по иерархии
- Используются шрифты из одного семейства
- Тексты расположены горизонтально
- Подписи данных не мешают друг другу, расположены горизонтально
- Данные отсортированы и упорядочены
- Шкалы имеют только самые необходимые отметки и подписи
- Нет 3D
- Нет лишних украшательств
- Тип диаграммы правильно подобран под тип данных
- Диаграмма имеет требуемый уровень точности и детализации
- Цветовая схема выбрана осознанно
- Цвет используется для выделения ключевых идей
- Текст контрастирует с фоном, легко читается
Мобильный дизайн
Все чаще у пользователей появляется потребность в мобильной аналитике, доступной из любого места с устройства, которое всегда под рукой. Собрали для вас рекомендации для разработки дашбордов под мобильные устройства.
1
Никогда не пытайтесь отобразить абсолютно все показатели, которые планировались в полноценном отчете, в мобильной версии дашборда. Да, бизнес будет сопротивляться, а вам самим будет казаться, что это неверно и все важно. Но если пользователь решил открыть дашборд через мобильное устройство, то, как ему бы не казалось на момент проектирования отчета, по факту ему будут интересны только самые важные показатели, имеющие ценность в текущем моменте.
2
Приучите пользователей к тому, что мобильные версии отчетов необходимы только для оценки текущей ситуации в целом. Детальной аналитикой лучше заниматься в полноценном отчете. Необходимо различать эти области применения.
3
Функциональное пространство экранов мобильных устройств очень ограничено. Именно по этой причине не надо «перегружать» интерфейс. Лучше добавить прокрутку листа, чем пытаться уместить все на один экран. Особое внимание придется уделить фильтрам, ведь с фильтрами пользователь взаимодействует, поэтому важно, чтобы размеры элементов и их расположение было доступным.
ПРАКТИКА
Собираем дашборд
Практическое задание
В этом практическом задании от Datanomix.pro вам необходимо будет создать свое приложение.
Представим на время, что вы являетесь владельцем компании по розничной продаже одежды. Вы хотите видеть текущее состояние вашего бизнеса: как идут ваши продажи, какую имеете маржу, кто ваши основные клиенты, динамику продажи в разрезе разных периодов, карту продаж, количество заказов, ваши клиенты по половому признаку, продажи в разрезе категорий товаров, групп товаров и городов.
Представим на время, что вы являетесь владельцем компании по розничной продаже одежды. Вы хотите видеть текущее состояние вашего бизнеса: как идут ваши продажи, какую имеете маржу, кто ваши основные клиенты, динамику продажи в разрезе разных периодов, карту продаж, количество заказов, ваши клиенты по половому признаку, продажи в разрезе категорий товаров, групп товаров и городов.
Чтобы построить такое приложение, мы подготовили для вас пошаговую инструкцию в формате видео.
Скачайте файл с данными и следуйте инструкциям в видео ниже.
Скачайте файл с данными и следуйте инструкциям в видео ниже.
Практическое задание. Дашборд
таймкод видеоролика
00:47 — Создаем новое приложение в Qlik Sense.
00:56 — Загружаем наш документ о продажах.
01:29 — Настраиваем первую страницу с отчетами «Продажи». Создаем карточки с информацией о продажах и прибыли.
02:17 — Создаем диаграмму с продажами по годам.
03:23 — Создаем карту продаж по странам и городам.
04:58 — Создаем круговую диаграмму продаж по клиентам.
05:49 — Настраиваем новую страницу с отчетами «Продукты».
06:07 — Создаем карточки с продажами, маржой и количество заказов.
06:33 — Создание круговых диаграмм по категорий продуктов, группу продуктов и сами продукты
06:52 — Создание линейчатой диаграммы по городам.
07:10 — Создание линейчатой диаграммы по клиентам.
10:50 — Анализируем все отчеты с разного рода выборкой данных. Например, мы хотим проанализировать продажи за 2017−2018 год, по стране Россия и категории товаров — Женская одежда.
00:56 — Загружаем наш документ о продажах.
01:29 — Настраиваем первую страницу с отчетами «Продажи». Создаем карточки с информацией о продажах и прибыли.
02:17 — Создаем диаграмму с продажами по годам.
03:23 — Создаем карту продаж по странам и городам.
04:58 — Создаем круговую диаграмму продаж по клиентам.
05:49 — Настраиваем новую страницу с отчетами «Продукты».
06:07 — Создаем карточки с продажами, маржой и количество заказов.
06:33 — Создание круговых диаграмм по категорий продуктов, группу продуктов и сами продукты
06:52 — Создание линейчатой диаграммы по городам.
07:10 — Создание линейчатой диаграммы по клиентам.
10:50 — Анализируем все отчеты с разного рода выборкой данных. Например, мы хотим проанализировать продажи за 2017−2018 год, по стране Россия и категории товаров — Женская одежда.
Полезные ссылки
Если вам интересно узнать больше, переходите по ссылкам для дальнейшего изучения тем и расширения кругозора
Телеграм-сообщество Qlik
Приглашаем вас присоединиться к телеграм-чату Qlik, чтобы общаться с коллегами, задавать вопросы экспертам и оставаться в курсе новостей Марафона.
@qlikbi_chat
@qlikbi_chat
Обзор дня и встреча с экспертом: День 16
Игорь Буробин, эксперт по Qlik Sense, ПроBI
2022