先釐清顧客要作甚麼決定

資料表格適合用來比較多個項目相同的屬性。假設一家香港維修公司按地區、星期及服務種類列出預約時段,顧客可能要找九龍的晚間時段,再與港島的日間時段比較。若網站只放一張格線圖片,放大文字或使用屏幕閱讀器的人便難以知道每個數值屬於哪一行、哪一列。編輯表格前,先逐格問自己:這格是在回答哪種服務、哪個地區、哪一天,以及是否仍有名額?若資訊只是短短幾項,用清單會更清楚;只有格與格之間的關係對決定有用,才需要表格。刪去對顧客無助的欄位,並在表格旁解釋陌生術語,避免把理解資料的責任全推給讀者。

為每個數值保留上下文

世界資訊網協會的網頁無障礙倡議指出,資料表格要用真正的標題儲存格及資料儲存格,並讓程式識別兩者的關係。把首行字體加粗只是外觀,不能保證輔助工具知道它是欄標題。簡單表格可把首行設為欄標題,其餘設為資料;若首列列出服務或地點,這些儲存格也應是行標題。表格同時有行與欄標題時,明確標示標題適用的方向,可減少含糊。不要為了排齊價格與按鈕,便把版面格線冒充資料表格;也不要把真正有比較關係的表格改成一堆外觀整齊的卡片,卻遺失標題與數值的連結。逐格閱讀的人應能分辨「尚有名額」說的是星期五維修,還是星期六諮詢。畫面整齊不代表答案傳達正確,必須針對這種區別測試。

交代表格主題與單位

簡短的表格標題讓讀者在進入儲存格前知道整體主題。「十月維修預約名額」比「表一」有用得多;旁邊亦可說明時間是否香港時間、名額是即時資料還是某日的快照。世界資訊網協會指出,習慣在表格之間跳轉的使用者尤其需要標題;如果結構特殊,可以另加簡介。標題毋須把上文重寫一次。單位要放在欄標題,例如「每次服務費用,港元」,不要只在第一行數值旁寫單位,否則其餘數字可能被誤作每小時收費。比較貨品時,也要分清現貨數量、預計出貨日與承諾送達日;三者是不同資訊,不能籠統叫作「狀態」。若某格沒有資料,應說明橫線或空白代表甚麼,別讓顧客自行猜測。

先簡化結構,再處理複雜標題

合併標題看似節省空間,卻可能令表格難以維護及理解。世界資訊網協會的教學說明,不規則標題可利用行組、欄組建立關係,真正有多層標題時則可能需要明確的標題識別。實務上,第一步往往是把一張大表拆成兩張小表,各有直接的標題和簡單欄名。例如目錄把兩個地區、三種配送方式和多項收費條件塞在合併儲存格內;顧客或許更需要分開的本地送貨表與自取表,例外條件另外用文字說明。若複雜結構確有必要,應記錄每個跨欄標題涵蓋甚麼,並在每次更新內容後再驗證關聯。增加一種送貨方式可能令合併標題所指範圍錯位,而外觀未必立即顯示問題。內容編輯不應只靠顏色推測隱藏的標題關係。

用具體比較檢驗表格

假設公司在兩個地區、三個日子提供電器檢查。先草擬一張小表,標題寫明服務及適用期間;地區作行標題,各日子作欄標題。資料格可寫「上午」、「下午」或「暫無預約」,不要只放一個剔號。表格旁說明按時段後會進入預約流程,並須提交後才確認名額。請一名同事用鍵盤及屏幕閱讀器找九龍星期六的時段,另一名同事在窄螢幕放大文字後尋找同一答案,再與實際預約系統核對。若橫向捲動時某一天消失、響應式排版令標題遺失,或預約按鈕沒有可分辨名稱,就先修正才發布。這只是驗收情境,並非聲稱某家真實商戶當日一定有空缺。

一併驗收內容與操作

自動檢查可找出部分缺漏的表格語義,卻無法判斷標題是否真的回答顧客問題。應在已渲染頁面以鍵盤、放大文字,以及受眾實際使用的屏幕閱讀器驗收。移到表格中間的資料格,確認可以知道它屬於哪行哪欄;只測首行並不足夠。也要測有長篇中英標籤、沒有數值,以及包含預約或查看詳情操作的儲存格。若小螢幕以橫向捲動呈現表格,顧客仍須能到達所有欄位並理解對應標題。篩選後如表格會更新,標題、欄位與結果狀態必須同步。記錄測試輸入、預期答案、實際答案及修正方法。決定是否推出時,應看讀者能否得到相同的商業結論,而不是看截圖中的格線是否工整。

讓下一位編輯也能安全更新

表格的無障礙問題,很多時在日常更新而非首次開發時出現。商戶可能增加第四個價格級別、改地區名稱,或從試算表貼上新行,卻沒有檢查儲存格類型。應給編輯一份簡短規則:每個新行按相同次序提供相同欄位,行標題清楚識別項目;若收費單位改變,欄標題也要改。價格若未計稅,或只適用於指定日子,條件應放在相應數值附近,不能藏在幾個畫面以外的備註。選項到期時,應移除或清楚解釋,不要留下可被理解為零名額或缺漏資料的空格。編輯工作紀錄保存數字來源與最後核對日期。每次更新前,沿同一輔助工具閱讀路徑比較舊行及新行;這項小測試可防止表格在技術上有效,卻向顧客傳達錯誤商業資訊。

知道何時不應使用表格

若顧客只想知道某服務是否提供,便不應迫使他掃描二十欄資料。若按地區選擇後只剩一個相關結果,有標示清楚的篩選器加普通結果清單,可能比大表格更易理解。若內容是預約流程,則用有次序的步驟。表格最適合同時比較,多個儲存格都塞滿長文或例外條件時,優勢便消失。手機畫面狹窄時,不要只把字體縮到難以閱讀;可按服務拆成較小表格、提供有明顯提示且可操作的橫向捲動區,或在詳情頁重述必要上下文。無論選哪種介面,都要用英文和繁體中文測試同一顧客任務。中文標籤寬度與英文不同,雙語欄名也可能換行;須核對換行後標題不會在視覺上似乎屬於旁邊一欄。真正有用的結果,是顧客無須記住幾個畫面前的標題,仍能準確回答問題。

進行前先確認

  • 表格有明確標題並交代單位。
  • 每個資料格都保留正確的行列上下文。
  • 鍵盤、放大文字及屏幕閱讀器測試得出相同決定。

資料來源及延伸閱讀