旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > 電商購物車的UI設計該怎么做
電商購物車的UI設計該怎么做
時間:2018-03-10來源:lb577.com點擊量:作者:馬晨皓
時間:2018-03-10點擊量:作者:馬晨皓

購物車的作用

在移動端的購物車功能對于用戶端來說一般可以有以下作用:

1.收藏  2.合并支付  3.對比價格

對于產(chǎn)品端來說,購物車有以下作用:

1. 能夠提高客單價  2. 記錄一些用戶數(shù)據(jù)做商品推薦

用戶使用購物車的場景會非常多,以下舉幾個不同的場景,大家感受一下:

場景1:

a君家里的某種計生用品用完了,他在某東上瀏覽的商品,他選擇了之前常用的款式,但是他想嘗試新鮮的款式,他分別將這兩樣商品加入了購物車,在準備結算的時候發(fā)現(xiàn)提示,只要再購買10元便可以享受滿xx元減10元的優(yōu)惠,此時他想反正以后也要用就再買一件吧,所以他就購買了3件,原本他的需求之時購買1件。

場景2:

b君躺在沙發(fā)上拿出手機開始逛某電商平臺,ta很早以前就想買一雙鞋子,但是鞋子比較貴,b君舍不得賣,ta把幾乎所有賣這雙鞋子的看上去正品的店里的那雙同款鞋子都放進了購物車,心里想著等我下個月發(fā)工資了一定帶它回家。

場景3:

c君剛搬了新家,家里缺少很多小件的生活用品,ta打算在某平臺上購買一些,ta把商品一件一件的放入購物車,因為小件價格很便宜ta就不怎么在意,等到購物車結賬的時候他發(fā)現(xiàn)居然買了這么多,要很多的錢,此時再仔細一看居然還要20元運費,買這么多也不包郵,心里一盤算,有些東西還不急著要,先買一些急著要的東西吧,這時候他勾選了想要的商品然后去和賣家討論能否包郵的事情,最后結賬。

舉了3個比較典型的例子,那么做為電商平臺,購物車都有他不同的存在價值,但只要是在購物車內(nèi)的商品,我們都有很大的可能讓用戶掏出兜里的錢。雖然它有著收藏的功能,但是他和收藏不同,是強購物輕收藏的。

我們能發(fā)現(xiàn)各大電商平臺的購物車都會有一些區(qū)別,可能是用戶類型不同,可能是sku數(shù)量有差別,也可能是品牌尚未建立,等許許多多因素導致了購物車這個功能也會有一些區(qū)別。例如女性用戶較多的產(chǎn)品可能購物車功能會比較重要,或許被放在比較明顯的位置,因為男性購物的目的會比女性更明確,用購物車的幾率較小。sku多的產(chǎn)品購物車功能相對更完善。品牌尚未建立的產(chǎn)品需要更加縮短用戶購買的路徑,關鍵信息需要更凸顯。

不同電商平臺購物車的區(qū)別

淘寶、京東、考拉、嚴選:從他們將購物車放在底部標簽上來看,這個功能對他們非常重要性。他們希望用戶能在平臺上逛,就和線下場景一樣的映射,因為這些平臺的商品種類很多,足以用戶去篩選,去對比。

這時候用戶可能帶有目的,也可能并沒有目的,可能本來是想買某件商品的時候忽然發(fā)現(xiàn)另一件商品性價比更高,更合適,從而佩服自己的英明決策。其實我們能發(fā)現(xiàn)在使用購物車購物的過程也是一種體驗消費,一種滿足用戶欲望的體驗,讓用戶有一種錯覺,加入購物車的商品馬上就能屬于我了,即便這次并沒有購買。

小紅書:沒有那么強調(diào)購車這個屬性,因為小紅書屬于口碑分享精準推薦類的社區(qū),她的定位側(cè)重在用戶ugc和分享,并從而讓其他用戶對這些優(yōu)質(zhì)的內(nèi)容進行購買轉(zhuǎn)化,通過其他用戶的分享評價和使用心得和大數(shù)據(jù)的精準跨境商品推薦,能夠很快幫助我了解我所想要的產(chǎn)品的優(yōu)缺點還有是否適合自己, 所以購物車并不是那么重要,社區(qū)類的電商也帶有一定屬性的社交,所以購物車使用的場景就沒有像淘寶京東那么頻繁。

寺庫:一個全球奢侈品電商app,應該來說使用購物車買奢侈品的人應該不多。但是他們也將購物車放在了底部欄上。這里想說一下有些電商產(chǎn)品會將購物車放在導航欄上做全局樣式,這和放底部標簽欄還是會有區(qū)別,一個側(cè)重功能使用,一個側(cè)重商品瀏覽,雖然都是購物車功能。我猜想這樣的平臺可能會有比較嚴重的用戶分化,一類是剛好收入能夠買的起奢侈品以及一些輕奢的女白領,另一類就是比較富裕的上流女性。奢侈品不同于其他商品,因為它會經(jīng)常出新款,而款式的新舊對于買的起奢侈品的人來說不言而喻,雖然有一些款式很經(jīng)典。所以如果真的在買奢侈品的過程中需要用到購物車,而他又將購物車做的這么明顯,除了主要用戶是女土豪之外我暫時沒想到其他原因。

 

購物車中編輯功能的作用

購物車還有一個功能叫做編輯,它能夠修改數(shù)量,款式規(guī)格,也能刪除商品。淘寶、京東、嚴選、寺庫都有編輯功能,但是前三者可以再選擇款式規(guī)格。

寺庫:單一商品的規(guī)格種類和用戶目的不同導致的在購物車中編輯選規(guī)格的場景很少。

小紅書:沒有編輯功能也沒有批量刪除和選擇的功能,而又同樣將刪除功能外露,所以我們也能判斷出小紅書希望用戶在盡可能簡單,短的路徑中完成對比、消費。

唯品會:同樣沒有編輯功能,但有個倒計時,類似于我加入購物車這個商品就被我鎖定了,有點像買電影票,看了一下所有商詳都有一個倒計時,但是說不定過了這個時間段又開始限時,就好像最后一天清倉大甩賣喊了一年是一個效果。放入購物車倒計時20分鐘不買就解鎖了,這個和購物車本身的定位就有一定的矛盾。一邊逛一邊還要擔心20分鐘內(nèi)要支付,這樣可能很難逛的起來,其實20分鐘解鎖也沒人買你這件商品。所以像唯品會這樣垂直型電商的購物車功能和平臺型電商就會有一些區(qū)別,購物車內(nèi)的商品想要刪除也只能一件一件刪,即便沒有批量也無法做到宣布選中再一鍵刪除,應該在這個平臺上購物的用戶或許他們每次購物選擇的商品并不多,畢竟也只有20分鐘時間讓你去結算。



 

購物車優(yōu)化案例

最近在做購物車的改版,之前老頁面實在慘不忍睹,所以這次優(yōu)化頁面的目的有3點,第一是為了按照新標準視覺規(guī)范優(yōu)化,第二是調(diào)整信息布局及層級關系,第三是提高用戶使用該功能的轉(zhuǎn)化。

但是問題來了,我們的購物車是內(nèi)嵌的h5頁面,我們需要將之前外露的刪除功能隱藏到編輯功能里,但是導航欄上的編輯功能無法實現(xiàn)編輯內(nèi)嵌的h5頁面,所以和交互小哥哥的討論之后,我們決定將編輯分別放在幾個模塊上,只要點擊其中一個編輯就能編輯所有商品,點擊完成既能恢復所有狀態(tài),同時在頁面滑動的時候每個編輯欄都能在頂部置頂。這樣就解決了h5頁面編輯功能的尷尬,當然我們還是期望能夠做成原生:

總結一下設計策略,通過判斷產(chǎn)品的定位,以及目標用戶,我們需要考慮購物車在產(chǎn)品中承擔的作用及想要達到的目標。不同的定位、用戶及目標還有技術承載,購物車的設計形式將有所區(qū)別。是否需要將所有功能外露,以及符合產(chǎn)品目標用戶的心理訴求去設計功能交互的合理最優(yōu)解是我們要去不斷思考的。


 

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2021/ lb577.com 北京漫動者教育科技有限公司 備案號:京ICP備12034770號 監(jiān)督電話:010-62568622 郵箱:bjaaa@aaaedu.cc