Принципы хорошего UI/UX

Создание дашбордов с помощью shinydashboard

Png Kee Seng

Researcher

Основные принципы

  1. Чётко определите цель дашборда
  2. Выбирайте подходящие визуализации
  3. Используйте цвета осмысленно
  4. Сокращайте большие числа
  5. Не перегружайте дашборд интерактивными элементами
  6. Приступайте к дизайну в последнюю очередь
  • Эти принципы применимы к любому дашборду
  • Список не является исчерпывающим
  • Это рекомендации, а не универсальные правила
Создание дашбордов с помощью shinydashboard

1. Чётко определите цель дашборда

  • Для кого предназначен дашборд?
  • Что пользователю необходимо знать?
  • Чёткое понимание требований улучшает пользовательский опыт $^1$
  • Сценарий: создаём дашборд для Сэлли
  • Цель: отчёт о доходности её портфеля
1 François, Mathilde, et al. «Automotive HMI design and participatory user involvement: review and perspectives.» Ergonomics 60.4 (2017): 541–552
Создание дашбордов с помощью shinydashboard

2. Выбирайте подходящие визуализации

  • Касается отдельных визуализаций, но применимо и к дашборду в целом
  • Дашборд состоит из множества визуализаций
  • Какая информация будет полезна Сэлли?
  • Всегда приходится искать баланс между точностью и наглядностью
  • «The truthful art», Альберто Каиро $^1$

Типы диаграмм по классификации Альберто Каиро.

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 Изображение: Freepik
Создание дашбордов с помощью shinydashboard

6. Приступайте к дизайну в последнюю очередь

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

6. Приступайте к дизайну в последнюю очередь

  • Не спешите с разработкой дизайна
    • Это касается вайрфреймов, визуального оформления и т. д.
  • Сначала определите цель
    • Это поможет выбрать подходящие визуализации

«Цель: создать дашборд для Сэлли.»

  • Ей может быть важно видеть доходность портфеля в целом
  • Также она может хотеть отслеживать показатели отдельных акций
  • Теперь можно определить расположение элементов
Создание дашбордов с помощью shinydashboard

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

Создание дашбордов с помощью shinydashboard

Preparing Video For Download...