如何設(shè)計(jì)一個(gè)優(yōu)惠券獎(jiǎng)勵(lì)彈窗

如何設(shè)計(jì)一個(gè)優(yōu)惠券獎(jiǎng)勵(lì)彈窗最近一到飯點(diǎn)打開(kāi)外賣(mài)軟件，都會(huì)收到平臺(tái)推送的優(yōu)惠券彈窗，我也一次次經(jīng)不住大額紅包的誘惑，完成了優(yōu)惠券的核銷(xiāo)。但是也不禁發(fā)問(wèn)，除了面額，優(yōu)惠券彈窗在產(chǎn)品設(shè)計(jì)上是怎么一步步引導(dǎo)用戶(hù)，最終完成自身轉(zhuǎn)化的？今天這篇文章，我就結(jié)合過(guò)往設(shè)計(jì)優(yōu)惠券彈窗的經(jīng)驗(yàn)，帶大家一起探索。優(yōu)惠券其實(shí)在電商平臺(tái)是一個(gè)很大的運(yùn)營(yíng)體系，我們?nèi)粘Ｄ芙佑|到的僅僅是優(yōu)惠券在前臺(tái)的展示與操作流程，而在這背后需要有一系列的工作去做支撐，包括優(yōu)惠券轉(zhuǎn)化目標(biāo)的設(shè)定，優(yōu)惠券的創(chuàng)建、優(yōu)惠券使用數(shù)據(jù)的跟蹤等等，本文暫且對(duì)這些內(nèi)容不做過(guò)多介紹，僅僅針對(duì)優(yōu)惠券彈窗的前臺(tái)產(chǎn)品設(shè)計(jì)做分析?？赡艽蠹視?huì)覺(jué)得，優(yōu)惠券彈窗不就是用彈窗承載優(yōu)惠券信息嘛，有什么好設(shè)計(jì)與分析的呢？我在最初設(shè)計(jì)優(yōu)惠券的時(shí)候，也是這樣認(rèn)為，但是在踩了不少坑以后，發(fā)現(xiàn)還是有不少設(shè)計(jì)點(diǎn)可以發(fā)掘，我將通過(guò)內(nèi)容、形式、觸點(diǎn)、轉(zhuǎn)化四個(gè)維度來(lái)帶大家了解。一、內(nèi)容優(yōu)惠券彈窗的內(nèi)容就是彈窗承載的信息，根據(jù)信息的歸類(lèi)，主要分為兩部分，即彈窗內(nèi)容、優(yōu)惠券內(nèi)容。彈窗內(nèi)容是除優(yōu)惠券以外的信息，包括彈窗標(biāo)題與彈窗視覺(jué)。一般在平臺(tái)發(fā)放優(yōu)惠券的時(shí)候，會(huì)有多種優(yōu)惠券類(lèi)型存在，如針對(duì)全平臺(tái)的，針對(duì)營(yíng)銷(xiāo)板塊的等等，所以在設(shè)計(jì)彈窗內(nèi)容的時(shí)候，也需要根據(jù)不同的運(yùn)營(yíng)目標(biāo)做區(qū)分。彈窗標(biāo)題需要跟對(duì)應(yīng)營(yíng)銷(xiāo)內(nèi)容做關(guān)聯(lián)，而彈窗的視覺(jué)風(fēng)格也需要與對(duì)應(yīng)的營(yíng)銷(xiāo)風(fēng)格保持一致。這樣做一方面能將不同的彈窗類(lèi)型做區(qū)分，同時(shí)也能讓用戶(hù)提前感受到對(duì)應(yīng)營(yíng)銷(xiāo)板塊的氛圍。而對(duì)于優(yōu)惠券內(nèi)容的設(shè)計(jì)，往往是根據(jù)優(yōu)惠券在后臺(tái)創(chuàng)建時(shí)所選擇的內(nèi)容決定的。但是在一般中小企業(yè)中，并沒(méi)有完善的優(yōu)惠券后臺(tái)管理系統(tǒng)，所以此時(shí)就需要產(chǎn)品設(shè)計(jì)師來(lái)根據(jù)過(guò)往經(jīng)驗(yàn)定義一些基礎(chǔ)字段，來(lái)滿(mǎn)足當(dāng)前的營(yíng)銷(xiāo)需求，主要包含優(yōu)惠券名稱(chēng)、類(lèi)型、面值、使用條件、使用時(shí)間。二、形式說(shuō)起彈窗，大家的第一印象可能是居中彈窗，居中彈窗的優(yōu)點(diǎn)在于能讓用戶(hù)更聚焦在彈窗的內(nèi)容，從而提升彈窗中優(yōu)惠券的轉(zhuǎn)化，但是當(dāng)平臺(tái)過(guò)多的居中彈窗出現(xiàn)時(shí)，會(huì)打斷用戶(hù)在平臺(tái)的操作連貫性，導(dǎo)致用戶(hù)體驗(yàn)不佳。所以?xún)?yōu)惠券彈窗除了選擇居中彈窗以外，對(duì)于那些輕量的優(yōu)惠券，我們還可以用底部彈窗的形式，既完成了優(yōu)惠券營(yíng)銷(xiāo)的目的，又不影響用戶(hù)在當(dāng)前頁(yè)面的操作。除此以外，我們?cè)趶棿暗脑O(shè)計(jì)時(shí)，還要考慮彈窗的延展性。由于針對(duì)不同的場(chǎng)景優(yōu)惠券的數(shù)量會(huì)有所不同，所以我們?cè)谠O(shè)計(jì)之初要溝通清楚優(yōu)惠券的最大數(shù)量，這樣在設(shè)計(jì)彈窗的時(shí)候才能保證當(dāng)承載最大數(shù)量的優(yōu)惠券時(shí)，能在各種分辨率下都能完整的呈現(xiàn)；同時(shí)在視覺(jué)設(shè)計(jì)上，我們盡量讓優(yōu)惠券的背景保持純色，這樣我們僅僅需要將彈窗的頂部切圖，剩下的讓研發(fā)根據(jù)彈窗的數(shù)量做自適應(yīng)。三、觸點(diǎn)觸點(diǎn)即優(yōu)惠券彈窗上的操作，提供什么操作是根據(jù)優(yōu)惠券的領(lǐng)取規(guī)則決定的。一般優(yōu)惠券主要分為兩種：主動(dòng)領(lǐng)取與自動(dòng)發(fā)放。主動(dòng)領(lǐng)取的優(yōu)惠券需要用戶(hù)在優(yōu)惠券彈窗點(diǎn)擊領(lǐng)取再發(fā)放，優(yōu)點(diǎn)在于用戶(hù)對(duì)于優(yōu)惠券的獲得感強(qiáng)，但是缺點(diǎn)是多了一步領(lǐng)取操作，從而增加了用戶(hù)的轉(zhuǎn)化鏈路。而自動(dòng)發(fā)放即當(dāng)彈出優(yōu)惠券彈窗時(shí)，就已經(jīng)發(fā)放給用戶(hù)，只是在彈窗展示具體優(yōu)惠券的面值等信息，此時(shí)操作的設(shè)定就要考慮優(yōu)惠券的轉(zhuǎn)化。我們?cè)谌粘ＴO(shè)計(jì)彈窗時(shí)，總喜歡加上“我知道了”按鈕用來(lái)關(guān)閉彈窗，這種交互適用于一般的字段釋義的彈窗，用來(lái)表明用戶(hù)閱讀彈窗信息后理解了字段的含義。而對(duì)于優(yōu)惠券彈窗而言，除了知道獲得了優(yōu)惠券，還希望用戶(hù)能立馬帶來(lái)轉(zhuǎn)化，所以此時(shí)直接關(guān)閉彈窗就切斷了優(yōu)惠券的轉(zhuǎn)化鏈路，那我們?cè)撊绾卧O(shè)計(jì)操作呢？顯然我們希望提高當(dāng)前優(yōu)惠券的轉(zhuǎn)化，就需要引導(dǎo)用戶(hù)去使用優(yōu)惠券，如何引導(dǎo)就需要結(jié)合優(yōu)惠券的類(lèi)型來(lái)設(shè)定。如果此次優(yōu)惠券都是針對(duì)同一個(gè)板塊，那我們就可以將”去使用“的按鈕放在優(yōu)惠券之外，引導(dǎo)用戶(hù)跳轉(zhuǎn)到對(duì)應(yīng)可使用優(yōu)惠券的板塊；而如果每個(gè)優(yōu)惠券對(duì)應(yīng)的使用板塊不同，那我們就需要將”去使用”的按鈕放在各個(gè)優(yōu)惠券上，來(lái)引導(dǎo)用戶(hù)跳轉(zhuǎn)到不同的板塊去轉(zhuǎn)化。除了轉(zhuǎn)化操作的設(shè)計(jì)，還有一個(gè)操作就是關(guān)閉彈窗，不知道大家有沒(méi)有注意到，目前大部分彈窗的關(guān)閉操作都是采用icon的形式，而且一般會(huì)出現(xiàn)在兩個(gè)位置，即彈窗右上角與下方，那么到底該放在哪里呢？我們可以結(jié)合”阻力思維”來(lái)考慮。優(yōu)惠券彈窗提供了轉(zhuǎn)化操作，那么對(duì)于平臺(tái)而言自然不希望用戶(hù)看到后就關(guān)閉彈窗，所以就需要考慮關(guān)閉按鈕放在哪里可以增加用戶(hù)關(guān)閉的難度，顯然根據(jù)用戶(hù)持有設(shè)備的習(xí)慣來(lái)說(shuō)，右上角比下方更難觸達(dá)，所以關(guān)閉按鈕放在右上角可能會(huì)在一定程度上增加優(yōu)惠券的轉(zhuǎn)化。ps：我們可以通過(guò)A/B測(cè)來(lái)驗(yàn)證我們的猜想。四、轉(zhuǎn)化優(yōu)惠券的設(shè)定能讓用戶(hù)感知到購(gòu)買(mǎi)成本的降低，那該如何促進(jìn)用戶(hù)最終的轉(zhuǎn)化呢？之前電商產(chǎn)品中，優(yōu)惠券的使用是在下單頁(yè)，我們選擇優(yōu)惠券，下單金額變更為折扣價(jià)格，后來(lái)逐漸的為了減少用戶(hù)領(lǐng)取的鏈路，下單價(jià)格直接展示使用優(yōu)惠券后的價(jià)格。但是當(dāng)用戶(hù)在優(yōu)惠券彈窗點(diǎn)擊“去使用”到對(duì)應(yīng)的板塊時(shí)，展示的是商品瀑布流，如何能讓用戶(hù)感知優(yōu)惠券的存在？我們可以將優(yōu)惠券前置，根據(jù)當(dāng)前的優(yōu)惠券面額與使用條件，展示對(duì)應(yīng)商品的“券后