優惠券、折扣和促銷 UI 和 UX 的最佳實踐

“購物者喜歡交易，無論是全站銷售、精選銷售商品還是優惠券。 然而，要讓用戶成功使用促銷，網站必須做好兩件事：它必須在整個網站上有效地傳達這些不同的促銷信息，並且還必須讓用戶更容易獲得正在傳達的交易。” Nielsen Norman Group 高級用戶體驗專家 Kim Salazar

這篇文章收集了設計用戶界面和體驗的最佳實踐和靈感，以在您的網站或移動平台上推廣優惠券代碼和自動應用的促銷活動。 我們將涵蓋整個客戶旅程，從網站上的促銷信息和降價到優惠券和促銷驗證和結賬時的應用，最後是兌換。 我們根據客戶的 UI 和 UX、收入方面表現最好的 DTC 電子商務平台的 UI 以及各種 UX 研究來撰寫這篇文章。

注意：所有桌面屏幕截圖都是在 Mac、Chrome 上製作的，所有手機屏幕截圖都是在 Chrome 上使用 iPhone X 分辨率製作的。

我們希望本指南將幫助您重新設計您的平台，以包括優惠券和購物車級別的促銷活動，或改善您現有的客戶優惠券體驗。 如果您對我們的促銷引擎 Voucherify 有任何疑問或想了解更多信息，請隨時與我們聯繫。

優惠券和促銷 UI 套件

使用 Figma 上可用的優惠券和促銷 UI 套件中的現成優惠券和促銷組件加快上市時間。 學到更多。

目錄：

關於促銷 UI 和 UX 的一般建議：

• 明確說明促銷時間範圍。
• 自動應用公開可用的優惠券。
• 提供銷售彙編頁面。
• 在您的銷售類別中啟用過濾。
• 提供客戶駕駛艙。
• 在銷售部分以及適當的類別中列出打折商品。
• 在全球範圍內傳播網站範圍內的促銷活動。
• 預先明確促銷限制。

特定頁面上的優惠券 UX 最佳實踐：

1. ‍首頁：

• 主頁上宣傳的促銷類型。
• 鏈接到銷售頁面。

2. ‍分類頁面。
3. ‍彈出窗口。
4. ‍ 頂部功能區。
5. ‍頁腳。
6. ‍產品頁面：

• 留下舊的價格標籤。
• 清楚地說明捆綁促銷規則。

7. ‍購物車：

• 將優惠券代碼字段作為購物車和結帳頁面的核心部分。
• 對於最低消費促銷活動，請為用戶計算並幫助他們達到消費目標。
• 提醒用戶他們可以在購物車中獲得的可用特別優惠。
• 提及任何特殊條件或限制。

8.結帳頁面：

• 包括優惠券代碼字段。
• 如果代碼應用成功，則顯示成功消息。
• 在優惠券代碼無效的情況下顯示錯誤消息。
• 明確客戶是否可以添加一張以上的優惠券。
• 幫助用戶找到他們的折扣。
• 反映收到的折扣。
  

優惠券代碼 UI 和 UX 的基礎知識

我們將在這裡介紹一些適用於大多數折扣券和促銷設計、展示位置和促銷的一般提示。 稍後，我們將繼續介紹網站上特定的優惠券和購物車促銷展示位置，同時從客戶體驗的角度突出最佳設計解決方案。 請記住，僅僅發起優惠券活動是遠遠不夠的，您還需要注意優惠券的設計、放置、驗證和兌換過程，以使您的活動取得巨大成功。

清楚說明推廣時間範圍

您應該告知客戶優惠券或購物車級別促銷的持續時間，以避免不滿意的客戶在結帳時得知優惠不再有效。 它還有助於營造一種緊迫感，並稍微推動購物者完成訂單。 不這樣做會導致用戶體驗受損和客戶從您的網站中流失。

您可以通過提及促銷的時間範圍（日期或小時）或添加倒數計時器來做到這一點。 最佳做法是始終在每個橫幅和廣告上添加促銷時間範圍，而不僅僅是在條款和條件中，以確保客戶了解促銷的到期日期。

用戶界面示例：

Pomelo Fashion 正在使用倒數計時器來清楚地顯示他們的報價何時到期。

Shein 通過倒計時通知促銷橫幅或類別旁邊的客戶有關優惠的持續時間。 它們還顯示剩餘的件數，以引起緊迫感。

他們還在產品頁面上告知客戶優惠期限，以進一步提升促銷體驗。

他們甚至在購物車中也包含了計時器。

這是他們的移動應用程序上顯示的樣子：

Pretty Little Thing 在主頁橫幅上有一個促銷倒計時，也可以在移動分辨率中使用：

自動應用公開可用的優惠券以提供最佳體驗

如果網站上提供了折扣或優惠券代碼，您可以通過允許用戶通過單擊折扣代碼將其自動應用到他們的購物車來簡化兌換過程，或者至少在單擊它時自動複製它，以便他們不必記住密碼。 這將通過使用戶更容易將其應用到他們的購物車來增加促銷使用率。 如果客戶點擊他們收到的鏈接，您還可以自動應用通過各種渠道（電子郵件、短信和其他）發送的唯一折扣代碼。 通過關注這篇文章了解如何修復優惠券驗證 UX。

如果優惠是公開的，請務必仔細考慮它是否只是購物車級別的自動應用折扣而不是公共優惠券代碼。 它簡化了客戶的結帳流程，並可以提高促銷的轉化率。

另一個好的 UX 實踐是使優惠券代碼可以復制（將其作為文本放置在網站或移動應用程序上，而不是嵌入圖像中）。

用戶界面示例：

Vanity Planet 自動將公共優惠券代碼應用於購物車中符合條件的訂單。 結賬後，訂單總額會重新計算以反映折扣代碼。

他們甚至在訂單中添加免費產品，如果訂單符合條件，再次自動應用折扣代碼：

在這裡，您可以在移動分辨率上看到相同的流程：

如果您單擊“顯示訂單摘要”按鈕，將顯示購物車內容，包括適用於訂單的促銷信息和優惠券代碼。

提供銷售彙編頁面

在一個頁面上收集所有公開可用的購物車級促銷和折扣券是讓客戶更容易找到它們的好方法。 通過這種方式，您也可以向新的或未登錄的客戶顯示促銷信息，而不是僅使用客戶駕駛艙來顯示所有促銷信息。 公司通常會在主頁上簡單地顯示所有促銷橫幅，這可能會掩蓋不同的頁面元素並破壞客戶體驗。

用戶界面示例：

Victoria's Secret 在一個網站上以清晰的用戶界面呈現所有可用的優惠。 請注意網站上的信息架構如何使用大小來強調或不強調選定的報價。

在您的銷售類別中啟用過濾以獲得更好的用戶體驗

如果您提供的銷售類別收集了某個購物車促銷或折扣代碼適用的所有商品，您應該允許用戶導航和過濾該類別。 一些訪問者只想查看正在銷售的產品而不是其他任何東西，因此單獨的銷售類別應該允許他們查看所有優惠，並輕鬆瀏覽此部分。 過濾後的導航選項應該允許購物者在銷售部分中進行排序和過濾，以有效地縮小選擇範圍。 如果沒有過濾器，銷售購物可能會很辛苦，並且可能會導致客戶從您的網站中流失。

用戶界面示例：

Pomelo Fashion 按產品類型和尺寸提供銷售類別過濾器。

Fashion Nova 提供按價格點或隔間過濾的銷售類別：

提供客戶駕駛艙

顯示特定客戶可以在專用客戶駕駛艙中訪問的所有購物車促銷和折扣代碼有助於客戶了解哪些促銷是專門為他們提供的。 它還允許您顯示個人的、獨特的折扣券、禮品卡、忠誠度積分餘額或其他獎勵，而不是僅顯示向公眾提供的促銷而不是個性化促銷的銷售頁面。

用戶界面示例：

H&M 提供了一個客戶駕駛艙，客戶可以在其中找到他們的忠誠度積分餘額、可用的促銷和折扣、獨特的優惠券和推薦計劃。

移動分辨率的客戶駕駛艙：

在銷售部分和適當的類別中列出打折商品

不要將銷售項目的顯示限制在網站的專用銷售部分。 為了獲得最佳可發現性，最好在相應的類別頁面和“銷售”部分列出打折商品。 一些用戶在尋找便宜貨時會直接導航到銷售部分，但其他用戶不會專門尋找銷售部分。 尋找特定項目的用戶通常根據類別進行瀏覽。 顯示銷售商品和全價商品的網站可以幫助用戶發現他們感興趣的區域內的折扣。

用戶界面示例：

Pretty Little Thing 在銷售項目和產品類別下列出了銷售項目，以便可以在兩者中找到它們。

在全球範圍內傳播網站範圍內的促銷活動，以避免負面新聞

如果網站提供免費送貨或其他網站範圍的折扣或優惠券，請在網站的每個頁面上顯示這些優惠。 一致的折扣提醒可以幫助用戶找到預算中的商品並鼓勵他們購買。 同樣，他們將您的品牌描繪成為買家提供額外福利的品牌。 通過僅在選定區域顯示站點範圍的促銷活動，您可能會冒並非所有用戶都會發現它們的風險。 此外，如果沒有在所有頁面上宣傳優惠券，人們可能會認為它們被故意隱藏以防止使用，這最終會對品牌產生負面影響。

可能的折扣展示位置包括：

• 主頁英雄空間的宣傳公告。
• 帶有購物車促銷詳情或優惠券代碼的每個頁面頂部的橫幅 - 包括應輸入優惠券代碼的購物車頁面或結帳頁面。
• 產品列表頁面或右側欄內的促銷標註。
• 頁面底部、頁腳內或附近的橫幅。

用戶界面示例：

‍Pomelo Fashion 在主頁橫幅、首頁功能區和類別頁面上傳達其網站範圍內的優惠券。

PrettyLittleThing 甚至在產品頁面上也會提醒客戶網站範圍內的折扣券——從用戶體驗的角度來看，這是一個很好的舉措。

這是他們在移動佈局中呈現的方式：

Pretty Little Thing 在他們的主頁橫幅和首頁功能區上宣傳他們的購物車級促銷活動：

他們提供了一個顯示所有打折商品的銷售頁面：

他們還在產品頁面上顯示折扣：

提前明確促銷限制

有時，購物車促銷或折扣券可能會受到限定條件或限制。 如果是這種情況，請確保報價清楚地表明適用的限制。 如有必要，請鏈接到有關這些條件的更詳細信息，但不需要用戶仔細閱讀細則以了解基本限制。 沒有什麼比期待收到交易更令人沮喪的了，只是在結賬時發現您不符合條件。 請記住，您的優惠券設計不僅要引人注目，更重要的是要實用。

用戶界面示例：

Pretty Little Thing 在其主頁橫幅上直接聲明促銷不包括銷售商品和美容商品。

Chewy 提供了指向其促銷詳情（按鈕“了解更多”）的更多信息的鏈接，該鏈接在“第一次 Autoship 節省 35%”的功能區上做廣告。

這是單擊促銷 CTA 後顯示的彈出窗口：

在移動分辨率中，功能區不包含按鈕但可單擊。 單擊帶有促銷條款和條件的相同彈出窗口後，將顯示：

特定頁面上的優惠券 UX 最佳實踐：

主頁：

主頁上宣傳的促銷類型：

您不應該在主頁上宣傳所有促銷活動，因為客戶可能會被優惠的數量所淹沒（並獲得所謂的橫幅盲區）。 只有公開可用的購物車促銷或優惠券才應該在那裡做廣告。 最佳用戶體驗實踐是為類別或產品頁面保留產品或類別特定的折扣。

用戶界面示例：

Happy Socks 在其首頁功能區和主頁主橫幅上展示了夏季促銷自動應用 30% 的折扣，這是當時他們最大的公開折扣。

鏈接到銷售頁面

如果正在進行全站範圍內的自動應用或優惠券促銷活動，則無需在主頁上列出所有符合條件的產品和條件，您只需提供一個預告片，引導至銷售頁面，客戶可以在其中閱讀所有條款和條件促銷和瀏覽符合條件的產品和優惠。

用戶界面示例：

Chubbies Shorts 在主頁上顯示一個促銷橫幅，鏈接到銷售集合頁面。

分類頁面：

彈出窗口

彈出窗口可用於宣傳商店中可用的優惠券折扣和購物車級別的促銷活動，但它們有各種 UX 缺點。 如果它們是宣傳促銷的唯一方法，用戶可以關閉它們並忘記確切的折扣條件或所需的優惠券代碼。 因此，彈出窗口應與橫幅、電子郵件、短信等其他通信方式一起使用。 彈出窗口的另一個問題是它們具有侵入性。 它們涵蓋了用戶實際想要瀏覽的內容，並且可以被視為令人討厭。

另一方面，在為客戶剛剛執行的操作分配折扣時，彈出窗口是電子郵件的一個很好的替代或補充。 例如，如果客戶訂閱了時事通訊，您可以在彈出窗口中顯示獲得的折扣。 這樣，與必須檢查收件箱相比，客戶將更容易和更早地獲得它。 同樣，彈出窗口和電子郵件可以共存，如果客戶想稍後再回來，可以提供折扣。

移動應用程序上彈出窗口的一個很好的替代方法是推送通知。

用戶界面示例：

Tula 使用彈出窗口來傳達購物車級別的促銷，但當用戶點擊 15% 的固定橫幅時，也可以訪問彈出窗口。 這使得以後有可能回到促銷活動中。

頁面頂部功能區：

與主頁放置類似，功能區應保留用於公共或站點範圍的購物車或折扣券促銷。 這是添加公共優惠券代碼並使其在所有頁面（包括結賬）可見的好地方，以便在用戶檢查他們的購物車或完成結賬時輕鬆訪問代碼。

用戶界面示例：

Chubbies Shorts 使用功能區宣傳大型公開購物車促銷活動。

頁腳：

頁腳是網站上閱讀最少的地方之一。 放置折扣券或購物車級別的優惠並不是最好的主意，因為大多數客戶可能會錯過折扣。 另一方面，頁腳是添加促銷條款和條件的好地方。 如果您不需要單獨的促銷條款和條件頁面，因為條款和條件很短，您可以將它們放在頁腳中。

用戶界面示例：

ThredUp 使用頁腳顯示其購物車促銷的條款和條件。

產品頁面：

保留舊的價格標籤

確保您的客戶在降價之前知道價格是多少。 人們根據他們對交易的重視程度做出購買決定，而不是他們對產品的重視程度。 只要有可能，給你的客戶一個參考價格，讓你的交易看起來更好。

用戶界面示例：

Shein 劃掉舊價格，放置新價格，甚至添加一個標籤，以百分比表示折扣水平。

在手機上，它們顯示折扣的百分比和折扣的美元價值。

明確說明捆綁促銷規則

對於捆綁折扣，讓產品易於查看並在產品頁面上採取措施，以確保用戶在選擇時符合條件。 如果網站為購買同一產品的多件商品提供折扣，用戶應該能夠輕鬆發現優惠並達到最低要求。

用戶界面示例：

Chubbies Shorts 直接在類別頁面上的產品價格標籤旁邊顯示“購買 2 件，獲得折扣”促銷。

他們還在購物車中顯示折扣。

當您點擊折扣時，它會被選中並添加到訂單中，價格會降低 10 美元。

購物車：

將優惠券代碼字段作為購物車和結帳頁面的核心部分

擁有優惠券代碼的用戶希望盡快輸入。 在結帳過程的第一步之前，您應該在購物車中為優惠券代碼提供一個清晰的位置。 這種 UI 方法使人們能夠在輸入任何個人信息之前檢查它是否有效，並且還允許在此過程的早期適當地更新總數。

在放置優惠券代碼時，強烈建議將促銷代碼作為結帳過程的核心部分，而不是側邊欄項目。 當促銷活動放在正確的欄杆上時，它們往往會與廣告混淆，並且由於橫幅盲區而被忽略。

另一方面，如果您的客戶沒有優惠券代碼並且他們看到優惠券字段，他們可能會覺得他們錯過了可能的交易並流失，因為他們將開始尋找折扣。 如果不是所有的優惠券都是公開可用的，最好的解決方案是不提供可見的開放文本字段。 您應該提供一個文本鏈接來公開一個文本字段。 這種設計不太可能吸引用戶並向他們發送優惠券，因為許多購物者不會注意到它。 當然，權衡是對於那些有優惠券代碼的人來說，它不太容易找到。

優惠券代碼框，無論是自動展開還是隱藏在鏈接下，都應該是一個文本字段。 如果您的優惠券代碼具有固定數量的字符或特定模式，您還可以添加自動驗證，如果用戶添加的字符數量不足、過多或類型錯誤（數字、字母、特殊符號）字符，則會提示用戶以提供幫助他們更早地發現了錯誤。 該字段應足夠長以容納網站上使用的優惠券代碼，以確保用戶正確輸入它們。 優惠券代碼的最佳長度為 8-12 個字符。 如果您提供優惠券代碼建議，您也可以將它們顯示在下拉列表中。

當談到您如何圍繞提供的優惠券來表達副本時，心理會計營銷心理學建議，如果您的產品傾向於更多地屬於必需品類別，您應該告訴您的客戶他們已經“獲得”優惠券（想像一個彈出窗口消息說“嗨！您剛剛獲得了 10 美元的優惠券！”），因為賺錢的行為使它看起來像是更重要的收入來源。 相比之下，如果您的產品更輕浮，您應該嘗試將您的優惠券作為一個驚喜或因為運氣而給予他們（想像一條消息說“您剛剛贏得了 10 美元的優惠券！”）。 您可以在我們的博客文章中閱讀有關心理會計的更多信息。

優惠券代碼本身應該很容易記住並寫在優惠券框中（除非您將它們作為下拉菜單或單選按鈕提供以供選擇）。 這意味著使組合對客戶有意義，避免使用類似的字母和數字，如 O 和 0，並將長度保持在 12 個字符以下。 在我們的博客文章中閱讀有關認知流暢性的更多信息。

用戶界面示例：

Birchbox 在購物車視圖中有一個非常明顯的優惠券代碼框。 他們還提供了一個鏈接，可以在結帳視圖中打開優惠券代碼框，供那些在購物車視圖中錯過的人使用。 這是保留在兩個步驟中添加優惠券代碼的選項的好方法，將優惠券代碼框隱藏在結帳表單上，這有助於減少客戶流失。

在移動分辨率上，優惠券框是隱藏的，必須通過單擊它來展開：

同樣，結帳頁面有一個指向促銷代碼框的鏈接：

對於最低消費促銷，為用戶計算並幫助他們達到消費目標

一些網站提供促銷活動，例如購買超過一定金額的商品免運費。 這些交易吸引用戶花費額外的時間和金錢來獲得他們的資格。

對於最低消費促銷活動，網站應該準確地告訴用戶他們需要花費多少才能獲得優惠。 一個很好的 UI 想法是直接在購物車中計算用戶需要花費多少才能獲得折扣，無論是免費送貨、折扣還是折價。

如果您想確保客戶有動力花費更多來獲得免費送貨，但不限制他們的購物以達到“剛好夠用”的消費水平，設置價格上限並錨定達到免費送貨所需的價值，您可以玩使用您的 UI 顯示免費送貨的進度，在支出開始時更快，而在達到訂單量“目標”時更慢。 這是根據“目標速度”的想法，基於研究。 您可以在這篇博文中了解更多相關信息。

網站可以走得更遠，通過在購物車中推薦相關商品，讓購物者達到最低消費目標，並節省他們自己做數學的努力。

用戶界面示例：

Tula 使用 UI 在購物車中顯示缺少多少才能獲得免費送貨的資格。

提醒用戶他們可以在購物車中獲得的特別優惠

吸引用戶注意力並幫助他們發現可用的購物車級別和優惠券促銷活動的最後機會是在購物車頁面上。 在那裡，他們仍然可以輕鬆地更改訂單，因此請確保包含用戶可以享受的任何特別優惠，例如免費送貨或折扣。

優惠必須清晰可見以吸引用戶的注意力。 要吸引用戶的眼球，請使用適當的位置和視覺重量。

以下是一些最佳的用戶體驗實踐：

• 對於產品級優惠，在產品本身附近顯示消息。
• 對於站點範圍的優惠，請在選項上方的優先空間中顯示優惠以繼續結帳。
• 如果折扣適用於運費，則可能適合放置在網站範圍內的折扣或運費總額旁邊。
  

不要向客戶提供太多優惠券和購物車級別的促銷活動，尤其是在結賬時。 選擇超載會導致客戶流失。 在我們的博客文章中閱讀更多關於多樣性和選擇超載的價值。

用戶界面示例：

Chubbies Shorts 直接在購物車中顯示所有可用的折扣和獎勵。

提及任何特殊條件或限制

如果購物車促銷或優惠券有任何特殊條件或限制，請在客戶完成購買之前在銷售頁面、您的條款和條件以及購物車中提及。

用戶界面示例：

Shein 提到了他們在購物車中促銷的特殊條件，例如客戶可以購買的促銷產品的最大數量以及促銷商品不能退貨。

結帳頁面：

包括優惠券代碼字段

正如我們之前提到的，如果有人忘記在購物車查看頁面上應用，最好在購物車頁面和結帳頁面都包含優惠券代碼字段。

如果代碼應用成功，則顯示成功消息

顯示成功消息和折扣金額以確認優惠券代碼已成功應用。 將消息放在優惠券代碼字段附近，以確保用戶看到它並將其與輸入的優惠券代碼相關聯。 讓該消息顯示在頁面頂部或頁面底部可能會造成混淆。 確保成功消息不是成功應用優惠券的唯一信息來源。 在訂單總額、購物車和結帳頁面中顯示添加的折扣，最好指定哪個優惠券代碼應用了哪個折扣（特別是如果客戶可以在訂單中添加多個折扣代碼）。

用戶界面示例：

Pretty Little Thing 會顯示一個複選標記和輸入有效代碼後應用於訂單的節省金額。 它們還顯示在訂單總額中計算的折扣金額，指定應用折扣的折扣代碼。

他們還在移動視圖上顯示應用的優惠券代碼和相關折扣：

{{CTA}}

使用我們的 UI 工具包中包含的現成組件構建您的前端

開始建造

{{ENDCTA}}

顯示無效優惠券代碼的錯誤消息

如果代碼無效或不符合促銷條件，您應該顯示相關的錯誤消息，說明使用優惠券代碼的問題類型。 不要在每種情況下都顯示相同的錯誤消息，因為它不會指示用戶出了什麼問題以及他們如何解決問題。

在優惠券代碼框旁邊顯示錯誤消息，而不是在頁面的頂部或底部，因為用戶可能不會注意到錯誤消息。 確保錯誤消息可見，例如使用紅色或其他對比色。

要顯示的錯誤消息類型：

• 優惠券代碼無效。
• 優惠券代碼已使用，無法再兌換。
• 訂單金額不足或過多無法使用優惠券（在這種情況下，請返回有關缺少多少有資格獲得優惠券或購物車中有多少超出的信息）。
• 訂單內容不符合促銷條款（在這種情況下，請提及應刪除或添加哪些商品以符合條件）。
• 優惠券已過期。
• 其他原因——如果您可以想像其他情況，請專門為他們製作信息。 為您無法想到的所有其他情況提供一條默認消息。

用戶界面示例：

如果輸入的代碼無效或不符合促銷條件，Summer Salt 會顯示錯誤消息。 他們鼓勵客戶仔細檢查他們的代碼。 在頂部功能區上顯示公共優惠券有助於糾正錯誤。

這是他們在移動分辨率上顯示的方式：

明確客戶是否可以添加超過一張折扣券或組合促銷

如果您只允許將一張優惠券添加到訂單中，則一旦客戶添加了有效的優惠券代碼，請使優惠券代碼消失或隱藏。 通過添加“更改我的優惠券代碼”按鈕來替換它，因為客戶可能希望將優惠券代碼更改為另一個。 請記住，您還可以選擇刪除優惠券代碼。 您應該在頁面上的某處明確說明客戶每筆訂單只能添加一個優惠券代碼。

如果客戶可以添加更多優惠券代碼，一旦他們添加了一個優惠券代碼，您可以將其顯示為“已添加到訂單”，並讓優惠券代碼字段重新加載並再次為空，以便客戶可以申請另一個優惠券代碼。

如果折扣代碼和購物車促銷不能結合使用，您應該在促銷廣告、T&C 和結帳頁面上明確說明，尤其是如果有人試圖在已經打折的商品上添加優惠券時會出現錯誤消息。

用戶界面示例：‍

Summer Salt 在優惠券代碼字段下方添加了已添加的優惠券，並在將優惠券應用於訂單後清空優惠券代碼字段，建議用戶在每個訂單中可以應用多個優惠券。

Pretty Little Thing 允許客戶在每個訂單中只使用一個優惠券代碼。 他們在將優惠券應用於訂單後使優惠券字段消失，並用“更改代碼”按鈕替換它。

幫助用戶找到折扣以提升客戶體驗

在優惠券代碼字段旁邊，您應該顯示一個指向客戶駕駛艙的鏈接，他們可以在其中查看所有可用折扣，或者只是可供選擇的優惠券和購物車促銷列表。 這使客戶更容易使用您的交易，並且可能會增加他們的購物車大小，如果他們認為只要在購物車中添加更多商品就可以享受折扣。

用戶界面示例：

Shein 鏈接到“我的優惠券”頁面，該頁面在結賬時在優惠券代碼字段旁邊收集可用優惠券，並在優惠券代碼字段下提及公開可用的優惠券。

這是顯示可用優惠券和過期優惠券的客戶駕駛艙，單擊“我的優惠券”鏈接即可打開。

在移動應用程序上，他們將優惠券顯示為“優惠券警報”。 如果單擊該彈出窗口，您可以查看所有可用的優惠券並選擇要使用的優惠券。

反映收到的折扣

顯示適用於購物車中商品的任何折扣或特殊限制，包括購物車級促銷和優惠券。 在請求付款信息之前，應驗證優惠券代碼並將其反映在成本中。 購物車級別的折扣應顯示在產品或訂單級別，具體取決於它們的應用。 用戶必須能夠看到節省並了解總額是如何計算的。 最好的辦法是甚至顯示哪個優惠券代碼和哪個促銷活動讓他們在訂單總額中節省了多少確切金額。

在客戶下訂單之前，應告知折扣商品的特殊限制。

用戶界面示例：

Shein 在購物車摘要中顯示產品級別的產品級別折扣。

Shein 允許客戶僅在結賬時使用折扣代碼。 In the order summary, they reflect the product discounts by showing the difference between retail price and subtotal. Then, if you apply any discount codes to the whole order, it is displayed as the “discount” of the subtotal. Note that they show both, cart-level and discount coupons savings in the order total but in different places.

On the mobile app, coupons can be selected at checkout. Then they are displayed in the order total.

概括

This was a long one. The key takeaway here is that coupon offers and promotions shouldn't be run for the sake of it. Besides tinkering with the offer itself, your team also needs to consider the best design, placement, and validation possible. Keep in mind that the promotional ROI won't peak if you don't make your offers easy to find and apply. Even the best offer will go unnoticed if it's not promoted properly. Always remember to clearly communicate the value of the discount and any conditions customers need to meet. Hopefully, these UX tips will get you started.

{{CTA}}

Are you ready to fix your coupon UX?

開始使用

{{ENDCTA}}