先判斷地區選項究竟改變甚麼
「地區」選項可能代表本次訂單的送貨地點、目前瀏覽的商品市場、介面語言,或價格顯示貨幣;這些意思不能混為一談。設計控制項前,先寫下它會改變甚麼資料、保留甚麼資料,以及顧客會否離開目前頁面。如果同一個下拉選單暗中同時改變四件事,顧客以為只選送貨區域,購物車或看到的價格卻可能突然變動。標籤應說明選擇的真正範圍。本文處理操作可預期性,並不建議商戶一定要支援哪個市場。
WCAG 2.2 的 3.2.2 準則處理控制項設定值改變後的情況。顧客選擇下拉選項、勾選方格或輸入資料,都在改變控制項設定;除非在使用前已告知顧客,這種改變不應自動引發情境轉換。情境轉換可能包括跳至另一頁、開新視窗、移動焦點,或大幅改變頁面內容以致原本意義變了。準則並非禁止所有即時更新:在原位置刷新送貨估算未必構成情境轉換,但更新結果仍應讓顧客明白。
選擇某個值與啟動一個名稱清楚的按鈕或連結並不相同。「套用地區」按鈕讓顧客在跳轉前有一個明確確認時刻。W3C 的說明亦區分改變表單控制項的設定,以及啟動會提交或導航的按鈕。若切換地區可能重設購物車或替換整個商品目錄,按鈕通常是容易理解的設計選項。按鈕文字仍須準確描述後果;商戶也應先決定原有商品如何處理,不能靠按鈕掩蓋會造成損失的變動。
選擇可預期的操作方式
若地區只影響小範圍結果,可考慮讓顧客留在原頁。例如選擇香港送貨區域後,在選單旁更新可用送貨方法及估算;保留已選值,並以文字顯示新結果,表格其他部分亦應繼續可用。若估算仍在計算,就要明說,不能把舊數值當作最新結果。這種方式有助避免迷失,但不代表可以忽略費用準確性;最後送貨費仍須在合適的結帳步驟確認。
若選項會切換整個市場或語言,跳轉頁面可以合理。較直接的做法是選單後接「切換至新加坡商店」或「更改語言」等按鈕。如果購物車、已填表格或商品供應情況會變,應在控制項之前簡短交代。若業務確實需要選完即跳轉,W3C 的 G13 技術提供另一條路:顧客到達選單前,就先告知選擇後會立即換頁。說明應排在選單之前,並盡可能與欄位建立程式關聯;跳轉後才出現提示已經太遲。
提示要說明真實後果,而不只是「頁面可能更新」。例如「選擇市場後會立即開啟該市場的商品目錄;原購物車內無法在當地購買的貨品須先由你檢查」,比「結果可能不同」更能幫顧客作決定。提示須對每個選項都準確,包括再次選擇目前市場。如果不同市場的商品、貨幣及送貨規則有差異,影響購買時就應分別交代。系統若沒有保留購物車的能力,便不能在文案中承諾會保留。
用顧客改選地區的情境推演
假設顧客已把商品加入購物車,結帳時原本選香港送貨,後來改選海外地址。清楚的介面先說明「送貨地區」會影響可用服務及費用估算,不會順便改變介面語言。若系統能原頁重算,就顯示新的送貨選擇,並解釋哪些貨品不能寄送;若必須轉往另一市場網站,選擇前就要提示,並由顧客按切換按鈕,或明說一選即跳轉。這是設計推演,並非任何現有商店的營運聲稱。
還要測試中途改選。顧客可能已輸入地址或禮物留言;地區轉換後,這些資料是保留、丟棄,還是需要修正?若離開頁面會失去輸入內容,操作前應提示並提供留下的機會。無聲跳轉會令顧客重做,也可能令訂單摘要前後不一致。瀏覽器「返回」同樣要檢查:回到舊頁時不能把已過時的運費估算顯示成最終價格。即使網絡出錯,業務規則與頁面說明仍要保持一致。
中英文應按實際行為核對,而不是只看逐字翻譯。英文提示若寫「更新本頁」,中文卻寫「開啟新頁」,兩者不可能同時描述同一個實作。要檢查標籤、提示出現位置及讀屏器讀出的欄位說明。翻譯後的選項可能較長並換行,但仍須與正確控制項相連。提示應放在桌面及手機共用的元件內,不要只放在桌面版側欄。觸控、鍵盤及讀屏器使用者都應在選擇前接觸到相同後果。
驗證操作是否可預期
驗收時找一位不熟悉程式設計的測試者,在改選前問他預期甚麼會變,然後與實際去向、保留資料、價格及供應情況比較。用鍵盤、滑鼠或觸控操作,再以讀屏器重做。尤其要留意只用 Tab 鍵把焦點移入欄位時,頁面會否突然跳走;W3C 另一項「取得焦點」準則指出,控制項單是取得焦點不應引發情境轉換。顧客應能先查看選項,而不會意外失去原本位置。若有落差,記下觸發問題的選項及狀態。
上線前要確認標籤、選擇前說明及實際行為完全一致。商戶可按任務選擇原頁更新、確認按鈕,或事先說明的一選即跳轉;不同方式有不同用途。關鍵是改變欄位設定後,不會把顧客帶到意料之外的地方,對目前購買的影響也應在發生前說明。新增市場或送貨方式後要再驗證,因為原本只更新價格的選單,可能隨目錄改動而變成導航控制。產品及內容負責人應共同維護這個決定。
邊界情況最容易暴露隱藏跳轉:再選一次目前地區、選擇不支援的目的地、由送貨地區改成只可自取的地區,以及切換市場後使用瀏覽器「返回」。每種情況都記下焦點是否留在控制項、是否有訊息出現、訂單總額是重新計算還是等待確認。不支援的地區應解釋原因並讓顧客改選,而不是無聲地跳回原頁。這些測試能找出設計預期與實際表單行為的差異,也避免把每一次動態更新都誤判為違反準則。
進行前先確認
- 選項標籤說明會改變甚麼。
- 任何自動跳轉都在選擇前說明。
- 購物車、已填資料及價格變動與兩種語言提示一致。


