多數人以為，電商篩選器要做得夠詳細、選項夠多，訪客才篩得準。但可用性研究反覆得出的結論卻不是這樣，真正決定訪客會不會用完篩選器一路篩到底、還是選到一半就放棄的，幾乎不是選項多寡，而是每個選項旁邊有沒有先告訴他，選了這個之後還剩幾件商品可看。
Baymard Institute 的可用性研究直接點出，在篩選介面上顯示每個選項旁的符合商品數量，是能為篩選 UI 帶來的單一最高影響力改善之一。同一份研究也指出，多數電商網站的篩選體驗，只能被評為普通到差，問題往往不是功能不夠齊全，而是漏掉這種訪客真正在意的小細節。這也是為什麼電商篩選器設計值得重新檢視，關鍵不在選項排得夠不夠多，而在幾個容易被忽略的環節。
接下來就先從這個影響力最大的問題講起，再一路拆到訪客卡關的其他幾個環節。
原因一：選項旁少了剩餘商品數，訪客只能用猜的
訪客點進篩選器之前，其實不知道點下某個選項後畫面會變成什麼樣子，可能篩出兩百件，也可能空空如也，他只能用猜的。這種不確定感本身就是猶豫的來源，猶豫久了，很多人乾脆不篩，直接關掉篩選面板繼續往下滑，或是乾脆離開。
真正能解決這種猶豫的做法，是把「選了這個之後還剩幾件商品」這個數字，直接標在每個篩選選項旁邊，而且要在訪客按下去之前就看得到。這個數字也不能是選前選後都不變的假數字，訪客一旦勾選了某個條件，其他還沒被選的選項旁邊的數字，也得跟著即時更新，反映目前已選條件下真正剩下的商品範圍。數字如果一直維持原本的樣子沒有跟著變，訪客很快就會發現這個功能根本沒在動，信任感也會跟著流失。
還有一種情況常被忽略，某個篩選條件疊加下去之後，其實已經完全篩不出任何商品，這時最糟的做法是照樣讓這個選項亮著、可以點，訪客點下去才發現是一片空白的結果頁。比較合理的處理方式，是把這種完全篩不出結果的選項用灰階顯示，或是乾脆先隱藏起來，讓訪客一眼就知道這條路走不通，不必親自撞一次空頁面才知道。
同一類別要能複選，跨類別才該互相限縮
剩餘商品數顯示對了，篩選邏輯本身若還是設計錯，訪客照樣會卡關。同一個篩選類別裡面，例如顏色這一類，訪客常常想同時選兩三個值，藍色或黑色都可以接受，這時類別內部就該用「或」的邏輯處理，只要商品符合其中一個顏色就該顯示。但不同類別之間疊加的時候，邏輯要反過來，顏色、價格、品牌一旦都各自選了條件，彼此之間就該用「且」的邏輯互相限縮，商品要同時符合所有已選類別的條件才會留下來。
把這條邏輯講反，是很常見卻很少被講清楚的錯誤。假設訪客先選了藍色，畫面上只顯示藍色商品沒問題，但他接著想再加選黑色，如果系統把顏色類別內部也當成「且」邏輯處理，畫面反而會變成空空如也，因為沒有商品同時是藍色又是黑色。訪客通常不會知道背後的邏輯出了問題，只會覺得篩選器壞了，或誤以為選第二個顏色前得先把第一個取消掉才行。
介面設計上也要配合這條邏輯，同一類別內能複選，就該用核取方塊而不是單選鈕的樣式呈現。單選鈕在訪客的認知裡代表這裡只能選一個，如果類別本身允許複選卻套用單選鈕的樣式，等於介面本身就在誤導訪客，讓他以為自己沒有同時選兩個顏色的空間。Baymard 的研究也指出，大約一成四的電商網站不允許同一類別內部多選，這正是導致訪客放棄篩選的常見原因之一。
原因二：捲兩頁後，已選條件就從畫面上消失
篩選邏輯對了，訪客也還是可能因為另一個原因半途放棄，那就是已選條件在瀏覽過程中不見蹤影。訪客往下滑到商品列表的第二頁、第三頁之後，如果已經勾選的篩選條件整組從畫面上消失，他很容易忘記自己到底選了什麼，甚至開始懷疑篩選是不是根本沒生效。這種掌控感不見的狀態，比篩選結果不夠精準更容易讓人直接放棄，因為訪客連自己現在站在哪一個篩選狀態下都搞不清楚。
更常發生的情況是，訪客點進某件商品的詳細頁面看了一眼，按上一頁想回到列表，結果篩選條件整組被重置，得從頭再選一次。這種來回確認的挫折感，累積幾次之後，訪客乾脆放棄用篩選功能，回去用最原始的方式一頁一頁往下滑。要避免這種情況，篩選狀態應該反映在網址參數上，這樣不管是重新整理頁面還是按上一頁返回，系統都能從網址讀回訪客原本選好的條件，不必重新歸零。
桌機和手機在呈現已選條件的做法上也不太一樣。桌機畫面夠寬，常見做法是把已選條件固定顯示在左側側欄，捲到再下面也不會不見。手機螢幕小，比較適合把已選條件做成頁面上方一排可以橫向捲動的標籤，每個標籤都能單獨點掉，不必整組清除重選。不管哪一種呈現方式，都該同時提供「清除全部」跟「只清除某一個類別」這兩種粒度的控制，讓訪客可以微調某一個條件，而不是每次都要砍掉重練。Baymard 的研究指出，大約兩成的電商網站沒有讓已選篩選條件在瀏覽過程中持續可見，這是相當常見卻很容易被忽略的缺陷。
原因三：所有商品共用同一套篩選條件
已選條件的呈現顧好了，篩選條件本身夠不夠貼近商品類別，是另一層常被忽略的問題。訪客搜尋筆記型電腦的時候，如果側欄裡出現的篩選條件跟搜尋一件外套時一模一樣，只有品牌、價格、評分這幾個放諸四海皆準的通用屬性，真正會影響他決策的記憶體容量、處理器速度這類品類專屬屬性，卻完全找不到，這才是最容易讓訪客放棄篩選的根本原因。
訪客遇到這種情況的反應，通常不是立刻放棄搜尋，而是先假設這個選項一定藏在某個沒展開的分類裡，反覆點開、收合每一個側欄區塊尋找。這個反覆翻找的過程會拖走不少時間，訪客耐心用盡之後才會真正放棄篩選功能，轉去用搜尋框重新打關鍵字，或是乾脆離開網站找別的地方買。換句話說，後果不只是找不到想要的篩選條件，還會拖長整段購物流程的時間成本。
Baymard 的研究發現，大約四分之一的桌機電商網站、四成的行動版網站，即使有對應商品關鍵屬性的篩選選項，也常因為標籤含糊不清而被訪客直接略過，等於變相少了這個品類專屬的篩選功能。NN/g 也提到，篩選類別必須貼合商品領域本身的特性，才能真正對應到訪客做決策時實際會考量的因素，而不是每個商品分類都套用同一份固定清單。
桌機即時更新結果，手機卻少了一顆「顯示 N 件」按鈕
篩選條件對了、邏輯也對了，接下來卡住訪客的，是裝置差異被忽略的問題。桌機螢幕夠大，訪客勾選一個篩選條件之後，商品列表通常會立刻跟著變化，這種越快回饋越好的即時反應，在桌機上是訪客期待的體驗，因為畫面空間夠，重新排列不太會干擾到訪客正在做的其他操作。
但手機螢幕小，如果把桌機這套即時刷新原封不動搬過去，問題反而會變得更明顯。訪客在手機上通常想連續勾選好幾個條件，例如同時選顏色跟尺寸，如果每點一下畫面就整個跳動重新整理一次，訪客在還沒選完的狀態下，眼前的畫面卻不斷變來變去，反而會打斷他正在進行的多選動作，體驗比桌機更糟。
比較合理的做法，是在手機版篩選面板上放一顆明確的送出按鈕，而且這顆按鈕要先預告篩選後大概會出現幾件商品，例如寫著「顯示128件」這樣的文字。訪客看到這個數字，送出前就有心理準備，知道自己選的條件會篩出多少東西，不會等到按下去才發現篩過頭、篩到只剩兩三件商品。Baymard 針對桌機即時篩選與手機明確送出按鈕的行為差異做過研究，結果同樣支持這種依裝置區分呈現方式的做法。
原因四：價格滑桿只切一段線性刻度，選到後段全部擠在一起
裝置差異顧到了，價格區間滑桿又是另一個技術性很強、卻常被隨便做的元件。多數商品的價格其實會集中在某一個區間，只有少數幾件特別貴的極端值，如果滑桿的刻度是整條線性平均切分，訪客想選中間那段最常見的價格帶時，滑桿會變得極度敏感，稍微拖一點就跳過好幾百元，很難精準停在想要的數字上。反過來，訪客想選最貴的那一小撮商品時，又得把滑塊一路拖到底才碰得到，中間大半段滑桿反而是浪費的空間。
比較合理的做法，是讓滑桿刻度依商品實際的價格分布做非線性切分，把訪客最常用到的那段價格帶，分配到比較大的滑動空間，少數極端值則壓縮在滑桿的兩端，這樣不管訪客想選常見價格還是極端價格，都能相對精準地停在想要的位置。
雙滑塊的樣式，也就是同時有最低、最高兩個滑動把手的設計，常常被訪客誤讀成只有一個可以拖動的滑塊。Baymard 的測試發現，超過半數的受測者會誤判雙滑塊介面，以為只能設定單一數值。要降低這種誤讀，兩端把手最好做出方向性的視覺提示，例如把手上加一個朝內或朝外的箭頭圖示，同時搭配一組文字輸入框當作備援，讓訪客可以直接輸入數字，不必勉強用手指精準拖動。Baymard 的另一份調查也指出，前五十大電商網站裡，仍有八成三使用線性刻度，顯示這個問題在業界相當普遍。
原因五：篩選標籤用內部行話，訪客看得懂卻猜不對分類
滑桿的技術問題排除了，命名這個看起來最不起眼的環節，其實也很容易讓訪客卡關。篩選類別的命名，如果用的是公司內部習慣的商品分類用語，訪客即使每個字都認得，也常常猜不出該點哪一個分類。舉個常見的情境，訪客想篩涼鞋，側欄裡卻同時有「款式」跟「商品類型」兩個標籤，兩個聽起來都有可能收納涼鞋這個選項，訪客得先賭一個點進去看，猜錯了才回頭再試另一個，甚至乾脆放棄側欄篩選，改去搜尋框打關鍵字繞一圈。
這種字看得懂、但不確定該點哪個分類的落差，正是行話造成的隱形放棄點。訪客不會停下來想這是命名問題，他只會覺得這個網站的篩選器不好用，下次乾脆跳過側欄直接用搜尋。除了分類本身的命名，類別內部的選項如果用只有公司內部才懂的代號，例如顏色以外那種抽象的代稱，對訪客來說等於是一串沒有意義的黑箱標籤，不會轉換成任何實際的篩選行為。
NN/g 針對篩選類別命名做過用戶測試，發現篩選類別必須可預測、不能帶行話，才能讓訪客一眼就對應到自己要找的商品，前面提到的鞋類篩選裡「款式」與「商品類型」反覆猜測的情況，正是研究裡實測觀察到的典型案例。
原因六：篩選項目一字排開，沒有分輕重順序
名稱取對了，篩選類別排在側欄裡的先後順序，也是設計的一部分，不是把後台商品規格表的欄位順序照搬就好。品牌、價格、評分、尺寸這類多數訪客都會用到的通用條件，該放在篩選面板最上面，容易一眼看到；鏡頭接環、光圈範圍這種只有進階買家才看得懂的專屬條件，則適合收合放在下面，或是預設先收起來，不要一打開篩選器就被一長串專有名詞嚇退。
順序的判準應該是對多數訪客的相關性，而不是固定公式。少數情境下，某個專屬屬性反而才是決定性因素，例如訪客買洗衣機的時候，比起顏色，大概更在意容量夠不夠洗一次全家的衣服，這種時候就該把容量這個屬性往前提，而不是死守通用條件永遠在前面這條規則。NN/g 對篩選類別依重要性排序有相關說明，並用相機鏡頭這個類目做過案例，顯示同一套排序原則放到不同商品類別，前面該放的屬性其實會不一樣。
手機篩選跳到另一個畫面，選完得回頭才知道結果有沒有變
排序顧好了，手機版篩選器怎麼「裝」，是體驗差異又更大的一環。比較早期的做法是，訪客點下篩選圖示之後，畫面整個跳到一個獨立的篩選頁面，選完條件得按返回鍵，才能看到商品列表有沒有跟著變化。這種做法等於逼著訪客在兩個畫面之間來回確認，選完了不確定有沒有效，得跳回去看一眼，不滿意再跳回來調整，一來一往很容易讓人失去耐心。
後來比較常見的做法，是把篩選面板做成從畫面側邊或底部推出的浮層，有些人稱作抽屜式設計，篩選面板浮在商品列表上方，但背景還留著一部分原本的結果可以被看到。訪客邊調整篩選條件，眼角餘光就能瞥到背景結果在跟著變化，不必整個畫面跳走再跳回來。
不管做成哪一種浮層樣式，篩選面板上都該露出一個固定可見的「目前符合筆數」提示，而且這個數字不能被捲動中的篩選清單擋住，訪客往下滑看更多篩選選項時，還是要隨時看得到這個數字在更新。NN/g 針對行動裝置的篩選設計做過研究，同時比較了獨立畫面式與浮層抽屜式兩種容器，結果顯示獨立畫面式確實會造成訪客來回確認的問題，浮層式則能讓篩選跟結果同時被看見。
原因七：篩選出來的網址養出大量雷同頁面，拖累搜尋引擎收錄
前面談的都是訪客眼睛看得到的體驗，但電商篩選器設計還有一層容易被忽略的技術面，值得一併考慮。訪客每組合出一種篩選條件，系統背後往往就對應出一組新的網址參數，商品屬性一多，可能組合出來的網址數量會迅速暴增，而這些網址對應的頁面內容，彼此之間雷同度通常極高，可能只差一兩件商品的排序。
這些數量龐大又高度雷同的網址，如果沒有妥善處理，搜尋引擎的檢索資源就會被浪費在反覆爬這些內容重複的頁面上，排擠掉真正該被優先發現的新商品頁或內容頁。這也是為什麼篩選器設計不能只顧視覺跟互動，還得一併考慮這些選項組合出來的網址，會不會反過來拖累整個網站被收錄的效率。
Google 官方文件針對這種多面向導覽網址的檢索作業，提出幾種常見處理方向。可以用 robots.txt 封鎖那些不需要被收錄的篩選網址，也可以在篩選頁面加上 canonical 標籤，指回未篩選的基礎分類頁面，告訴搜尋引擎這一組篩選結果的權重該歸給哪一個原始頁面。另外，篩選組合完全沒有結果的時候，伺服器該回傳的是 404 這種明確的無結果狀態，而不是導去一個共用的錯誤頁面，才不會讓搜尋引擎誤判成有內容的正常頁面。這一步不必做到工程細節的教學程度，但至少要知道，篩選器設計這件事跟網站能不能被好好收錄，其實是相關的兩件事。
如果沒辦法一次把上面這幾個環節都改完，不妨先從投報率最高的兩件事下手。第一件事，是在每個篩選選項旁邊補上即時更新的剩餘商品數，讓訪客在按下去之前就先知道會發生什麼事；第二件事，是把手機版的即時刷新換成一顆會預告結果筆數的送出按鈕，不要把桌機那套越快回饋越好的邏輯原封不動搬到手機上。研究反覆指出，這兩處正是投入產出比最高的改善，其餘像是標籤命名、排序邏輯、滑桿刻度、行動版容器樣式，乃至於篩選網址的收錄處理，都可以之後再逐步迭代。
選項再多，終究比不上讓訪客一眼看清楚選了會發生什麼事。電商篩選器設計真正拚的，是這份掌控感，也是決定訪客會不會篩到底、還是選到一半就轉身離開的真正分野。