很亂/眼花撩亂
視覺皮質裡不同刺激在競爭同一批神經表徵資源,勝負由物理顯著性與任務目標共同決定。當每張卡片的字級、顏色、邊框都一樣,就沒有任何元素能在競爭中勝出,注意力被均分,等於沒有重點。
修法首屏只允許一個區塊擁有最高視覺權重,其餘一律降級。
你看得出來哪裡不對,但只講得出「很亂」「找不到」「怪怪的」。這張表把這些口語接到理論名稱上——讓你的直覺變成查得到、引用得了、寫得進說明文件的東西。左邊是你會說的話,中間是它的學名,右邊是這個理論到底在說什麼,以及怎麼修。
問題出在最前面 250 毫秒——資訊還沒被讀,就已經在視覺系統裡輸掉了。
很亂/眼花撩亂
視覺皮質裡不同刺激在競爭同一批神經表徵資源,勝負由物理顯著性與任務目標共同決定。當每張卡片的字級、顏色、邊框都一樣,就沒有任何元素能在競爭中勝出,注意力被均分,等於沒有重點。
修法首屏只允許一個區塊擁有最高視覺權重,其餘一律降級。
太花俏/太刺眼
顏色、方向、大小、動態這些特徵在 200–250 毫秒內被平行偵測,不需要注意力介入。問題是這種「免費」的顯著性有限:裝飾用了,真正的警示就沒得用。
修法把最強的前注意特徵(動態、飽和紅)保留給唯一一種訊息,全站不再有第二個地方用它。
一眼看過去東西太多+
畫面的視覺雜訊可以被量化:局部區域內顏色、方向、亮度的變異越大,搜尋就越慢、越容易漏看。這解釋了為什麼「每一格都做得很用心」的頁面反而最難用。
修法把背景元素去飽和、拿掉外框與陰影,讓變異集中在該被看見的地方。
顏色跟意思打架+
當顏色的語意與文字的語意衝突(綠色的「落後」、紅色的「達標」),大腦必須額外花時間壓抑錯誤的自動反應,判讀速度顯著變慢。
修法先定死色彩語法(紅=異常、綠=達標、灰=背景),全站不准例外,連品牌色也不行。
顏色深淺分不出來+
亮度的感知指數約 0.33,代表物理上等距的數值差,在高值區被壓縮到幾乎看不見。彩虹色(Rainbow/Jet)更糟:黃色的明度峰值會讓中等數值在視覺上最突出,製造出資料裡根本不存在的模式。
修法熱力圖改用 viridis 或 CIELAB 等感知均勻色階,不要用彩虹色。
看不懂這是什麼圖+
人是先用一般的圖表基模,去生成眼前這張圖的專屬基模。圖表形式越新奇,基模啟動越慢;讀者還在猜「這是什麼圖」的時候,資料本身根本沒被讀到。
修法任務本身已經複雜時,優先用讀者熟悉的圖表慣例。每一次不必要的創新,都是在要求對方重新學一套。
看不懂(術語太多)
圖表理解同時受「圖表知識」與「內容知識」影響。預設使用者都懂淨流入、留存率、加權指數,其實是假設了一整套專家心智模型已經存在。
修法第一次出現的專業名詞就地解釋,或提供新手/進階兩種檢視。
東西都在頁面上,但使用者到不了——這是覓食路徑與工作記憶的問題,不是資料量的問題。
找很久/不好找
人不會平均掃過畫面,而是先形成一張優先地圖,注意力再落到最可能有收穫的位置。連結與按鈕的文字就是「資訊氣味」——氣味弱,使用者無法預測點下去會拿到什麼,就不點。
修法把「更多資訊」「查看詳情」改成「查看台北市 3 件重大案件」,讓標籤自己說明報酬。
不知道從哪裡開始看
好的資料敘事先有一段作者引導的杯腳,把詮釋框架建立起來,再打開杯碗讓讀者自由探索。一開始就丟出完整資料庫,等於要求讀者在沒有框架的情況下自己找問題。
修法首頁放三個具名案例當杯腳,點進去就是完整詳情,看完再放人去搜尋。
要來回看/東西很散
相互依存的資訊被分開放置時,工作記憶必須同時保持多個位置,外在認知負荷直接上升。圖例放在右下角、圖表在左上角,就是典型案例。
修法圖例直接標在線的末端;需要比較的兩組資料並排,不要一左一右跨越整頁。
看久很疲累
認知系統持續在最小化預測誤差;當畫面一直給出無法被既有模型解釋的東西,誤差就收斂不了,主觀感受就是累。每多一次分頁切換、篩選重設,也多付一次注意力轉換成本。
修法維持穩定的版面與色彩語法,並把目前的篩選狀態常駐顯示,不要讓使用者靠記憶維持脈絡。
無法判斷重要性
感知是在神經噪音背景下做的統計決策。d′ 是信號分佈與噪音分佈的距離——沒有「正常長什麼樣」的基準線,兩個分佈在感知上完全重疊,d′ 趨近於零,再認真看也判斷不出來。
修法畫出歷史正常波動範圍(例如 ±2σ 控制帶),讓偏離自己浮現。
不知道這個數字是高還是低+
基模會主動填補空白,但填進去的未必正確。沒有目標值、去年同期、正常範圍,使用者就用自己的預設去補——這是最常被忽略、也最容易修的一項。
修法每個關鍵數字都附一個基準:「3.2%(目標 4.0%,上季 3.8%)」。
點進去就後悔+
當前區塊的邊際報酬低於環境平均獲取率時,理性的覓食者就離開。詳情頁只有一句摘要,使用者退出去之後,連帶不再信任其他入口。
修法詳情頁至少給足欄位、來源與相關項目,讓點擊的時間投資划算。
每一頁長得都不一樣+
空間包絡在約 100 毫秒內就被辨識,激活「這是什麼類型的畫面」的先驗。佈局每頁都變,使用者每次都要重建場景理解,注意力沒辦法直接落在異常上。
修法全站共用同一套版面骨架與色彩語法,讓違反常態的東西自己突出。
這一類最危險:畫面看起來很專業,但推論已經被帶偏。學生最需要學名的也是這一類。
資料看起來很怪
大腦持續預測感覺輸入並最小化誤差。當資料違反強烈的先驗,人傾向懷疑資料而不是更新信念——先驗越強,越可能直接說「這數字一定有問題」。
修法異常值旁邊直接標資料來源、統計期間與計算方式,降低懷疑資料的誘因。
資料有問題
視覺化必須忠實呈現效果量、不確定性、比較基準與視覺顯著性。關鍵的一句話是:不確定性的缺席本身就是一種誤導——只給點估計,等於隱含承諾這些數值是確定的。
修法加上誤差範圍或信賴帶;做不到時,至少寫明樣本數與資料期間。
這個圖表在畫什麼?
同一份資料換成不同視覺屬性,被讀出來的強度就不一樣。面積、體積、色深的感知指數都遠低於長度,意思是差距會被系統性低估。
修法需要精確比較的數值不要交給面積、體積或色深。
這個圖用錯圖型了+
不同視覺通道的判讀準確度有明確排序:共同尺度上的位置 > 長度 > 角度 > 面積 > 亮度飽和度 > 曲率體積。最重要的資料屬性應該用最有效的通道編碼。
修法核心比較用長條圖、點圖、散布圖;熱力圖、泡泡圖、樹狀圖留給大致的強弱感知。
差距看起來很大,其實沒有+
視覺上的差距大小應該正比於統計效果量。Y 軸從 95 開始,1% 的差距在畫面上看起來像 50%,讀者會系統性高估。反過來,把統計上不顯著的差異用鮮豔顏色高亮,也是同一種錯。
修法Y 軸從 0 開始,非得截斷就明確標注;只強調通過檢定的差異。
我被這張圖騙了
視覺化的終極標準不是好不好看,而是「讀者的信念有沒有以統計上正確的方式被更新」。Lineup 把真圖混進一堆虛無假設下的隨機圖,挑不出來就代表那個模式本來就不存在。
修法看到明顯模式時先自問:如果資料是隨機的,這張圖會不會長得差不多?
只有一個數字,沒有範圍+
人對靜態誤差棒的解讀很差,但對「多種可能結果輪流出現」的動畫理解得相當好。把預期分佈畫出來,讀者才感覺得到觀測值相對於預期落在哪。
修法至少畫出信賴帶;互動作品可以做成多個抽樣結果的切換。
操作成本等同於行動門檻。使用者不是不想做,是做起來太貴。
很難操作
移動到目標的時間,隨距離增加、隨目標寬度減少而變長。高操作時間等效於提高行動門檻——按鈕做得又小又遠,等於在勸退。
修法主要行動按鈕至少 44px 高,放在視線自然落點;高頻操作貼螢幕邊緣,利用邊界的無限寬度。
選項太多,不知道選哪個+
決策時間隨可選項數的對數上升。十個並列的篩選器不是給了十倍自由,是給了一次更慢的決策。
修法把篩選器分層或分群,先給三個最常用的,其餘收進「進階」。
等很久/反應很慢
視覺分成腹側流(辨識「是什麼」)與背側流(導引「怎麼動」)。背側流的運作是即時的,一旦操作回饋延遲,手與眼的迴路就對不上,主觀上就是「卡」。
修法互動要有立即的視覺回饋,資料還在算就先給狀態,不要讓畫面靜止不動。
滑桿很難拉到我要的值+
沿著狹窄通道移動的時間,正比於通道長度除以寬度。細長的滑桿、狹窄的下拉選單,都是在要求高精度的連續控制。
修法滑桿加大命中區、提供數值輸入或預設區間按鈕當替代路徑。
要點五次才做得完一件事+
每多一個步驟,就多一次注意力轉換成本加上一次操作成本。從「看到」到「完成必要行動」超過三步,完成率就明顯掉下來。
修法把主要任務壓在三步以內,每一步都預填能預填的欄位。
說不上來但就是不想信。多半是編碼慣例被違反,或是信號被自己稀釋掉了。
顏色怪怪的
Bertin 把視覺變數分成有序與無序兩類:位置、大小、明度可以表達順序,色相不行。用彩虹色表達高低,等於拿一個無序的變數去承擔有序的任務。視網膜的色彩對立機制也決定了哪些顏色組合會互相干擾。
修法順序型資料用明度或飽和度的單色階,類別型資料才用色相,且控制在 5–7 種以內。
資料不像真的
過度平滑的曲線、剛好都是整數的數值、完美對齊的比例,會觸發讀者的懷疑。真實資料本來就有雜訊,把雜訊修掉反而降低可信度。
修法保留原始的參差,需要平滑時同時顯示原始點。
警告太多,後來我就不看了+
假警報率高,先驗機率就下降,決策標準會理性地漂移到保守端——結果是漏報增加。使用者不是懶,是在做正確的貝氏更新。
修法警示分層,最高層極少出現且強制介入;低層預設不顯示。
看起來很滿,但沒有重點+
任何不代表資料的裝飾,都會在顯著性地圖上產生無意義的激活。3D 效果與陰影會製造強烈邊緣,大腦得額外花力氣忽略它們才看得到真正的資料長度。
修法拿掉 3D、陰影、深色網格與無意義漸層,先做減法再談美感。
說不出這頁要我做什麼+
很多誤讀來自讀者只看到圖形線索,卻沒接上語意線索——只看得到上升下降,不知道那代表成本、風險還是轉換率。每張圖都該明確回答「比較什麼、監測什麼、診斷什麼」。
修法每個區塊給一個任務型標題(「哪一區今天最需要處理」),不要只寫欄位名。
原表沒有這一類,但它是新聞與公共資訊型儀表板真正的成敗點——當下看懂了,離開畫面就什麼也沒帶走。
看完就忘了+
語言系統與非語言系統同時被激活,會留下雙重記憶痕跡,保留率明顯較高。這也是圖優效應的來源:視覺圖像比純文字更容易被認出與回想。
修法關鍵訊息同時給圖與字,不要只給表格,也不要只給一張沒有說明的圖。
講得很抽象,記不住+
具體、可視化的概念比抽象概念更容易形成心像。「這個藥可能傷害肝臟」與「乙醯胺酚超過每日建議攝取量 300mg」講的是同一件事,記得住的只有前者。
修法把單位與門檻翻譯成讀者身上會發生的事。
當下懂,回到現場想不起來+
記憶在與編碼時相似的情境中提取效率最高。使用者是在賣場、在投票所、在辦公室做決定的,不是在你的網頁前面。
修法給出下次會遇到的視覺線索——包裝長什麼樣、招牌在哪、表單第幾欄,而不只是名稱。
跟我沒關係+
連結到個人既有記憶的新資訊,記憶強度遠高於孤立呈現的資訊。「某地區某批次」與「你可能在超商買過」是完全不同的編碼深度。
修法用位置、時間或消費經驗把資料接到讀者身上,個人相關的資訊放在最前面。
這張表回答「我看到的問題叫什麼名字」;逐條檢查一份儀表板做得好不好,用另一份:
richyli.github.io/visual/ — Dashboard 診斷框架 v1,十個章節、每則附做對的樣子、做錯的樣子與理論依據。
兩份的分工:先用這張表把感覺講成問題,再用診斷框架逐條核對、決定要不要改。