禮品卡 UX 和 UI 最佳實踐

禮品卡成為電子商務的熱門話題也就不足為奇了。 它們不僅非常適合表達感激和喜愛，而且當您沒有時間想出一個聰明的禮物創意時，它們也是解決一些令人毛骨悚然的購買困境的有效解決方案。

目錄

• ‍ ‍ 為禮品卡設計單獨的購買路徑
• 創建一個單獨的登錄頁面，列出所有送禮選項
• 為客戶提供單獨的部分以檢查禮品卡狀態
• 在多個空間推廣禮品卡
• 設計禮品卡購買旅程
• 選擇禮物類型
• 選擇卡片格式
• 選擇交貨日期（可選）
• 選擇禮品卡金額
• 提供收件人信息
• 個性化禮品卡代碼
• 選擇禮券模板
• 上傳照片以自定義卡片
• 結帳流程
• 通過多個渠道向收件人發送卡片
• 想出一個有效的電子郵件設計
• 兌換禮品卡‍
• 允許部分贖回
• 設計禮品卡輸入字段
• 創建成功和錯誤消息
• 設計禮品卡到期通知
• 概括
  

僅在 2019 年，就有近 30 億美元的禮品卡現金未使用。 與此同時，2019 年禮品卡總支出為 986 億美元。 來源

知道禮品卡是一種非常有效的工具，因此有必要簡化禮品卡的購買和兌換流程。 但是應該如何設計輸入字段呢？ 應該在哪些子頁面上推廣？ 基於 UX 原則的卡購買和兌換應該如何看待？

這篇博文收集了為網站和移動設備設計禮品卡 UX 和 UI 的最佳實踐和靈感。 我們將涵蓋整個客戶旅程，從在您的網站上推廣禮品卡到完成購買流程、與幸運接收者分享禮品卡，最後在您的商店兌換禮品卡。

{{電子書}}

{{ENDEBOOK}}

注意：所有桌面截圖都是在 Mac、Chrome 上製作的。

注意：這篇文章的主要焦點是可購買的禮品卡，無論是數字代碼還是印刷卡。 如果您想了解有關使用禮品卡作為促銷工具和激勵措施的更多信息，我強烈建議您查看我們的UX 優惠券和促銷指南。

為禮品卡設計單獨的購買路徑

禮品卡的購買路徑可能與標準客戶旅程有很大不同，尤其是在您提供數字禮券的情況下。 這就是為什麼它應該被設計為您網站的一個單獨模塊的原因。 大多數禮品卡的購買路徑將歸結為幾個需要反映在您的 UI 設計中的關鍵步驟：

• 首先，在您的商店中找到禮品卡部分。
• 選擇禮品卡格式和模板（推薦）。
• 選擇卡值。
• 設置交貨方式和日期。
• 填寫收款人信息以及將隨卡發送的信息。
• 查看。
  

如您所見，此過程不同於將產品添加到購物車的標準產品購買，並且不需要提供額外的詳細信息。 這就是為什麼您需要為此部分開發與標準產品視圖頁面不同的不同設計。 但稍後會詳細介紹。

這篇文章主要是為電子禮品卡寫的。 如果您只在實體店提供禮券，以下是實體卡的 UX 最佳實踐列表：

• 讓它們引人注目——設計可能會決定客戶是否會注意到它們並考慮購買。
• 把它們包起來——把卡片放在信封裡，並為顧客提供一個空間，讓他們寫下個性化的信息或祝福。
• 把它們展示出來——把它們放在任何地方，讓它們不能被忽視（例如，收銀台）。
• 讓它們適合移動設備- 確保移動兌換並允許客戶兌換顯示在移動設備上的禮品卡。 例如，通過使用可以掃描並保存在移動設備上的二維碼或條形碼。
  

但是，如果您採用數字化方式，以下是一些重要指南，可確保您的禮品卡旅程從 UX 和 UI 角度進行適當設計。

創建一個單獨的登錄頁面，列出所有送禮選項

既然您知道在設計禮物模塊上投入更多時間的必要性，很明顯您還需要一個登錄頁面。 您的禮品卡登陸頁面應清楚地說明可用的禮品卡選項。 它應該展示不同的卡片設計（如果您提供很多）並提供不同的卡片交付選項（如果您同時提供電子郵件和打印）。 還建議在此處放置一些常見問題解答或 T&C，以便為潛在買家提供更多信息。

例子：

Zalando 有一個專門的登陸頁面來推廣他們的禮品卡。 從這個視圖中，潛在買家可以看到所有可能的個性化選項，並在標準卡片和禮品盒之間進行選擇。

葡萄酒電子商務公司 Winc 在其禮品卡登錄頁面上包含一個常見問題解答部分，並附有巧妙的副本。

您不僅可以使用登錄頁面來展示您的優惠，還可以讓客戶查看他們當前的卡餘額。 一些公司還利用這個空間讓用戶重新加載他們已經擁有的卡。

為客戶提供單獨的部分以檢查禮品卡狀態

無論您提供禮品卡作為獎勵還是可購買的產品都沒有關係，仍然建議為用戶提供單獨的空間來驗證他們的卡狀態。 您可以讓客戶檢查卡的有效性、當前餘額，甚至可以為卡充值或將積分轉移到另一張卡。

例子：

Shein 在他們的禮品卡部分有一個小部件，允許客戶檢查他們的禮品卡餘額，使這個空間成為任何與禮品卡相關的地方。

星巴克允許用戶在頁面的單獨部分查看餘額、轉移餘額、報告任何問題或重新加載卡片。

在多個空間推廣禮品卡

除了為您的禮品卡創建登錄頁面外，您還應該讓任何潛在客戶都可以輕鬆訪問商店的這一部分。 如果客戶無法在您的網站上輕鬆找到卡片，您將不會從送禮中獲得多少收入。 有關禮品卡的信息應放置在頁面導航欄和頁腳中。 如果禮品卡是新事物，或者送禮季即將開始，您可以考慮發起一項特別促銷活動，對禮品卡進行折扣以提高客戶意識。

例子：

Home Depot 除了導航欄外，還有一個帶有附加服務的頂部欄。 他們決定利用這個空間來推廣禮券。 它遵循良好的用戶體驗實踐，因為客戶將始終在頁面頂部看到此產品。

他們還在頁腳處添加了禮品卡。

Zalando 在導航欄和頁腳中通知禮品卡。 但是，在這種情況下，禮品卡被列在“配件”類別下，這使得它們比在 The Home Depot 中更難找到。

除了網站或移動應用程序導航，您還可以將禮品卡添加到電子郵件的頁腳。 此外，您還可以將它們納入客戶旅程的特定階段。 例如，您可以在購買後的感謝郵件中提及禮品卡，以鼓勵購物者向您的商店購買禮品卡，因為他們已經喜歡使用您的品牌購物。 另一個想法是將卡片添加到購物車視圖附近的推薦項目部分。

說到電子郵件，您還可以考慮在一年中的某些時候發送單獨的消息來推廣禮品卡。 例如，針對聖誕節或母親節等假期，使用專門的電子郵件來告知您商店中的送禮可能性。

示例：

Winc 發送了一封單獨的電子郵件，提醒訂閱者有關母親節的信息並推廣禮品卡。

Alloy Apparel 在聖誕節前一天對所有實體禮品卡發起了折扣活動，讓客戶有機會在最後一刻購買禮品卡。

設計禮品卡購買旅程

選擇禮物類型

既然我們知道如何確保客戶找到我們的報價，我們就可以設計最佳的購買途徑。 當然，您的購買路徑可能與我將在下面介紹的路徑不同。

例子：

PrettyLittleThing 僅提供一種禮物類型和格式。 這就是為什麼他們的客戶旅程從選擇禮券模板開始。

讓我們從選擇禮品卡類型開始。 有很多可用的禮物選擇，從個人數字代金券到公司卡和團體禮物。 此階段的設計將根據您要提供的禮品卡範圍而有很大差異。 確保無論有多少選項，它們都清晰地列出 - 強烈建議保持您的信息架構平坦，除非您只想強調一個禮物選項。

示例：

家得寶提供多種送禮選擇。 單獨的卡片在同樣重要的獎勵選項網格上方的頂部橫幅上進行推廣，使用戶可以理解佈局並且所有選項一目了然。

Zalando 還提供了更多自定義選項，但選擇了垂直佈局，客戶需要向下滾動才能查看所有可用選項。 由於 Zalando 僅提供單獨的卡片，因此它們不需要平面佈局。 相反，他們使用頁面將焦點切換到不同的模板和選項。 頁面底部提供了額外的選項（禮品盒），明確表明它不是主要產品。

選擇卡片格式

如果您同時提供數字和實體禮券，那麼購買路徑的下一步應該是在這兩個選項之間進行選擇。 請注意，此步驟和以下步驟應全部顯示在一個頁面上。 將用戶引導至新頁面以完成購買過程可能會損害體驗並導致他們退出。

交付方式之間的選擇應該是明確的。 您可以嘗試使用對比色或圖標來強調兩個選項之間的差異。 還建議使用清晰的副本——“通過電子郵件發送”和“通過郵寄”之間的對比應該足夠透明。 如果有天賦的人通過電子郵件收到它但想把它帶到商店打印，您還可以提供一個選項，即除了完全數字格式之外，還有可打印的設計（電子郵件附加的 PDF）。 您還可以在電子郵件中加入禮品二維碼，以便在 POS 快速掃描。

例子：

維多利亞的秘密從選擇交付方式開始其客戶旅程。 UI 對這兩個選項的重視程度相同。 但是，我會推薦更多對比鮮明的 CTA——“通過郵件發送”和“通過電子郵件發送”可能會讓人感到困惑，尤其是對於非英語母語人士而言。

選擇交貨日期（可選）

為了提高禮券的用戶體驗，您可以通過允許用戶選擇何時發送卡片來為您的數字卡添加更多個性化。 從可用性的角度來看，這是有道理的，因為卡片通常作為禮物發送——在大日子前五天發送生日禮物很糟糕，對吧？

例子：

PrettyLittleThing 使用戶有必要設置所需的交貨日期和時間。 他們使用了一個簡單的下拉列表。 我建議改用日曆日期選擇器，它可以讓用戶更好地查看他們選擇的日期（例如，星期幾）。

選擇禮品卡金額

在下一步中，您應該允許用戶選擇禮品卡金額。 建議值和可單擊值與自定義輸入字段的組合效果最佳。 這樣，您就可以為用戶提供有關禮品價值應該是多少的線索並使其易於選擇，同時如果客戶想要購買非標準卡值，則可以提供自定義字段。

例子：

Saatchi Art 是一個在線藝術市場，它使用建議值和自定義輸入字段來不施加任何限制。 如果用戶超過最大禮品卡價值，他們將收到一條錯誤消息，通知他們頁面頂部的錯誤詳細信息。

Zalando 對禮品卡的價值施加了限制，可能的價值在 50 到 100 英鎊之間。 從經濟角度來看，這種方法是有意義的。 但是，它極大​​地限制了您的代金券的靈活性，並且如果他們想要獲得更昂貴的禮品卡，可能會導致用戶離開您的網站。

Tiffany & Co. 不提供自定義卡值。 相反，它們提供預定義的卡片值。 值得注意的是，默認卡值是 500 美元，即使有更低的值可用。 通過這種方式，Tiffany & Co. 設法引導客戶專注於價值更高的卡片，使它們更受歡迎並被視為標準價格。

提供收件人信息

這是設計過程中的關鍵步驟，尤其是在數字代金券的背景下。 您應該在這里至少填寫兩個輸入字段——收件人的電子郵件地址和電子郵件應包含的禮品卡信息。 一些公司還提供主題行自定義選項，以使卡片交付更加個性化。 關鍵是只需要必要的信息（收件人姓名和電子郵件地址）。 不要包含太多額外的字段。

另一件事是卡片信息——最好提供預先寫好的信息，以便客戶更容易更快地發送卡片。 但是，如果用戶不喜歡預先編寫的文本，您應該讓他們更改或自定義消息。 此外，使消息字段可選。

示例：

星巴克為收件人和發件人的信息提供了一個簡單的 UI。

亞馬遜為用戶提供了一個簡單的預先編寫的消息，讓他們了解消息的外觀。

個性化禮品卡代碼

如果禮品卡是您業務的重要組成部分，您可能會考慮進一步增強其個性化潛力。 您的禮品卡軟件應允許您自定義禮品卡代碼以匹配收件人的名字或包含卡片所連接的特殊場合（例如，HAPPYBIRTHDAY7593）。 這個簡單的技巧將使卡片更令人難忘。 由於排除了混淆字符或適當的長度，獨特的圖案還將使在結賬時更容易應用卡代碼。 轉到此處了解有關改進代碼驗證體驗的更多詳細信息。

選擇禮券模板

由於禮品卡通常作為禮物發送，因此最好使它們在視覺上令人愉悅並與場合相關。 例如，想像得到一張全是灰色且沒有生日祝福的生日賀卡。 那不會是最好的禮物吧？ 這就是為什麼建議至少提供幾個禮券模板的原因。

例子：

亞馬遜提供了大量的卡片模板，用戶可以按場合購物，簡化卡片的購買路徑。 他們的禮品卡引擎為許多場合提供禮物。 而且，通過多種設計，讓預付卡看起來就像是量身定做的禮物。

上傳照片以自定義卡片

一個額外的 UX 快速獲勝將是允許用戶上傳他們的照片以個性化卡片。 但是請注意，添加此功能需要您提出照片使用條款，以保護自己免受侵犯任何第 3 方知識產權的侵害。

例子：

Zalando 允許用戶創建他們的卡片設計。 但是，為了確保一切都在法律方面得到解決，Zalando 要求用戶遵守其使用條款。

結帳流程

當用戶填寫所有必要信息時，進入結帳步驟，設計為您的標準結帳。 確保用戶可以快速更正他們提供的信息或對卡片進行更改，而無需刪除整個購物籃，並且每次進行更改時都從頭開始。 還建議在此視圖中適合卡詳細信息。 您可以使用默認隱藏的可展開文本，並在用戶單擊指定圖標或將鼠標懸停在卡片上時顯示。

示例：

PrettyLittleThing 是一個糟糕的禮品卡結賬 UX 示例。 用戶將卡添加到購物籃後，沒有簡單的方法可以更新卡的詳細信息，例如收款人信息或優惠券價值。 唯一的方法是從購物車中取出卡片並重新開始整個過程。

Winc 允許用戶在購物籃視圖中更新卡值。

通過多個渠道向收件人發送卡片

有多種選項可以與收件人共享卡片。 這裡是其中的一些：

• 通過電子郵件發送。
• 以可打印的 PDF 格式發送給買方，可以與收件人進行物理共享。
• 通過郵寄方式將實體卡交付給買方或收件人。
• 通過社交媒體發送，例如 Messenger、Whatsapp。
  

就 UI 設計而言，我們將專注於通過電子郵件發送給收件人的數字卡片。 如果這是收件人第一次聽到您的品牌，您可能會在您的電子郵件中實施幾個信任信號。 以下是一些關於如何拒絕垃圾郵件的提示：

• 明確的發件人身份是一個重要的信任標記——您可以考慮在附有禮品卡的電子郵件的主題行中包含發件人的姓名以增強信任。 例如，使用主題行“凱蒂剛剛給你送了禮物！”
• 利用個性化- 如果您有收件人的姓名，您應該將其添加到您的電子郵件中，以改善用戶體驗並使消息更值得信賴。
• 不要在主題行中誇大禮品卡的價值——盡量避免在主題行中使用諸如“優惠券”、“代碼”、“交易”或數字卡價值之類的短語。 收件人的電子郵件提供商可能會將您的郵件視為垃圾郵件或將其放在郵箱的“促銷”選項卡中。
  

想出一個有效的電子郵件設計

說到郵件內容，需要涵蓋以下幾點：

• 包括卡的價值。
• 包括指向特定條款和條件的鏈接或有關卡兌換限制的其他信息（如果有）。
• 易於復製到剪貼板的禮品卡代碼，最好一鍵複製。
• 將收件人帶到您的商店的 CTA。
  

請記住，用戶可以在桌面設備和移動設備上閱讀您的郵件。 為確保您的禮品卡適合移動設備使用，您可以在 CTA 中包含深層鏈接，以確保用戶使用已添加到其數字錢包中的禮品代碼直接訪問您的電子商務應用程序。 如果您只決定電子郵件格式，請確保包含易於縮放的條形碼或具有高對比度的二維碼，以確保 POS 的掃描設備可以兌換它。

例子：

Watsi 是一家慈善醫療機構，在涉及到正確的禮品卡電子郵件設計時，會標記所有復選框。

亞馬遜將禮品卡視為可以保留在帳戶中的商店信用。 在他們的電子郵件中，他們包含了一個深度鏈接，該鏈接將用戶直接帶到亞馬遜網站或應用程序（取決於設備），該應用程序自動將積分應用到接收者的帳戶。

兌換禮品卡

正如 Kim Salazar 所建議的，優惠券和禮券的有用性與其在網上商店的易用性成正比。

您應避免對禮券兌換施加任何限制，例如最低訂單金額。 另一個普遍的良好用戶體驗實踐是記住禮品卡接收者將對交付和產品成本信息更加敏感。 這樣的客戶比平時更加註意配置購物車內容。 這是因為擔心卡面值和訂單金額的差額可能會丟失。 這就是為什麼您還應該將用戶旅程視為一個整體並引入修復程序以提供最佳的用戶體驗。

{{顧客}}

{{終端客戶}}

允許部分贖回

您可以將禮品卡視為一種付款方式，而不是促銷券。 如果您使用可充值的禮品卡，例如星巴克的情況，此選項非常有用。 然後動態計算卡上的餘額，使用積分作為支付方式。 類似於信用卡或借記卡。 如果您選擇此解決方案，您需要確保禮品卡上沒有有效期（或很長的有效期）。 這可以使您的禮品卡非常有吸引力，但與此同時，它需要高質量的基礎設施來保持禮品卡的可兌換性。

例子：

使用 Zalando 禮品卡購物很容易，但入門可能會給用戶帶來挑戰。 要按預期使用禮品卡，接收者需要設置一個帳戶並找到“您的優惠券選項卡”，並將禮品卡代碼放在指定的文本字段中以進行兌換。 兌換後，卡上充值的現金被視為Zalando積分，可作為購買方式。

這種方法的問題是用戶可能不知道他們需要設置一個帳戶來兌換卡並查看他們的餘額。 通過將禮品卡代碼放在憑證字段中，也可以在結帳時兌換卡。 然後將憑證金額應用於購物籃中的總金額。 我建議讓收卡人清楚地知道這兩種可能性。

設計禮品卡輸入字段

禮品卡接收者希望盡快使用他們的禮物。 為了滿足這一需求，您應該在購買過程的早期提供憑證輸入字段，最好是在結帳前的購物車中。 這種方法使客戶能夠在輸入個人信息之前儘早檢查卡是否有效。

一個更好的方法是在購買過程的盡可能早的階段提供兌換禮券的可能性，比訂單的最終確定和付款要早得多。

例子：

Winc 提供簡單的 UI 設計，讓用戶在旅程的一開始就兌換禮券，有效地減少了與無法找到兌換字段相關的任何壓力或不便。

訂閱美容產品品牌 Birchbox 也允許用戶立即兌換禮券。 有關快速兌換卡的信息放置在頁腳中。

此外，憑證輸入位置應該是結帳過程的核心部分，並在網站或應用程序結構中正確顯示。 確保它足夠長以包含整個優惠券代碼。

另一個與禮品代碼相關的良好做法是明確區分付款和代金券字段，因為它們的接近性和相似性可能會讓潛在買家感到沮喪。

該指南與優惠券 UI 的最佳實踐相匹配。 如果您想學習如何設計憑證輸入字段，請閱讀。

例子：

Birchbox 是憑證輸入框的一個很好的例子。 盒子的名稱“促銷和禮品代碼”使盒子的用途一目了然。 許多電子商務網站使用“促銷代碼”作為此部分的名稱，這可能會使禮品卡所有者感到困惑，因為卡片不被視為促銷活動。 他們還為那些在購物車視圖中錯過的人提供了一個鏈接，可以在結帳視圖中打開優惠券代碼框。 這是保留在兩個步驟中添加優惠券代碼的選項的好方法。

創建成功和錯誤消息

顯示成功消息和更改的訂單總額以確認禮券代碼已成功應用。 將消息放在憑證字段附近，以確保用戶看到它並將其與輸入的代碼相關聯。 讓該消息顯示在頁面頂部或頁面底部可能會造成混淆。 但是，成功消息不應該是用戶獲得的唯一確認信息。 在購物車和結帳視圖中反映更改後的訂單總額。

按照相同的邏輯，您還應該顯示一條相關的錯誤消息，說明禮品卡問題的類型。 不要在每種情況下都顯示相同的錯誤消息，因為它不會指示用戶出了什麼問題以及他們如何解決問題。 這裡有些例子：

• “禮品卡代碼不正確，請重試。”
• “禮品卡代碼已過期。”
• “您不是禮品卡持有人（如果您將禮品券分配給個人客戶）。”
• “您的訂單不符合禮品卡條件（如果您為卡兌換設置了限制）。”
  

例子：

如果輸入的代碼無效或不符合促銷條件，SummerSalt 會顯示錯誤消息。 他們鼓勵客戶仔細檢查他們的代碼。

設計禮品卡到期通知

如果您的卡有到期日期，您需要提前計劃並設置自動通知以提示用戶在到期前使​​用他們的卡餘額。 在這裡，您應該遵循與電子郵件營銷相關的最佳 UX 實踐，即使視覺醒目，保持文案巧妙，添加對比鮮明的 CTA，並避免使用可標記為垃圾郵件（“折扣” 、“交易”、“銷售”）。

概括

我希望這份最佳實踐列表將幫助您開始設計您的網站和移動設備以使用禮品卡或改進您當前的 UI 設計。 如果您正在尋找有關建立禮品卡活動的一般建議，請務必查看本指南。

{{CTA}}

準備好讓您的禮品卡更上一層樓了嗎？

開始使用

{{ENDCTA}}