Filter 增加通常是好意:每個部門都想讓顧客用自己的商品屬性尋找。但二十個 filter 中有十個只有一個值,顏色又有多種拼法,介面會更難用,也讓商品資料問題直接暴露。整理應從顧客的比較任務和目錄品質開始。
先列出所有 filter、來源欄位、可用商品比例、值數量、使用率和 owner。
保留能改變決策的屬性
Price、size、color、availability、brand、compatibility、material 或功能是否重要,依品類而異。訪談、站內搜尋、客服和可用性測試找出顧客真正用來排除商品的條件。內部報表欄位不一定適合前台。
每個 collection 可有不同 filter set。服飾需要尺寸,家電需要規格;全站共用一長串會產生大量無效控制。
先清理值再改 UI
合併「黑、黑色、Black」、統一單位、大小寫和空值。顏色可映射到標準值,仍保留商品原始描述。數值使用正確型別與範圍,不用字串排序讓 100 排在 20 前面。
資料 owner、驗證和匯入規則放進 Shopify Metafield 設計。前台 workaround 不能永久代替來源修正。
控制值數量和呈現方式
少量重要 values 用 checkbox/chips;大量品牌或型號提供搜尋與「顯示更多」;價格、尺寸等可用 range,但顧客仍能理解實際可售值。顯示每個 value 的 result count,零結果值 disabled 或隱藏要有一致規則。
長標籤不截成無法辨認縮寫。色票也提供文字與選中狀態,不能只靠顏色。
行動版使用可回復 drawer
入口顯示已選數量,drawer 內依重要性排序,提供目前結果數、套用、清除與逐項移除。選擇過程可即時更新 count,但不要每點一次就關閉或讓頁面跳動。返回集合後保留 scroll position。
Focus、背景捲動、安全區和固定按鈕依 Shopify 手機版驗收測試。
URL 與 SEO 需要治理
選定 filter 反映在可分享 URL,返回和重整能恢復。參數順序 canonicalize,避免同一組合多個網址。不是每個組合都該索引;高搜尋需求可建立有內容的策展 collection,其餘依 SEO 策略限制 crawl/index。
移除或改名 filter value 時處理舊 URL,不讓廣告和內鏈持續導向零結果。
用任務成功評估
Filter click 高可能代表有用,也可能代表顧客需要多次嘗試。看 selection、zero result、remove、time to product、product click、add-to-cart 和返回,搭配任務測試。分品類、裝置和 market 分析,不用全站平均。
處理多語與市場差異
Filter label、value 和排序都屬於市場內容。繁中顧客理解的「米白」不一定能直接沿用英文值,尺寸與單位也可能不同。資料層保留穩定 ID,前台由 locale 顯示核准名稱,URL 則採一致且可治理的值,避免翻譯一改就讓既有連結失效。
市場可售品不同時,count 必須依當下 market 與庫存計算。不能顯示某個 value 有十件,點入後才因配送或價格規則變成零件。跨市場共用 Search & Discovery 設定前,先驗證每個 collection 的資料 coverage 與商品發布狀態。
先測最困難的組合
驗收不要只點單一 filter。測兩到四個條件交叉、快速切換、返回、分享 URL、清除一項與清除全部;也要測商品下架、value 改名和索引延遲。大量商品的 collection 需觀察回應時間與 layout shift,避免每次選擇都讓清單失去位置。
建立固定任務,例如「找出可配送到台灣、指定尺寸、預算內且有庫存的商品」。請參與者說出為何選某個條件,能看出標籤是否符合顧客語言。任務完成後追問是否信任結果,因為 count 或狀態不一致即使最後找到商品,也會降低後續使用意願。
建立新增與退場流程
新增 filter 需有顧客問題、資料 coverage、值治理、UI、SEO 和 owner。上線後設定回顧日,低使用且無關鍵任務就移除或降到「更多」。商品屬性改變時同步更新 index 和內容。
每季抽樣最複雜 collection,用真實手機、鍵盤、零結果和多選組合回歸。篩選器的價值是縮短選擇,不是把所有資料庫欄位展示給顧客。