推薦商品

藉由更改推薦商品的呈現方式,提升了16.53%的點擊率與近10%的商品詳情頁觀看量。

  • 公司:EyeBuyDirect
  • 角色:產品設計師
  • 時間:Feb. 2021
  • 介面與裝置:商品詳情頁(移動裝置)

目標

本次的設計優化有著以下的目標:

  1. 提升點擊率:我們希望提升推薦商品的點擊量,藉此提高用戶參與率與轉化率。
  2. 提高推薦商品曝光量:在目前的設計之中,首個畫面僅曝光了 1.5 個商品,用戶需要額外進行滑動以展示更多商品推薦。我們希望在不影響用戶體驗的前提之下,讓用戶發現更多推薦商品。

網格化設計

在新的設計中,我改用直式的網格設計以提升商品的可視性以及模塊的易用性。

首先,由於推薦商品模塊的位置在頁面的底部,用戶在抵達此區域時較有可能持續滾動。直列式的網格的瀏覽方式與用戶的行為相近,也提供了更大的操作區域與展示區域。網格化的設計也大大的提升了排序較後的商品的可見度,讓用戶可以看到更多的商品推薦。最後,網格化的設計也可以避免用戶因為左右滑動而意外回到上一頁,造成糟糕的用戶體驗。

縮小商品圖片

在新的設計中,我縮小了商品圖片的展示尺寸,以一行兩個的方式展示商品。

由於眼鏡行業的商品外觀相似性較高,用戶也有較高的機率在視力較差,因此我在改變前進行了用戶行為的觀察以及內部測試,確認在一行兩個商品並排的情況下,用戶仍然可以輕鬆地分辨出不同的鏡框。

縮小商品圖片讓我們可以更有效率的運用頁面空間,也因此得以展示更多的推薦商品。

數據表現

+16.53%
點擊率
+9.83%
商品頁瀏覽量

新設計上線之後,「相似商品推薦」的平均點擊量提升了16.53%,平均商品詳情頁查看量也提升了9.83%。

其他案例