九條理論，每一條配一組並排的示範：同樣的內容、同樣的資料，一邊照理論做，一邊不照。差別不必用講的，看兩格就知道。
不是先列理論再找例子。先看一屆學生用同一份資料各做一個儀表板，交出來的作品在哪些地方真的分岔——有人做對、有人做錯，而且錯得有系統——再回頭找那個分岔對應哪一條理論。五件作品做得一樣好或一樣差的地方，就沒有選進來，因為它教不出東西。
下面每一組的兩個畫面都是為了說明而重新設計的，不是任何一件實際作品。兩邊的內容與資料刻意完全一樣，只有一個設計決定不同，這樣差異才歸得了因。畫面裡的數字是示意值。
人一眼能數完的數量大約 4–5 個。顏色種類一旦超過，辨色就從前注意的平行處理掉回序列搜尋——使用者必須一個一個對圖例，顏色反而變成負擔。Subitizing · Feature Integration Theory
八個分類全部同一種灰，只有「目前選取」那一個上色。顏色只承擔一個意思，所以那個意思一眼看得到。
看這裡把視線放鬆，第一個跳出來的是不是「財政」？
看起來比較「有設計」，但沒有一個分類跳得出來。顏色多到必須逐一辨認，等於回到讀文字——那顏色就白上了。
看這裡現在還看得出哪一個是選取中的嗎？
怎麼改先問這個顏色要表達什麼。分類多於五個就不要用顏色分類，用位置與排序；顏色留給「狀態」——選取中、異常、已處理，這種一次只有少數幾個的東西。
顏色與動態在 200–250 毫秒內被平行偵測，不需要注意力。但同一個特徵若被多種意思共用，信號純度就消失——紅色同時代表警示、標題和裝飾的時候，紅色什麼都不代表。Feature Integration Theory · Pre-Attentive Processing
標題、標籤、狀態全部維持中性，只有真正異常的那一列是紅的。掃過去不必讀完五列，紅色自己會浮出來。
看這裡異常那一列，你花了幾毫秒找到？
紅色被拿去當強調色、當狀態色、當裝飾。等到真的有一件事需要立刻處理，已經沒有紅可以用了——它得跟另外七個紅競爭。
看這裡同一列異常，這次要找多久？
怎麼改挑一個顏色當警示專用，然後全站搜尋一次，把其他地方用到它的都換掉。十分鐘做得完，但只有想過「信號專屬」的人才會去做。
任何不代表資料的視覺變異，都會在顯著性地圖上產生無意義的激活。陰影與漸層製造強烈邊緣，大腦得額外花力氣忽略它們，才看得到真正的資料。Data-Ink Ratio · Feature Congestion
邊界只用一條細線，層次交給字級與留白。畫面上唯一強烈的東西是那個數字，因為它本來就該是唯一強烈的東西。
看這裡先看到數字，還是先看到卡片？
同樣的內容，加上漸層、陰影與高光。每一個效果都製造出資料裡不存在的邊緣，數字必須跟這些邊緣競爭注意力——而它輸了。
看這裡把眼睛瞇起來，剩下的是數字還是那團漸層？
怎麼改不是把裝飾全砍掉，是讓裝飾只出現在不承載資料的地方。標題區可以華麗，數字區要素。先做一次減法，再決定加回哪一項。
視覺通道的判讀準確度有明確排序：共同尺度上的位置最準，其次是長度，再來才是角度、面積、亮度。最重要的比較，應該用最有效的通道。Perceptual Ladder · Cleveland & McGill
個人捐贈和營利事業只差 3 個百分點，在長條上看得出來是「差一點點」。要排序、要比較、要看差距，長度都做得到。
看這裡不看右邊的數字，你分得出前兩名誰比較多嗎？
同樣的數字，改用角度。前兩塊的 3 個百分點差距在弧上幾乎看不出來，最後三塊擠成細縫。而且圖例在旁邊，眼睛得來回跑。
看這裡遮住圖例，你講得出哪一塊是「政黨捐贈」嗎？
怎麼改圓餅與甜甜圈只適合「有一塊明顯過半」這種粗略判斷。要逐項比較就換共用基線的長條，並把標籤直接標在條的旁邊，省掉圖例這一趟。
人像覓食動物一樣，靠「資訊氣味」決定要不要往下深入。連結文字若無法讓人預測點下去會拿到什麼，報酬不確定，多數人就不點了。Information Foraging Theory
四種不同的人各有一條路：知道要查誰的、想看某地的、想看極端值的、想比較的。每個標籤都包含名詞與數量，點之前就知道會拿到什麼。
看這裡你現在能預測第二條點下去會出現什麼嗎？
搜尋框只服務「已經知道自己要查誰」的人。「更多資訊」四個字沒有任何氣味——不知道會拿到什麼，就不值得花那一次點擊。
看這裡你會在這個框裡打什麼？想得到嗎？
怎麼改把每個按鈕的文字改成「動詞＋對象＋數量」。「更多資訊」改成「看台北市 12 位候選人」，改的是一行字，換到的是使用者願不願意點。
決策時間隨選項數的對數成長。這條和上一條是一體兩面：入口要多條，但每條入口上的選項要少——多入口不等於多選項。Hick-Hyman Law
最常用的三個直接給，其他收在「更多條件」後面，但把裡面有什麼寫出來——使用者知道展開會拿到什麼，不必先展開才知道。
看這裡要開始篩選，你需要先讀幾個字？
條件全部給了，看起來很完整。但使用者要先讀完 41 個選項才知道自己要選哪個，多數人讀到第二行就退回去用搜尋框——這一整區等於白做。
看這裡從看到這區到按下第一個選項，你要花多久？
怎麼改「多入口」和「多選項」分開想。五條入口是對的，錯的是其中一條入口上就擺了 41 個選項。分層、預設收合、或先給三個最常用的，都可以。
Martini Glass 結構：先由作者引導一段，把詮釋框架建立起來，再打開讓讀者自由探索。沒有杯腳，讀者是在沒有框架的情況下面對一個資料庫。Narrative Visualization
使用者不必先想到要查誰。點一個進去，順便學會這個站怎麼用、有哪些欄位、可以問什麼問題——之後再去自由探索，就帶著框架了。
看這裡看完這三格，你心裡有沒有浮出第四個想查的問題？
第一眼的報酬是零，而且它要求使用者先有一個問題，才給得出答案。對這個題目本來就沒有問題的人，到這裡就離開了。
看這裡你知道選了台北市之後會看到什麼嗎？
怎麼改把「目前顯示 0 筆」換成三個具名案例，各附一句為什麼值得看。這是所有修法裡最便宜的一個，改變的是使用者的第一印象。
空間包絡在約 100 毫秒內被辨識，激活「這是什麼類型的畫面」的先驗。第一個畫面如果是空的，這 100 毫秒就浪費掉了，使用者得等第二次機會。Scene Grammar Theory
首屏那一小塊寫成真的 HTML，資料再交給後面的 JavaScript。標題、規模、能做什麼，在第一個畫面就交代完，網路慢也讀得到。
看這裡就算後面全部載入失敗，這一格還是有資訊。
畫面全部由 JavaScript 產生，要先下載函式庫、抓資料、渲染，才會有東西。這幾秒鐘裡沒有任何線索告訴使用者這是什麼網站、值不值得等。
看這裡光看這一格，你講得出這是什麼主題的網站嗎？
怎麼改把首屏那一小塊寫成真的 HTML，其餘再交給 JavaScript。這同時解決另一個問題：互動作品要存檔、要截圖、要幾個月後還打得開，靠的就是這一塊。
移動到目標的時間，隨距離增加、隨目標縮小而變長。操作成本高等效於提高行動門檻——按鈕做得太小，功能等於沒做。Fitts's Law
可點擊的東西用內距撐開，不是靠字級。目標大，移動時間就短，使用者不必瞄準——尤其在手機上，這是能不能用的差別。
看這裡用手指比一下，這個大小點得中嗎？
排序常常是整個介面最有價值的功能，卻最容易被做成一排小字。功能寫出來了，使用者在手機上點三次中一次——那就等於沒有這個功能。
看這裡這三個按鈕，你有把握一次點中中間那個嗎？
怎麼改可點擊元素的 min-height 設 44px 起跳，內距用 padding 撐開而不是靠字級。改一行 CSS，可用性差一個檔次。
這一頁回答「原則長什麼樣子」；另外兩份分別回答另外兩個問題：
richyli.github.io/visual/ — Dashboard 診斷框架 v1，逐條檢查一份儀表板做得好不好。
richyli.github.io/obs/dashboard_complaint_glossary.html — 儀表板抱怨翻譯表，把「很亂」「找不到」「怪怪的」翻成理論名稱。