資料先於設計
決定一個資料檢視是否良好的因素有三項，而且這三項都在你撰寫標記之前就該確定：檢視服務於何種決策、欄位實際內容為何，以及使用者偏好哪種佈局。忽略任何一項，都會產出看似完成但實際錯誤的檢視。
使用時機
- 任何卡片、面板、表格、儀表板或詳細資料檢視，且資料非自行撰寫的固定資料
- 利害關係人說「顯示 X」，而 X 是欄位名稱
- 你正要對某個欄位進行摘要、截斷、標記、排序、著色或計數
- 你正在為相同資訊的兩種佈局方式做選擇
當資料是你自己的固定資料，或檢視只顯示你已經印出的單一值時，跳過此流程。
一個將會發布、分享或放入報表的圖表或表格，如果顯示的不是自行撰寫的資料，仍應從此處開始。一旦資料確定後，practical-charts 會處理其可讀性：標題、誠實的軸線、一個重點系列、圖片內部的資料來源。
步驟 0：命名決策
在接觸資料之前，先寫一句話：「看著這個畫面的人正在決定 ___。」如果你無法完成這句話，你正在建立一個資料傾印，而佈局的問題也不會有答案。
- 每個欄位都必須透過改變那項決策來證明其存在價值。 有趣但與決策無關的欄位應放在詳細檢視中，而非卡片上。
- 顯著性取決於決策權重，而非查詢便利性。 最容易獲取的欄位，並不代表它值得最大的字型。
- 利害關係人提到欄位名稱，告訴你的是他們想要的「資料」，而非「決策」。 詢問他們根據該欄位的值會做出什麼不同的行動。
步驟 1：剖析欄位，然後設計
先查詢再設計。針對檢視將顯示的每個欄位：
| 檢查項目 | 為何影響設計 |
|---|---|
| 非 Null 計數 | 若每個列該欄位皆為 NULL，不需要卡片，而是需要一個 Bug 報告 |
| 不同值數量 | 四個值是晶片集；四千個值是搜尋框 |
| 長度：最小值 / 平均值 / p95 / 最大值 | 平均值會隱藏溢出內容 — 以 p95 為容器大小，並慎重決定尾巴的處理方式 |
| 跨記錄的覆蓋率 | 若一張卡片只為 1.6% 的記錄觸發，那就是一個帶有罕見例外狀態的空狀態 |
| 每個父項的基數 | 每人一則備註是段落；每人二十則是列表，需要自己的互動元素 |
| 日期存在性 | 對於沒有日期欄位的資料，你無法顯示其陳舊程度 |
| 詞彙 | 自由文字中有八種相同的措辭需要正規化，而非直接呈現 |
| 是否存在比較基準 | 赤裸的數字無法解讀 — 請見下方說明 |
在提出設計之前，用數字陳述你的發現。
螢幕上的每個數字都需要比較基準
52 則備註 對讀者毫無意義：他們無法判斷這是否算多。52 則備註（中位數 4） 才是一個發現。在顯示任何計數、總數或分數之前，先找到其比較基準 — 中位數、目標值、前期數據或集合中的其他部分 — 並將它們一起顯示。如果不存在比較基準，這就證明了該數字不該出現在螢幕上。
極端情況是從不變動的數字：每個記錄都成立的計數會讓人誤以為是發現，但實際上是雜訊。
步驟 2：製作原型選項，然後建立
對於任何卡片形式的東西，從真實記錄中產出多個靜態原型，並讓使用者選擇。之後才開始建立。
- 用一句話說明每個選項最佳化的目標及其代價
- 原型是可拋棄的 HTML，不是元件 — 不要把它們串接起來
模擬六種狀態，而非一種
為檢視可能處於的每種狀態進行設計，每種狀態都來自真實記錄：
| 狀態 | 取材自 |
|---|---|
| 理想 | 典型記錄 — 位於中位數的記錄，而非你挑選的 |
| 空白 | 該欄位無資料的記錄，以及完全沒有任何記錄的全新帳戶 |
| 部分 | 部分欄位有填寫、部分未填寫 — 在真實資料中這是最常見的情況，而非例外 |
| 載入中 | 在資料到達前佔據該空間的內容，且大小應與資料將呈現的大小一致 |
| 錯誤 | 擷取失敗，或值格式錯誤無法呈現 |
| 完成 | 確認檢視所提供的動作確實發生的狀態 |
然後是壓力測試案例
數量極端值（最繁忙、典型、空白）並非唯一的極端。壓力測試案例是指資料存在、格式正確但令人頭痛的情況：欄位會誤植的名稱、狀態會使歡樂標籤變錯誤的記錄、摘要仍計入已刪除帳戶的人。挑選一個最能讓這個檢視出糗的記錄並呈現它。
同一頁面上的多張卡片：共用一個圖例鍵
讀者會在第一張卡片學到顏色的含義，並將其套用到之後的每張卡片。因此，在繪製同一頁面上任何卡片之前，先為整個頁面寫下一個分類表：規範名稱、固定順序以及每個類別的一種顏色。每張卡片、圖例和 tooltip 都使用它。
- 一個類別一種顏色；一種顏色一個類別。 一種顏色屬於其類別，即使在該類別缺席的卡片上也是如此。將同一種顏色用於其他事物，即使是在從不顯示原始類別的卡片上，也會讓讀者認為兩者是同一件事。
- 每個類別一個名稱。 在一張卡片上寫「全球健康與發展」，而在下一張寫「全球發展與健康」，會讓讀者懷疑它們是否為兩個類別。
- 當卡片切割相同的記錄時，使用統一的分類法。 在卡片新增自己的分類之前，先檢查它是否可以合併到頁面已有的類別中。如果卡片真的需要更細的分割，則使用父類別顏色的深淺變化，而不是新顏色。
- 真正不同的類別使用未被使用的顏色，並加上副標題說明分類不同。絕對不要重複使用頁面上已分配給其他類別的顏色。
- 所有圖例中的順序相同，其中「其他」始終在最後，且始終使用相同的中性灰色。
完成條件是，列出頁面上所有（標籤、顏色）配對後，得到一對一的映射。檢查標記或樣式表中的顏色值，而不是渲染後的螢幕截圖。
從資料中產生的呈現規則
- 空白狀態需要發揮作用。「尚無備註」是死胡同。說明為何空白以及如何填滿它。使用者在第一天遇到的空白狀態就是入門指引，值得設計。
- 表格中的數字： 靠右對齊、使用表格數字 (
font-variant-numeric: tabular-nums)、整個欄位使用一致的精確度、單位放在表頭而非每個儲存格重複。practical-charts的規則 13 涵蓋了其餘部分：無網格線、重點列加上底色、行內長條圖。 - 預設排序是一種設計決策。 記錄以主鍵順序排列就是缺乏排序設計。
常見錯誤
| 錯誤 | 後果 |
|---|---|
| 根據 Schema 設計 | 欄位存在，但資料不存在 |
| 未命名決策就開始建立 | 所有元素獲得相同權重，因為沒有理由讓任何元素更大 |
| 給予最容易取得的欄位最高的顯著性 | 佈局描述了 Schema，而非任務 |
| 顯示沒有比較基準的數字 | 讀者無法判斷是好是壞，於是停止觀看 |
| 對永遠為真的東西進行計數 | 從不變動的計數會讓人誤以為是發現，實際上是雜訊 |
| 信任在資料被檢視之前寫好的計畫 | 你建立了計畫中命名的東西，而不是資料支援的東西 |
| 只模擬理想狀態 | 設計在遇到空白或部分資料的記錄時崩潰 |
| 只測試數量極端值 | 檢視能承受最大記錄，但卻在一個普通記錄上羞辱了某人 |
| 因為第一個被描述而只建立一個選項 | 使用者無法選擇他們從未見過的東西 |
| 逐張卡片挑選顏色和標籤 | 同一種藍色在一個頁面上代表兩種意思，讀者會畫出不存在關聯 |
非顯而易見部分的來源
- 決策優先，以及根據決策權重決定顯著性 — Stephen Few, Information Dashboard Design
- 數字需要比較基準 — 同樣來自 Few，關於上下文是讓數字具有意義的關鍵
- 六種狀態 — Scott Hurff 的 UI Stack
- 壓力測試案例 — Eric Meyer & Sara Wachter-Boettcher, Design for Real Life