Дизайн дашбордов

Основы проектирования дашбордов

Olga Scrivner, PhD

President, Scrivner Solutions Inc

Почему дизайн важен?

 

  • Компания: NASDAQ
  • Задача: ежедневно информировать рядового инвестора о состоянии рынка
  • Решение: дисплей с показателями в реальном времени на Таймс-сквер

 

Почему линии тренда — не лучшее решение?

 

биржа

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
Основы проектирования дашбордов

Почему дизайн важен?

 

  • Компания: NASDAQ
  • Задача: ежедневно информировать рядового инвестора о состоянии рынка
  • Решение: дисплей с показателями в реальном времени на Таймс-сквер

 

Почему линии тренда — не лучшее решение?

 

биржа

 

Исторические данные vs. показатели в реальном времени

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
Основы проектирования дашбордов

Компоненты дизайна

                Аудитория

  • Кто будет использовать этот дашборд?
  • Каковы потребности пользователей?
  • Какой формат подходит для аудитории?
  • Как часто будет осуществляться доступ?

  аудитория

                        Компоненты

  • Цель: исследовательский vs. пояснительный
  • Формат: горизонтальный vs. вертикальный
  • Макет: сетка vs. flex
  • Визуализация: значения, измерения, фигуры

 

компоненты

Основы проектирования дашбордов

Назначение дашборда

              Исследовательский дашборд

исследовательский дашборд

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

                    Пояснительный дашборд

пояснительный дашборд

Пояснительный дашборд предоставляет пользователям готовые выводы.

Основы проектирования дашбордов

Исследовательский дашборд

 

исследовательский дашборд

 

 

  • Фильтры для пользовательской сегментации данных
1 Baucke, Spencer. (2022). Dashboard design essentials.
Основы проектирования дашбордов

Исследовательский дашборд

 

исследовательский дашборд

 

 

  • Фильтры для пользовательской сегментации данных
  • Настраиваемые панели навигации
1 Baucke, Spencer. (2022). Dashboard design essentials.
Основы проектирования дашбордов

Исследовательский дашборд

 

исследовательский дашборд

 

 

  • Фильтры для пользовательской сегментации данных
  • Настраиваемые панели навигации
  • Детализация для более глубокого просмотра
1 Baucke, Spencer. (2022). Dashboard design essentials.
Основы проектирования дашбордов

Исследовательский дашборд

 

исследовательский дашборд

 

 

  • Фильтры для пользовательской сегментации данных
  • Настраиваемые панели навигации
  • Детализация для более глубокого просмотра
  • Интерактивные визуализации (наведение, подсказки)
1 Baucke, Spencer. (2022). Dashboard design essentials.
Основы проектирования дашбордов

Пояснительный дашборд

 

пояснительный дашборд

 

 

  • Данные, как правило, уже отфильтрованы
  • Заранее определённый сюжет
  • Презентация для руководства
  • Призыв к действию
1 Baucke, Spencer. (2022). Dashboard design essentials.
Основы проектирования дашбордов

Размер дашборда

                      Физическое пространство

  • Размер монитора — диагональ экрана

      Настольный ПК, ноутбук, планшет, смартфон

размер монитора

Основы проектирования дашбордов

Размер дашборда

                      Физическое пространство

  • Размер монитора — диагональ экрана
  • Разрешение экрана — количество пикселей и их плотность (ширина × высота)

                          Формат

  • Стандартный формат — прямоугольный дашборд

    • Соотношение сторон — 16:9
    • Все компоненты видны на экране
    • Без прокрутки

  • Длинный формат — горизонтальный или вертикальный

      Настольный ПК, ноутбук, планшет, смартфон

размер монитора

                Горизонтальный (стиль временной шкалы) длинный формат

Основы проектирования дашбордов

Размер дашборда

                      Физическое пространство

  • Размер монитора — диагональ экрана
  • Разрешение экрана — количество пикселей и их плотность (ширина × высота)

                          Формат

  • Стандартный формат — прямоугольный дашборд

    • Соотношение сторон — 16:9
    • Все компоненты видны на экране
    • Без прокрутки

  • Длинный формат — горизонтальный или вертикальный

      Настольный ПК, ноутбук, планшет, смартфон

размер монитора

                Вертикальный (стиль газетной колонки) вертикальный формат

Основы проектирования дашбордов

Макет дашборда

                  Сеточная система сеточная система

  • Двумерная матрица
  • Сбалансированная и симметричная
  • Простая навигация
  • Крупные агрегированные числа (BAN) — верхний ряд

                                Фокус

F-фокус

F-фокус

1 Baucke, Spencer. (2022). Dashboard design essentials.
Основы проектирования дашбордов

Давайте потренируемся!

Основы проектирования дашбордов

Preparing Video For Download...