在線教育類產(chǎn)品——詳情頁設(shè)計知多少
導(dǎo)語:用戶會在哪個頁面停留的更久?在訂單成交前,用戶看到的最后一個頁面通常是什么?對于視覺設(shè)計師來說這個答案并不陌生:詳情頁。平時設(shè)計師們設(shè)計的詳情頁都是靜態(tài)的,今天咱們就來聊一聊在線教育行業(yè)的詳情頁界面設(shè)計,讓詳情頁動起來。
一、思考
我們先來看看這樣一個問題,你在某寶買衣服的時候,什么會促使你下單?
進(jìn)入商品詳情頁后,究竟是模特的穿衣效果?促銷價格?用戶評價?買家秀?正品保證?包運費險?等等…究竟是什么信息,而這些信息又帶給你怎樣的感受,促成了你的下單?
不僅對于電商平臺,對于在線教育平臺而言,詳情頁也是提高轉(zhuǎn)化率非常重要的關(guān)卡。
那么,如何通過設(shè)計的手段,幫助用戶做出購買決策,以提高商品的轉(zhuǎn)化率呢?我們帶著這樣的疑惑,先來看看現(xiàn)在火得不得了的線上教育的詳情頁是怎么設(shè)計的。
二、詳情頁展示
今天我們要體驗的是這三家:屬于K12的作業(yè)幫APP、高途課堂APP,屬于成人職業(yè)教育的一起考教師APP,三款在線教育產(chǎn)品。
從點擊進(jìn)入APP開始,用戶會經(jīng)過一層或多層交互進(jìn)入到商品詳情頁,通常情況下,用戶對這個商品會有潛在或明確訴求:諸如這個商品可以提供什么、靠不靠譜、是否合適自己呢。
那我們就來看看這三款A(yù)PP是如何設(shè)計的:
本篇截圖為iPhone7的體驗環(huán)境。
我們先來看第一屏,也就是用戶進(jìn)入詳情頁后的第一眼見到的畫面。
可以發(fā)現(xiàn),在詳情首屏上半部分三家APP的設(shè)計框架基本一致:頂部為課程展示圖,中部為課程名稱及價格,之后是優(yōu)惠服務(wù)。
從優(yōu)惠服務(wù)后,模塊信息開始各有側(cè)重。
我們依次來看。
1. 頂部課程展示圖
這是用戶進(jìn)入頁面第一眼看到的信息。
作業(yè)幫的課程圖是帶有動物ip的六年級課程介紹,卡通動物與明亮的配色使得畫面親和力變強(qiáng),這也符合作業(yè)幫的定位:中小學(xué)生全學(xué)科在線輔導(dǎo)網(wǎng)課。輔導(dǎo)、陪伴,都是給人友好感受的詞語。
而高途課堂定位:名師出高徒,網(wǎng)課選高途。名師是他們的主打賣點,用微質(zhì)感的背景來烘托西裝挺拔的高中教師;整體畫面干凈干練,明朗的老師形象給人專業(yè)、嚴(yán)謹(jǐn)?shù)母杏X。
作為職業(yè)教育平臺的一起考教師,在課程圖的選擇上使用了短視頻的方式來展示信息。因考教資的用戶多為成年女性,在兼顧親和力的同時,視頻相比圖片能夠讓用戶停留更長時間。
2. 課程介紹、價格、服務(wù)
課程介紹、價格、服務(wù)我們一起說。
三款A(yù)PP幾乎類似,包括有:課程名、開課時間、價格、優(yōu)惠、服務(wù)模塊。但在價格和服務(wù)模塊,一起考教師與另外兩者形成了對比。
價格模塊:
一起考教師提示了購買人數(shù)。257人次的購買量帶有心理上的引導(dǎo),相當(dāng)于告訴用戶:在你之前已經(jīng)有多少人做出了購買決策。這既應(yīng)用了人群里的從眾效應(yīng)心理,又是增加信任感的一個好方式。
在如何展示價格上,一起考教師是這樣設(shè)計的:劃掉原始價格497元,用放大加紅的字體突出折扣價格467元,并增加了“優(yōu)惠價”的小標(biāo)簽再次強(qiáng)調(diào)課程的優(yōu)惠,雙重提醒加強(qiáng)促銷氛圍。同時,價格下方增加了開課時間,時間節(jié)點通常會給人一種慌張感,催促用戶需要做決策了。
另外,在這個模塊的設(shè)計中,根據(jù)課程性質(zhì),增加了切換全程班和協(xié)議班課程的按鈕,這個對有相似需求的用戶非常友好,無需再返回上一級頁面再進(jìn)行相關(guān)搜索,通過當(dāng)前頁面的按鈕切換就可進(jìn)行兩類課程的對比。
相對而言,作業(yè)幫和高途課堂在價格模塊的設(shè)計上比較簡潔,僅展示了原始價格,這可能和兩者的用戶群體及課程本身的定價策略有關(guān)。
雖然作業(yè)幫和高途課堂面向的用戶是學(xué)生,但真正作出購買決策的是家長們,家長們愿意給孩子找尋更好的教育資源。一定程度上,價格高低、是否折扣會給人帶來質(zhì)量優(yōu)或良的感受。
當(dāng)然,三者的具體定價金額會和課程本身的定位、課程實際提供的服務(wù)、課程預(yù)期的售賣人群密切相關(guān),但這個也不影響我們就價格的設(shè)計方式進(jìn)行思考。
整體來說,一起考教師的價格模塊結(jié)合了更多人性規(guī)律來設(shè)計。通過小設(shè)計增加用戶的信任感,制造一種時間氛圍上的緊迫感,并營造買買買的促銷購物環(huán)境;心理感受上的重復(fù)也會加強(qiáng)人的情緒記憶,這些都會影響用戶行為。
優(yōu)惠服務(wù):
對于優(yōu)惠服務(wù)模塊,作業(yè)幫和高途課堂的展示更為直接。
優(yōu)惠:“購買長期班,即得精品課”,做什么動作,你就可以得到什么。
服務(wù):“直播授課·課堂回放·隨堂測試·紙質(zhì)教材”四字短句,簡單明白、結(jié)構(gòu)美觀、服務(wù)豐富。如果用戶想深入了解,點擊右箭頭,會有詳細(xì)的解釋說明。
一起考教師在這兒提供的是贈品信息,為了突出這一項,它將贈品文案顏色標(biāo)紅并增加一個紅色邊框。贈品不同于服務(wù),贈品應(yīng)該大于服務(wù);因為在詞語理解上,贈品是產(chǎn)品之外額外贈送的禮物;點擊右箭頭,對6個贈品的內(nèi)容,會有簡單說明。
整體來看,作業(yè)幫和高途課堂的優(yōu)惠服務(wù)介紹簡明扼要,而一起考教師更注重利益點的傳達(dá)。
3. 信息模塊
在實際頁面瀏覽過程中,大部分用戶會繼續(xù)往下滑動,來觀看后面更重要的課程信息,也就是信息模塊內(nèi)容。
從這里開始,三家APP對于模塊展示就各有側(cè)重。
- 作業(yè)幫:選擇老師和時間、課程大綱、學(xué)員評價、課程詳情。
- 高途課堂:授課老師、課程評價、課程詳情、課程大綱。
- 一起考教師:課程詳情、課程表、授課教師、課程評價。
授課老師:
作業(yè)幫和高途課堂是面向青少年的學(xué)習(xí)平臺,青少年有容易外顯的情緒特點;無論是因為主打賣點是明星老師們,還是青少年更容易產(chǎn)生對老師的好惡情緒,作業(yè)幫和高途課堂都將老師模塊放在了最前面。
在這里,作業(yè)幫還增加了一個DIY功能:選擇老師和時間的服務(wù)。用戶可以根據(jù)自己的偏好和便利度自行選擇課程,當(dāng)然,這個功能相應(yīng)地也會給平臺:對內(nèi)的老師資源排期和課程時間排期,增加一定的復(fù)雜度。
對比來看,一起考教師對于授課老師的展示,在模塊設(shè)計上進(jìn)行了弱化;或者說,它更想突出的是“課程詳情”的詳情效果圖,因為用戶的使用習(xí)慣更傾向于滑動頁面向下繼續(xù)查看信息,需要點擊才能查看的“課程表”“授課教師”“課程評價”,更適用于對此信息有明確訴求的用戶。
課程評價:
同為課程評價,模塊設(shè)計上是否有一些討巧的地方?我們先來看高途課堂對于評價模塊的設(shè)計。
高途課堂在評價模塊有這些設(shè)計:課程總評分5.0分、課程評價數(shù)815條、4顆星或5顆星評價,優(yōu)質(zhì)用戶評論。
不管是總評分、還是豐富的課程評價數(shù)量、以及被選中的真實感學(xué)員的完整優(yōu)質(zhì)評論,這個熱鬧的氛圍都在影響瀏覽中的用戶:大家用的都好,購買此課程是個明智的選擇。
用戶與課程之間,也是需要信任感的。
相對而言,作業(yè)幫的評價模塊設(shè)計比較簡約,并且還跟在課程大綱模塊之后,幾乎是在第二屏的最后;唯一展示出來的一位用戶評論,還需要點擊才能查看完整信息,這個步驟相對繁瑣。
而一起考教師的評價模塊就被弱化了,瀏覽時需要點擊課程評價按鈕,才會進(jìn)入評價頁面;這里的課程評價是按時間順序進(jìn)行瀏覽,沒有篩選個別優(yōu)質(zhì)評論;因為評論信息有4000多條,整體來說信息量較多,翻看評論會花費時間。
用戶都容易被他人影響、容易參考他人觀點;他們在作出購買決策之前,會希望獲取更多信息,比如從用戶評論中尋找這門課程是否靠譜的蛛絲馬跡,評價模塊正是起到這樣的引導(dǎo)作用。
詳情效果圖:
千呼萬喚始出來,最后一個模塊是詳情頁落地效果圖。真正的課程賣點,都集中在這張效果圖里;在這里我們不具體分析詳情頁的文案的撰寫技巧,也不去討論內(nèi)容是否了抓住用戶的痛點、癢點、爽點,我們在這里主要還是看頁面的布局結(jié)構(gòu)。
一起考教師非常重視詳情頁的展示,在進(jìn)入這個頁面第一屏就已經(jīng)將詳情頁效果圖推出。
高途課堂則做好了足夠的鋪墊,比如老師介紹、評價模塊,再來展示課程詳情效果圖。
作業(yè)幫的進(jìn)度會慢一些,幾乎第三屏才開始推出詳情效果圖,前面還有老師介紹、課程大綱和評價模塊,文字信息量較多,雖然課程大綱和評價模塊都有折疊功能,但似乎也會分散用戶的注意力。
畢竟視覺的第一眼感受是最直觀的。
詳情頁的整體視覺定位是專業(yè)、友好、品質(zhì)?這些視覺感受都會給用戶帶來對應(yīng)課程的品質(zhì)印象。
如果詳情頁效果圖的各模塊層級明晰、重點突出、圖文匹配,也能在用戶的閱讀體驗上加分。
4. 駐底按鈕
立即購買:
與常規(guī)的“立即購買”不同,高途課堂和作業(yè)幫設(shè)計了“加入選課單”和“立即報名”按鈕;點擊“立即報名”其實也是跳轉(zhuǎn)到購買頁面,只是在措詞上弱化了購買的意識。
但基于學(xué)生可能有多門課程的培訓(xùn)需求,“加入選課單”營造了一個可以打包購物的場景。但這也會帶來:用戶當(dāng)下將課程加入選課單后,會有退出頁面的情況發(fā)生。
一起考教師在當(dāng)前頁的購買意愿似乎更強(qiáng),它只有一個“立即購買”的按鈕,基于前面的所有模塊的設(shè)計方式,它更希望幫助用戶在當(dāng)下直接做出購買決策。
客服咨詢:
作業(yè)幫和高途課堂的咨詢按鈕能夠直接跳轉(zhuǎn)到客服溝通頁面,先進(jìn)行機(jī)器人對話,可根據(jù)需求轉(zhuǎn)人工服務(wù)。
一起考教師的咨詢步驟相對繁瑣,需要添加至社交群后,進(jìn)群咨詢。但是帶來的好處是:用戶能夠快速進(jìn)入到一個有共同學(xué)習(xí)氛圍的群體中,平臺也能留下課程的初始用戶。
三、最后
今天我們探討了三份詳情頁面框架,各平臺對于詳情頁的模塊設(shè)計各有側(cè)重;其實,即便是同款A(yù)PP,對于不同類型的課程,詳情頁面的模塊設(shè)計框架也不是固定不變的。
比如高途課堂,部分課程頁面沒有評價模塊,但我們今天探討的詳情頁面里是有的;比如一起考教師,部分課程的價格模塊設(shè)計也比較簡約,而我們今天探討的價格模塊是暗含了很多用戶心理的運用。
比如部分APP對個別課程有提供試聽功能,但今天我們探討的這三份課程里并沒有提及。比如部分APP點擊咨詢按鈕后,根據(jù)課程性質(zhì),可能會跳轉(zhuǎn)到社交群,也可能跳轉(zhuǎn)到客服咨詢平臺等等。
為什么布局模塊或功能設(shè)計會不一樣?究竟什么是提高詳情頁面轉(zhuǎn)化率的最佳方案呢?我們需要一個合理假設(shè)、上線驗證、數(shù)據(jù)收集的過程。
但不管是怎樣的設(shè)計方案:幫助用戶做出決策,來提高用戶在當(dāng)前頁面的轉(zhuǎn)化率,是詳情頁面的常規(guī)設(shè)計目標(biāo)。
對于視覺設(shè)計師而言,把效果圖帶回到用戶的使用現(xiàn)場,追問自己設(shè)計的目的究竟是什么,或許能幫助自己更好地理解詳情頁。
在收集在線教育APP詳情頁面的過程中,我也看到很多優(yōu)秀的產(chǎn)品,比如有道精品課、考蟲、猿輔導(dǎo)等APP的詳情頁面設(shè)計,因篇幅有限,本次就不做過多探討。
本文由 @阿念 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
作業(yè)幫和高途課堂是面向青少年的學(xué)習(xí)平臺,青少年有容易外顯的情緒特點——-這一點想探討下,教育類產(chǎn)品面向的用戶是不是應(yīng)該區(qū)分付費者和使用者,青少年更偏向于使用者,家長是做決定并付費的角色,而商品詳情頁的側(cè)重點更多是為了刺激付費,對于青少年的想法我認(rèn)為相關(guān)性并不是很大
不懂用戶,也不懂業(yè)務(wù)。你對產(chǎn)品的理解僅限于理論層面