設計儀錶板(Dashboard)前要知道的 3 件大事
這篇文章的誕生是因為在設計儀錶板 (Dashboard) 頁面或圖表內容時，總有成千上萬的疑問冒出來。如：「這種資料要使用哪種圖表呈現？」、「這些圖表真的是最適合的嗎？」、「資料還可以怎麼比較？關聯？」、「這真的是使用者要看的嗎？」、「看了之後可以做什麼？」
除了以上問題，還會出現一些對於名詞定義的疑問，如：「儀錶板 (Dashboard) 跟數據可視化 (Data Visualization) 差在哪？」、「數據可視化 (Data Visualization) 又跟資訊圖表 (Infographic) 有什麼關係？」
在釐清這些疑問的過程中，將自己看到的內容記錄並分享出來，若有錯誤或想聊聊歡迎互相交流。(๑•ั็ω•็ั๑)
▍本篇大綱
1. 搞懂儀錶板
2. 這個數據到底要用什麼圖表呈現？
3. 儀錶板設計的 5 個眉角
4. 結語搞懂儀錶板
在設計儀錶板前，要搞懂的兩件事：觀看者是誰？以及儀錶板到底是什麼？
觀看者是誰
設計任何東西前，最重要的就是搞清楚觀看者是誰，以及他的目的是什麼。
儀錶板應專為特定目的而設計，提供最新資訊和情境，分析關鍵資料，為業務決策提供資訊。
依據 Microsoft Power BI 對儀錶板的定義，它還有另一個功能是賦能員工。也就是看了儀錶板後，要能了解公司最有價值的資料，並找出關鍵問題的答案，並依據經驗知道下一步能做什麼。
另外，常見的儀錶板可能布滿了圖表，但它也可能不需要圖表，也許只需要三個數字就能解決觀看者想知道的事。因此，了解觀看者是誰、要的是什麼，是設計儀錶板前最重要的事。
名詞解釋
開始設計之前，我先搜尋了儀錶板 (Dashboard) 、數據可視化 (Data Visualization) 跟資訊圖表 (Infographics) 有什麼不同，以及各自的應用場景。
儀錶板 (Dashboard)
儀錶板是大量訊息的摘要，整合多種來源資料的一種介面，提供關鍵與有用的訊息，幫助用戶快速理解和分析。
數據可視化 (Data Visualization)
使用各種視覺化工具和技術將數據轉換為易於理解和分析的圖形、圖表等形式的過程，目的是促進使用者更好地理解和分析數據。
數據可視化跟儀表板通常一起使用，數據可視化是從整體詳細察看訊息，儀錶板則提供訊息的摘要。
資訊圖表 (Infographic)
資訊圖表是一種數據可視化的應用，呈現大量複雜的資訊和數據，以利用戶更好理解。資訊圖表通常包括文字、圖形和圖表等元素，具有故事性及主觀性。
總而言之，儀錶板、數據可視化和資訊圖表都是數據呈現的方式，它們之間存在一些差異。
儀錶板通常是即時監控的工具，數據可視化是一種數據呈現方式，而資訊圖表則是一種特定形式的數據可視化應用。
這個數據到底要用什麼圖表呈現？
了解完名詞後，讓我們進入另一堆疑問區，就是到底什麼數據要用什麼圖表表示？
認識數據類型
在開始設計前，可以先大致了解資料可以分為四種數據類型（參考自知勢）：
名目尺度(Nominal Scale)
是四個尺度中最弱的結構，資料分類無屬性大小之分。根據特徵的性質做分類，純粹用來分辨不同的性質。如：星座、職業等。
順序尺度(Ordinal Scale)
除了可區分類別外，尚具備順序的概念(資料的排序是具意義的)，可能為互斥或週延。如：名次、等級等。
區間尺度(Interval Scale)
除了具分類及順序外，是可以比較兩元素之間的差異，於數學運算上可做加減但不能乘除，因無倍數的關係。如：年分、智商等。
比例尺度(Ratio Scale)
有以上三種尺度的所有特性外，各數值間具有等差與比率的關係，能衡量數值之間實質的差異，因此可做加減乘除所有的數學運算。如：長度、質量等。
如果覺得太複雜，可以簡單分為「不連續資料」與「連續資料」，其實就很夠用了！
不連續資料 (Discrete data)
可計數的 (countable)，具有最小的計數單位。如：名次、等級、按讚數。
連續資料 (Continuous data)
可以無限制細分的，即在任意兩個數值間可插入無限多個數值。如：身高、體重、長度。
選擇「適合」的數據視覺化圖表
了解完數據類型後，就可以針對數據的特性來挑選適合呈現的圖表。
在選擇該用什麼圖表時，要先判斷你想要呈現的是什麼？ datapine 提出了四大類型與其適合的圖表：
關係 (Relationship)
了解不同數據之間的關係，助於發現新的關係與見解。
當有兩個變量時，使用散布圖 (Scatter Plot) 查看之間關係，若有三個(含)以上的變量，則使用氣泡圖 (Bubble Plot)。
分佈 (Distribution)
在統計學中，分佈是指某個結果發生的可能性。
使用柱狀圖/直方圖 (Column Chart/Histogram) 來查看單個變量在類別中的頻率分佈；及使用散布圖 (Scatter Plot) 突出變量之間的相似性。
組成 (Composition)
將部分與整體進行比較。
常見的圖包括圓餅圖 (Pie Chart)、樹狀圖 (Tree map) 和堆積條狀圖 (Stacked Area Chart)。
比較 (Comparison)
多個變量或單個變量內的多個類別的比較。
表格 (Table)、蜘蛛圖 (Spider Chart)、柱狀圖(Bar Chart)、線圖(Line Chart)或面積圖 (Area Graph) 都適用。
過去到現在，越來越多瞎趴的圖表表達方式產生，這篇文章《Three charts are all I need》的作者提到，以「解決問題」的角度來看，世界上 95% 以上的問題都可以使用折線圖、長條圖跟表格就能解決。
而 NN/g 的研究 (Choosing Chart Types: Consider Context) 發現條形圖、折線圖和散點圖是人們最容易理解的類型。
在不能同意更多的同時，如果加上體驗或客製化等角度出發，嘗試其他適合呈現的方式，也許可以創造出一樣實用又清楚的圖表。
儀錶板設計的 5 個眉角
了解完不同數據的呈現方式後，圖表的細節更是讓儀表板 (Dashboard) 能否成功的主因之一。
綜合 Apple WWDC22 全球開發者大會提到如何設計有效圖表 (Design an effective chart, Design app experiences with charts)、NN/g 對儀錶板設計的建議 (Dashboards: Making Charts and Graphs Easier to Understand) 以及網路上的分享，可以歸納出幾個主要的大方向：
✨ 圖表選擇
跟上面提到的一樣，最重要的首要目標就是要先選擇適合的圖表。請看下圖左側的餅圖，請告訴我紅色跟藍色的差異？是否有點困難？(๑•ั็ω•็ั๑)
如果採用右側長條圖呈現，可以讓人更清楚的看出項目之間的差異。
✨ 只保留最重要的資訊
耶魯大學統計學家 Edward Tufte 的經典著作 《The Visual Display of Quantitative Information》 談論視覺化如何呈現量化資訊，被稱為是資料視覺化的先驅。
書中提到一個張圖表中，決大部分的「墨水 (Data-ink)」要跟想呈現的資料相關聯。墨水代表圖表中不可排除的核心，而非資料墨水 (Non-data ink) 代表非傳達數據的內容，如網格線、圖標、顏色等。
✨ 顏色與形狀
善用顏色、形狀來顯示類別。雖然顏色和形狀不易傳達量化關係，但它們可用於分類 ，即哪些項目是同一類的。(根據格式塔相似性心理學原理，具有相似形狀或顏色的項目通常被認為是相關的)
由於色盲的人群普遍存在，顏色區別可作為輔助的分組提示，但不是作為主要方式。形狀或清晰的視覺分組是更可靠的方式，兩者應相輔相成。
另一個要注意的點是：人們不會將不同顏色視為特定順序，因此不應使用顏色來傳達有關定量或大小的訊息。
✨ 讓數字有意義
提供上下文讓數字有意義，如：與上週或上個月的比較、總量占比、表現是平均之上還之下、距離目標多遠等。
✨ 相關指標分組，搭配清楚文字敘述
將相關的內容分組，使其在儀錶板上位置靠近，不讓觀看者到處找相關資訊。再搭配上清楚、合適且精簡的文字描述，讓觀看者一目了然目前情況，進而做出決策。
儀錶板 (Dashboard) 設計還有許多內容值得討論，包含其資訊架構、布局與不同目呈現的內容。有興趣的話，可以閱讀以下連結：
結語
儀錶板設計還有很多細節可以探討及研究，僅以初步設計前需要了解及考慮的內容進行分享，包含觀看者是誰、數據了解、圖表挑選及圖表設計呈現。
儀錶板的存在更多是與商業目標與策略相關，盡可能的快速得知目前狀況，獲得見解，提出下一步行動。
這裡有更多關於數據跟圖表的資源，如果有興趣可以參考：
- Perceptual Edge
Perceptual Edge 是 Stephen Few 從 2003 年到 2017 年的工作檔案，旨在幫助人們通過視覺呈現數據來更有效地理解和交流數據。範例有case study，圖表問題，他的解決方案 - Steve’s Blog
Steve Wexler 是數據專家，寫很多關於儀錶板、資訊圖表等內容，也可以追蹤他的 twitter，會分享一些數據相關內容。
