Проєктування дашбордів

Концепції дизайну дашбордів

Olga Scrivner, PhD

President, Scrivner Solutions Inc

Чому дизайн важливий?

 

  • Компанія: NASDAQ
  • Потреба: донести щоденний стан ринку до пересічного інвестора
  • Рішення: показ у реальному часі одного значення на Times Square

 

Чому лінії тренду — не найкраще рішення?

 

фондова біржа

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
Концепції дизайну дашбордів

Чому дизайн важливий?

 

  • Компанія: NASDAQ
  • Потреба: донести щоденний стан ринку до пересічного інвестора
  • Рішення: показ у реальному часі одного значення на Times Square

 

Чому лінії тренду — не найкраще рішення?

 

фондова біржа

 

Історичні інсайти проти показників у реальному часі

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
Концепції дизайну дашбордів

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

                Аудиторія

  • Хто користуватиметься цим дашбордом?
  • Які їхні потреби?
  • Який формат підходить аудиторії?
  • Як часто до нього звертатимуться?

  аудиторія

                        Компоненти

  • Призначення: exploratory vs explanatory
  • Формат: горизонтальний vs вертикальний
  • Компонування: grid vs flex
  • Візуалізації: значення, виміри, форми

 

компоненти

Концепції дизайну дашбордів

Призначення дашборду

              Exploratory-дешборд

exploratory dashboard

Exploratory-дешборд дає змогу досліджувати дані.

                    Explanatory-дешборд

explanatory dashboard

Explanatory-дешборд надає готові інсайти.

Концепції дизайну дашбордів

Exploratory-дешборд

 

exploratory dashboard

 

 

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

Exploratory-дешборд

 

exploratory dashboard

 

 

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

Exploratory-дешборд

 

exploratory dashboard

 

 

  • Фільтри для довільної сегментації даних
  • Налаштовувані панелі навігації
  • Drill-down для детальнішого перегляду
1 Baucke, Spencer. (2022). Dashboard design essentials.
Концепції дизайну дашбордів

Exploratory-дешборд

 

exploratory dashboard

 

 

  • Фільтри для довільної сегментації даних
  • Налаштовувані панелі навігації
  • Drill-down для детальнішого перегляду
  • Інтерактивні візуалізації (наведення, підказки)
1 Baucke, Spencer. (2022). Dashboard design essentials.
Концепції дизайну дашбордів

Explanatory-дешборд

 

explanatory dashboard

 

 

  • Дані часто вже відфільтровані
  • Заздалегідь продуманий наратив
  • Презентація для керівництва
  • Заклик до дії
1 Baucke, Spencer. (2022). Dashboard design essentials.
Концепції дизайну дашбордів

Розмір дашборду

                      Фізичний простір

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

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

розмір монітора

Концепції дизайну дашбордів

Розмір дашборду

                      Фізичний простір

  • Розмір монітора — діагональ екрана
  • Роздільна здатність — кількість пікселів і їх щільність (ширина × висота)

                          Формат

  • Стандартний — прямокутний дашборд

    • Співвідношення — 16:9
    • Усі компоненти видно на екрані
    • Без прокручування

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

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

розмір монітора

                Горизонтальний (таймлайновий стиль) довгий формат

Концепції дизайну дашбордів

Розмір дашборду

                      Фізичний простір

  • Розмір монітора — діагональ екрана
  • Роздільна здатність — кількість пікселів і їх щільність (ширина × висота)

                          Формат

  • Стандартний — прямокутний дашборд

    • Співвідношення — 16:9
    • Усі компоненти видно на екрані
    • Без прокручування

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

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

розмір монітора

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

Концепції дизайну дашбордів

Компонування дашборду

                  Сіткова система grid system

  • Двовимірна матриця
  • Збалансована й симетрична
  • Проста навігація
  • Big Aggregate Numbers (BAN) — верхній ряд

                                Фокус

F фокус

F фокус

1 Baucke, Spencer. (2022). Dashboard design essentials.
Концепції дизайну дашбордів

Давайте потренуємось!

Концепції дизайну дашбордів

Preparing Video For Download...