原文：Merchandising Usability:Better Ways to Display Product Recommerndations
作者：Linda-Bustos
譯者：耿人杰

———————————— 全文的分割線 —————————————
引言：09年，越來越多的電子商務(wù)網(wǎng)站出現(xiàn)在人們的生活中。交叉銷售和向上銷售被更經(jīng)常地加入到網(wǎng)站規(guī)劃和具體設(shè)計(jì)中。人們希望這些對購物的轉(zhuǎn)換率有所提升。這篇網(wǎng)站正適合當(dāng)前的背景，為我們很好的總結(jié)了推薦商品的展示方式的設(shè)計(jì)問題。

你注意到了嗎，當(dāng)展示交叉銷售和向上銷售（cross-sells and upsells）時（譯者注：向上銷售含義），許多電子商務(wù)網(wǎng)站會將用戶從正在瀏覽的網(wǎng)頁劫持到他們想推薦的商品網(wǎng)頁，并且經(jīng)常沒有提供“返回”的鏈接。顯然，這不是最有效的產(chǎn)品推銷方式，有提升商品購買轉(zhuǎn)換率的可能。

很明顯，交叉銷售可用性是能否達(dá)成效力提升的關(guān)鍵因素。但如何做到在不打斷用戶瀏覽流程的前提下更好的給用戶展示商品信息呢？

AJAX 浮層效果

我最推崇的展示交叉銷售/向上銷售的方式是通過鼠標(biāo)懸?。╬re-click）來顯示相關(guān)產(chǎn)品信息。這能以AJAX “hover” 效果來實(shí)現(xiàn)。至少，你能展示商品的標(biāo)題、價格和庫存情況。也可以展示下大致的商品信息、物流選項(xiàng)、顧客平均評分/銷售評分、可選顏色等。Barnes and Noble甚至還能允許用戶快速將該商品加入到購物車：

但這里有一個潛在的問題，太多的信息會充斥在一個小的懸浮窗口中，像TheFind的前端功能竟然還包含標(biāo)簽：

快速預(yù)覽

Foot Locker給消費(fèi)者“快速預(yù)覽”的選項(xiàng)：

你能選擇產(chǎn)品尺寸、顏色等，甚至添加進(jìn)購物車且不需要離開初始產(chǎn)品頁面。唯一有些棘手的是，如果你不點(diǎn)擊右側(cè)的預(yù)覽小圖就會直接讀取產(chǎn)品全尺寸大圖頁面。這就是一些針對快速查看和快速預(yù)覽功能的可用性總結(jié)。然后，如果你偶然讀取頁面，F(xiàn)oot Locker會在副欄提供一個最近查看過的商品列表。

對比陣列

當(dāng)建議的是“向上銷售”（建議購買屬于同一系列的更多更貴版本的產(chǎn)品）或“可選產(chǎn)品”（同一品類且價格相似的產(chǎn)品）的商品時，如果提供一個復(fù)選框（check box）來提供功能比較矩陣來對比各個產(chǎn)品功能將會非常有用。我已經(jīng)看到一些實(shí)現(xiàn)的案例，下方是一個有點(diǎn)類似的原型：

這種功能對“交叉銷售”沒有意義，因?yàn)閷⑻O果、習(xí)慣和甜甜圈做功能上的對比沒有意義。

將幾種商品打包加入購物車

Amazon和Sears允許用戶將多種商品打包加入收藏夾，并提供選項(xiàng)來刪除那些你不需要的建議商品：

有幾種方法可以讓你改善交叉銷售和向上銷售的可用性.

Victoria’s Secret針對交叉銷售有良好的頁面布局，允許將多個商品加到購物車?yán)铩?/P>

這個設(shè)計(jì)的問題是，除非你點(diǎn)擊3次“加入購物車”進(jìn)行所有選擇后，否則你將在進(jìn)入購物車頁面且無法回到剛才的商品頁面。如果用戶不確定如何操作，頁面上也沒有清晰的指導(dǎo)。

Martin和Osa’s shop的裝備捆綁配置允許用戶一個接一個的做出購物選擇而不用離開頁面，當(dāng)你全部完成后點(diǎn)擊一次“加入購物車”即可。

將建議帶到購物車

一些顧客會擔(dān)心如果點(diǎn)擊了相關(guān)的商品將不能回到他們正在看的商品頁面。Arden B在購物車匯總頁面顯示相同的交叉銷售商品：

Walmart在商品細(xì)節(jié)的底部展示推薦商品，下圖是瀏覽嬰兒車的商品推薦：

在你將商品加到購物車后，你的購物車將銅鼓AJAX即時更新（右上角），用戶仍然在產(chǎn)品界面，但“買了此商品的顧客還買了XX”移到了頂部，商品細(xì)節(jié)部分移到了下方。非常聰明的做法。

Sears也采用了類似的做法，當(dāng)某商品被加到購物車后，將顧客帶到登入頁（landing page）并在頂部顯示“買了這個，也買了那個”：