先釐清狀態要回答甚麼
不少訂單頁以綠、黃、紅色標籤方便員工掃視,但顧客真正需要的是明確答案:款項是否已收妥、貨品是否已預留、包裹是否已交給承運商、自己是否需要補做甚麼。先寫出每個狀態代表的事實和下一步,再決定是否加上顏色。顏色可以幫助辨認,不能成為唯一可見的訊息或操作提示。WCAG 2.2 的「使用顏色」準則處理的是這個問題,與兩種顏色之間的對比是否足夠屬於不同檢查。
為訂單頁、確認電郵及客服畫面建立共用的狀態字典。每個條目都應列出顧客看見的名稱、簡短解釋、觸發此狀態的實際事件,以及顧客下一步要做甚麼。例如顧客按了付款鍵,不能因此把「等待付款」改成「已付款」;「備貨中」也不可暗示已交付物流公司。內部系統可以有較細的作業代碼,但映射至顧客狀態時必須保持準確。若代碼本身含糊,醒目的彩色徽章也無法補救。
不要把所有狀態都壓縮成交通燈式的紅黃綠。「待處理」可能是等待銀行回覆、等候補貨、等待顧客選擇送貨方法,或輪到店方處理;這幾種情況的下一步完全不同。若要顧客行動,畫面應直接寫明「選擇送貨地址」或「重新付款」,並提供真的可用的操作。若正在由店方處理,就交代誰會更新狀態、顧客應留意甚麼通知;沒有可靠承諾時不要自創完成期限。即使所有徽章變成同一色,訊息仍應成立。
用文字補足視覺提示
把狀態文字直接放進標籤,或緊貼標籤顯示,不要只藏在滑鼠懸停說明內。觸控顧客容易看不到懸停內容;單靠色塊再叫人查閱遠處圖例,也增加記憶負擔。可用「等待付款」、「備貨中」、「已交付物流」等簡短標籤;若短句仍可能誤導,再補一句解釋。圖形或圖示可以提供另一種視覺線索,但須檢查意思是否清楚,以及文字是否同步表達。W3C 的 G14 技術以文字補充顏色作為可行例子,並沒有規定所有網站採用同一款徽章。
可見文字仍只是其中一部分。若讀屏器只遇到彩色圓點,卻聽不到訂單狀態,資訊對部分顧客仍然缺席。可行時使用頁面內的真文字;若圖示帶有獨立意思,給它合適的可讀名稱,但已有相鄰文字時不要重複朗讀同一句。應測試實際呈現的網頁,而非只看設計稿,因為樣式、圖示元件與狀態切換都可能改變輔助技術取得的內容。操作按鈕本身也要寫出用途,不能要求顧客只看紅色或綠色來猜下一步。
同一狀態在不同畫面應使用一致用語。客服說「處理中」,顧客頁面卻寫「已確認」,容易令人誤以為包裹已在運送。團隊要議定甚麼系統事件會更新文字,並測試延遲和狀態倒退。如果付款由待確認變為失敗,應顯示明確原因與安全的下一步;如果物流公司未能接收包裹,不能繼續保留綠色「已寄出」標籤,應更新狀態並標示更新日期。這既是介面控制,也是編輯核對工作。
以一張訂單逐步檢查
假設顧客選擇到店自取。結帳後先看到「已收到訂單;等待確認付款」;店方收到成功付款事件,才改為「已付款;準備自取」;員工確實把貨品標記為備妥後,畫面才出現「可到店領取」及領取指示。這只是示範狀態,並非描述任何指定商戶或支付服務的實際安排。檢查重點是每次轉換都有相應證據,文字亦只描述已發生的事情。顏色可以方便掃視,但把畫面轉為灰階後,顧客仍須理解全程。
再看例外:付款成功,但門市暫時找不到可供領取的貨品。顧客不應只看到一個沒有解釋的紅點,而應看到如「自取延誤;我們正核實存貨」的真實狀態,以及聯絡店方的方法。退款或替代貨品尚未議定,就不要寫成已完成。這個例子說明單一顏色會掩蓋不同責任。送貨延誤或需要補充地址資料亦然:寫清楚真正情況、誰需要行動,並避免把店方造成的問題推給顧客。
最後要核對整條中英文通知鏈。英文若寫「可領取」,中文卻誤寫成「已領取」,代表兩個不同事件,不是語氣問題。比較兩種語言實際表達的狀態,再檢查電郵主旨、內容、訂單詳情、帳戶紀錄及客服說法。手機版卡片若把字句縮短,也須保留原有區分。顧客把頁面列印或截圖轉發給家人時,狀態文字仍應清楚,不應只能依賴當時網頁上的顏色圖例。
移除顏色後如何驗收
驗收時用實際會出現的狀態組成測試集,包括等待、成功、需要顧客行動,以及作業例外。把截圖或瀏覽器畫面轉成灰階,請不熟悉內部代碼的人說出發生了甚麼、下一步會做甚麼。再用鍵盤與讀屏器檢查狀態及相應操作是否可讀。這是實用的編輯驗收,不會取代對比度或動態狀態通知等其他無障礙檢查。記下出問題的標籤及觸發事件,讓團隊修正狀態映射,而不只是把徽章換另一種顏色。
上線前的判斷可以很直接:即使分不清徽章顏色,顧客仍應知道目前狀態、這個狀態根據甚麼事實,以及自己是否要行動。若做不到,就改寫標籤或解釋,必要時調整狀態出現的時機。系統更新後要重新檢查英文及繁體中文,因為新增的物流代碼可能悄悄帶來只靠顏色區分的狀態。把狀態字典留在產品團隊的日常維護流程,讓新結帳、自取及送貨功能沿用同一套意思。
容易漏掉的還有訂單列表縮略列、通知預覽、列印版,以及客服接聽電話時使用的內部畫面。完整訂單頁可能有文字,重用同一元件於細卡片時卻只剩彩色圓點。請團隊追蹤一張示範訂單在各畫面的顯示,逐一對照狀態文字。窄版如需縮短標籤,應先定下仍能辨認事件的短寫,而不是任由元件截斷。各畫面不必長得完全一樣,但顧客不論在哪裏看到狀態,都應得到一致的判斷依據。
進行前先確認
- 每個狀態都有可見文字說明意思及下一步。
- 同一狀態在英文及繁體中文表達相同事件。
- 灰階、鍵盤及讀屏器測試亦包括例外狀態。


