2024-7-5 資深UI設(shè)計(jì)者
認(rèn)識(shí)、信任、戀愛、結(jié)婚——商品詳情頁(yè)轉(zhuǎn)化四部曲!
前言
電商APP重點(diǎn)在于商品詳情頁(yè),打造一個(gè)優(yōu)秀的商品詳情頁(yè),完全能夠提高轉(zhuǎn)化率!
今天從UI設(shè)計(jì)、交互體驗(yàn)、文案撰寫、產(chǎn)品的商業(yè)模式來(lái)聊一聊電商app商品詳情頁(yè)是怎么“套路”用戶的[偷笑]。
淘寶vs京東
說(shuō)起電商APP肯定少不了“淘寶”與“京東”,看下圖淘寶與京東的產(chǎn)品詳情頁(yè)設(shè)計(jì)!
最大的不同就是京東比淘寶少了“立即購(gòu)買”按鈕,這是為什么?
經(jīng)營(yíng)模式上分析:
早期的淘寶是C2C模式就如現(xiàn)在的咸魚和58,之后入駐了企業(yè),也就變成B2B2C模式,但是淘寶C2C的DNA基因還是大量存在。
京東起初是自營(yíng)B2C模式自營(yíng)物流配送,如今也入駐第三方企業(yè)商家,所以模式也變成了B2B2C模式,但是京東自營(yíng)B2C模式還是在平臺(tái)占據(jù)很大比例。
從交互上分析:
交互上的體現(xiàn)也是一樣的,點(diǎn)擊淘寶的“加入購(gòu)物車”需要用戶來(lái)選擇規(guī)格,京東則默認(rèn)選中展示的商品,更快捷加入購(gòu)物車。
淘寶商品詳情頁(yè)弱化了購(gòu)物車按鈕放在了右上角,京東則把購(gòu)物車放在了加入購(gòu)物車旁邊。
當(dāng)把商品加入購(gòu)物車后,購(gòu)物車頁(yè)面淘寶也不會(huì)選中加入的商品,京東則會(huì)選中用戶加入購(gòu)物車的商品。
所以:
從經(jīng)營(yíng)模式上分析,兩家的側(cè)重點(diǎn)不一樣,交互方式也就會(huì)有差異化,淘寶平臺(tái)更看重單件快速交易。京東則是希望用戶把想買的東西都放購(gòu)物車,統(tǒng)一結(jié)算,平臺(tái)也能更方便的統(tǒng)一配貨配送。
所以不難理解,B2C的產(chǎn)品會(huì)更突出加入購(gòu)物車,例如純B2C的小米商城和網(wǎng)易嚴(yán)選,都是更突出加入購(gòu)物車!
詳情頁(yè)細(xì)節(jié)分析
下面來(lái)分析優(yōu)秀的商品詳情頁(yè)是從哪些方面打動(dòng)用戶刺激用戶購(gòu)買的。
當(dāng)我們?cè)谠O(shè)計(jì)一個(gè)商品詳情頁(yè)時(shí)候,要把用戶當(dāng)成我們的男女朋友來(lái)對(duì)待,整個(gè)設(shè)計(jì)流程分為四步:
用戶購(gòu)買商品其實(shí)就是這個(gè)過程,首先認(rèn)識(shí)商品(1米8大個(gè)又帥)隨后信任商品(人品還好)從而產(chǎn)生購(gòu)買價(jià)值(跟他戀愛不錯(cuò))最終購(gòu)買轉(zhuǎn)化(相守結(jié)婚)!
分析兩個(gè)賣奢侈品的app商品詳情頁(yè)
用戶認(rèn)識(shí)商品的過程其實(shí)是非常短暫的可能就是幾秒鐘。米蘭的頁(yè)面設(shè)計(jì),第一眼并沒有讓用戶感知到商品,也沒有突出奢侈品最關(guān)鍵的點(diǎn),品牌!標(biāo)題字行間距不易閱讀,整體UI界面的設(shè)計(jì)給人很強(qiáng)的淘寶風(fēng)!
寺庫(kù)很好的做了區(qū)別于淘寶京東的差異化設(shè)計(jì),建立自己的品牌認(rèn)知,首屏高清大圖牢牢抓住用戶,突出了品牌TUPLUS/途加,整體給人信任感?。ㄖ皇且?yàn)樵谌巳褐卸嗫戳四阋谎郏僖膊荒芡裟闳蓊仯?/p>
用戶快速認(rèn)識(shí)了解商品是遠(yuǎn)遠(yuǎn)不夠的,下面來(lái)看兩款產(chǎn)品向上滑動(dòng)屏幕給用戶的信息和感受,這里就要跟用戶建立信任了!
沒錯(cuò)米蘭并沒有評(píng)論和商品詳情,真的要命,滑動(dòng)不夠一屏就推薦相關(guān)產(chǎn)品了,這時(shí)候很多用戶早已逃之夭夭了,沒有建立信任基礎(chǔ)很難有結(jié)果。
評(píng)論功能往往可以創(chuàng)造熱銷的氛圍,根據(jù)從眾效應(yīng)其它用戶的評(píng)價(jià)能夠引導(dǎo)用戶作出判斷,指引用戶的心理和行為。例如一個(gè)女孩子認(rèn)識(shí)一個(gè)男孩子,女孩子身邊的人朋友閨蜜都說(shuō)這個(gè)男孩子不錯(cuò)!好!值得托付!女孩子可能就會(huì)聽從她們的話,至少能增強(qiáng)對(duì)這個(gè)男孩子的好感!所以追女孩要先搞定她的閨蜜,不然閨蜜說(shuō)一句“我覺得這個(gè)人不怎么樣”你就完了!握草,有點(diǎn)跑題了!總之評(píng)價(jià)是能夠建立基礎(chǔ)信任感的!
寺庫(kù)的頁(yè)面交互是非常符合用戶心理的,一直向上滑動(dòng)的流程:商品-評(píng)論-詳情-推薦。
評(píng)價(jià)沒有完全打動(dòng)用戶,建立信任,那么詳情頁(yè)就得發(fā)大招了,產(chǎn)品的詳情能不能走進(jìn)用戶心里,了解用戶,解決用戶痛點(diǎn)是非常之關(guān)鍵!
想象一下用戶買奢侈品都會(huì)關(guān)注哪些點(diǎn),整個(gè)購(gòu)買流程會(huì)有什么擔(dān)憂,當(dāng)然也要突出產(chǎn)品的核心賣點(diǎn)。
TUPLUS/途加這款產(chǎn)品詳情頁(yè)是這樣的流程:介紹此產(chǎn)品斬獲兩項(xiàng)國(guó)際大獎(jiǎng),之后產(chǎn)品功能細(xì)節(jié)介紹,中間加了購(gòu)買奢侈品形象人群使用場(chǎng)景,(打造一個(gè)好的人像使用場(chǎng)景,會(huì)讓用戶聯(lián)想到自己使用時(shí)形象氣質(zhì)),后面詳細(xì)介紹產(chǎn)品的權(quán)威性,正品保證,資質(zhì)證書,這都能很有力的解決用戶的擔(dān)憂和痛點(diǎn)!
詳情頁(yè)解決用戶的擔(dān)憂和痛點(diǎn)體現(xiàn)產(chǎn)品價(jià)值。商品權(quán)威鑒定詳細(xì)介紹有圖有真相,點(diǎn)擊進(jìn)入“寺庫(kù)鑒定”頁(yè)面,首先視頻介紹,教你怎么辨別產(chǎn)品的真?zhèn)危覀冇袑I(yè)的鑒定產(chǎn)品真?zhèn)螆F(tuán)隊(duì)、團(tuán)隊(duì)發(fā)展歷程、行業(yè)的資質(zhì)證書等等信息都傳遞給用戶,產(chǎn)品的安全保障,是值得購(gòu)買的,這就會(huì)讓用戶從基礎(chǔ)信任到有價(jià)值認(rèn)可。
當(dāng)用戶下單后,用戶會(huì)有“損失規(guī)避”效應(yīng),(意指人們獲得損失時(shí)產(chǎn)生的痛苦遠(yuǎn)大于獲得收益時(shí)所帶來(lái)的快樂),這個(gè)時(shí)候下單成功頁(yè)面如果就提示“購(gòu)買成功”的字樣,用戶就不會(huì)感受到剛剛損失的心理安慰,弄不好用戶意識(shí)到自己沖動(dòng)消費(fèi),馬上就退單了!
所以這里可以用到一些,一語(yǔ)雙關(guān)的文案,例如:“恭喜你成為第xxx個(gè)有品味的人”,“恭喜你即將擁有給你帶來(lái)美好生活的xxxx產(chǎn)品”,總之即說(shuō)明了我們的產(chǎn)品好,又夸了用戶有品位,或者描繪產(chǎn)品給用戶帶來(lái)什么好的體驗(yàn)場(chǎng)景,這樣就大大降低了“損失規(guī)避”效應(yīng)帶來(lái)的痛點(diǎn)!
最后總結(jié)一下,設(shè)計(jì)app商品詳情頁(yè)的四個(gè)步驟:
第一讓用戶快速了解認(rèn)識(shí)產(chǎn)品;
第二取得用戶對(duì)產(chǎn)品的信任;
第三讓用戶產(chǎn)生價(jià)值感受(走心、解決用戶痛點(diǎn)與擔(dān)憂);
第四最終實(shí)現(xiàn)產(chǎn)品購(gòu)買的轉(zhuǎn)化(售后良好體驗(yàn)、形成口碑、促進(jìn)二次購(gòu)買);
營(yíng)銷心理學(xué)效應(yīng)
錨定效應(yīng)
用場(chǎng)景化解釋,當(dāng)你在一家西服店買西服,導(dǎo)購(gòu)為你連續(xù)推薦了三款3000多的西服,第四件為你推薦了一件款式質(zhì)量都差不多的只要1800,這時(shí)候你就會(huì)覺得好便宜,這就是錨定效應(yīng)。
再舉個(gè)例子,快餐店墻上的菜單,從上到下依次從便宜到貴,但最后一個(gè)很便宜,這樣最后一個(gè)就會(huì)大大提高銷量!(套路!滿世界的套路?。?/p>
那么這個(gè)錨定效應(yīng)是怎么運(yùn)用到app產(chǎn)品的呢?例如,一件商品標(biāo)價(jià)200元,但是可以領(lǐng)劵,店鋪送你30元優(yōu)惠券,這樣一來(lái)標(biāo)價(jià)200,結(jié)賬170,用戶就會(huì)覺得很值!
誘餌效應(yīng)
兩家的商品價(jià)格都一樣,但是一個(gè)有贈(zèng)品,那就會(huì)把用戶吸引過來(lái),再比如,在淘寶買東西,當(dāng)你收到商品后,會(huì)發(fā)現(xiàn)商家多送了好多東西,這樣買家很容易給好評(píng),退換貨的比例也會(huì)降低,還能產(chǎn)生二次購(gòu)買效應(yīng)!
還有商家的活動(dòng),例如賣奶茶的,第二杯半價(jià),兩件八折,買一送一,都是誘餌效應(yīng)。
從眾效應(yīng)
上文中提到了從眾效應(yīng),這里就不多解釋,列舉個(gè)app商品詳情頁(yè)案例,很多詳情頁(yè)會(huì)有這樣的一個(gè)微交互提示,“177xxxxxx177剛剛購(gòu)買了此產(chǎn)品”一閃而過。還有經(jīng)??梢钥吹?,“大家都在看”,“購(gòu)買此商品的人也購(gòu)買了這些商品”這樣就起到了從眾效應(yīng)!
稀缺效應(yīng)
這個(gè)不難理解,app商品詳情頁(yè)中很多都會(huì),提示僅剩幾件,有些app永遠(yuǎn)是剩余幾件商品,但是永遠(yuǎn)賣不完,限時(shí)活動(dòng)也會(huì)有這樣的效應(yīng),給用戶的感覺就是不買馬上就沒了,不買占不到便宜!
損失規(guī)避
人通常會(huì)把注意力集中在自己會(huì)失去什么,而不是得到什么,對(duì)于損失有一種強(qiáng)烈的恐懼感,具體怎么運(yùn)用,上面文章中做了具體解釋!
心理賬戶
兩家飯店同樣消費(fèi)滿500送劵,一家送現(xiàn)金抵用劵,一家送8折優(yōu)惠劵,拿到現(xiàn)金抵用劵的客戶,肯定會(huì)更多再次光顧,因?yàn)樗麄兪掷锬玫木褪清X啊,不花我就虧了。而八折抵用劵,并沒有改客戶更有力的價(jià)值感受,他們會(huì)想,我去了還是消費(fèi), 而并非享受了優(yōu)惠!
所以在app中送現(xiàn)金抵用劵則轉(zhuǎn)化率會(huì)更高!
最后
營(yíng)銷心理效應(yīng),會(huì)在商品詳情頁(yè)起到很重要的轉(zhuǎn)化作用,要善于運(yùn)用。
設(shè)計(jì)不同于藝術(shù),設(shè)計(jì)往往帶有目的性,具有商業(yè)屬性,所以設(shè)計(jì)師只有結(jié)合更多的維度思考,才會(huì)設(shè)計(jì)出好的產(chǎn)品!
藍(lán)藍(lán)設(shè)計(jì)(www.jghy.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net