先釐清讀者問題與數據定義

畫圖前先寫一句讀者應能回答的問題。例如服務公司想知道「哪幾個月完成預約最多」,網店則想知道「準時送達訂單比例有否改變」。兩個問題所需數據不同。設計圖形以前,先界定何謂「完成」、採用甚麼時區、比較哪段期間,以及哪些紀錄被納入。若來源有缺漏或估算,應在圖旁說清楚。圖形看似精確,量度定義卻可能含糊;可存取版本也必須交代相同限制,不能只列出數字。這些準備同樣有助看得到圖的讀者判斷結論是否成立。

教學示例要與真實觀察分開。若用假設數值說明選擇,須清楚標示,不可混入實際營運圖表。若是向顧客公布真實銷售或服務資料,應在文字列出來源、期間、單位及核實更新日期。看到折線下跌,不能單憑圖形聲稱某措施造成結果;查詢減少可能涉及表格改動、假期、追蹤遺漏或需求轉變。文字描述可交代變動方向與幅度,同時保留原因尚未確定的事實。對外發布圖表的小企業,更需要這種可核對的編輯紀律。

為圖表提供簡短名稱及完整對等內容

W3C 網頁無障礙倡議把圖表視為複雜圖像,建議以簡短替代文字識別圖表,再用較長描述交代重要數值、關係和趨勢。「銷售圖」太籠統;把全部數字塞進圖片替代文字,也難以逐項查找。較好的簡短文字可指出指標與期間,並引導讀者查看旁邊的摘要及數據表。摘要用句子回答原來的問題,表格則保存準確數值,方便逐格比較或再利用。W3C 的例子把標題、說明與表格放入正常頁面內容,而非壓成一長串文字。

假設圖中四支柱顯示每季完成的服務預約。看圖的人可迅速看到第三季最高,但其他讀者仍需要知道每季實際宗數,而非只知道哪支柱較高。簡短名稱可說明這是季度比較,完整數值在下方;文字摘要指出最高與最低季度,四行表格列出每季宗數及相同單位。若圖中只有百分比,更要交代分母:是所有查詢、已接受預約,還是該季排定的預約?不同分母回答不同的業務問題。文字與數據必須準確反映圖形所呈現的內容。

對等內容還要分清真正的零與未知數值。若某日確實沒有預約,「零」是有意義的觀察;若資料來源當日故障,把缺漏顯示為零,便會錯誤暗示沒有需求。應在文字和表格清楚標示缺失資料,若因個案太少而隱藏某類別,也要解釋門檻及呈現方法。跨期比較時,須指出舊數值有否修訂、各期是否沿用相同定義。依靠文字閱讀的人,應在與看圖讀者相應的位置獲得同樣提醒。如此才不會因圖形精美,就把資料品質問題包裝成看似肯定的業務建議。

以可導覽表格保留準確數據

數據表不是試算表截圖。表格標題應指出指標和期間,橫列與直欄標題要解釋分類,單位放在標題或說明。若圖形使用四捨五入數值,應講明表格是原值還是同樣已取整。若某類別因私隱或樣本太少而不展示,應明確標示,不可留下不明空白。W3C 解釋非文字內容時亦指出,在可行的情況下可提供實際數值表格。表格最好直接在頁面上,或透過名稱清楚的相鄰連結到達。下載檔可幫助分析人員,但不能取代顧客即時理解圖表所需的答案。

要用鍵盤及屏幕閱讀器檢查表格:讀者能否找到表題、知道某個數字對應哪個欄目,以及在儲存格之間移動時保留脈絡?手機畫面較窄,表格可能要橫向捲動;首欄資訊及捲動操作仍須可用。不應只為視覺整齊而合併儲存格,令標題關係變得含糊。若顧客切換篩選條件,文字摘要及表格須與圖形使用同一份篩選後數據。新圖旁放舊表,會給出互相矛盾的答案,不能稱為對等內容。若另設 CSV 下載,檔案欄名及單位應與頁面表格一致,並交代被隱藏或抑制的數值會否出現在檔案。若下載檔採用另一套定義,它便是第二份數據,而非原圖表的無障礙替代。顧客不應要下載檔案後,才發現網頁說明與原始資料互相衝突。

讓視覺比較同樣清楚

有文字對等內容,也不能放任視覺設計混亂。刻度旁要列出單位;若柱長用來表示量值,柱狀比較宜從共同零點起算,避免截短座標軸誇大微小差距。折線圖若用來呈現變化,可視目的採用不同範圍,但必須清楚標示,文字也不能放大結論。可行時直接標記系列。W3C 的「使用顏色」指引指出,顏色不可是傳達資訊的唯一視覺方法;名稱、形狀、圖案或直接標籤可以幫助灰階及不同色覺的讀者辨認系列。

不是所有比較都值得畫圖。兩個數值的差異,有時一句話或小表格更直接。圖形適合呈現模式,但不能要求讀者必須把滑鼠停在每點才看得到準確數值;觸控裝置沒有可靠的滑鼠懸停,鍵盤使用者亦可能無法操作只支援指標的提示框。若提示框提供額外內容,應讓鍵盤焦點及旁邊表格也能取得。放大頁面和縮窄視窗時,要檢查座標與標籤有否被裁切。互動圖亦應用可見文字寫明目前篩選條件及單位。

用預約例子核對答案

假設診所想向顧客展示未來一星期可選的預約時段。刊出前,編輯須界定「時段」是尚未被選用的時間、可接診的醫護人員,還是扣除已預約後的剩餘名額。圖可按星期日子分組,表格則應在註明更新時間的情況下列出每天尚餘數量。文字要回答實際決定:目前哪些日子選擇較多,以及名額可能變動。若容量經常更新,圖、摘要和表格都要使用同一個資料快照。這是假設的設計示例,不是某間診所的真實數據,更不是個別預約必定有位的承諾。

驗收可分三條路徑。第一,只看圖形,說出圖想回答甚麼。第二,隱藏圖像或使用屏幕閱讀器,靠簡短替代文字、摘要及表格回答同一問題。第三,用手機放大頁面,操作所有互動控制。若三條路徑得出不同答案,就要修正圖形數據或文字,而非任選一個版本為準。還要把展示的數值與來源匯出資料逐項對照;這能找出單做無障礙測試未必發現的編輯錯誤。

發布前建立維護規則

發布前要指定指標負責人、唯一資料來源及更新觸發條件。原本準確的月度圖,若數據改變而期間標籤不更新,也會誤導讀者。定時更新時,要同時測試摘要、表格、圖說及圖形是否一起轉換。來源暫時無法取得時,宜顯示註明日期的最後核實狀態,或清楚說明資料暫缺,而非用看似全新的圖片承載舊數字。若圖影響顧客決定,還應提供查看最新詳細資訊的途徑,不可把歷史趨勢當作即時名額或價格。

發布標準可以很直接:圖形確實有助理解,而且不看圖也能透過文字及數值到達相同結論,才值得刊出。簡短替代文字要扼要,詳細說明要有用,表格要準確,來源限制要可見。記錄鍵盤、屏幕閱讀器、放大、非純靠顏色辨認系列,以及數據對照的測試結果。這樣的圖表既方便快速看出模式,也容許讀者仔細查核背後的業務主張。

進行前先確認

  • 不看圖、也不用滑鼠懸停,能否回答圖表的主要問題?
  • 摘要、表格及圖形是否採用相同期間、單位與來源?
  • 不用顏色、使用鍵盤及放大頁面時,標籤與互動是否仍可用?

資料來源及延伸閱讀