網店應如何讓顧客選擇商品款式？

先釐清真正可出售的貨品

商品頁往往介紹一個系列，但倉庫交付的是某一件具體貨品。衣服可能同時有顏色和尺碼；手機殼則可能分手機型號和表面款式。設計按鈕之前，先列出實際出售的所有組合，以及根本不存在的組合。每個可出售組合都應有穩定的內部識別碼，並註明選擇後哪些資訊會跟着變：價錢、存貨提示、圖片、送貨安排及訂單項目。若某個顏色配某個尺碼不能購買，頁面不能把它當作可下單組合。介面只呈現商品資料，不能代替後端的交付依據。

先分辨每個選項是改變貨品身份，還是只記錄顧客偏好。刻字、禮物包裝及送貨備註通常屬於設定或服務要求；尺碼則通常屬於有庫存的具體貨品。兩者的驗證方式不同：漏選尺碼可能令執貨無法進行；非必填備註則可留空。把規則寫進商品資料，並在結帳及員工系統沿用。否則商品頁、購物車及執貨單可能各說各話。清晰的貨品識別亦方便日後處理退貨，員工可以查到購買當時選的是哪一個組合。

預設選項只應用於有合理業務原因、而且顧客一定看得見的情況。把第一個尺碼自動選好，容易令顧客在手機小畫面上未經考慮便買錯。以「請選擇尺碼」提示必填決定會更清楚。如果預設顏色只為展示照片，就要分清預覽與已完成購買選擇，加入購物車前仍須核實具體款式。顧客從購物車返回時，頁面應保留原來選項。改顏色時可保留仍可購買的尺碼；若新顏色沒有該尺碼，則應清除選擇並解釋原因。這項狀態規則值得獨立測試。

商品組合表亦會顯出一種常見邊界情況：某款暫時缺貨，不代表商店從來不賣這個組合。應分清「根本沒有出售」與「有出售但現時缺貨」。前者不應看似可以下單；後者可保留在頁面，誠實標示狀態並讓顧客另選貨品。若商店提供預訂，須說明實際出貨條件，讓顧客主動作出選擇，不能悄悄把預訂當作現貨。若員工在另一系統更新庫存，這項區分尤其重要，否則過時的瀏覽器頁面很容易把昨天的供貨情況當成今天的承諾。

讓每個選項都容易理解及操作

控制元件要配合選擇性質。尺碼或手機型號清單很長時，原生下拉選單可以較省位；選項較少時，可用附有可見文字的單選按鈕。W3C 表格指引要求相關單選按鈕以 fieldset 和 legend 組合，並為每個控制元件提供關聯標籤。組別問題可以是「尺碼」，個別選項則是「細碼」、「中碼」及「大碼」。若用色塊展示顏色，單靠一個圓形並不足夠；應加上可讀的顏色名稱與清楚的已選狀態。選中邊框或剔號也要在顏色相近、或顧客不能辨色時仍可分辨。

顧客改選項的一刻，頁面就應說明因此改變了甚麼。若藍色大碼較中碼貴，加入購物車之前便要更新並清楚標示價格。圖片換了，替代文字也應描述新展示的貨品，不能仍然寫上舊顏色。若送貨承諾視乎款式而定，條件要放在相應選項附近，不能在頁面頂部籠統宣稱。缺貨時也不要暗中替顧客換成最接近的選項；應清楚說明所選組合無法購買，讓顧客主動改選其他尺碼，或在商店確實提供相關服務時選擇到貨通知。

說明應在顧客出錯之前出現。W3C 建議預先指出必填項、格式及相關限制，並把個別說明連結至控制元件。款式選擇器可註明尺碼必填、尺碼指南如何開啟，以及某款訂製貨品若確有不同退貨條件，應在何處查看。重要條件不能藏於鍵盤難以打開的提示泡泡。測試時只用 Tab、Shift-Tab、方向鍵，以及原生元件適用的 Enter 或空白鍵操作；再用讀屏軟件檢查組別名稱、選項名稱和選中狀態是否完整讀出。

跟進一張訂單的完整流程

以假設例子說明：一間店出售深藍或米白外套，各有三個尺碼，但米白最大碼沒有存貨。顧客先選深藍最大碼，再轉米白。安全的互動應清除已不適用的尺碼，說明該組合沒有貨，並請顧客重新選尺碼。價格與相片須對應最後選出的米白款式。若顧客改回深藍，商店可決定是否恢復先前尺碼，但必須清楚顯示並重新驗證。這只是一個測試情境，並非聲稱任何真實商戶的銷量或轉換成效。

加入購物車時，瀏覽器應傳送選中的款式識別碼，由伺服器按當前商品規則和供貨情況再驗證。正式價格由伺服器計算；若價錢或存貨有變，須讓顧客看見並決定是否接受，不能只信瀏覽器畫面文字。購物車、結帳核對頁、確認電郵及員工執貨單都應保留同一款式名稱與屬性。若顧客瀏覽期間存貨變動，在操作時解釋原因，同時保留購物車其他項目。只顯示「發生錯誤」會令顧客不知道應改選、稍後再試還是聯絡客服。

小店毋須先辦大型研究，亦可做有針對性的驗收。列出所有組合並標記不能出售的組合，再各選一個情況測試：未選、有效選擇、改選後失效、價錢改變，以及供貨改變。請不熟悉商品的人分別用手機和電腦下測試單，再做鍵盤與讀屏測試。把畫面所見的選項，與儲存訂單中的款式識別碼及執貨文件逐一對照。合格標準是每個階段都指向同一貨品，而顧客不會被要求支付一個自己從未清楚選過的組合。

雙語商店還須分別以英文及繁體中文完成驗收。翻譯後的選項名稱仍須指向同一內部款式識別碼，價格及存貨變動在兩種語言下都要容易理解。不要以顯示文字本身當識別碼：文案、標點或翻譯可以改，但實物仍是同一款。也要檢查分享附帶已選選項的商品連結時，另一人打開後能否可靠地重建該選擇；若不能，就應清楚回到未選狀態。選擇只暗藏於某一個瀏覽器分頁，客服在另一裝置打開連結時，便可能看到與顧客不同的畫面。

選擇合適的首輪做法

先處理準確性，再考慮視覺細節。若商品只有兩三款，用標籤清晰的原生控制元件已可能足夠；若選項互相影響，開發工夫應投放於可靠的組合資料與狀態規則，而不是色塊動畫。對缺貨組合、價錢變動及重新選擇的處理方法，應以客服也能使用的文字記錄。衣物尺碼難以拿準時，尺碼表、實際量度資料或詢問途徑可協助決定，但內容必須對應真實商品，也不能假裝保證一定合身。

推出後可檢視顧客查詢與退貨原因，尋找誤解跡象，但不要憑單一數字斷言成功。加入購物車次數下降，可能只是選擇器阻止了誤按；次數上升，亦可能同時增加買錯尺碼的退貨。應連同選擇、購物車、付款、交付及客服資料一起判斷。即使分析工具暫時不可用，員工仍可記錄具體令人困惑的組合，並在測試環境重現。每次只改一項行為，較容易知道改善或故障原因。下一步可先挑一件款式較多的商品，整理組合表，再完成一張端到端測試訂單，然後才套用到整個目錄。