新用戶下單,詳情頁、購物車、結(jié)算頁容易忽視的細節(jié)問題
本文作者分享了新用戶下單過程中,詳情頁、購物車、結(jié)算頁容易忽視的細節(jié)問題,并給出了明確的解決方案。enjoy~
1.?場景
我們假設一個新用戶,剛來到產(chǎn)品,沒有注冊登錄過,簡化的流程如圖8-1所示:
圖8-1 新用戶下單流程圖
2.?詳情頁
2.1 參數(shù)選擇不獨立
如圖8-2,參數(shù)選擇的邏輯是,先選擇顏色,切換顏色后,列出當前顏色下的內(nèi)存,也就是按照從上到下的順序依次選擇,如果有的用戶要先選擇內(nèi)存再選擇顏色,但是目前情況下,所有的內(nèi)存選項并沒有全部列出來。
圖8-2 參數(shù)選擇不獨立(圖片來源:360商城)
如圖8-3可以看到,所有顏色和版本的參數(shù),是全部展示出來的,用戶可以通過顏色找版本,也可以通過版本找顏色。
圖8-3 參數(shù)選擇獨立(圖片來源:京東商城)
2.2 切換顏色不能直接看到效果圖
如圖8-4可以看到,即使參數(shù)部分只保留顏色,圖片部分很多時候顯示并不完整,這個時候用戶的操作是,切換下顏色,然后把頁面拉到頂部,才能看到完整的圖片,再切換下顏色,再拉到頂部,如此循環(huán)。
圖8-4 切換顏色看不到完整效果圖(圖片來源:華為商城&360商城)
如圖8-5通過選項卡的方式,看上去好像解決了上述問題,切換顏色選項后,縮略圖隨即切換,但是縮略圖卻都無法點擊。
圖8-5 切換顏色可以看到效果圖(圖片來源:小米商城&魅族商城)
如圖8-6切換顏色后可以看到效果圖,點擊縮略圖又可以看到大圖。
圖8-6 切換顏色可以看到效果圖(圖片來源:京東商城)
2.3 加入購物車提示不明顯
圖8-7第1個圖,使用的是系統(tǒng)默認的toast提示樣式,第2個圖就明顯很多,所以提示的強度需要根據(jù)重要性來區(qū)分,比如加入購物車、注冊的錯誤提示等, 這種比較重要的,用圖2的強提示,而有些比如清除緩存成功、版本升級成功,可以使用圖1的弱提示。
圖8-7 加入購物車提示不明顯(圖片來源:華為商城&小米商城)
3.?購物車
3.1 未登錄不能加入購物車
從圖8-8可以看到,加入購物車的時候到底需不需要登錄,行業(yè)內(nèi)并不一致。加入購物車登錄的好處是方便數(shù)據(jù)統(tǒng)計,加購的時候很容易統(tǒng)計到具體是哪個用戶操作的,另外跟現(xiàn)實世界不同的是,購物車還承載著部分營銷功能,比如關(guān)聯(lián)推薦等,如果是針對會員等級的推薦,不登錄就不容易識別。
但是以上講的用戶識別問題,技術(shù)上并不是不可以解決的,只是麻煩一點而已,比如通過cookie等方式可以給未登錄的用戶做好標記,等用戶登錄以后,再把標記用戶與登錄用戶做關(guān)聯(lián),只是需要定期更新,有一定的準確率問題。另外從轉(zhuǎn)化率的角度來說,把登錄注冊的操作越放后越有利于轉(zhuǎn)化率提升。所以從短期來看,加入購物車的時候登錄有利,從長期來看,放在結(jié)算之后更有利。
圖8-8 未登錄不能加入購物車
3.2 購物車商品不能直接編輯
圖8-9第1張圖可以看到,要編輯商品,要先點擊右上角的編輯按鈕,再選中要編輯的商品,才能操作,而第2張圖,長按商品可以直接編輯,并且可以在購物車修改顏色、規(guī)格等選項。
圖8-9 購物車商品不能直接編輯(圖片來源:360商城&天貓)
3.3 注冊登錄后先別急著結(jié)算
圖8-10第1張圖是登錄前,購物車有1個商品,第2張圖是登錄后,直接跳轉(zhuǎn)到了結(jié)算頁,還是1個商品,但其實,在之前已經(jīng)登錄的情況下,購物車里還有3個商品。那么這里在登錄后,應該把登錄前購物車的商品,和登錄后購物車的商品做個合并,登錄后還是停留在購物車頁面,給用戶確認后,再進入結(jié)算頁。明明可以多賣出去3個商品,結(jié)果因為太急損失掉了。
圖8-10 注冊登錄后先別急著結(jié)算(圖片來源:華為商城)
4.?結(jié)算頁
4.1 添加地址提示不明顯
用戶是在非常匆忙的情況下使用我們的產(chǎn)品的,如圖8-11,如果用戶沒留意,會先把頁面拉到最下面,或者直接點擊付款,才發(fā)現(xiàn)沒添加地址,所以可以把添加地址的部分設計的更明顯,甚至可以在剛進入結(jié)算頁之后,就彈出提示。
圖8-11 添加地址提示不明顯(圖片來源:小米商城)
4.2 新增地址操作復雜
如圖8-12第1張圖,新增地址的操作如果全部手動輸入,操作很不方便,至少可以從兩方面來簡化,一個是匹配通訊錄,當要添加的用戶信息在通訊錄中有保存,可以把通訊錄中聯(lián)系人的名字、電話在收貨地址中做自動填充。另一方面可以調(diào)用第三方的地圖接口,如8-12第2張圖,通過定位自動推薦附近地址,用戶根據(jù)推薦直接選擇,只做簡單修改即可。
圖8-12 新增地址操作復雜(圖片來源:天貓&小米商城)
5.?總結(jié)
本文分享了新用戶下單過程中,詳情頁、購物車、結(jié)算頁容易忽視的細節(jié)問題,并給出了明確的解決方案。
作者:張旭東(微信公眾號:旭東愛折騰),努比亞手機商城產(chǎn)品經(jīng)理,前華強旗艦店產(chǎn)品經(jīng)理,F(xiàn)ON樂隊吉他手。
本文由 @張旭東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Pixabay,基于 CC0 協(xié)議
努比亞還要招人不 哈哈
招交互設計師,呵~
原,華強電子世界4/5樓? ??
錯,6~8樓,呵~