如果做得正確,過濾器允許用戶縮小一個網(wǎng)站選擇的成千上萬的產(chǎn)品只有這幾項匹配他們的特定的需求和利益。 然而,盡管它是一個中央方面用戶的電子商務(wù)產(chǎn)品的瀏覽,大多數(shù)網(wǎng)站提供一個死氣沉沉的過濾經(jīng)驗。 事實上,我們2015年指標(biāo)顯示,只有16%的大型電子商務(wù)網(wǎng)站提供一個相當(dāng)好的過濾經(jīng)驗。
鑒于過濾的重要性,我們——整個團隊Baymard研究所——在過去的九個月研究用戶如何瀏覽、篩選和評估產(chǎn)品在電子商務(wù)產(chǎn)品列表。 我們檢查了這兩個搜索,category-based產(chǎn)品列表。 本研究的核心是一個大規(guī)模的可用性研究?測試19領(lǐng)先的電子商務(wù)網(wǎng)站?與真實的最終用戶,自言自語的協(xié)議。
盡管測試數(shù)百萬美元的網(wǎng)站,測試遇到了以上?700年可用性問題?相關(guān)產(chǎn)品列表,過濾和排序。 所有這些問題進行了分析和壓縮成93簡潔的產(chǎn)品列表可用性指南,35的特定于過濾可用性設(shè)計和邏輯。
(?查看大版本?)
我們隨后?標(biāo)準(zhǔn)的50個美國主要電子商務(wù)網(wǎng)站?在這些93年指南排名網(wǎng)站和學(xué)習(xí)主要電子商務(wù)網(wǎng)站設(shè)計和實現(xiàn)他們的過濾和排序功能。 這導(dǎo)致了一個基準(zhǔn)數(shù)據(jù)庫超過4500基準(zhǔn)數(shù)據(jù)點電子商務(wù)產(chǎn)品目錄設(shè)計和性能,其中1750是特定于過濾的經(jīng)驗。 (您可以查看網(wǎng)站的排名,在公開的部分實現(xiàn)?產(chǎn)品列表和過濾?基準(zhǔn)數(shù)據(jù)庫)。
在本文中,我們將仔細查看一些相關(guān)的研究成果?用戶的過濾經(jīng)驗?。 更具體地說,我們將深入研究以下見解：
只有16%的主要電子商務(wù)網(wǎng)站為用戶提供了一個良好的過濾的經(jīng)驗。 這通常是由于缺乏重要的過濾選項,但是從基準(zhǔn)數(shù)據(jù)很明顯,可憐的過濾也因果邏輯和接口問題。
42%的頂級電子商務(wù)網(wǎng)站缺乏范疇特定濾波器類型數(shù)的核心產(chǎn)品類別。
20%的頂級電子商務(wù)網(wǎng)站缺乏主題過濾器,盡管銷售產(chǎn)品具有明顯的專題屬性(季節(jié)、風(fēng)格等)。
那些處理compatibility-dependent產(chǎn)品的網(wǎng)站,32%缺乏兼容性過濾器(例如,智能手機銷售情況下沒有一個過濾器設(shè)備類型或大小)。
測試表明,10 +過濾值需要截斷,不過32%的網(wǎng)站要么截斷設(shè)計不足,導(dǎo)致用戶忽略截斷值(6%)或使用測試發(fā)現(xiàn)更加麻煩,內(nèi)聯(lián)可滾動區(qū)域(24%)。
只有16%的網(wǎng)站積極推動重要過濾器上的產(chǎn)品清單(先決條件時更多地依靠過濾器不是類別)。
過濾性能變化很大的行業(yè),電子產(chǎn)品和服裝的網(wǎng)站通常遭受不足過濾器(每個他們獨特的上下文),而硬件網(wǎng)站和大規(guī)模商人率先過濾的游戲。
在本文中,我們將介紹這些?七個過濾的見解?,顯示你的可用性測試結(jié)果,檢查基準(zhǔn)數(shù)據(jù)和提供最佳實踐案例為創(chuàng)造一個良好的電子商務(wù)經(jīng)驗過濾。
1。 只有16%的網(wǎng)站提供一個良好的過濾的經(jīng)驗
如果做得正確,過濾器允許用戶只看到他們的個人需求和興趣相匹配的產(chǎn)品,如某一特定類型的產(chǎn)品或風(fēng)格或某些特性或?qū)傩浴?例如,用戶可能希望看到“夾克”所有產(chǎn)品類別為“男性”(性別過濾器),“冬季”賽季(主題過濾)和可用的大小顏色“黑色”和“M”(變異過濾器)。 電子商務(wù)的相當(dāng)于走進物理存儲和要求銷售人員“黑人男性的,冬天夾克大小中等?！?/p>
然而,這些美妙的過濾的先決條件是有一個廣泛的過濾器可用于用戶鉆到特定的特性和產(chǎn)品方面,他們和他們的特定的利益很重要。 大多數(shù)電子商務(wù)網(wǎng)站已經(jīng)達不到這里。 然而,一個好的過濾需要一定經(jīng)驗過濾器不僅存在,但將在用戶容易理解的方式和互動,邏輯遵循用戶的期望。
(?查看大版本?)
基準(zhǔn)測試美國票房收入最高50電子商務(wù)網(wǎng)站在93年產(chǎn)品目錄指南中確定可用性研究顯示一般平庸的性能。 分析1750分?jǐn)?shù)具體過濾可用性、性能和過濾過濾邏輯界面顯示:
34%的網(wǎng)站過濾體驗不佳,嚴(yán)重限制其用戶的瀏覽產(chǎn)品——即使他們最基本的產(chǎn)品需求;
50%的網(wǎng)站提供通行的過濾體驗——絕不是好和可以改進的幾個方面;
只有16%的網(wǎng)站提供一個良好的過濾的經(jīng)驗,有足夠的過濾類型,可提供一個平衡的過濾設(shè)計和過濾邏輯,非常符合用戶期望(雖然,即使其中一些好的網(wǎng)站,大多數(shù)仍有改進的余地)。
在章節(jié)2、3和4在這篇文章中,我們將介紹三個核心過濾類型的測試結(jié)果通常導(dǎo)致問題:范疇特定過濾器,過濾器和兼容性主題過濾器,因為60%的主要電子商務(wù)網(wǎng)站缺少一個或多個。
在測試過程中,過濾邏輯和過濾用戶界面往往導(dǎo)致貧困的經(jīng)驗,即使在網(wǎng)站投入了資源在產(chǎn)品標(biāo)簽(即過濾可用性)。 用戶需要能夠定位和應(yīng)用相關(guān)的過濾值和使他們的理想過濾組合從一個網(wǎng)站為了吸引價值的過濾器。 然而一個顯著的40%的測試受試者在測試無法找到一個網(wǎng)站的過濾選項——盡管積極尋找他們。 這是至關(guān)重要的,考慮到注意過濾器-用戶有效一樣不存在的過濾器。 5和6節(jié),然后,我們將介紹兩個過濾設(shè)計模式,能有效地解決其中的一些用戶界面的問題。
2。 42%缺乏范疇特定濾波器類型
大多數(shù)情況下,用戶感興趣的過濾產(chǎn)品列表在范疇特定屬性,而不僅僅是website-wide屬性(如品牌、價格、用戶評級,等等)。 例如過濾列表的相機camera-specific屬性,如像素,縮放級別和物鏡——屬性并不特別有意義的其他類型的電子產(chǎn)品,如電視機。
例如,睡袋需要溫度額定值過濾器,而家具需要顏色過濾器,和硬盤容量過濾器,等等。 大規(guī)模的42%的頂級電子商務(wù)網(wǎng)站缺乏這樣的范疇特定過濾類型數(shù)他們的核心產(chǎn)品垂直。
一個好的經(jīng)驗法則是,任何足夠重要的產(chǎn)品規(guī)格所示產(chǎn)品列表項也應(yīng)作為一個過濾器。 此外,由于顯示在用戶面前的信息,該網(wǎng)站是提醒用戶,規(guī)范是重要的(或者,在用戶新域,教他們是)。 非常的規(guī)范,鼓勵用戶過濾。
注意?自制?顯示能力的食品加工商(以杯),提醒用戶,這是一個重要的指標(biāo),但是并沒有提供過濾的食品加工能力。 (?查看大版本?)鍍金?州大多數(shù)夾克的材料類型,但沒有過濾材料。 用戶感興趣的羊毛夾克必須經(jīng)過所有295件上衣。 (?查看大版本?)斯臺普斯?列出了大部分打印機的打印速度但不允許用戶過濾2409打印機的打印速度。 (?查看大版本?)
在測試過程中,當(dāng)用戶遇到網(wǎng)站缺乏基本范疇特定過濾,他們將放棄,因為他們意識到他們必須手動找到他們想要的東西通過瀏覽一個通用產(chǎn)品列表包含成百上千的物品(例如,找到夾克由羊毛、食物處理器能力大于14杯,等等)。 用戶經(jīng)常需要相當(dāng)長一段時間完全掌握,一個網(wǎng)站不提供這樣的過濾器,與大多數(shù)簡單的假設(shè)“必須有某個地方,”而不是相信網(wǎng)站會忽視這些基本知識,被迫通過數(shù)百種產(chǎn)品。
當(dāng)一個產(chǎn)品是一組搜索結(jié)果列表,?面向方面的搜索?應(yīng)該為用戶提供最優(yōu)產(chǎn)品特定的過濾器,無需用戶指定一個類別。 我們觸及了我們的測試結(jié)果和面向方面的搜索的主題(以及如何只有40%的頂級網(wǎng)站提供)在第六節(jié)”?電子商務(wù)的搜索當(dāng)前狀態(tài)?”。
關(guān)鍵信息
總是確保每個類別都有一組獨特的過濾器針對特定類型的產(chǎn)品。 至少,產(chǎn)品規(guī)格包含在列表項需要提供過濾器,但一系列廣泛的過濾器將幾乎總是需要。
3。 20%缺乏主題過濾器
主題瀏覽模式是很常見的在物理零售商店,在那里任何銷售助理能夠幫助游客與常見的請求,如“一件休閑襯衫,”“春季夾克,”“高端袖珍相機”或“LED電視具有良好的錢的價值。 “然而,這是不容易在大多數(shù)電子商務(wù)網(wǎng)站。
雖然電視、照相機、夾克和襯衫都可以輕易位于大多數(shù)電子商務(wù)網(wǎng)站,查看產(chǎn)品,匹配一個特定的“主題”可以幾乎不可能。 盡管這樣的專題屬性通常是常見的和中央方面用戶的購買決定,我們的基準(zhǔn)測試顯示,20%的頂尖電子商務(wù)網(wǎng)站仍然缺乏主題過濾器(雖然支持增長到66%,上升了48%我們最后的研究和基準(zhǔn)測試的電子商務(wù)搜索?)。
(?查看大版本?)
“這種事情我太不耐煩。 他們將失去了我。 如果有多個頁面,我永遠不會得到它,”一個主題解釋為他尋找一個夾克的春季?鍍金?。 “通常你可以選擇冬季夾克,春季外套或夾克的類型。 ”他最終放棄該網(wǎng)站。
(?查看大版本?)
“我看這些風(fēng)格是什么樣子。 然后我想,‘Ayhh,這些都是丑陋的。 ”所以,我上去了,看看我是否能排序(過濾器,艾德。),由“風(fēng)格”之類的,”一個主題解釋說當(dāng)她尋找一種方式來過濾的風(fēng)格。 只有一個“枕頭類型”過濾器可以在陶器谷倉,她選擇嘗試,最終應(yīng)用隨機枕頭類型看,帶她,幾乎沒有一個可靠的方式讓用戶在網(wǎng)站上找到相關(guān)條目。
梅西百貨?提供一個主題“風(fēng)格”過濾器,最終被測試對象的60%。 以上,一個主題被認(rèn)為應(yīng)用“外套風(fēng)格:休閑”過濾器。 (?查看大版本?)
沒有主題過濾選項,查看他們唯一感興趣的產(chǎn)品常常被不合理地為用戶耗費時間。 尤其這樣就真正地選擇購買哪個項目(s),因為相關(guān)產(chǎn)品將隨機分散在一個產(chǎn)品列表。 在測試過程中,缺乏主題過濾器經(jīng)常導(dǎo)致網(wǎng)站被拋棄,因為存儲的對象要么過早得出結(jié)論并沒有把他們想要的產(chǎn)品的類型(例如,春季夾克),或者更多的時候,尋找一些相關(guān)的東西,可能是隱藏在一個巨大的產(chǎn)品列表將會幾乎是不可能的。 網(wǎng)站上有主題過濾器,過濾器,有很高的使用率,經(jīng)常在50%以上。
最簡單的方法從技術(shù)上實現(xiàn)主題過濾器是通過手動標(biāo)記產(chǎn)品或產(chǎn)品組。 主題類型風(fēng)格的典型例子(休閑、浪漫、現(xiàn)代),季節(jié)(春、假日),使用條件(戶外、水下)和purchase-selection參數(shù)(便宜,物有所值,高結(jié)束)。 某些類型非常適合于手動標(biāo)記(例如,風(fēng)格和季節(jié)通常會快速和準(zhǔn)確的人工標(biāo)記),而其他過濾器需要廣泛的領(lǐng)域知識來手動標(biāo)記(例如,物有所值)。
關(guān)鍵信息
識別并提供關(guān)鍵主題過濾器獨特的網(wǎng)站和產(chǎn)品類型上下文。 這些通常會需要范疇特定(見第二節(jié))。常見的遺漏是風(fēng)格,使用上下文和purchase-selection參數(shù)。
4。 32%缺乏兼容性過濾器
一些產(chǎn)品是compatibility-dependent——也就是說,一個產(chǎn)品的相關(guān)性決定完全由它與另一種產(chǎn)品的兼容性,用戶已經(jīng)擁有或計劃購買。 典型compatibility-dependent產(chǎn)品配件(例如,一個筆記本電腦,以適應(yīng)),產(chǎn)品與其他產(chǎn)品一起使用(一個音頻系統(tǒng),需要插入一個電視和媒體播放器),備件(筆記本電腦適配器,需要有一個充電器提示和額定功率匹配用戶的筆記本電腦)和耗材(油墨必須符合一個確切的打印機模型)。
為筆記本電腦找到一個備用適配器或購買一個攝像頭和匹配的情況下聽起來像是很簡單的任務(wù),但它是非常困難的對于我們的測試,只有35%的完成率。 這意味著65%的人放棄,或者更糟的是,最終購買產(chǎn)品,他們認(rèn)為但實際上是不兼容。
(?查看大版本?)
“哦,我的天哪,我不會這樣做,而不是一個網(wǎng)站,這是很難駕馭。 我會去相機商店和我的相機,找到一個適合的情況下。 我不會去考慮所有這些選項,”一個主題解釋說在試圖找到一個攝影包,實現(xiàn)沒有辦法縮小253袋的尺寸列表。 闡述了主題,“我需要去之間來回,相機比較維度。 然后它還好看。”
無論多么誘人的價格,規(guī)范多么偉大,多么完美的顧客評論發(fā)音或者有吸引力的產(chǎn)品產(chǎn)品的設(shè)計,最終用戶不感興趣,如果產(chǎn)品是不相容的。 這可能是一個看來,無論產(chǎn)品的其他屬性。 這使得兼容性過濾器過濾類型的一個最重要的(當(dāng)然,僅供compatibility-dependent產(chǎn)品類型)。 給用戶訪問列表的產(chǎn)品兼容已有的項目是至關(guān)重要的,。
盡管兼容性過濾器是一個先決條件查找和購買兼容的商品,32%的網(wǎng)站出售compatibility-dependent產(chǎn)品沒有兼容性過濾器。
雖然大多數(shù)網(wǎng)站都有一個“品牌”過濾器,測試表明,這完全是唯一類型的兼容性不足過濾器。 首先,品牌往往有多個系列或產(chǎn)品與不同的兼容性方面。 例如,所有聯(lián)想聯(lián)想筆記本電腦適配器不適合所有人,因此,簡單地應(yīng)用過濾器“聯(lián)想”不會給用戶所有產(chǎn)品的列表與他們特殊的聯(lián)想筆記本電腦兼容。 其次,幾個兼容性依賴、第三方產(chǎn)品是一個主要的考慮因素。 例如,一個“制造商”或“品牌”過濾器不會為用戶提供的完整列表匹配的MacBook筆記本袖子。
關(guān)鍵信息
任何產(chǎn)品類別包含compatibility-dependent產(chǎn)品(配件、集成系統(tǒng)、備件、耗材等)需要一個兼容性過濾器。 這通常會是一個過濾器,允許用戶指定他們的模型的姓名和電話號碼,但它也可以是一個過濾器更通用的規(guī)范,比如大小、能力或力量。
(見章節(jié)4和6的“?電子商務(wù)研究:更好的導(dǎo)航和分類指南?“compatibility-dependent更多產(chǎn)品,包括完整的討論互連兼容的產(chǎn)品在產(chǎn)品頁面。)
5。 10 +過濾值需要截斷,然而32%做差
我們測試了三種主導(dǎo)模式顯示列表10 +過濾值:
顯示所有過濾值在一長串,
使用內(nèi)聯(lián)可滾動區(qū)域,
刪除過濾值。
所有三種方法造成了嚴(yán)重的可用性問題。 前兩個表現(xiàn)最差,而截斷是表現(xiàn)最好的三種方法——但只要是用戶界面的實現(xiàn)非常注重細節(jié)。 在深入細節(jié)之前需要實現(xiàn)一個表現(xiàn)良好的截斷設(shè)計,我們先簡要介紹核心問題的兩個方法。
答:顯示所有過濾值
顯示所有觀察到的問題過濾值在一長串是,它使得用戶不可能得到的概述不同的過濾類型可用。
顯示所有過濾值在一長串讓用戶很難得到其他過濾類型的概述。 在這里,?L.L. Bean?被認(rèn)為在900像素高顯示(減去瀏覽器和操作系統(tǒng)chrome)。 (?查看大版本?)
例如,在測試過程中,用戶會看到一個品牌過濾器與一個品牌三個屏幕過濾值,使它不可能提供的額外的過濾器類型概述如下。 大部分的測試對象完全忽視以下額外的過濾器類型過濾值的長串,通常被長期過濾欄拉伸兩個屏幕或更多。 積極的注意,我們的產(chǎn)品列表和過濾指標(biāo)顯示,只有一小部分(2%)的主要電子商務(wù)網(wǎng)站目前使用這種模式。
B .使用內(nèi)聯(lián)可滾動區(qū)域
一些過濾列表值給出自己的可滾動區(qū)域(即區(qū)域可以滾動頁面的其余部分獨立的),導(dǎo)致部分交互問題對于大多數(shù)測試對象,以及概念性的挑戰(zhàn)更小的組的主題。
內(nèi)聯(lián)可滾動區(qū)域,如圖所示?斯臺普斯?為測試對象,造成多個交互問題,概念和interaction-wise。 (?查看大版本?)
實現(xiàn)內(nèi)聯(lián)可滾動區(qū)域是更常見的- 24%的主要電子商務(wù)網(wǎng)站使用此模式。 然而,它并沒有執(zhí)行任何更好,因為它帶來了一系列問題。 最重要的問題(也難以解決)如下:
滾動?在?滾動(即嵌套滾動窗格)變成了不是一個特別容易為用戶掌握概念。 內(nèi)聯(lián)可滾動區(qū)域會被放置在更大的可滾動區(qū)域的web頁面,要求用戶理解的差異,以避免問題。
用戶想申請一個過濾器無法獲得所有過濾選項,因為可滾動區(qū)域的概述在高度限制。 可用性問題,因此,從沒有得到過濾類型概述轉(zhuǎn)向得不到過濾值在每個類型的概況。
內(nèi)聯(lián)可滾動區(qū)域經(jīng)常會引發(fā)“scroll-hijacking”,即用戶滾動網(wǎng)頁時,他們會想要滾動過濾列表,反之亦然。 用戶必須不斷地意識到自己的只要他們想滾動鼠標(biāo)光標(biāo)的位置。 換句話說,一個主導(dǎo)page-browsing模式在網(wǎng)絡(luò)上,垂直滾動頁面,將被劫持。 (在觸摸設(shè)備上,寬內(nèi)聯(lián)可以捕獲用戶可滾動區(qū)域,使它幾乎不可能滾動頁面而不是行內(nèi)滾動區(qū)域。)
(如果你想進一步探索內(nèi)聯(lián)可滾動區(qū)域的問題,我們?檢查發(fā)現(xiàn)深度?)。
C .刪除過濾值
最后我們測試模式執(zhí)行比其他兩個。 截斷的好處是給用戶的概述不同的過濾類型。 這很重要,因為一個缺乏常常引起我們的主題讓可憐的過濾選擇僅僅因為他們傾向于與過濾值,第一次很長的列表的過濾器。 截斷的另一個主要好處是,當(dāng)用戶找到感興趣的一個過濾器類型時,他們也可以得到一個完整的概述過濾值在該類型(通過單擊截斷鏈接)。 因此,截斷,結(jié)合其他兩種方法的好處。
截斷過濾值讓用戶可用的過濾類型概述——看到這里?麗?和所有可用的值在一個類型(當(dāng)單擊截斷鏈接)。 (?查看大版本?)
然而,性能優(yōu)越的截斷觀察只有當(dāng)用戶俯瞰截斷聯(lián)系的風(fēng)險是積極的接口。 事實上,在截斷鏈接測試網(wǎng)站上沒有足夠明顯,它執(zhí)行(至少)兩個其他模式一樣糟糕,因為有些用戶認(rèn)為截斷列表顯示所有可用的過濾值。 目前,基準(zhǔn)測試顯示,只有6%的主要電子商務(wù)網(wǎng)站的截斷聯(lián)系設(shè)計不足。 雖然不是很多,但它仍然是值得提及的一些實現(xiàn)截斷,測試表明是有效的:
根據(jù)濾波器的設(shè)計,前10過濾值可以顯示額外的值被截斷。 網(wǎng)站上顯示值之前刪除太少——例如,少于6價值觀——用戶經(jīng)常會被截斷的原因。 10多個值顯示時,受試者的過濾類型的概述開始迅速下降。 (這些數(shù)字沒有發(fā)現(xiàn)硬限制,但取決于過濾器和過濾的設(shè)計類型可用。)
在截斷集之前,過濾值應(yīng)該中最受歡迎的,不是按字母順序或匹配的數(shù)量。 用戶往往會掃描特定的過濾器的名稱值,而不是一個過濾器類型的名稱。 例如,他們將掃描一個頁面的筆記本電腦充電器“聯(lián)想”過濾器,而不是一個過濾器類型命名為“兼容。 ”因此,untruncated值是“代表”的過濾類型,因此應(yīng)選擇用戶最有可能認(rèn)識到當(dāng)看頁面。
截斷鏈接應(yīng)清晰風(fēng)格,區(qū)別是一個交互式元素不同的過濾值正確的上面。 重要線索包括以下:使用網(wǎng)站的默認(rèn)鏈接樣式(顏色和/或下劃線)、使用空間等指標(biāo)作為一個加號(+)或箭頭圖標(biāo),指示的數(shù)量匹配鏈接的名稱(“視圖23更多”),縮進不同的過濾值(即打破垂直對齊),和視覺衰落截斷列表中的最后一個值。
北部的工具?列出了流行品牌過濾器列表時截斷(促進最知名的值)。 擴大時,按字母順序列出的值給可預(yù)測性。 (?查看大版本?)
在適當(dāng)?shù)慕財嘣O(shè)計更多的測試結(jié)果在本文中進一步探索。
關(guān)鍵信息
截斷的過濾值(10 +),而不是顯示所有值或使用內(nèi)聯(lián)可滾動區(qū)域。 確保用戶注意到截斷,顯示10值觸發(fā)截斷之前,顯示默認(rèn)值,用戶最有可能識別(即最受歡迎),和風(fēng)格截斷鏈接設(shè)置它有別于過濾值。
6。 只有16%的積極推動重要的過濾器
某些類別有一定的過濾器是非常重要和有益的為用戶考慮。 然而,顯示這些只是傳統(tǒng)過濾器在過濾欄運行的風(fēng)險,用戶忽略這些選項或不理解的重要性做出選擇。
一般來說,在測試過程中電子商務(wù)的網(wǎng)站,我們發(fā)現(xiàn)用戶認(rèn)為分類是網(wǎng)站建議他們選擇,而傳統(tǒng)的過濾欄選項是被大多數(shù)用戶是完全可選的。 勸導(dǎo)式設(shè)計的原則后,大多數(shù)的網(wǎng)站,因此,有許多類別,需要促進某些過濾器或過濾組合。 幸運的是,一種清晰的分類模式出現(xiàn)了在測試網(wǎng)站如何有效促進一套高度重要的過濾器-盡管實現(xiàn)需要大量的過濾設(shè)計細節(jié)的地方。
當(dāng)測試對象搜索?亞馬遜?,某些范圍會高度相關(guān)的過濾器在產(chǎn)品列表。 這晉升將測試對象向更多的篩選決策,而不是瀏覽過于廣泛的產(chǎn)品列表。 除了提升在產(chǎn)品列表中,過濾的過濾值都保持完整的側(cè)邊欄(一個重要細節(jié))。 (?查看大版本?)
例如,如果用戶導(dǎo)航到“電影”的類別,一個非常重要的濾波器類型考慮將與過濾值的格式,如“DVD,”“藍光”和“數(shù)字下載”的類型,大多數(shù)用戶將重要的選擇一個產(chǎn)品的過程。
另一個例子是“數(shù)碼相機”的范疇,“相機類型”將是一個重要的考慮過濾,過濾值,如“瞄準(zhǔn)射擊”,“單反”,“mirrorless”和“橋梁”。
促進有限并選擇過濾值的數(shù)量意義只有在絕大多數(shù)的用戶有興趣或應(yīng)用可獲得顯著的效益。 因為提升濾波器鼓勵用戶應(yīng)用它,明智的使用技術(shù)和謹(jǐn)慎,避免引誘用戶過于狹窄的過濾列表。 例如,不要簡單地使用這項技術(shù)website-wide無論在每個類別是最受歡迎的過濾器。 在實踐中,你會經(jīng)常需要手動副牧師的類別結(jié)構(gòu),保證提升過濾器的使用。
沃爾瑪?需要更進一步的技術(shù)和促進與筆記本電腦和輸入類型和關(guān)鍵采購過濾器,一致參數(shù)為用戶想買一臺筆記本電腦。 (?查看大版本?)
提升過濾器不一定所有相同類型的需要。 他們可能僅僅是一個最重要的產(chǎn)品組合過濾器之前,用戶可以申請時間進一步調(diào)查實際的產(chǎn)品列表。 事實上,提升一次過濾器甚至可以申請多個過濾器為用戶提供受歡迎的濾波器組合的捷徑。
兩個額外的實現(xiàn)細節(jié)要考慮:
保持提升過濾值過濾欄,太(即除了“促銷”位置)。 因為用戶培訓(xùn),篩選欄包含所有可用的過濾器,提升過濾器過濾欄中必須,因為有些用戶將尋找過濾值。
沒有促進過濾器使用banner-like圖形。 我們測試的一些網(wǎng)站推廣視覺盒裝的過濾器。 這導(dǎo)致一些科目完全忽視他們,即使盒子包含了他們正在尋找的濾波器類型——所有由于橫幅失明。
關(guān)鍵信息
選擇類別初始過濾選擇有關(guān),將有利于絕大多數(shù)用戶,考慮促進少數(shù)過濾值高于產(chǎn)品列表(例如,使用按鈕、文本鏈接或縮略圖)。
7。 由工業(yè)過濾性能有很大的差異
如果我們看看過濾性能的主要電子商務(wù)行業(yè),我們看到,性能千差萬別。 下面7個最具優(yōu)勢的電子商務(wù)行業(yè)已經(jīng)堆疊條形圖繪制。 行“可接受的性能”供參考,描繪了一個“可接受”的門檻(但不是好的)過濾性能——至少根據(jù)典型測試遇到的問題。 注意性能差異考慮行業(yè);例如,一個服裝網(wǎng)站需要過濾器少于電子網(wǎng)站由于它攜帶的產(chǎn)品類型,因此,需要一個更先進的設(shè)計的過濾器來實現(xiàn)更高的分?jǐn)?shù)。
(?查看大版本?)
盡管擁有最低的障礙提供了一個良好的過濾的經(jīng)驗,服裝網(wǎng)站特別是最差所有行業(yè)的過濾性能,由于一個不幸的過濾選項不足和貧困過濾接口。 低于標(biāo)準(zhǔn)的過濾接口可能由于故意優(yōu)先于一個清晰的美學(xué)和翔實的接口(一箱?錯誤的簡單?)。 盡管處理產(chǎn)品類型只需要有限數(shù)量的過濾類型(與其他行業(yè)相比),許多服裝網(wǎng)站甚至缺乏基本的過濾選項,比如產(chǎn)品材料和用戶評級。
體育和愛好網(wǎng)站過濾的性能不佳。 雖然部分原因是一個簡單的網(wǎng)站優(yōu)先級美學(xué),類似于服裝行業(yè),另一個原因可能是混合的視覺,spec-driven產(chǎn)品垂直行業(yè)。 許多產(chǎn)品在這些網(wǎng)站往往是相當(dāng)視覺(玩具、戶外用品、體育器材、愛好設(shè)備),然而,許多也有兩三個技術(shù)屬性,可能完全否定自己,如果他們不匹配用戶的標(biāo)準(zhǔn),例如性能、體重和年齡。 因此,用戶將有更復(fù)雜的過濾需求為體育和愛好產(chǎn)品比他們通常定期服裝網(wǎng)站。
電子及辦公行業(yè)歷來是其中的一個電子商務(wù)的行業(yè)用戶提供多種過濾器,因為發(fā)現(xiàn)許多產(chǎn)品會為用戶幾乎不可能。 當(dāng)近看平淡無奇的過濾性能在電子和辦公室,問題往往是窮人過濾邏輯和接口。 特別常見的缺陷包括以下:只允許選擇一個過濾值,沒有數(shù)字濾波器的定義的范圍,以及缺乏對行業(yè)術(shù)語的解釋。 盡管一般大量的濾波器類型提供一些電子產(chǎn)品和辦公室的網(wǎng)站,產(chǎn)品的技術(shù)性質(zhì),多個屬性的用戶的購買決定是至關(guān)重要的——仍然導(dǎo)致缺乏兼容性過濾器(見本文的第四節(jié))和缺乏范疇特定過濾類型(見第二節(jié))。
家和硬件網(wǎng)站提供良好的過濾性能。 這非常符合該行業(yè)的技術(shù)性質(zhì),和分?jǐn)?shù)都可以解釋為一種歷史關(guān)注提供足夠的過濾器(特別是兼容性過濾器),它允許用戶找到特定的洗衣機或無繩鉆,滿足他們特定的標(biāo)準(zhǔn)。 然而,可憐的產(chǎn)品數(shù)據(jù)和結(jié)構(gòu)化產(chǎn)品的普遍缺乏規(guī)范抑制濾波性能。
健康和美容網(wǎng)站有良好的過濾性能。 公平地說,健康和美容產(chǎn)品有更少的關(guān)鍵產(chǎn)品屬性(數(shù)量是一個例外),這意味著網(wǎng)站可以僥幸過濾器與高度spec-driven產(chǎn)品比要簡單得多。 電子商務(wù)網(wǎng)站在其他行業(yè),因此,不應(yīng)該模型其過濾經(jīng)驗在健康和美容網(wǎng)站,因為他們的過濾需求很可能不同。
大規(guī)模商人龐大和多元化的產(chǎn)品目錄,產(chǎn)品數(shù)據(jù)結(jié)構(gòu)有嚴(yán)格的要求,處理和分類——所有的東西都可以極其困難。 相結(jié)合的混合目錄高度spec-driven和視覺產(chǎn)品類型,和大規(guī)模商人最復(fù)雜的過濾需求。 然而,很明顯,最大規(guī)模的商人都知道這些挑戰(zhàn)并取得了非常積極努力解決他們,經(jīng)常通過先進的過濾邏輯和數(shù)據(jù)后處理。 這將導(dǎo)致多種過濾器提供(包括范疇特定的),這是質(zhì)量的一個主要原因商家網(wǎng)站實現(xiàn)最佳的過濾性能,甚至考慮到用戶的更復(fù)雜的過濾要求。
提高電子商務(wù)過濾
總的來說,我們?yōu)榛鶞?zhǔn)的網(wǎng)站的過濾性能是可通行的。 過濾時,大部分甚至電子商務(wù)網(wǎng)站頂部出現(xiàn)短而物理零售,客戶要求的地方,例如,“光休閑春季夾克尺寸介質(zhì)”或“這一個崎嶇的數(shù)碼相機”并不是不尋常的。
一些網(wǎng)站做的積極專注于過濾和資源花在產(chǎn)品標(biāo)簽。 對于那些網(wǎng)站,許多揮之不去的filter-related可用性問題與調(diào)整用戶的期望和網(wǎng)站實現(xiàn)(具體來說,過濾設(shè)計和邏輯)。 過濾從而代表的機會大大提高投資回報率,大多數(shù)大型電子商務(wù)供應(yīng)商已經(jīng)在產(chǎn)品標(biāo)簽和數(shù)據(jù)收集。
過濾電子商務(wù)網(wǎng)站是一個重要的話題,顯然不能充分地探索在一篇文章中。 然而,本文介紹過濾的見解希望為理解電子商務(wù)的現(xiàn)狀奠定基礎(chǔ)為創(chuàng)造一個良好的過濾的過濾和經(jīng)驗:
而平庸的過濾性能往往是由于缺乏重要的過濾選項,基準(zhǔn)測試也表明,過濾邏輯和過濾接口為用戶造成嚴(yán)重的問題。 看用戶的整個過濾經(jīng)驗,只有16%的美國前50名電子商務(wù)網(wǎng)站提供一次很好的經(jīng)歷,50%的人提供一個差強人意的過濾的經(jīng)驗,和34%的過濾體驗不佳,沒有過濾器對用戶最基本的產(chǎn)品偏好。
確保過濾可用性,總是確保每個類別都有一組獨特的過濾器它包含針對特定類型的產(chǎn)品。 至少,產(chǎn)品規(guī)格包含在列表項需要提供過濾器,但一系列廣泛的過濾器將幾乎總是需要。 目前,42%的頂尖電子商務(wù)網(wǎng)站缺乏范疇特定濾波器類型數(shù)他們的核心產(chǎn)品垂直。
識別并提供關(guān)鍵主題過濾器獨特的網(wǎng)站和產(chǎn)品類型上下文。 這些通常會需要范疇特定,常見的遺漏是缺乏風(fēng)格,使用上下文或購買選擇參數(shù)。 目前,20%缺乏主題過濾器。
任何產(chǎn)品類別包含compatibility-dependent產(chǎn)品(配件、集成系統(tǒng)、備件、耗材等)需要一個兼容性過濾器。 這通常是一個過濾器,允許用戶指定一個模型的姓名和電話號碼,但它也可能是一個過濾器更通用的規(guī)范,一個過濾器等大小、能力或力量。 目前,32%的網(wǎng)站出售compatibility-dependent產(chǎn)品缺乏兼容性過濾器。
的過濾值(10 +)應(yīng)該被截斷,而不是顯示全部(2%)或使用內(nèi)聯(lián)可滾動區(qū)域(24%)。 來確保用戶注意到截斷,做幾件事:顯示10值截斷集之前,確保默認(rèn)顯示值是用戶最可能的值識別(即最受歡迎);和風(fēng)格截斷鏈接本身設(shè)置它有別于過濾值。
選擇類別初始過濾選擇有關(guān),將有利于絕大多數(shù)用戶,考慮促進少數(shù)過濾值高于產(chǎn)品列表(例如,使用按鈕、文本鏈接或縮略圖)。 目前,只有16%的積極推動高度重要的過濾器產(chǎn)品列表的頂部。
過濾性能變化很大的行業(yè),行業(yè)中的關(guān)鍵球員可能不是一個好的靈感的源泉。 即使不同級別調(diào)整后的過濾需求,網(wǎng)站的服裝、電子產(chǎn)品和體育產(chǎn)業(yè)遠遠落后于過濾質(zhì)量商人和硬件網(wǎng)站提供的經(jīng)驗。
原文：
When done right, filters enable users to narrow down a website’s selection of thousands of products to only those few items that match their particular needs and interests. Yet, despite it being a central aspect of the user’s e-commerce product browsing, most websites offer a lacklustre filtering experience. In fact, our 2015 benchmark reveals that only 16% of major e-commerce websites offer a reasonably good filtering experience.
Given the importance of filtering, we — the entire team at the Baymard Institute — spent the last nine months researching how users browse, filter and evaluate products in e-commerce product lists. We examined both search- and category-based product lists. At the core of this research was a large-scale usability study?testing 19 leading e-commerce websites?with real end users, following the think-aloud protocol.
Despite testing multi-million dollar websites, the test subjects ran into more than?700 usability problems?related to product lists, filtering and sorting. All of these issues have been analyzed and distilled into 93 concise guidelines on product list usability, 35 of which are specific to filtering availability, design and logic.
(View large version)
We subsequently?benchmarked 50 major US e-commerce websites?across these 93 guidelines to rank the websites and learn how major e-commerce websites design and implement their filtering and sorting features. This has led to a benchmark database with more than 4,500 benchmark data points on e-commerce product list design and performance, of which 1,750 are specific to the filtering experience. (You can view the websites’ rankings and implementations in the publicly available part of the?product lists and filtering?benchmark database).
In this article we’ll take a closer look at some of the research findings related to the?users’ filtering experience. More specifically, we’ll delve into the following insights:
Only 16% of major e-commerce websites provide users with a reasonably good filtering experience. This is often due to a lack of important filtering options, but from the benchmark data it’s clear that poor filtering logic and interfaces are also causal issues.
42% of top e-commerce websites lack category-specific filter types for several of their core product categories.
20% of top e-commerce websites lack thematic filters, despite selling products with obvious thematic attributes (season, style, etc).
Of those websites that deal with compatibility-dependent products, 32% lack compatibility filters (for example, selling smartphone cases without a filter for device type or size).
Testing showed that 10+ filtering values require truncation — yet 32% of websites either have insufficient truncation design, causing users to overlook the truncated values (6%) or use what testing found to be even more troublesome, inline scrollable areas (24%).
Only 16% of websites actively promote important filters on top of the product list (a prerequisite when relying more on filters than on categories).
Filtering performance varies greatly by industry, with electronics and apparel websites generally suffering from insufficient filters (for each of their unique contexts), while hardware websites and mass merchants take the lead in the filtering game.
In this article we’ll walk through each of these?seven filtering insights, showing you the usability test findings, examining the benchmark data and presenting best practice examples for creating a good e-commerce filtering experience.
1. Only 16% Of Websites Provide A Good Filtering Experience
When done right, filters enable users to see only the products that match their individual needs and interests, such as products of a particular type or style or with certain features or attributes. For example, a user might want to see all products in the “jackets” category for “men” (gender filter), for the “winter” season (thematic filter) and available in the color “black” and size “M” (variation filter). It’s the e-commerce equivalent of walking into a physical store and asking a salesperson for “a black, men’s, winter jacket in size medium.”
However, a prerequisite to these wonderful powers of filtering is having a vast range of filters available for the user to drill into the particular features and product aspects that are important to them and their particular interests. Most e-commerce websites already fall short here. However, a good filtering experience requires the necessarily filters not only to be present, but to be presented in a way that’s easy for the user to grasp and interact with and whose logic follows user expectations.
(View large version)
Benchmarking the 50 top-grossing US e-commerce websites across the 93 product list guidelines identified in the usability study revealed generally mediocre performance. Analyzing the 1,750 performance scores specific to filtering availability, filtering logic and filtering interfaces reveals that:
34% of websites have a poor filtering experience, severely limiting their users’ ability to browse products — even when they have the most basic of product requirements;
50% of websites offer a passable filtering experience — by no means good and with several areas that could be improved;
only 16% of websites provide a good filtering experience, with sufficient filtering types available, a balanced filtering design and a filtering logic that aligns well with user expectations (although, even among these few good websites, most still have room for refinement).
In sections 2, 3 and 4 in this article, we’ll walk through the test findings for three of the core filtering types that typically cause issues: category-specific filters, compatibility filters and thematic filters — because 60% of major e-commerce websites lack one or more of these.
During testing, the filtering logic and filtering user interface often led to a poor experience, even on websites that have invested resources in product tagging (i.e. filter availability). Users need to be able to locate and apply relevant filtering values and to make their desired filtering combinations in order to draw value from a website’s filters. Yet a notable 40% of test subjects were at some point during testing unable to find a website’s filtering options — despite actively looking for them. This is critical, considering that unnoticed filters are — to the user — effectively the same as nonexistent filters. In section 5 and 6, then, we’ll walk through two filtering design patterns that proved effective at solving some of these user interface issues.
2. 42% Lack Category-Specific Filter Types
Most of the time, users are interested in filtering a product list across category-specific attributes, and not just the website-wide attributes (such as brand, price, user ratings, etc.). An example would be filtering a list of cameras by camera-specific attributes, such as megapixels, zoom level and lens mount — attributes that aren’t particularly meaningful for other types of electronics, such as TVs.
For example, sleeping bags would need a temperature rating filter, while furniture would need a color filter, and hard drives a capacity filter, and so on. A massive 42% of top e-commerce websites lack such category-specific filtering types for several of their core product verticals.
A good rule of thumb is that any product specification that is important enough to be shown in a product list item should also be available as a filter. Moreover, by virtue of displaying the information in front of the user, the website is reminding the user that that specification is important (or, in the case of users new to the domain, teaching them that it is). The very display of the specification, then, encourages users to filter by it.
otice how?Williams-Sonoma?displays the capacity of its food processors (measured in cups) — reminding users that this is an important metric — but then offers no way to filter the food processors by capacity. (View large version)
Gilt?states the material for most jacket types, but without a materials filter. Users who are interested in wool jackets would have to go through all 295 jackets. (View large version)Staples?lists the printing speed of the majority of its printers but does not allow users to filter its 2409 printers by printing speed. (View large version)
During testing, when users encountered websites that lack basic category-specific filtering, they would give up because they realized they would have to manually locate the items they want by browsing a generic product list containing hundreds of items (for example, to find jackets made of wool, food processors with capacities greater than 14 cups, etc.). Users often took quite a while to fully grasp that a website doesn’t offer such filters, with most simply assuming that “It must be there somewhere,” and not believing that the website could neglect such basics — and being forced to look through hundreds of products.
When a product list is a set of search results,?faceted search?should present the user with the best-matching product-specific filters, without the user having to specify a category. We touched on our test findings and the topic of faceted search (and how only 40% of top websites offer this) in section 6 in “The Current State of E-Commerce Search.”
KEY TAKEAWAY
Always ensure that each category has a unique set of filters specific to the type of product. At a minimum, the product specifications included in the list items will need to be available as filters as well, but a wider array of filters will nearly always be needed.
3. 20% Lack Thematic Filters
Thematic browsing patterns are quite common in physical retail stores, where any sales assistant would be able to help visitors with common requests, such as “a casual shirt,” “a spring jacket,” “a high-end pocket camera” or “an LED TV with good value for the money.” However, this is no easy task on most e-commerce websites.
While TVs, cameras, jackets and shirts can all be easily located on most e-commerce websites, viewing products that match a certain “theme” can be nearly impossible. Despite such thematic attributes often being both common and central aspects of the user’s purchasing decision, our benchmarking revealed that 20% of top e-commerce websites still lack thematic filters (although support for it has grown to 66%, up from 48% since?our last study and benchmarking of e-commerce search).
(View large version)
“I’m too impatient for this kind of thing. They would have lost me. If there were multiple pages, I would never have gotten through it,” one subject explained as he looked for a jacket for the spring season on?Gilt. “Normally you can choose between winter jackets, spring jackets or the type of jacket.” He ended up abandoning the website.
(View large version)
“I’d look at these to see what the style is like. And then I’d think, ‘Ayhh, these are all ugly.’ So, I go up again, to see if I can sort a little [filter, ed.], by ‘style’ or something,” one subject explained while she looked for a way to filter by style. With only a “pillow type” filter available on Pottery Barn, she had few options to try and ended up applying a random pillow type to see where that would take her — hardly a reliable way for users to find relevant items on a website.
Macy’s?offers a thematic “style” filter, which ended up being used by 60% of test subjects. Above, one subject is seen applying a “Coat Style: Casual” filter. (View large version)
Without thematic filtering options, viewing only the products of interest to them was often unreasonably time-consuming for users. This was especially the case when it came to actually selecting which item(s) to purchase, because the relevant products would be randomly scattered across a product list. During testing, a lack of thematic filters often led to website abandonment because the subjects prematurely concluded either that the store didn’t carry the type of product they wanted (for example, spring jackets) or, more often, that finding the few relevant items that might be hidden somewhere in a vast product list would be nearly impossible. On websites that do have thematic filters, the filters had very high usage rates, often above 50%.
The easiest way to technically implement thematic filters is by manually tagging products or groups of products. Typical examples of thematic types are style (casual, romantic, modern), season (spring, holiday), usage conditions (outdoors, underwater) and purchase-selection parameters (cheapest, value for money, high end). Some types are well suited to manual tagging (for example, style and season will often be both fast and accurate for a human to tag), whereas other filters require extensive domain knowledge to manually tag (for example, value for money).
KEY TAKEAWAY
Identify and offer key thematic filters unique to the website and product-type context. These will often need to be category-specific (see section 2). Common omissions are style, usage context and purchase-selection parameters.
4. 32% Lack Compatibility Filters
Some products are compatibility-dependent — that is, a product’s relevance is determined entirely by its compatibility with another product that the user already owns or plans on buying. Typical compatibility-dependent products are accessories (for example, a case for a laptop that has to fit), products used in conjunction with other products (an audio system that needs to plug into a TV and media players), spare parts (a laptop adapter that needs to have a charger tip and power rating that matches the user’s laptop) and consumables (ink that has to fit an exact printer model).
Finding a spare adapter for a laptop or buying a camera and matching case might sound like trivial tasks, but it turned out to be extremely difficult for our test subjects, who had a completion rate of only 35%. This means that 65% had to give up or, worse, ended up purchasing a product that they believed was compatible but was in fact not.
(View large version)
“Oh my gosh, I wouldn’t do this — not on a website which is this difficult to navigate. I would go to a camera store with my camera and find a case that fits. I wouldn’t go about looking into all of these options,” one subject explained while trying to find a camera bag and realizing there was no way to narrow the list of 253 bags by size. The subject elaborated, “I’d need to go back and forth between this and the camera to compare the dimensions. And then it also has to look nice.”
No matter how enticing the price, how great the specifications, how perfect the customer reviews pronounce the product to be or how appealing the product’s design, the end user will not be interested if the product is incompatible. This could be a dealbreaker, regardless of the product’s other attributes. This makes compatibility filters one of the most important filtering types (for compatibility-dependent product types only, of course). Giving users access to a list of products that are compatible with the item they already own is vital, then.
Despite compatibility filters being a prerequisite for finding and purchasing compatible items, 32% of websites that sell compatibility-dependent products have no compatibility filters.
While most websites have a “brand” filter, tests showed that this is completely inadequate as the only type of compatibility filter. First, brands often have multiple series or products with different compatibility aspects. For example, all Lenovo adapters will not fit all Lenovo laptops; so, simply applying a filter for “Lenovo” would not give the user a list of all products compatible with their particular Lenovo laptop. Secondly, for several compatibility dependencies, third-party products are a major consideration. For example, a “manufacturer” or “brand” filter would not provide the user with a full list of matching sleeves for their MacBook laptop.
KEY TAKEAWAY
Any product category that contains compatibility-dependent products (accessories, integrated systems, spare parts, consumables, etc.) will need a compatibility filter. This will often be a filter that allows the user to specify their model name and number, but it could also be a filter for a more generic specification, such as for size, capacity or power.
(See sections 4 and 6 of “An E-Commerce Study: Guidelines for Better Navigation and Categories” for more on compatibility-dependent products, including a discussion of complete interlinking to compatible products on product pages.)
5. 10+ Filtering Values Require Truncation, Yet 32% Do It Poorly
We tested three dominant patterns for displaying lists of 10+ filtering values:
displaying all filtering values in one long list,
using inline scrollable areas,
truncating the filtering values.
All three methods caused severe usability issues. The first two performed the worst, while truncation proved to be the best performing of the three methods — but only as long as it was implemented with great attention to details of the user interface. Before diving into the details required to achieve a well-performing truncation design, let’s briefly present the core problems with the first two methods.
A. DISPLAYING ALL FILTERING VALUES
The problem observed with displaying all filtering values in one long list is that it makes it impossible for the user to get an overview of the different filtering types available.
Displaying all filtering values in one long list makes it difficult for users to get an overview of the other filtering types. Here,?L.L. Bean?is being viewed on a 900-pixel-tall display (minus the browser and OS chrome). (View large version)
During testing, users would see, for example, a brand filter with one to three screens of brand filtering values within — making it impossible to get an overview of the additional filter types offered below. The majority of test subjects completely overlooked the additional filter types below the long list of filtering values and were generally overwhelmed by the long filtering sidebar stretching two screens or more. On a positive note, our product list and filtering benchmark shows that only a small fraction (2%) of major e-commerce websites currently use this pattern.
B. USING INLINE SCROLLABLE AREAS
Some lists of filtering values are given their own scrollable area (i.e. the area can be scrolled independent of the rest of the page), causing several interaction problems for the majority of test subjects, as well as conceptual challenges for a smaller group of subjects.
Inline scrollable areas, as seen here on?Staples, caused multiple interaction problems for test subjects, both conceptual and interaction-wise. (View large version)
Implementing inline scrollable areas is far more common — 24% of major e-commerce websites use this pattern. It did not, however, turn out to perform any better, because it comes with a host of problems on its own. The most significant problems (which are also difficult to solve) are the following:
Scrolling?within?scrolling (i.e. nested scrolling panes) turned out to be not a particularly easy concept for users to grasp. The inline scrollable area would be placed within the larger scrollable area of the web page — requiring the user to understand the difference in order to avoid problems.
Users who wanted to apply a filter could not get an overview of all filtering options because the scrollable area was constrained in height. The usability problem, thus, shifted from not getting an overview of filtering types to not getting an overview of filtering values within each type.
Inline scrollable areas often caused “scroll-hijacking,” whereby the user would scroll the web page when they wanted to scroll the filtering list, or vice versa. The user had to be constantly aware of their mouse cursor’s position whenever they wanted to scroll. In other words, a dominant page-browsing pattern on the web, vertical page scrolling, would be hijacked. (On touch devices, wide inline scrollable areas can trap the user, making it almost impossible to scroll the page instead of the inline scroll area.)
(If you want to further explore the problems of inline scrollable areas, we?examine the findings in depth elsewhere.)
C. TRUNCATING FILTERING VALUES
The last pattern we tested turned out to perform better than the other two. Truncation has the benefit of giving users an overview of the different filtering types. This is important because a lack of one often caused our subjects to make poor filtering selections simply because they were inclined to interact with the filtering values that were first in the very long list of filters. The other main benefit of truncation is that, when users find a filter type of interest, they also have the option of getting a full overview of filtering values within that type (by clicking the truncation link). Truncation, therefore, combines the benefits of the other two methods.
Truncated filtering values gives users an overview of both the filtering types available — as seen here on?REI?— and all available values within a type (when the truncation link?is clicked). (View large version)
However, the superior performance of truncation was observed only when the risk of users overlooking the truncation link was actively addressed in the interface. In fact, on the tested websites where the truncation link wasn’t sufficiently distinct, it performed (at least) as poorly as the two other patterns, because some users assumed that the truncated list showed all available filtering values. Currently, benchmarking shows that only 6% of major e-commerce websites have a truncation link that is inadequately designed. While that’s not many, it would still be worthwhile to touch on some of the implementations of truncation that testing showed to be effective:
Depending on the design of the filter, up to 10 filtering values can be displayed before the additional values are truncated. On websites that display too few values before truncating — for example, fewer than 6 values — users would often be confused by the reason for the truncation. When more than 10 values were displayed, the subjects’ overview of the filtering types began to drop rapidly. (These numbers were not found to be hard limits, but depended on the design of the filter and the number of filtering types available.)
Before truncation sets in, the filtering values should be listed in order of popularity, not alphabetically or by number of matches. Users will often scan for the name of a specific filter value, rather than the name of a filter type. For example, they will scan a page of laptop chargers for a “Lenovo” filter, rather than for a filter type named “compatible with.” Consequently, the untruncated values are “representatives” of the filtering type and should therefore be the options that users are most likely to recognize when glancing at the page.
The truncation link should be clearly styled, distinguishing it as an interactive element different from the filtering values right above it. Important clues include the following: using the website’s default link styling (color and/or underlining), using spatial indicators such as a plus sign (+) or arrow icon, indicating the number of matches in the link’s name (“View 23 more”), indenting differently than the filtering values (i.e. breaking the vertical alignment), and visually fading the last value in the truncated list.
(View large version)
Northern Tool?lists brand filters by popularity when the list is truncated (promoting the most recognizable values). When expanded, the values are listed alphabetically to give predictability. (View large version)
More test findings on proper truncation design are explored further in this article.
KEY TAKEAWAY
Truncate long lists of filtering values (10+), rather than displaying all values or using inline scrollable areas. To ensure that users notice the truncation, display up to 10 values before triggering the truncation, display default values that users are most likely to recognize (i.e. the most popular), and style the truncation link to set it apart from the filtering values.
6. Only 16% Actively Promote Important Filters
Some categories have certain filters that are highly important and beneficial for the user to consider. However, displaying these merely as traditional filters in a filtering sidebar runs the risk of users either overlooking these options or not understanding the importance of making a selection.
Generally, during testing of e-commerce websites, we observed that users view categories as something the website suggests they select, whereas the traditional filtering sidebar options are perceived by most users as being purely optional. Following the principles of persuasive design, most websites, therefore, have a number of categories that need to promote certain filters or filter combinations. Luckily, a clear pattern emerged during testing for how websites can effectively promote a single set of highly important filters — although implementation requires a number of filtering design details to be in place.
When test subjects searched?Amazon, certain scopes would have highly relevant filters promoted atop the product list. This promotion nudged the test subjects towards more informed filtering decisions, instead of browsing overly broad product lists. Besides being promoted atop the product list, the filter values are kept intact in the filtering sidebar (an important detail). (View large version)
For example, if a user navigates to a “movies” category, a highly important filter type to consider would be “format,” with filtering values such as “DVD,” “Bluray” and “digital download” as the types that would be important to most users’ process of selecting a product.
Another example would be a “digital cameras” category, where “camera type” would be a highly important filter to consider, with filtering values such as “point and shoot,” “DSLR,” “mirrorless” and “bridge.”
Promoting a limited and select number of filtering values makes sense only if the vast majority of users either have an interest in or would benefit significantly from applying them. Because a promoted filter encourages users to apply it, use the technique intelligently and sparingly, and avoid luring users into overly narrow filtered lists. For example, don’t simply use the technique website-wide for whatever is the most popular filter in each category. In practice, you will often need to manually curate those categories that have a structure that warrant the use of promoted filters.
?
Walmart?takes the technique one step further and promotes a mix of laptop-size and input-type filters that align well with key purchasing parameters for users looking to buy a laptop. (View large version)
Promoted filters don’t necessarily all need to be of the same type. They could simply be a combination of the most important product filters that users can apply before spending further time investigating the actual product list. Indeed, promoted filters could even apply multiple filters at once to provide the user with a shortcut to popular filter combinations.
Two additional implementation details to consider:
Keep the promoted filtering values in the filtering sidebar, too (i.e. in addition to the “promotion” placement). Because users are trained that a filtering sidebar contains all available filters, the promoted filter must be represented in the filtering sidebar as well, since some users will look for the filtering value there.
Never promote filters using banner-like graphics. A few of the websites we tested had promoted filters that were visually boxed. This caused some of subjects to completely overlook them, even when the boxes contained the very filter type they were looking for — all due to banner blindness.
KEY TAKEAWAY
For select categories where an initial filtering selection would be relevant and would benefit the vast majority of users, consider promoting those few filtering values above the product list (for example, using buttons, text links or thumbnails).
7. Filtering Performance Varies Greatly By Industry
If we look at filtering performance within the major e-commerce industries, we see that performance varies greatly. Below, the seven most dominant e-commerce industries have been plotted as stacked bar charts. The row “acceptable performance” is for reference and depicts the threshold for an “acceptable” (but not good) filtering performance — a minimum based on the typical issues that test subjects encountered. Note that the performance difference takes the industry into account; for example, an apparel website needs fewer filters than an electronics website due to the type of products it carries and, therefore, needs a less advanced design for its filters to achieve a higher score.
(View large version)
Despite having the lowest barrier to provide a good filtering experience, apparel websites notably have the worst performance of all industries for filtering, due to an unfortunate combination of inadequate filtering options and poor filtering interfaces. The subpar filtering interfaces are likely due to a deliberate prioritization of aesthetics over a clear and informative interface (a case of?false simplicity). Despite dealing with a product type that requires only a limited number of filtering types (compared to other industries), many apparel websites lack even basic filtering options, such as for product material and user ratings.
Sports and hobby websites suffer from poor filtering performance as well. While part of the reason is a prioritization of simple website aesthetics, similar to the apparel industry, another cause may be the mix of visual- and spec-driven product verticals in the industry. Many products on these websites tend to be fairly visual (toys, outdoor goods, sports equipment, hobby equipment), yet many also have two to three technical attributes that could completely invalidate themselves if they don’t match the user’s criteria, such as performance, weight and age. Consequently, users will have more complex filtering needs for sports and hobby products than they typically do for regular apparel websites.
The electronics and office industry has historically been one of those e-commerce industries that offer users a broad variety of filters, simply because finding many products would otherwise be nearly impossible for users. When looking closer at the lacklustre filtering performance in electronics and office, the problem is often poor filtering logic and interfaces. Particularly common flaws include the following: allowing only one filtering value to be selected at a time, no user-defined ranges for numeric filters, and a lack of explanation of industry jargon. Despite a generally high number of filter types being offered on several electronics and office websites, the products’ technical nature — several attributes of which are vital to the user’s purchasing decision — still result in a lack of compatibility filters (see section 4 of this article) and a lack of category-specific filtering types (see section 2).
Home and hardware websites offer decent filtering performance. This aligns well with the technical nature of the industry, and the score can be explained by a historical focus on offering sufficient filters (in particular, compatibility filters), which enables users to find the particular washing machine or cordless drill that meets their specific criteria. However, poor product data and a widespread lack of structured product specifications hold back filtering performance.
Health and beauty websites have decent filtering performance as well. In fairness, health and beauty products have fewer key product attributes (quantity being an exception), which means the websites can get away with much simpler filters than ones with highly spec-driven products. E-commerce websites in other industries, therefore, should not model their filtering experience on health and beauty websites because their filtering needs are likely different.
Mass merchants have vast and diverse product catalogs that have strict requirements for product data structures, processing and categorization — all things that can be incredibly difficult to get right. Combine that with a mixed catalog of highly spec-driven and visual product types, and mass merchants have the most complex filtering needs. Yet, it is clear that most mass merchants are aware of these challenges and have made very active efforts to resolve them, often through advanced filtering logic and data post-processing. This leads to a broad variety of filters being offered (including category-specific ones), which is one of the main reasons mass merchant websites achieve the best filtering performance — even taking their users’ more complex filtering requirements into account.
Improving E-Commerce Filtering
Overall, the filtering performance of the websites we benchmarked is passable at best. When it comes to filtering, the majority of even the top e-commerce websites come up short compared to physical retail, where a customer request such as “a light casual spring jacket in size medium” or “a rugged case for this digital camera” isn’t out of the ordinary.
Some websites do actively focus on filtering and spend resources on product tagging. For those websites, many of the lingering filter-related usability issues have to do with aligning user expectations and website implementation (specifically, filtering design and logic). Filtering thus represents an opportunity to vastly improve the return on investment that most large e-commerce vendors have already made in product tagging and data collection.
Filtering on e-commerce websites is a major topic that obviously cannot be fully explored in a single article. However, the filtering insights covered in this article hopefully lay the foundation for understanding the current state of e-commerce filtering and for creating a good filtering experience:
While mediocre filtering performance is often due to a lack of important filtering options, benchmarking also reveals that filtering logic and filtering interfaces cause severe problems for users. When looking at the users’ entire filtering experience, only 16% of the top 50 US e-commerce websites offer a good experience, while 50% offer a passable filtering experience, and 34% have a poor filtering experience, without filters for users’ most basic product preferences.
To ensure filtering availability, always ensure that each category has a unique set of filters specific to the type of products it contains. At a minimum, the product specifications included in the list items will need to be available as filters as well, but a wider array of filters will nearly always be needed. Currently, 42% of the top e-commerce websites lack category-specific filter types for several of their core product verticals.
Identify and offer key thematic filters unique to the website and product-type context. These will often need to be category-specific, and common omissions are a lack of style, usage context or purchase selection parameters. Currently, 20% lack thematic filters.
Any product category that contains compatibility-dependent products (accessories, integrated systems, spare parts, consumables, etc.) will need a compatibility filter. This is often a filter that allows the user to specify a model name and number, but it could also be a filter for a more generic specification, such as a filter for size, capacity or power. Currently, 32% of websites that sell compatibility-dependent products lack compatibility filters.
Long lists of filtering values (10+) should be truncated rather than be displayed in full (as 2% do) or use inline scrollable areas (24%). To ensure that users notice the truncation, do a few things: display up to 10 values before the truncation sets in; make sure the default displayed values are the values that users are most likely to recognize (i.e. the most popular); and style the truncation link itself to set it apart from the filtering values.
For select categories where an initial filtering selection would be relevant and would benefit the vast majority of users, consider promoting those few filtering values above the product list (for example, using buttons, text links or thumbnails). Currently, only 16% actively promote highly important filters on top of the product list.
Filtering performance varies greatly by industry, and the key players in your industry might not be a good source of inspiration. Even when adjusted for the different levels of filtering needs, websites in the apparel, electronics and sports industries are significantly behind in the filtering experience offered by mass merchant and hardware websites.
