良好 UI/UX 實務

使用 shinydashboard 建立儀表板

Png Kee Seng

Researcher

一些原則

  1. 釐清儀表板的目的
  2. 選用合適的視覺化
  3. 顏色使用直覺有效
  4. 大數值請截短
  5. 避免過多互動元件
  6. 設計放在最後一步
  • 以上原則適用於各式儀表板
  • 清單不盡完備
  • 屬於建議，而非放諸四海皆準
使用 shinydashboard 建立儀表板

1. 釐清儀表板的目的

  • 儀表板是給誰用的？
  • 他們需要知道什麼？
  • 更理解使用者需求能提升使用體驗 $^1$
  • 情境：為 Sally 建立儀表板
  • 目的：回報她的投資組合績效
1 François, Mathilde, 等（2017）。「Automotive HMI design and participatory user involvement: review and perspectives。」Ergonomics 60.4：541-552。
使用 shinydashboard 建立儀表板

2. 選用合適的視覺化

  • 針對單一視覺化的原則，同樣適用於儀表板
  • 儀表板由多個視覺化組成
  • 對 Sally 來說哪些資訊有用？
  • 準確與清晰之間需取捨
  • 「The truthful art」，作者 Alberto Cairo $^1$

依 Alberto Cairo 建議的圖表類型。

1 Cairo, Alberto（2016）。The truthful art: Data, charts, and maps for communication。New Riders。
使用 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...