Найкращі практики UI/UX

Створення панелей керування з shinydashboard

Png Kee Seng

Researcher

Деякі принципи

  1. Чітко визначте призначення дашборду
  2. Обирайте доречні візуалізації
  3. Використовуйте кольори ефективно й інтуїтивно
  4. Скорочуйте великі значення
  5. Уникайте надто багатьох інтерактивних елементів
  6. Проєктуйте дашборд в останню чергу
  • Ці пункти стосуються будь-якого дашборду загалом
  • Список не є вичерпним
  • Це поради, а не універсальні істини
Створення панелей керування з shinydashboard

1. Чітко визначте призначення дашборду

  • Для кого цей дашборд?
  • Що їм потрібно знати?
  • Краще розуміння потреб користувача поліпшить досвід користування $^1$
  • Сценарій: створіть дашборд для Sally
  • Мета: звітувати про ефективність її портфеля
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Створення панелей керування з shinydashboard

2. Обирайте доречні візуалізації

  • Стосується окремих візуалізацій, але й дашборду загалом
  • Дашборд складається з багатьох візуалізацій
  • Яка інформація буде корисною для Sally?
  • Завжди є компроміс між точністю та ясністю
  • «The truthful art», Alberto Cairo $^1$

Типи діаграм за Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Створення панелей керування з shinydashboard

3. Використовуйте кольори ефективно й інтуїтивно

  • Зазвичай певні кольори передають різні значення
  • Приклади
    • Червоний зазвичай означає попередження або тривогу
    • Зелений зазвичай означає повідомлення про успіх
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Недоречний колір для повідомлення про успіх.

Створення панелей керування з shinydashboard

3. Використовуйте кольори ефективно й інтуїтивно

  • Зазвичай певні кольори передають різні значення
  • Приклади
    • Червоний зазвичай означає попередження або тривогу, і користувачі цього очікують
    • Зелений, своєю чергою, зазвичай означає повідомлення про успіх
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Недоречний колір для повідомлення про успіх.

Доречний колір для повідомлення про успіх.

Створення панелей керування з shinydashboard

4. Скорочуйте великі значення

  • Числа можна показувати в shinydashboard
  • Доведеться пожертвувати частиною точності заради читабельності
    • Великі числа варто заокруглювати
round(2.324815454862,2)

[1] 2.32

Не скорочені значення

Скорочені значення

Створення панелей керування з shinydashboard

5. Уникайте надто багатьох інтерактивних елементів

  • Зважайте на кількість інтерактивних елементів
  • Надмір їх може заплутати деяких користувачів
  • Більше — не завжди краще

Занадто багато взаємодії — це погано.

1 Image by Freepik
Створення панелей керування з shinydashboard

6. Проєктуйте дашборд в останню чергу

  • Не поспішайте з дизайном дашборду
    • Сюди входять вайрфрейми, візуальна стилістика тощо
  • Спочатку визначте мету
    • Це допоможе обрати доречні візуалізації
Створення панелей керування з shinydashboard

6. Проєктуйте дашборд в останню чергу

  • Не поспішайте з дизайном дашборду
    • Сюди входять вайрфрейми, візуальна стилістика тощо
  • Спочатку визначте мету
    • Це допоможе обрати доречні візуалізації

"Мета: створити дашборд для Sally."

  • Вона може хотіти бачити, як працює її портфель
  • Також вона може відстежувати ефективність окремих акцій
  • Тепер можна вирішити їх розміщення
Створення панелей керування з shinydashboard

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

Створення панелей керування з shinydashboard

Preparing Video For Download...