對話過濾使用者體驗指南

如要順利導入對話式產品篩選功能,必須經過深思熟慮,設計出良好的使用者體驗。

視覺顯示元素

對話過濾器的位置和外觀會大幅影響其成效。

直向與橫向版面配置

以下是設計直向或橫向版面配置時的考量:

  • 建議:優先採用橫向設計,並盡量縮減垂直空間。這樣可盡量避免產品結果顯示在網頁需捲動位置。

  • 原因:如果篩選器顯示在頂端,可能會將產品結果推到網頁下方,減少產品的即時曝光度,進而增加這項功能的費用。此外,盡量減少元素之間的空白空間,可為網頁增加主要空間,顯示更多產品圖塊。

處理長屬性

如果多項選擇題的選項很長 (例如品牌名稱),請勿換行,否則元素會變高。請改為允許這些元素在網頁上水平延伸,並啟用側邊捲動。

以下是實作水平捲動的範例:

水平元素顯示範例

最佳刊登位置

建議在 3 到 5 列產品後放置對話式篩選器。這種做法可避免對話元素取代初始產品清單。

這個位置的重點是,對話篩選列應盡可能縮短垂直空間。如果對話式產品篩選功能的位置太顯眼,可能會導致產品顯示位置往頁面下方移動,無法立即看到。這項功能可能會減少購物者看到的產品數量,因此,可見的產品必須盡可能相關。

  • 側邊 (直向) 與頂端 (橫向):建議在 3 到 5 列產品後放置對話式篩選器。這種做法可避免對話元素取代初始產品清單。

  • 強烈建議:如果對話式產品篩選功能成為縮小產品選擇範圍的主要方法,建議盡量減少或完全取代手動篩選列。這樣就能新增一欄產品項目。

電腦和行動裝置

雖然在電腦上導入這項功能已證實能帶來成效,但在行動裝置上,成效較不穩定,整體效能增幅也較低。行動裝置的螢幕尺寸有限,因此刊登位置必須經過更具創意和審慎的考量。

  • 建議:一開始請優先在電腦版網站導入,桌機螢幕較大,因此廣告素材設計的彈性也較高。行動裝置螢幕較小,開發人員必須優先處理特定元素。

  • 避免:即時通訊視窗介面。請勿將對話篩選器實作為聊天視窗。這會將使用者帶離主要網頁介面,並可能中斷開發人員通常會花費大量時間最佳化的預期網頁結帳程序設計。

其他行動裝置注意事項

測試時,行動版網站和應用程式也應分開處理。行動應用程式測試本來就難以進行,但彈性較大。行動版網頁通常較容易測試,但不同行動版網頁瀏覽器會有不同的取捨。

使用者與篩選器的互動

本節說明如何設定對話式產品篩選功能。建議以動態對話式篩選取代靜態、硬式編碼的篩選器元素,釋放螢幕空間,顯示更多目標產品。無論篩選器來源為何,所有套用的篩選器都能全域更新產品格線。

後續的對話式問題會根據整組套用的篩選條件調整,並提供多個選項。

統一全域篩選器

購物者可以與對話式篩選器和套用的任何其餘篩選器元素互動。前端實作項目必須能夠處理這種情況。

全域篩選器具有下列特性:

  • 全域套用:當使用者從頁面上的任何篩選器元素 (無論是對話式產品篩選器或靜態篩選器元素) 進行選取時,產品格線必須更新,以顯示套用所有全域篩選器的結果。
  • 智慧後續追蹤:使用者接下來看到的對話問題應與套用的完整篩選器組合相關,無論使用者選取哪個元素都一樣。舉例來說,如果購物者從對話式元素選取 color 篩選器,並從傳統篩選器元素選取 size 篩選器,後續的對話式問題就不應詢問購物者想要的尺寸

篩選器類型

對話式產品篩選功能可讓你在網站上使用單選和複選選項。

選擇題

AI Commerce Search 最多可根據產品目錄中的值名稱,提供 20 個多重選項。系統會根據關聯性排序,並列出最相關的選項。長選項 (例如長品牌名稱) 可確保使用者能側向捲動,而不是換行,維持垂直緊湊感。

取代硬式編碼元素

許多電子商務搜尋網站開發人員會在網頁介面中預先建構手動類別篩選器元件,供產生最高收益的查詢使用。這些濾鏡元件通常價格高昂、製作耗時,且與使用者的互動性不高。

硬式編碼元素的範例 圖 2:硬式編碼元素顯示範例。

  • 建議:對話式篩選功能背後的概念,是讓您在所有產品中快速部署這類動態體驗,而不僅限於設計視覺元素時所用的幾個熱門查詢。因此,請找出並移除對話式篩選器設計要取代的元素。避免有兩組功能類似的篩選元素互搶鋒頭。這樣一來,螢幕上就能顯示更多目標產品。

實驗想法

以下是一些實驗想法:

  • 產品列之間的版位:在網頁下方插入元件,位置介於三到五列產品之間。這種做法可避免對話元素大幅取代初始產品顯示畫面。
  • 飛出式或彈出式:使用按鈕觸發對話方塊或飛出式選單,其中包含篩選問題。這項功能可以整合至現有的篩選器彈出式視窗,也可以是獨立的飛出式元素。
  • 固定式工具列:畫面上的固定式工具列會顯示問題和選項。這項功能會顯示在產品前方,而非將產品往下推。
  • 測試注意事項:測試行動版和電腦版時,請務必分別進行實驗。不同裝置的購物行為差異很大,適用於某個裝置的視覺化元件可能無法轉換到其他裝置。

資料擷取與品質

Vertex AI 模型的智慧功能是根據使用者互動資料建構而成。導入程序會分兩個階段擷取資料。

第 1 階段:先從歷史事件著手

模型可使用歷來事件資料進行訓練。系統會先將歷來事件資料擷取至 Google 環境,讓模型即使是沒有即時互動資料的新專案,也能辨識出來。

階段 2:改用即時查詢資料

這項功能上線並開始收集先前擷取的資料後,Vertex AI 會使用即時查詢資料串流,改善服務模型。與歷來擷取的事件資料相比,即時查詢資料的品質通常較高,因為歷來事件有時會遺漏重要資訊。因此,即時查詢資料更適合用於持續最佳化。