良いUI/UXの実践

shinydashboard で作るダッシュボード

Png Kee Seng

Researcher

いくつかの原則

ダッシュボードの目的を明確にする
適切な可視化を選ぶ
色を効果的・直感的に使う
大きな値は短縮する
交互作用要素を増やしすぎない
デザインは最後に行う

これらは一般的なダッシュボード全般に当てはまります
網羅的ではありません
普遍的真理ではなく提案です

1. ダッシュボードの目的を明確にする

ダッシュボードは誰のためか？
何を知る必要があるか？
ユーザー要件の理解がUXを改善します $^1$
シナリオ: Sally向けにダッシュボードを作成
目的: ポートフォリオのパフォーマンスを報告

¹ François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552

2. 適切な可視化を選ぶ

個々の可視化に関するが、ダッシュボードにも当てはまる
ダッシュボードは多くの可視化で構成される
Sallyに有用な情報は何か？
正確さと明確さのトレードオフは常にある
Alberto Cairo『The Truthful Art』$^1$

Alberto Cairoによる推奨チャート種類。

¹ Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016

3. 色を効果的・直感的に使う

一般に、色には慣習的な意味があります
例
- 赤は通常、警告・アラートを示す
- 緑は通常、成功メッセージを示す

sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

成功メッセージに不適切な色。

3. 色を効果的・直感的に使う

一般に、色には慣習的な意味があります
例
- 赤は通常、警告やアラートを示し、ユーザーもそう期待します
- 一方、緑は通常、成功メッセージを示します

sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

成功メッセージに不適切な色。

成功メッセージに適切な色。

4. 大きな値は短縮する

数値はshinydashboardでも表示できます
明確さのために一部の精度を犠牲にします
- 大きな数値は丸めましょう

round(2.324815454862,2)

[1] 2.32

切り捨てなしの値

切り捨てた値

5. 交互作用要素を増やしすぎない

交互作用要素の数に留意する
多すぎると一部のユーザーを混乱させます
多ければ良いわけではありません

シミュレーション過多は良くない。

¹ Image by Freepik

6. デザインは最後に行う

ダッシュボード設計を急がない
- ワイヤーフレーム作成や見た目の設計などを含む
まず目的を定める
- それにより適切な可視化を選べます

6. デザインは最後に行う

ダッシュボード設計を急がない
- ワイヤーフレーム作成や見た目の設計などを含む
まず目的を定める
- それにより適切な可視化を選べます

"目的：Sally向けのダッシュボードを作成"

彼女はポートフォリオのパフォーマンスを見たい
個別銘柄のパフォーマンスも追いたい
そこで配置を決められます

¡Vamos a practicar!

shinydashboard で作るダッシュボード

Preparing Video For Download...