ギフトカードのUXとUIのベストプラクティス

公開: 2022-04-18

ギフトカードがeコマースで話題になっているのは当然のことです。 感謝の気持ちや愛情を表現するのに最適なだけでなく、贈り物の賢いアイデアを思いつく時間がなくなったときに、髪の毛が立ち上がる購入のジレンマに対する効果的な解決策にもなります。

目次

  • ‍‍ギフトカード用に別の購入経路を設計する
  • すべてのギフトオプションを一覧表示する別のランディングページを作成する
  • お客様がギフトカードのステータスを確認できるように、別のセクションを用意してください
  • 複数のスペースでギフトカードを宣伝する
  • ギフトカード購入の旅をデザインする
  • ギフトタイプの選択
  • カードフォーマットの選択
  • 納期の選択(オプション)
  • ギフトカードの金額を選択する
  • 受信者の情報を提供する
  • ギフトカードコードのパーソナライズ
  • ギフト券テンプレートの選択
  • カードをカスタマイズするための写真のアップロード
  • チェックアウトプロセス
  • 複数のチャネルを介して受信者にカードを送信する
  • 効果的なメールデザインを考え出す
  • ギフトカードの利用‍
  • 部分的な償還を許可する
  • ギフトカードの入力フィールドをデザインする
  • 成功とエラーメッセージを作成する
  • ギフトカードの有効期限の通知をデザインする
  • 概要
2019年だけでも、約30億ドルのギフトカードの現金が未使用になりました。 一方、2019年のギフトカードの総支出は986億ドルでした。 ソース

ギフトカードは非常に強力なツールであることを知っているので、ギフトカードの購入と引き換えのプロセスを簡素化することは価値があります。 しかし、入力フィールドはどのように設計する必要がありますか? どのサブページでプロモートする必要がありますか? そして、カードの購入と償還は、UXの原則に基づいてどのように見えるべきですか?

このブログ投稿は、ウェブサイトとモバイル向けのギフトカードのUXとUIを設計するためのベストプラクティスとインスピレーションを集めています。 サイトでギフトカードを宣伝してから購入プロセスを完了し、幸運な受取人とカードを共有し、最後に店舗でカードを利用するまでのカスタマージャーニー全体をカバーします。

{{EBOOK}}

{{ENDEBOOK}}

注:デスクトップのスクリーンショットはすべてMac、Chromeで作成されています。

注:この投稿の主な焦点は、デジタルコードまたは印刷されたカードとして購入可能なギフトカードです。 ギフトカードをプロモーションツールやインセンティブとして使用する方法について詳しく知りたい場合は、クーポンやプロモーションのUXガイドを確認することを強くお勧めします

ギフトカードの購入経路を個別に設計する

ギフトカードの購入経路は、特にデジタルギフト券を提供する場合、標準のカスタマージャーニーとは大きく異なる可能性があります。 これが、サイトの個別のモジュールとして設計する必要がある理由です。 ほとんどのギフトカードの購入経路は、UIデザインに反映する必要のあるいくつかの重要なステップになります。

  • まず、ストアでギフトカードのセクションを見つけます。
  • ギフトカードの形式とテンプレートを選択する(推奨)。
  • カードの値を選択します。
  • 配送方法と日付の設定。
  • カードで送信される受信者の情報とメッセージを入力します。
  • チェックアウト。

お気づきのとおり、このプロセスは、商品がカートに追加される標準的な商品購入とは異なり、追加の詳細を提供する必要はありません。 このため、このセクションでは、標準の製品ビューページとは異なるデザインを開発する必要があります。 しかし、それについては後で詳しく説明します。

この投稿は主にeギフトカード用に書かれています。 実店舗でのみギフト券を提供する場合は、物理カードのUXのベストプラクティスのリストを次に示します。

  • それらを人目を引くようにする–デザインは、顧客がそれらに気づき、購入を検討するかどうかを決定する場合があります。
  • それらをまとめる–カードを封筒に入れ、顧客がパーソナライズされたメッセージや最高の願いを書くためのスペースを提供します。
  • それらを展示する–どこにでも置いて、見落とさないようにします(たとえば、レジ​​係の机)。
  • モバイルフレンドリーにする–モバイルでの利用を確保し、顧客がモバイルデバイスに表示されたギフトカードを利用できるようにします。 たとえば、モバイルデバイスでスキャンして保存できるQRコードまたはバーコードを使用します。

ただし、デジタル化した場合は、ギフトカードの旅がUXとUIの観点から適切に設計されていることを確認するための重要なガイドラインをいくつか紹介します。

すべてのギフトオプションを一覧表示する別のランディングページを作成する

ギフトモジュールの設計にもう少し時間を費やす必要があることがわかったので、ランディングページも必要になることが明らかになりました。 ギフトカードのランディングページで、利用可能なギフトカードのオプションを明確に説明する必要があります。 さまざまなカードデザイン(多数提供する場合)を紹介し、さまざまなカード配信オプション(電子メールと印刷物の両方を提供する場合)を提示する必要があります。 潜在的な購入者に追加情報を提供するために、そこにいくつかのFAQまたはT&Cを配置することもお勧めします。

例:

Zalandoには、ギフトカードを宣伝するための専用のランディングページがあります。 このビューから、潜在的な購入者は、考えられるすべてのパーソナライズオプションを確認し、標準のカードとギフトボックスのどちらかを選択できます。

ランディングページのZalandoギフトカードのカスタマイズオプション

ワインのeコマースビジネスであるWincは、ギフトカードのランディングページに巧妙なコピーを含むFAQセクションを含めました。

ギフトカードに関するWincFAQセクション

ランディングページを使用して、オファーを紹介するだけでなく、顧客が現在のカードの残高を確認できるようにすることもできます。 一部の企業は、このスペースを使用して、ユーザーがすでに所有しているカードをリロードできるようにしています。

お客様がギフトカードのステータスを確認できるように、別のセクションを用意してください

インセンティブとしてギフトカードを提供するか、購入可能な商品として提供するかは関係ありませんが、ユーザーがカードのステータスを確認するための別のスペースを提供することをお勧めします。 顧客がカードの有効性や現在の残高を確認したり、カードを再充電したり、クレジットを別のカードに転送したりできるようにすることができます。

例:

Sheinのギフトカードセクションには小さなウィジェットがあり、顧客はギフトカードの残高を確認できるため、このスペースはギフトカードに関連するあらゆる場所で利用できます。

ギフトカードの残高を確認するSheinセクション

スターバックスを使用すると、ユーザーはページの別のセクションで残高を確認したり、残高を転送したり、問題を報告したり、カードをリロードしたりできます。

ギフトカードの複数のオプションを備えたスターバックスのランディングページ

複数のスペースでギフトカードを宣伝する

ギフトカードのランディングページを作成するだけでなく、潜在的な顧客がストアのこの部分に簡単にアクセスできるようにする必要があります。 顧客がサイトでカードを簡単に見つけられない場合、ギフトからの収益はあまり見られません。 ギフトカードに関する情報は、ページのナビゲーションバーとフッターに配置する必要があります。 ギフトカードが新しいものである場合、またはギフトシーズンが始まろうとしている場合は、ギフトカードを割引価格で提供する特別なプロモーションキャンペーンを開始して、顧客の意識を高めることを検討できます。

例:

ホームデポには、ナビゲーションバーのほかに、追加サービスを備えたトップバーもあります。 彼らはこのスペースをギフト券の宣伝に使用することにしました。 顧客は常にページの上部にこのオファリングを表示するため、これは優れたUXプラクティスに従います。

トップバナーのカードのホームデポプロモーション

フッターにはギフトカードも含まれています。

HomeDepotフッター

Zalandoは、ナビゲーションバーとフッターの両方でギフトカードについて通知します。 ただし、この場合、ギフトカードはアクセサリカテゴリにリストされているため、ホームデポよりも見つけるのが困難です。

ナビゲーションバーのZalandoギフトカード

ウェブサイトやモバイルアプリのナビゲーションに加えて、メールのフッターにギフトカードを追加することもできます。 さらに、カスタマージャーニーの特定の段階にそれらを組み込むこともできます。 たとえば、購入後のサンキューメールにギフトカードを記載して、買い物客がすでにあなたのブランドで買い物を楽しんでいるので、誰かにギフトカードを購入するように勧めることができます。 別のアイデアは、カートビューの近くの推奨アイテムセクションにカードを追加することです。

メールと言えば、1年の特定の時期にギフトカードを宣伝するために個別のメッセージを送信することを検討することもできます。 たとえば、クリスマスや母の日などの休日をターゲットにして、店舗でのギフトの可能性に関する専用のメールメッセージを表示します。

Wincは、母の日について加入者に思い出させ、ギフトカードを宣伝するために別の電子メールを送信しました。

母の日のギフトカードのWincメールプロモーション


Alloy Apparelは、クリスマスの前日にすべての物理的なギフトカードの割引キャンペーンを開始し、顧客に直前にカードを購入する機会を提供しました。

クリスマスの合金アパレルギフトカードのプロモーション

ギフトカード購入の旅をデザインする

ギフトタイプの選択

顧客が私たちのオファーを確実に見つけられるようにする方法がわかったので、可能な限り最良の購入経路を設計することができます。 もちろん、購入までの道のりは、以下で説明するものとは異なる場合があります。

例:

PrettyLittleThingは1つのギフトタイプとフォーマットのみを提供します。 これが、彼らのカスタマージャーニーがギフト券テンプレートの選択から始まる理由です。

ギフトカードのデザインを選ぶかわいいこと

ギフトカードの種類を選択することから始めましょう。 個人のデジタルバウチャーから企業カードやグループギフトに至るまで、利用可能なギフトオプションはたくさんあります。 このフェーズのデザインは、提供するギフトカードの範囲によって大きく異なります。 オプションがいくつあっても、それらがすべて読みやすくリストされていることを確認してください。ギフトオプションを1つだけ強調したい場合を除いて、情報アーキテクチャをフラットに保つことを強くお勧めします。

ホームデポは、複数のギフトオプションを提供しています。 個々のカードは、同様に重要なボーナスオプションのグリッドの上にある上部のバナーで宣伝され、ユーザーがレイアウトを理解しやすくし、すべてのオプションが一目でわかります。

ホームデポのギフトカードタイプの選択

Zalandoはさらに多くのカスタマイズオプションも提供していますが、顧客が利用可能なすべてのオプションを表示するには下にスクロールする必要がある垂直レイアウトを選択しました。 Zalandoは個別のカードしか提供していないため、フラットなレイアウトは必要ありません。 代わりに、ページを使用してフォーカスを別のテンプレートやオプションに切り替えます。 追加のオプション(ギフトボックス)がページの下部に表示され、それが主な製品ではないことが明確になります。

Zalandoギフトカードオプション

カードフォーマットの選択

デジタルギフト券と物理的なギフト券の両方を提供する場合、購入経路の次のステップは、これら2つのオプションのどちらかを選択することです。 この手順と次の手順はすべて1つのページに表示する必要があることに注意してください。 購入プロセスを完了するためにユーザーを新しいページに誘導すると、エクスペリエンスが損なわれ、ユーザーが脱落する可能性があります。

配送方法の選択は明確でなければなりません。 対照的な色やアイコンを使用して、両方のオプションの違いに下線を引くことができます。 また、明確なコピーを使用することをお勧めします。「電子メールで送信」と「郵送で送信」の対比は十分に透明である必要があります。 才能のある人が電子メールで受け取ったが、印刷して店に持ち込みたい場合は、完全なデジタル形式に加えて、印刷可能なデザイン(電子メールに添付されたPDF)を使用するオプションを提供することもできます。 ギフトのQRコードをメールに組み込んで、POSですばやくスキャンできるようにすることもできます。

例:

Victoria's Secretは、配送方法の選択からカスタマージャーニーを開始します。 UIは、両方のオプションに同じ重要性を置きます。 ただし、より対照的なCTAをお勧めします。「メールで送信」と「メールで送信」は、特に英語を母国語としない人にとっては混乱を招く可能性があります。

カードフォーマットのビクトリアの秘密の選択

納期の選択(オプション)

ギフト券のUXを向上させるために、ユーザーがカードを正確に送信するタイミングを選択できるようにすることで、デジタルカードにもう少しパーソナライズを追加できます。 カードは通常ギフトとして送られるので、使いやすさの観点からは理にかなっています。誕生日の5日前に誕生日プレゼントを送るのは面倒ですよね?

例:

PrettyLittleThingでは、ユーザーが希望の配達日時を設定する必要があります。 彼らは単純なドロップダウンリストを使用しました。 代わりにカレンダーの日付ピッカーを使用することをお勧めします。これにより、ユーザーは選択した日付(曜日など)をよりよく見ることができます。

配信オプションの選択Prettylittlething

ギフトカードの金額を選択する

次のステップでは、ユーザーがギフトカードの金額を選択できるようにする必要があります。 提案されたクリック可能な値とカスタム入力フィールドの組み合わせが最適です。 このようにして、ギフトの価値をユーザーに示し、選択を容易にすると同時に、顧客が非標準のカードの価値を購入したい場合にカスタマイズするためのフィールドを提供します。

例:

オンラインアートマーケットプレイスであるSaatchiArtは、推奨値とカスタム入力フィールドの両方を使用して、制限を課していません。 ユーザーがギフトカードの最大額を超えると、ページ上部にエラーの詳細を通知するエラーメッセージが表示されます。

カードの価値を選ぶSaatchiArt
カードの価値を選ぶSaatchiアート

Zalandoは、ギフトカードの価値に制限を課し、可能な値を50〜100ポンドにします。 このアプローチは、経済的な観点から意味があります。 ただし、バウチャーの柔軟性が大幅に制限され、より高価なギフトカードを取得したい場合は、ユーザーがサイトから離れてしまう可能性があります。

Zalandoギフトカードの最小額と最大額

ティファニーはカスタムカードの値を提供していません。 代わりに、事前定義されたカード値を提供します。 注目に値するのは、より低い値が利用可能であっても、デフォルトのカード値は$500であるということです。 このようにして、ティファニーは顧客に、より価値の高いカードに焦点を合わせ、それらをより望ましく、標準価格として認識させるように指示することができます。

ティファニーのデフォルトのギフトカードの金額

受信者の情報を提供する

これは、特にデジタルバウチャーのコンテキストでは、設計プロセスの重要なステップです。 ここでは、少なくとも2つの入力フィールド(受信者の電子メールアドレスと、電子メールに記載するギフトカードメッセージ)を入力する必要があります。 一部の企業は、カード配信をさらにパーソナライズするために件名のカスタマイズオプションも提供しています。 重要なのは、必要な情報(受信者の名前と電子メールアドレス)のみを要求することです。 あまりにも多くの余分なフィールドを含めないでください。

もう1つは、カードメッセージです。顧客がカードをより速く送信しやすくするために、事前に作成されたメッセージを提供するのが最善です。 ただし、事前に作成されたテキストが気に入らない場合は、ユーザーがメッセージを変更またはカスタマイズできるようにする必要があります。 また、メッセージフィールドをオプションにします。


スターバックスは、受信者と送信者の情報のためのシンプルなUIを提供します。

スターバックスが受信者の情報を追加

Amazonは、メッセージがどのように見えるかについてのアイデアをユーザーに提供するために、ユーザーに簡単な事前に作成されたメッセージを提供します。

アマゾンの事前に書かれたギフトカードメッセージ

ギフトカードコードのパーソナライズ

ギフトカードがビジネスの大きな部分を占める場合は、ギフトカードのパーソナライズの可能性をさらに高めることを考えるかもしれません。 ギフトカードソフトウェアでは、ギフトカードコードをカスタマイズして、受取人の名に一致させるか、カードが接続されている特別な機会を含めることができます(HAPPYBIRTHDAY7593など)。 この簡単なトリックは、カードをより思い出深いものにします。 ユニークなパターンはまた、紛らわしい文字や適切な長さを排除するため、チェックアウト時にカードコードを適用するのを容易にします。 コード検証エクスペリエンスの向上の詳細については、こちらをご覧ください。

ギフト券テンプレートの選択

ギフトカードは通常ギフトとして送られるので、視覚的に心地よく、その場に関連するものにするのが最善です。 たとえば、すべて灰色で誕生日の希望がないバースデーカードを入手することを想像してみてください。 それは最高の贈り物ではないでしょう? これが、少なくともいくつかのギフト券テンプレートを提供することが推奨される理由です。

例:

アマゾンはたくさんのカードテンプレートを提供しており、ユーザーは時々買い物をすることができ、カードの購入経路を簡素化します。 彼らのギフトカードエンジンは、多くの機会にギフトを提供します。 さらに、複数の多様なデザインにより、プリペイドカードはオーダーメイドのギフトのように見えます。

Amazonカードテンプレート

カードをカスタマイズするための写真のアップロード

ボーナスUXクイックウィンは、ユーザーが写真をアップロードしてカードをパーソナライズできるようにすることです。 ただし、この機能を追加するには、第三者の知的財産権の侵害から身を守るために、写真の使用条件を考え出す必要があることに注意してください。

例:

Zalandoを使用すると、ユーザーはカードのデザインを作成できます。 ただし、すべてが法的な側面で解決されるようにするために、Zalandoはユーザーに利用規約を遵守するように要求します。

カード配信を選択するZalando

チェックアウトプロセス

ユーザーが必要な情報をすべて入力したら、標準のチェックアウトとして設計されたチェックアウト手順に進みます。 ユーザーが、バスケット全体を削除したり、変更を加えるたびに最初からやり直したりすることなく、提供した情報をすばやく修正したり、カードに変更を加えたりできるようにします。 このビューにカードの詳細を合わせるようにすることもお勧めします。 デフォルトで非表示になり、ユーザーが指定されたアイコンをクリックするかカードにカーソルを合わせると表示される拡張可能なテキストを使用できます。


PrettyLittleThingは、悪いギフトカードのチェックアウトUXの例です。 ユーザーがカードをバスケットに追加した後、受取人の情報やバウチャーの値など、カードの詳細を更新する簡単な方法はありません。 唯一の方法は、カートからカードを取り出して、プロセス全体をやり直すことです。

PrettyLittleThingの悪いチェックアウト体験

Wincを使用すると、ユーザーはバスケットビューにいる間にカードの値を更新できます。

Wincでカードの値を変更する

複数のチャネルを介して受信者にカードを送信する

受信者とカードを共有するための複数のオプションがあります。 それらのいくつかを次に示します。

  • 電子メールメッセージで送信します。
  • 受信者と物理的に共有できる印刷可能なPDFとして購入者に送信します。
  • 購入者または受信者に郵送で物理的なカードを配達します。
  • ソーシャルメディア(Messenger、Whatsappなど)を介して送信します。

UIデザインに関しては、電子メールメッセージで受信者に送信されるデジタルカードに焦点を当てます。 受信者があなたのブランドについて初めて聞く場合は、電子メールにいくつかの信頼信号を実装できます。 スパムに陥らないようにするためのヒントを次に示します。

  • 明確な送信者IDは重要な信頼マーカーです。信頼を高めるために、ギフトカードを添付してメールの件名に送信者の名前を含めることを検討してください。 たとえば、「ケイティがあなたにプレゼントを送った!」という件名を使用します。
  • パーソナライズを活用する–受信者の名前がある場合は、UXを改善し、メッセージの信頼性を高めるために、それを電子メールに追加する必要があります。
  • 件名にギフトカードの価値を誇張しないでください。件名に「バウチャー」、「コード」、「取引」、数値カードの値などのフレーズを使用しないようにしてください。 受信者の電子メールプロバイダーは、メッセージをスパムとして扱うか、メールボックスの[プロモーション]タブに配置する場合があります。

効果的なメールデザインを考え出す

電子メールの内容に関しては、いくつかの点をカバーする必要があります。

  • カードの価値を含めてください。
  • 特定のT&Cへのリンク、またはカードの引き換えの制限に関する追加情報(ある場合)を含めます。
  • できればワンクリックでクリップボードに簡単にコピーできるギフトカードコード。
  • 受信者をストアに誘導するCTA。

ユーザーはデスクトップデバイスとモバイルデバイスの両方でメールを読むことができることを忘れないでください。 ギフトカードをモバイルフレンドリーにするために、CTAにディープリンクを含めて、ユーザーがデジタルウォレットにギフトコードを追加した状態でeコマースアプリに直接アクセスできるようにすることができます。 電子メール形式のみを決定する場合は、POSのスキャンデバイスが確実に引き換えられるように、簡単にズームできるバーコードまたはコントラスト率の高いQRコードを含めるようにしてください。

例:

慈善医療機関であるWatsiは、適切なギフトカードの電子メールデザインに関して、すべてのチェックボックスをマークしています。

Watsiギフトカードのメール

Amazonは、ギフトカードをアカウントに保持できるストアクレジットとして扱います。 メールメッセージには、受信者のアカウントにクレジットを自動的に適用するAmazon Webサイトまたはアプリ(デバイスによって異なります)にユーザーを直接誘導するディープリンクが含まれていました。

ギフトカード付きのAmazonメール

ギフトカードの利用

キム・サラザールが示唆しているように、クーポンとギフト券の有用性は、オンラインストアでの使いやすさに正比例します。

最小注文額など、ギフト券の利用に制限を課すことは避けてください。 もう1つの一般的な優れたUXプラクティスは、ギフトカードの受取人が配達や製品のコスト情報に敏感になることを覚えておくことです。 このような顧客は、通常よりも注意を払ってカートのコンテンツを構成します。 これは、カードの名目価格と注文金額の差が失われる恐れがあるためです。 そのため、ユーザージャーニー全体を確認し、可能な限り最高のユーザーエクスペリエンスを提供するための修正を導入する必要があります。

{{お客様}}

{{ENDCUSTOMER}}

部分的な償還を許可する

ギフトカードは、プロモーションバウチャーではなく、支払い方法として扱うことができます。 このオプションは、スターバックスの場合のように、充電可能なギフトカードを使用する場合に最適です。 次に、カードの残高が動的に計算され、クレジットが支払い方法として使用されます。 クレジットカードやデビットカードに似ています。 このソリューションを選択する場合は、ギフトカードに有効期限がないこと(または非常に長いもの)を確認する必要があります。 これにより、ギフトカードは非常に魅力的になりますが、同時に、カードを永久に利用できるようにするための高品質のインフラストラクチャが必要になります。

例:

Zalandoギフトカードを使った買い物は簡単ですが、始めるのはユーザーにとって難しい場合があります。 ギフトカードを意図したとおりに使用するには、受取人がアカウントを設定して「[バウチャー]タブ」を見つけ、指定されたテキストフィールドにギフトカードコードを入力して利用する必要があります。 引き換え後、カードにロードされた現金はZalandoクレジットとして扱われ、購入方法として使用できます。

Zalandoカードの引き換え

このアプローチの問題は、ユーザーがカードを利用して残高を確認するためにアカウントを設定する必要があることを知らない可能性があることです。 ギフトカードコードをバウチャーフィールドに入力することで、チェックアウト時にカードを利用することもできます。 次に、バウチャーの金額が買い物かごの合計金額に適用されます。 カードの受取人には、両方の可能性を明確にすることをお勧めします。

ギフトカードの入力フィールドをデザインする

ギフトカードの受取人は、できるだけ早くギフトを使用したいと考えています。 このニーズに応えるには、購入プロセスの早い段階で、できればチェックアウト前にカートにバウチャー入力フィールドを入力する必要があります。 このアプローチにより、顧客は個人情報を入力する前に、カードが有効かどうかを早い段階で確認できます。

さらに優れたアプローチは、注文の確定と支払いよりもはるかに早い段階で、購入プロセスの可能な限り早い段階でギフト券を利用できるようにすることです。

例:

WincはわかりやすいUIデザインを提供し、ユーザーが旅行の最初の段階でギフト券を利用できるようにすることで、利用フィールドが見つからないことに関連するストレスや不便を効果的に制限します。

Wincギフト券の利用

サブスクリプション美容製品ブランドのBirchboxを使用すると、ユーザーはギフト券をすぐに利用することもできます。 スピーディーなカード引き換えに関する情報は、ページフッターに配置されています。

バーチボックスカードの償還

さらに、バウチャー入力の配置は、チェックアウトプロセスの中核部分であり、Webサイトまたはアプリの構造に適切に表示される必要があります。 バウチャーコード全体を含めるのに十分な長さにするようにしてください。

ギフトコードに関連するもう1つの優れた方法は、支払いフィールドとバウチャーフィールドを明確に区別することです。これらのフィールドの近接性と類似性は、潜在的な購入者にとってフラストレーションの原因となる可能性があるためです。

ガイドラインは、クーポンUIのベストプラクティスと一致します。 バウチャーの入力フィールドを設計する方法を学びたい場合は、それを読んでください。

例:

Birchboxは、バウチャー入力ボックスの優れた例です。 ボックスの名前「プロモーションとギフトコード」は、ボックスの目的を明確に示しています。 多くのeコマースサイトでは、このセクションの名前として「プロモ​​ーションコード」を使用しています。これは、カードがプロモーションとは見なされないため、ギフトカードの所有者を混乱させる可能性があります。 また、ショッピングカートビューでクーポンコードボックスを見逃した人のために、チェックアウトビューでクーポンコードボックスを開くためのリンクも提供しています。 これは、両方のステップでクーポンコードを追加するオプションを維持するための優れた方法です。

バーチボックス償還ボックス

成功とエラーメッセージを作成する

成功メッセージと変更された注文の合計を表示して、ギフト券コードが正常に適用されたことを確認します。 メッセージをバウチャーフィールドの近くに配置して、ユーザーがメッセージを確認し、入力したコードに関連付けられるようにします。 そのメッセージをページの上部またはページの下部に表示すると、混乱する可能性があります。 ただし、成功メッセージだけがユーザーに確認されるものではありません。 変更された注文の合計をショッピングカートとチェックアウトビューの両方に反映します。

同じ論理で、ギフトカードの問題の種類を示す関連エラーメッセージも表示する必要があります。 何が間違っているのか、どのように問題を修正できるのかをユーザーに指示しないため、すべての場合に同じエラーメッセージを表示しないでください。 ここではいくつかの例を示します。

  • 「ギフトカードのコードが間違っています。もう一度お試しください。」
  • 「ギフトカードコードの有効期限が切れています。」
  • 「あなたはギフトカードの所有者ではありません(個々の顧客にギフト券を割り当てる場合)。」
  • 「ご注文がギフトカードの条件を満たしていません(カードの利用に制限を割り当てた場合)。」

例:

入力したコードが無効な場合、またはプロモーション条件が満たされていない場合、SummerSaltはエラーメッセージを表示します。 彼らは顧客に彼らのコードを再確認することを勧めます。

Summersaltエラーメッセージ

ギフトカードの有効期限の通知をデザインする

カードに有効期限がある場合は、もう少し前もって計画を立て、有効期限が切れる前にカードの残高を使用するようユーザーに促す自動通知を設定する必要があります。 ここでは、メールマーケティングに関連する、UXのベストプラクティスに従う必要があります。つまり、視覚的に目を引くようにし、コピーを巧妙に保ち、見栄えのするCTAを追加し、スパム(「割引」)としてマークされる可能性のある単語の使用を控える必要があります。 、「取引」、「販売」)。

概要

このベストプラクティスのリストが、ギフトカード用のウェブサイトやモバイルのデザインを開始したり、現在のUIデザインを改善したりするのに役立つことを願っています。 ギフトカードキャンペーンの作成に関する一般的なアドバイスをお探しの場合は、このガイドをご覧ください。

{{CTA}}

ギフトカードを次のレベルに引き上げる準備はできましたか?

始めましょう

{{ENDCTA}}