AI 當前如火如荼,正以驚人的速度改變著我們的生活和工作方式。我們淘寶設計團隊也在探索如何借助 AI 的能力,打破談及 AI 即聊天對話的思維慣性,構建更高效、實用、符合電商場景的體驗范式,來幫助用戶解決全鏈路購物場景問題,重塑用戶的購物體驗。
更多天貓設計案例:
手貓 AI 購物助手
談到 AI 智能工具,大家對 Chat GPT 這類沉浸式聊天對話式 AI 產品一定不陌生。
但對電商平臺來說,用戶場景更為復雜,用戶常常在搜索和查看商品間反復橫跳,在商品詳情頁龐雜的信息中翻找,在多個商品間糾結不知道怎么選,看其他用戶怎么評價,在購物車里來回湊不知道怎么買更省…不少問題伴隨鏈路產生,讓用戶在鏈路和獨立聊天頁間來回進出,并不是合適的解決方案。
我們認為 AI 智能技術是手段,需求場景不同、產品功能不同,面向用戶的設計形態自然也應該有所不同。要設計更高效、實用、符合電商場景的 AI 產品體驗,核心邏輯是先梳理逛-找-看-對比-聊-買-售后完整購物鏈路下各個階段的痛點,其次針對解決痛點所需功能選擇對應智能技術和合適的設計形態。
需求導向的智能設計邏輯
需要清楚地意識到線上購物發展多年,用戶痛點存在的依然存在,只是過去的技術給出的是過去的解決方案,新技術給老問題帶來了新解法。
智能技術包含但不限于 ML 機器學習(常見于關聯推薦)、機器視覺與圖像處理(常見于識圖搜索)、RPA 流程自動化(常見于長路徑多步驟自動化處理)、GenAI 生成式 AI、NLP 自然語言處理(常見于語音識別對話)等
我們先來看兩個典型例子:
A. 在 Google Pixel 8 的拍照體驗中,用戶可以一鍵優化照片中諸如閉眼、沒看鏡頭等問題。整個操作過程中沒有使用對話頁或用自然語言作為需求輸入方式來觸發照片修復功能,而是通過照片編輯頁中一個簡單的 Magic Button、一步點擊操作后瞬間換頭的效果,給用戶帶來“Wow-Moment”。足夠可靠的智能技術,對應足夠簡單自然的交互方式,不需要多余的粉飾。
Google Pixel 8 官方換臉視頻片段
B. 在多應用多任務并行的辦公場景中,Microsoft Copilot 以輔助模式在應用一側新開對話窗口,根據用戶輸入的自然語言指令將結果直接作用顯示于相關應用的任務中。對話式的交互方式在這個場景下,將原來具有專業性要求、需要用戶自主按步操作的復雜前臺功能后臺化,使用戶通過描述需求就能獲得結果,省去不少操作成本。
Microsoft Copilot 桌面應用截圖
從這兩個案例,我們不難總結出鏈路節點融入式和全功能集合中心式兩種產品形態,分別對應兩類主要用戶場景:A.在某個鏈路節點下遇到問題,需要從旁輔助提供對應場景功能幫助;B.不想或不知道如何深入鏈路去找對應功能完成操作,需要助手全權代勞。
1. 鏈路節點融入式
針對鏈路場景,既要讓用戶可見可用,也要保證原有鏈路體驗的連續性和沉浸感,不干擾用戶主鏈路。對此,需要設計一套匹配 AI 適時主動性,輕量、靈活的自適應組件模塊融入各場景輔助給用戶提供幫助,并統一交互范式保證體驗一致性。
①自適應組件模塊
通過分析對比各種頁面組件的輕量感和靈活性,可以使用鏈路打斷性弱和頁面融合性相對平衡的底部提示氣泡作為 AI 主動觸達用戶的通用性交互模塊,頁面內卡片元素和小浮卡為被動觸發的內容結果模塊。
頁面組件輕量感和靈活性對比
組件定義除了可以讓不同業務的設計師參與進來拓展場合,還可以讓大模型通過學習我們介入設計的標準流程,自行組裝輸出更多我們窮舉不到的場景。
②嵌入內容流和從旁輔助兩種形態
實際用戶在購物過程中遇到的問題,有些是跟當前頁面某個內容點強相關的(比如商家無法及時回復);有些是全局性的(比如不知道如何跟商家溝通),需要作為第三方角色從旁輔助去協助用戶。
前者我們可以通過在對應內容點用與當前頁面相似的模塊,加少量的 AI 提示去觸達用戶;后者可以使用底部提示氣泡,去靈活提供用戶當前所需內容。
兩種形態舉例
③AI 主動交互范式
區別于傳統被動式響應的交互方式,適時適度地主動前置感知、理解、判斷、響應用戶需求,是產品讓人覺得智能懂我的重要原因。在用戶和 AI 的交互過程中,通過對場景、觸發、操作、結果和干預這五個要素的主動關系設計,可以使整個智能體驗更符合用戶預期。
- 什么場景下:流程節點、頁面觸點、用戶需求
- 以何種形式觸發什么功能:誰觸發、輕重度、是什么功能的感知
- 功能操作:是否需要、操作步驟
- 如何返回什么結果:是否當前流程節點頁、局部變/當前全變/新頁面、結果狀態
- 結果反饋/需求修正
A-U 交互主動關系圖
以下是“詳情頁商品信息答疑”和“IM 咨詢商品”兩個例子來解釋這個交互范式。
2. 全功能集合中心式
中心頁核心幫用戶解決腦海中有一個需求但不知道如何解決或鏈路太深不想逐步操作的問題,比如不知道怎么找到想買的東西、不知道怎么挑選禮物、大促要退的商品很多挨個操作麻煩等,以及讓用戶知道我們有哪些 AI 能力。
這類場景下,一問一答的聊天對話是一種解決方式,但核心是多輪指令和結果之間交互或收斂關系的處理。對此,我們的新方案在開發中,等上線后再跟大家分享相關設計經驗。
1. 次不妨主
在設計過程中,要確保原有主鏈路的體驗連續性和操作習慣,避免為了強調 AI 功能做打斷性交互設計,前面鏈路節點融入式產品架構的設計核心就是在遵循這個大原則。這種體驗包括以下四個特征:
- 在次級視覺區適度出現
- 盡可能當前頁面完成無跳轉,避免多步重操作
- 非強制性,不會阻斷用戶主操作
- 未發生或結束操作后自覺退出
2. 感知有度
在視覺層級上,結果的呈現要適度,避免過度搶用戶的視覺瀏覽焦點。
應當根據用戶當前情境需求,合理設計信息層級和用戶視聽覺等感官輸入強度,從操控觸發、過程等待、結果變化三個維度適時反饋給用戶,避免過度刺激或信息過載,使用戶能夠在接收信息、交互和反饋時保持舒適和專注。
- 操控觸發:組件響應時間點=用戶實際操作時間點的絕對跟手操作(點擊縮小、松手放大)、功能觸發感知(模塊功能符號變化/全局背景掃光)
- 過程等待:響應延遲有反饋、思考過程狀態表達、主動觸發倒計時提示
- 結果變化:頁面內局部變刷新感知、獨立模塊聯動展開(氣泡-飄條)
3. 一步操作
盡可能讓用戶以最直接、最快捷的方式達到目的,能一步就不要兩步操作,降低多步操作帶來的跳轉流失和用戶誤操作率。
4. 結果直給
加強對結果的關注,確保用戶能夠快速、直觀地看到其操作的結果。展現過程狀態清晰、結果簡潔易懂,就算做不到也要直接告訴用戶而不是委婉含糊的文案表述,減少用戶在達成目標過程中猜測或困惑的時間,使用戶能夠輕松理解并快速做出下一步決策。
在 AI 產品體驗設計中,AI 技術本身很容易成為關注的焦點,“回歸用戶需求本身”尤為重要,這種意識和原則有助于避免過度設計,創建真正以用戶為中心的產品體驗。
目前 AI 購物助手設計解決方案主要應用于手機天貓 APP 里,鏈路節點融入式方案已在購前、中、后全場景主鏈路中推動落地,包括首頁推薦、搜索、商詳、IM、購物車和訂單列表,全功能集合中心式交互方案目前正在開發中。后續我們還將持續深度探索用戶在購前、中、后細分場景下的需求方案,構建更高效、實用、符合電商場景的 AI 購物體驗。
歡迎關注「淘寶設計」公眾號:
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 4 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓