UX優化:產品列表頁該如何設置?46%的電商網站都沒做好

我想有一種可以比較的方式,因此我可以不用點這個,再點返回,點那個,再點返回,點點點.. 一個顧客解釋道,他想給自己的筆記本電腦找個包, 除瞭價格和商品名稱我在這找不到一點有用的信息。 註意 Zappos 的多半電腦包描述裡根本沒有或隻有模糊的有效尺寸描述,像 大。

用戶基於產品列表裡關於這些產品的有效信息來選擇是否購買這些商品。因此在我們經過大規模的產品列表和篩選可用性學習後毫不奇怪地發現貧乏的列表項信息是關於產品列表導航的最嚴重的可用性問題。

通過測試,我們發現信息過少或信息相關性過低的列表項很有問題,因為用戶在缺少這些商品的基本信息的情況下是無法進行適當評估的。這會導致受測對象完完全全地誤解瞭相關產品,並導致他們在產品頁和列表頁之間不必要的來回跳轉 – 他們不得不返回繼續一遍剛才的操作, 打開列表頁的每個產品隻是為瞭瞭解它的基本屬性和核心特征; 這個令人不快的實踐經常導致受測對象放棄訪問站點,因為簡單地定位相關產品的矛盾太突出瞭。 顯而易見,在每個列表頁展示正確的數量和正確的類型信息對提升用戶的產品查找體驗是至關重要的。

另外,在產品列表頁確認展示哪種類型的信息以及展示數量是個大問題 , 就像我們全美 Top 50 的電商網站的產品清單列表 所顯示的,這些網站中的 46% 都有展示內容過少或展示信息選擇不當的毛病。(一小部分網站則截然相反,他們在列表項上展示瞭過多的信息!)

測試期間發現,Gilt 沒有展示瞭列表信息的關鍵部分: 可選商品的種類!這導致瞭多個測試受試者拒絕購買商品,因為他們認為該商品隻有顯示顏色的有貨,實際上它有多種顏色可選擇。

除瞭所有常見的通用屬性, Crutchfield 在特定分類的屬性也存在嚴重的問題 – 那就是和產品類型相關的唯一信息。舉個例子,the X-watts-RMS 和 filter pass 屬性隻和汽車擴音器相關,也因此僅僅在這些欄目中被展示。同時,這個站點的其他種類的所有產品也僅僅隻展示瞭垂直向的唯一相關性。

在列表項中獲得一個好的信噪比對提升用戶找到他們想要找到商品的能力至關重要。然而很明顯這並不容易。它需要仔細斟酌要展示產品屬性的提煉。這篇文章裡我們會為大傢呈現從我們的產品列表和篩選學習針對如何準確地評估產品列表裡信息的展示量和種類得到的測試發現。

(註意以下的發現同樣適用於種類列表和搜索結果。)

列表項信息: 平衡操作

無論如何展示在產品列表裡的信息是用戶評估和判斷產品適用性的基礎。因此產品列表不應該被浪費。列表裡的每個元素都應該被精斟細酌,呈現給用戶最適合他們挑選的條件。一個成功的產品列表設計應滿足以下兩點要求:

展現給用戶足夠的產品信息以適當地評估產品的適用性(針對他們的獨特需求), 讓用戶把產品列表當成一個整體對待(i.e. the options available to them),並可以把有興趣的產品和另一個產品拿來對比。

前者是每個產品要展示充分的產品信息然而後者產品要在用戶的屏幕上展示足夠的產品數量。於是就造成瞭一個進退維谷的情況,如果每個產品的信息展示過多,會導致每頁展示的產品數量下降。然而產品數量太多又會造成單個產品展示足夠的信息變的相對困難,導致過多的來回跳轉。

從我們的大規模眼部追蹤學習中明顯得知, 當用戶在瀏覽視覺導向的產品時極度傾向於關註產品縮略圖。(這裡我們可以看下 REI 32個主題的熱力圖,點擊量,總觀察時間)

因此產品列表設計不是一個少即是好的事情而是一個剛好合適才是好的事。找出哪些屬性應該被展示在列表項裡哪些不應該被才是應該做的事,但是沒有硬規則。一個好的列表項應該通過提供充足的信息來幫助用戶準確評估列表中哪些是與用戶相關的, – 同樣重要的是 – 哪些應該被略去。列表信息應該更好地幫助用戶對比相關產品。它本質上是一個實踐:不要用過於膨大的產品列表來最大化信息的精髓和產品的對比性。

現在我們通過研究發現,有兩組屬性應該被包含在列表項中:通用屬性和特定種類屬性。縱觀整個站點的所有產品通用屬性都包含價格和產品標題(或類型)。特定種類屬性對每個產品種類來說是惟一的並且產品和產品之間是不同的。下面的例子中我們會講到每個細節。

通用屬性

有一些通用屬性應該被展示在幾乎所有地方,無論是在售產品的列表項或站點內容中。舉個例子,產品價格是基本屬性,所以應該被放在所有環境下(隻有極少數情況不需要).

除瞭相對明顯的價格屬性,其他的主要通用屬性有: 產品標題或類型,縮略圖,用戶排名,可選類型。 對搜索結果列表, contextual search snippets 在這方面也淪陷瞭。下面的文章會總結通用屬性中最重要的幾方面。

一個客戶對IKEA的沙發按價格進行排序(從低到高)– 不幸的是出現瞭沙發裝飾品,沙發墊和沙發套而不是從便宜到貴的沙發。更困惑的是,沙發套被展示在沙發上,一眼掃過去人更加難判斷賣的是沙發還是沙發套。對用戶來說每個產品的價格很明顯是至關重要的,不管是估算產品本身或者和其他產品對比。這就是價格要對用戶永久可見的原因。我們的 產品列表和篩選基準 顯示所有站點都做到瞭這一點。

測試期間發現一些和產品價格相關的常見問題。舉個例子,一些案例中價格中包括什麼不是太明確(通常發生在幾個產品被展示在產品縮略圖中的時候,像產品適用性或捆綁銷售)。讓顧客明確知道價格裡包含什麼是明智的。同樣,展示每單元的價格有助於客戶瞭解性價比 – 98%的站點在這方面做的不太好。(參考我們的測試結果 Price Per Unit).

我看到那兒有東西,但是沒有圖片,所以我不想點它 一位客戶解釋道(在Best Buy),看著列表中的第三條。事實證明那確實是她想要的東西,但是由於沒有縮略圖,她選擇像其他人一樣直接跳過瞭那個產品。

產品縮略圖被證明是最重要的屬性,受測對象願意花大量的註意力在產品縮略圖上。沒有縮略圖的列表項經常被忽略,大多數客戶認為這些產品是不完整的。好的縮略圖在用戶搜索和選擇產品的過程中扮演關鍵角色。因此給用戶提供產品的視覺信息是至關重要的。

事實上這意味著為所有列表項提供縮略圖並確保縮略圖的尺寸能反應用戶對產品視覺信息的要求。(Product Lists report owners: 參考規則 #25, #28, #29, #34 and #39)。 更加明智的做法是提供 secondary hover image (提供更多的產品視覺信息) 並同時考慮 use context and cut out thumbnails (允許提供更加全面的產品視圖)。

IKEA提供瞭產品標題(系列)和類型,單獨一個產品名稱對用戶說就顯得沒那麼有價值。類似Söderhamn和Poäng的標題對用戶來說隻是提供瞭產品系列的唯一標識。同時鼠標移動上去後,相關的信息會展現出來,這個特別棒,如果默認狀態下提示會列出相關信息就更好瞭。

產品標題或類型也被證明是較為重要的,在客戶瀏覽產品列表(尤其是搜索結果)而且產品縮略圖很難一眼識別出產品類型的情況下。和產品標題一樣形象生動的產品名稱也可以代表自己,有些行業產品類型對用戶來說比產品標題更容易理解 – 尤其在產品標題不明瞭的情況下。在這些情況下,產品類型會替代標題或和產品標題合並展示。

當存在一個數量巨大或者魚龍混雜的產品目錄的情況下,人工確定每個產品的標題的描述性可能會太消耗資源,這種情況下推薦兩者都展示。還有一個較為高級的辦法就是動態的瀏覽每個商品標題來確定是否包含產品類型關鍵詞,基於此,對於掃描到的標題中不包含產品類型關鍵詞的商品,展現一下產品類型信息。對於體量或者排列較好的產品目錄(像 IKEA 這樣的制造業電商),你可以通過整個產品目錄(基於整個公司的產品命名規則的)來決定產品標題的描述性。。

在沒有任何關於這些鍋的尺寸的提示下,用戶必須去瀏覽每個產品頁來得到這些信息。雖然用戶可以通過已存在的價格區間推測產品的別的參數, 如果搜索結果上百後就顯得笨拙瞭。 更重要的是,盤子的價格區間不能告訴用戶盤子的參數有哪些 – 盤子是靠顏色,尺寸還是材質區分?

作為比較,我們看下用戶在 American Eagle Outfitters 是如何做到掃一眼就能確定襯衫的多個參數(顏色樣式等),這些隻在列表項縮略圖中的特殊樣式裡才會顯示。

產品參數 像不同的顏色,尺寸,材質,外觀等,是需要直接在列表項裡展示的屬性。沒有這些東西,客戶經常會pass掉實際上是他們想要的東西,僅僅是因為他們看不見這些參數,隻能通過展示的默認屬性來判斷是否是他們想要的東西,而不是通過查看產品詳情頁來確認與產品相關的屬性。

然而並不是所有產品都會被展示。舉個例子,桌子是否可用得通過列表項裡展示的桌子的多個尺寸參數來決定,然而鞋子就不一樣瞭,用戶可以根據鞋子的天然屬性來推測產品的存在的參數。

這有一個測試對象 – 不太明白不同產品規格的含義 – 於是決定通過排序來決定應該購買哪個相機。用戶排名經常被猶豫不決或者對產品瞭解不深的人當做指導。

用戶排名經常被多數行業和網站當做普遍屬性放在列表項裡。經測試發現,無論何時對特性領域產品瞭解不深的用戶都會依賴用戶排名來評估搜索到的相關結果 – 並視那些高排名的項為被其他用戶審查過安全選擇。

有些用戶在他們沒法自己做出判斷的時候就把評分作為好質量/劃算的代表。因此,如果用戶依賴的數據不是在售商品方面的專傢,評分就應該被直接包含在產品列表中。當我們把用戶評分放進產品列表時,註意實際上應該包括平均用戶評分和平均評分數量。我們回過頭來看,發現用戶意識到平均評分在沒有評分人數是沒用的(參見Users Perception of Product Ratings 和 Dont Base Customer Ratings Sorting on Averages Only)。

特有屬性

有些產品的少數屬性對那產品來說特別重要,那麼我們就應該把它們放進產品列表項的概覽中,方便用戶選擇哪些產品該打開哪些產品該跳過時做出富含信息量的決定

這些屬性在分類之間變化幅度很大,而且必須是針對每個種類唯一可選。後面的是幾個例子是不同的特有屬性被當做靈感來源在決定是否選擇此商品時,對一個給定的分類來說產品屬性會變得十分重要(這裡的質量就被當做一個特性種類的屬性)。

隻有 Newegg 中的一些電源適配器包含適配信息。對一些客戶來說,他們更願意買一個便宜的電源適配器而不是一個包含適配信息的價值 $116 的適配器,這些信息會無休止地煩著他們。

在特定種類的高科技產品中產品的相關性幾乎完全被產品和其他產品適配性來決定。因此適配信息應該被放在列表項裡,用戶可以不用打開列表中的每個產品來確定與產品是否與他們相關。進一步說,如果用戶的購物車有適配性相關的產品,產品列表項應該智能的顯示此產品是否和購物車裡的產品適配。(參見 6 Use Cases for Compatibility Databases on E-Commerce Sites和 Highlight Items Already in the Users Cart)。

因為列表項裡沒有相機套的尺寸,受測對象必須打開 Tesco 的每個產品頁,搜索產品頁的說明來確定相機套是否適合他們的相機。一張使用情景圖也對判斷尺寸是否合適有幫助(例如展示包含部分相機的相機套),但是明顯沒有在列表項裡展示實際尺寸來得精準些。

另一種適配信息是尺寸。舉個例子,任意一種包都需要容納,攜帶,存放另一種別的產品,所以我們需要列出它的內部尺寸來讓用戶確定是否和他們的物品適用。也就是說,比起高科技產品的適配性它還是不太嚴格的,因此用戶可能會買一個容器來獲得足夠多的空間來容納要存放的東西。

有個受測對象依靠產品縮略圖和推薦年齡范圍來查找適合她外甥女的產品。Entertainer 明白他們用戶中的大多數都不是最終用戶,所以他們明智地給他們的玩具加上瞭一個推薦年齡范圍來幫助用戶來選擇合適年齡段的產品。

推薦使用年齡段的屬性適用性,場景或受眾,在客戶不是最終使用者的產業十分重要。事實上,這些屬性起到瞭綜合使用手冊的作用,引導用戶到適合最終受眾或場景的產品,像為母親節買的花的種類。

Go Outdoors 在他們的所有睡袋裡都沒有加入舒適溫度排名;隻有極少會把舒適溫度值印到產品縮略圖上。受測對象沮喪地發現他們必須打開剩下的產品來確定產品是否適合在寒冷天氣下使用。

另一個典型的特定種類屬性的案例是任何產品都會有特殊使用情況,包括安全齒輪,戶外裝備,水下設備,任何類型的產品都必須在特殊環境下保持運行。

特有屬性的例子是數不清的,上述文章僅表明瞭有一兩個和產品種類唯一相關特有屬性的產品特性的幾個實例。產品列表是說不盡的。你可能還會舉相機分辨率,汽車裡程數和動力,食物的制造方法等等。

特有屬性就是比較重要的通用屬性,隻是在不同產品類型間不共用 – 適用年齡和玩具高度相關但是和相機毫無關系,百萬像素解析度和相機相關但是和玩具毫無關系!因此確定特有屬性需要花些功夫,要瀏覽每個產品種類來確定是否存在1-3個和產品種類唯一相關的屬性對用戶決定產品的相關性起決定性作用,然後動態地放到列表項中。

展示產品列表項信息

通過把所有普通產品屬性(價格,縮略圖,產品標題或屬性,相關參數和用戶評分)和所有特有屬性放在產品列表項中,用戶已經具備瞭充足的條件去評估產品列表項中的每一項並決定選擇哪個產品進行更近一步的瞭解(打開產品頁)。

通用屬性必須具備因為那是所有產品的基本信息,如果沒有這些信息用戶無法準確評估產品的相關性。特有屬性是較為聰明的方法提供1-3個和產品種類唯一相關的額外屬性,提供指定的幫助性信息給用戶來確定產品是否和他們相關。

通過列表項的所有通用屬性和1-3個特有屬性,已經提供瞭足夠的信息來讓用戶準確評估和比較列表中的產品。既沒有信息過少的問題(最普遍),也沒有列表項信息過多的問題(不太常見但是等同於設計存在問題),簡單來說就是:達到瞭理想狀態的平衡,沒有信息冗餘的情況下提供瞭每個產品的足夠信息。

在列表項信息中做到理想平衡可以在產品列表中得到高的信噪比,對用戶查找產品的能力是至關重要的,好的信噪比使用戶容易獲得哪些產品可以購買,哪些產品可以跳過。千萬不要因為輕視這些建議被愚弄 – 46%的電商網站在其中的一兩點上做地很失敗,強迫用戶做多餘地返回操作 – 不停地來回跳轉 – 經常在用戶尋找產品的過程中制造困難,以用戶放棄網站而結束。