詳解電商商品詳情頁的設(shè)計套路

4 評論 40998 瀏覽 246 收藏 13 分鐘

電商APP重點在于商品詳情頁,打造一個優(yōu)秀的商品詳情頁,完全能夠提高轉(zhuǎn)化率!本文就從UI設(shè)計、交互體驗、文案撰寫、產(chǎn)品的商業(yè)模式來聊一聊電商APP商品詳情頁是怎么“套路”用戶的。

淘寶vs京東

說起電商APP肯定少不了“淘寶”與“京東”,看下圖淘寶與京東的產(chǎn)品詳情頁設(shè)計!

最大的不同就是京東比淘寶少了“立即購買”按鈕,這是為什么?

經(jīng)營模式上分析

早期的淘寶是C2C模式就如現(xiàn)在的咸魚和58,之后入駐了企業(yè),也就變成B2B2C模式,但是淘寶C2C的DNA基因還是大量存在。

京東起初是自營B2C模式自營物流配送,如今也入駐第三方企業(yè)商家,所以模式也變成了B2B2C模式,但是京東自營B2C模式還是在平臺占據(jù)很大比例。

從交互上分析

交互上的體現(xiàn)也是一樣的,點擊淘寶的“加入購物車”需要用戶來選擇規(guī)格;京東則默認選中展示的商品,更快捷加入購物車。

淘寶商品詳情頁弱化了購物車按鈕放在了右上角;京東則把購物車放在了加入購物車旁邊。

當(dāng)把商品加入購物車后,購物車頁面淘寶也不會選中加入的商品;京東則會選中用戶加入購物車的商品。

小結(jié)

從經(jīng)營模式上分析,兩家的側(cè)重點不一樣,交互方式也就會有差異化,淘寶平臺更看重單件快速交易。京東則是希望用戶把想買的東西都放購物車,統(tǒng)一結(jié)算,平臺也能更方便地統(tǒng)一配貨配送。

所以不難理解,B2C的產(chǎn)品會更突出加入購物車,例如純B2C的小米商城和網(wǎng)易嚴(yán)選,都是更突出加入購物車!

設(shè)計APP商品詳情頁的四個步驟

詳情頁細節(jié)分析

下面來分析優(yōu)秀的商品詳情頁是從哪些方面打動用戶、刺激用戶購買的。

當(dāng)我們在設(shè)計一個商品詳情頁時候,要把用戶當(dāng)成我們的男女朋友來對待,整個設(shè)計流程分為四步:

用戶購買商品其實就是這個過程:首先認識商品(1米8大個又帥),隨后信任商品(人品還好),從而產(chǎn)生購買價值(跟他戀愛不錯),最終購買轉(zhuǎn)化(相守結(jié)婚)!

分析兩個賣奢侈品的APP商品詳情頁:

用戶認識商品的過程其實是非常短暫的可能就是幾秒鐘。

米蘭的頁面設(shè)計,第一眼并沒有讓用戶感知到商品,也沒有突出奢侈品最關(guān)鍵的點,品牌!標(biāo)題字行間距不易閱讀,整體UI界面的設(shè)計給人很強的淘寶風(fēng)!

寺庫很好的做了區(qū)別于淘寶京東的差異化設(shè)計,建立自己的品牌認知,首屏高清大圖牢牢抓住用戶,突出了品牌TUPLUS/途加,整體給人信任感?。ㄖ皇且驗樵谌巳褐卸嗫戳四阋谎郏僖膊荒芡裟闳蓊仯?/p>

用戶快速認識了解商品是遠遠不夠的,下面來看兩款產(chǎn)品向上滑動屏幕給用戶的信息和感受,這里就要跟用戶建立信任了!

沒錯,米蘭并沒有評論和商品詳情,真的要命,滑動不夠一屏就推薦相關(guān)產(chǎn)品了,這時候很多用戶早已逃之夭夭了,沒有建立信任基礎(chǔ)很難有結(jié)果。

評論功能往往可以創(chuàng)造熱銷的氛圍,根據(jù)從眾效應(yīng)其它用戶的評價能夠引導(dǎo)用戶作出判斷,指引用戶的心理和行為。

例如一個女孩子認識一個男孩子,女孩子身邊的人朋友閨蜜都說這個男孩子不錯!好!值得托付!女孩子可能就會聽從她們的話,至少能增強對這個男孩子的好感!

所以追女孩要先搞定她的閨蜜,不然閨蜜說一句“我覺得這個人不怎么樣”你就完了!有點跑題了!總之評價是能夠建立基礎(chǔ)信任感的!

寺庫的頁面交互是非常符合用戶心理的,一直向上滑動的流程:商品-評論-詳情-推薦。

評價沒有完全打動用戶,建立信任,那么詳情頁就得發(fā)大招了,產(chǎn)品的詳情能不能走進用戶心里,了解用戶,解決用戶痛點是非常之關(guān)鍵!

想象一下用戶買奢侈品都會關(guān)注哪些點,整個購買流程會有什么擔(dān)憂,當(dāng)然也要突出產(chǎn)品的核心賣點。

TUPLUS/途加這款產(chǎn)品詳情頁是這樣的流程:

介紹此產(chǎn)品斬獲兩項國際大獎;之后產(chǎn)品功能細節(jié)介紹;中間加了購買奢侈品形象人群使用場景(打造一個好的人像使用場景,會讓用戶聯(lián)想到自己使用時形象氣質(zhì));后面詳細介紹產(chǎn)品的權(quán)威性——正品保證、資質(zhì)證書,這都能很有力地解決用戶的擔(dān)憂和痛點!

詳情頁解決用戶的擔(dān)憂和痛點體現(xiàn)產(chǎn)品價值。

商品權(quán)威鑒定詳細介紹有圖有真相,點擊進入“寺庫鑒定”頁面,首先視頻介紹教你怎么辨別產(chǎn)品的真?zhèn)?,我們有專業(yè)的鑒定產(chǎn)品真?zhèn)螆F隊、團隊發(fā)展歷程、行業(yè)的資質(zhì)證書等等信息都傳遞給用戶,產(chǎn)品的安全保障,是值得購買的,這就會讓用戶從基礎(chǔ)信任到有價值認可。

當(dāng)用戶下單后,用戶會有“損失規(guī)避”效應(yīng),(意指人們獲得損失時產(chǎn)生的痛苦遠大于獲得收益時所帶來的快樂),這個時候下單成功頁面如果就提示“購買成功”的字樣,用戶就不會感受到剛剛損失的心理安慰,弄不好用戶意識到自己沖動消費,馬上就退單了!

所以這里可以用到一些,一語雙關(guān)的文案,例如:“恭喜你成為第xxx個有品味的人”,“恭喜你即將擁有給你帶來美好生活的xxxx產(chǎn)品”,總之即說明了我們的產(chǎn)品好,又夸了用戶有品位,或者描繪產(chǎn)品給用戶帶來什么好的體驗場景,這樣就大大降低了“損失規(guī)避”效應(yīng)帶來的痛點!

最后總結(jié)一下,設(shè)計APP商品詳情頁的四個步驟:

  1. 讓用戶快速了解認識產(chǎn)品;
  2. 取得用戶對產(chǎn)品的信任;
  3. 讓用戶產(chǎn)生價值感受(走心、解決用戶痛點與擔(dān)憂);
  4. 最終實現(xiàn)產(chǎn)品購買的轉(zhuǎn)化(售后良好體驗、形成口碑、促進二次購買)。

營銷心理學(xué)效應(yīng)

錨定效應(yīng)

用場景化解釋,當(dāng)你在一家西服店買西服,導(dǎo)購為你連續(xù)推薦了三款3000多的西服,第四件為你推薦了一件款式質(zhì)量都差不多的只要1800,這時候你就會覺得好便宜,這就是錨定效應(yīng)。

再舉個例子,快餐店墻上的菜單,從上到下依次從便宜到貴,但最后一個很便宜,這樣最后一個就會大大提高銷量?。ㄌ茁?!滿世界的套路?。?/p>

那么這個錨定效應(yīng)是怎么運用到APP產(chǎn)品的呢?

例如,一件商品標(biāo)價200元,但是可以領(lǐng)劵,店鋪送你30元優(yōu)惠券,這樣一來標(biāo)價200,結(jié)賬170,用戶就會覺得很值!

誘餌效應(yīng)

兩家的商品價格都一樣,但是一個有贈品,那就會把用戶吸引過來。再比如,在淘寶買東西,當(dāng)你收到商品后,會發(fā)現(xiàn)商家多送了好多東西,這樣買家很容易給好評,退換貨的比例也會降低,還能產(chǎn)生二次購買效應(yīng)!

還有商家的活動,例如賣奶茶的,第二杯半價,兩件八折,買一送一,都是誘餌效應(yīng)。

從眾效應(yīng)

上文中提到了從眾效應(yīng),這里就不多解釋,列舉個APP商品詳情頁案例:

很多詳情頁會有這樣的一個微交互提示,“177xxxxxx177剛剛購買了此產(chǎn)品”一閃而過。還有經(jīng)??梢钥吹?,“大家都在看”,“購買此商品的人也購買了這些商品”這樣就起到了從眾效應(yīng)!

稀缺效應(yīng)

這個不難理解,APP商品詳情頁中很多都會提示僅剩幾件,有些APP永遠是剩余幾件商品,但是永遠賣不完。限時活動也會有這樣的效應(yīng),給用戶的感覺就是不買馬上就沒了,不買占不到便宜!

損失規(guī)避

人通常會把注意力集中在自己會失去什么,而不是得到什么,對于損失有一種強烈的恐懼感,具體怎么運用,上面文章中做了具體解釋!

心理賬戶

兩家飯店同樣消費滿500送劵,一家送現(xiàn)金抵用劵,一家送8折優(yōu)惠劵,拿到現(xiàn)金抵用劵的客戶,肯定會更多再次光顧,因為他們手里拿的就是錢啊,不花我就虧了。而八折抵用劵,并沒有改客戶更有力的價值感受,他們會想,我去了還是消費, 而并非享受了優(yōu)惠!

所以在APP中送現(xiàn)金抵用劵則轉(zhuǎn)化率會更高!

最后

營銷心理效應(yīng),會在商品詳情頁起到很重要的轉(zhuǎn)化作用,要善于運用。

設(shè)計不同于藝術(shù),設(shè)計往往帶有目的性,具有商業(yè)屬性,所以設(shè)計師只有結(jié)合更多的維度思考,才會設(shè)計出好的產(chǎn)品!

最后說一句,一味追求視覺表現(xiàn)的UI設(shè)計師,都是耍流氓!

 

作者:吳星辰,微信公眾號:互聯(lián)網(wǎng)設(shè)計幫

本文由 @吳星辰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 京東 也有立即購買

    來自北京 回復(fù)
  2. 看到了潤總的影子哈哈

    來自北京 回復(fù)
  3. 最后這幾個心理學(xué)的分析很厲害

    來自北京 回復(fù)
  4. 京東也有“立即購買”

    來自北京 回復(fù)