クーポン、割引、プロモーションのベストプラクティスUIとUX

「買い物客は、サイト全体の販売、厳選された販売アイテム、クーポンのいずれの形式であっても、取引が大好きです。 ただし、ユーザーがプロモーションをうまく利用するには、ウェブサイトが2つのことをうまく行う必要があります。それは、サイト全体でこれらのさまざまなプロモーションを効果的に伝達することと、ユーザーが取引を簡単に伝達できるようにすることです。」 ニールセンノーマングループのシニアユーザーエクスペリエンススペシャリスト、キムサラザール

この投稿では、Webサイトまたはモバイルプラットフォームでクーポンコードと自動適用されたプロモーションを宣伝するためのユーザーインターフェイスとエクスペリエンスを設計するためのベストプラクティスとインスピレーションを収集します。 ウェブサイトでのプロモーションメッセージや値下げから、クーポンやプロモーションの検証、チェックアウト時の申し込み、そして最後に償還まで、カスタマージャーニー全体をカバーします。 この投稿は、お客様のUIとUX、収益DTC eコマースプラットフォームのUIの観点から最高のパフォーマンス、およびさまざまなUX調査に基づいて作成されました。

注：すべてのデスクトップスクリーンショットはMac、Chromeで作成され、すべてのモバイルスクリーンショットはChromeのiPhoneX解像度を使用して作成されました。

このガイドが、クーポンやカートレベルのプロモーションを含めるようにプラットフォームを再設計したり、既存の顧客のクーポン体験を改善したりするのに役立つことを願っています。 プロモーションエンジンであるVoucherifyについてご不明な点がある場合や、詳しく知りたい場合は、お気軽にお問い合わせください。

クーポンとプロモーションのUIキット

Figmaで利用可能なクーポンとプロモーションのUIキットから、すぐに使えるクーポンとプロモーションのコンポーネントを使用して、市場投入までの時間を短縮します。 もっと詳しく知る。

目次：

プロモーションUIとUXに関する一般的なアドバイス：

• プロモーションの時間枠を明確に述べてください。
• 公開されているクーポンを自動的に適用します。
• 販売編集ページを提供します。
• 販売カテゴリでフィルタリングを有効にします。
• 顧客のコックピットを提供します。
• 割引商品を[販売]セクションと適切なカテゴリに一覧表示します。
• サイト全体のプロモーションをグローバルに伝達します。
• プロモーションの制限について事前に明確にしてください。

特定のページでのクーポンUXのベストプラクティス：

1. ‍ホームページ：

• ホームページで宣伝されているプロモーションの種類。
• 販売ページへのリンク。

2. ‍カテゴリページ。
3. ‍ポップアップ。
4. ‍ページ上部のリボン。
5. ‍フッター。
6. ‍製品ページ：

• 古い値札はそのままにしておきます。
• バンドルプロモーションのルールを明確に述べてください。

7. ‍ショッピングカート：

• ショッピングカートとチェックアウトページの両方のコア部分としてクーポンコードフィールドを含めます。
• 最小費用のプロモーションについては、ユーザーの計算を行い、ユーザーが支出目標を達成できるようにします。
• ショッピングカートで利用できる特別オファーについてユーザーに通知します。
• 特別な条件や制限について言及します。

8.チェックアウトページ：

• クーポンコードフィールドを含めます。
• コードが正常に適用された場合は、成功メッセージを表示します。
• クーポンコードが無効な場合はエラーメッセージを表示します。
• 顧客が複数の割引クーポンを追加できるかどうかを明確にします。
• ユーザーが割引を見つけられるようにします。
• 受け取った割引を反映します。
  

クーポンコードの基本UIとUX

ここでは、ほとんどの割引クーポンとプロモーションのデザイン、配置、およびプロモーションに適用されるいくつかの一般的なヒントについて説明します。 後で、顧客体験の観点から最良の設計ソリューションを強調しながら、Webサイト上の特定のクーポンとカートのプロモーションの配置に移ります。 クーポンキャンペーンを開始するだけでは決して十分ではないことを忘れないでください。キャンペーンを大成功させるには、クーポンのデザイン、配置、検証、および償還プロセスにも注意を払う必要があります。

プロモーションの時間枠を明確に述べる

チェックアウト時にオファーが無効になったことを知った不満のある顧客を避けるために、クーポンまたはカートレベルのプロモーションの期間について顧客に通知する必要があります。 また、切迫感を生み出し、買い物客に注文を完了するように少し促します。 そうしないと、ユーザーエクスペリエンスが低下し、顧客がサイトから脱落することになります。

プロモーションの時間枠（日付または時間）を指定するか、カウントダウンタイマーを追加することで、これを行うことができます。 ベストプラクティスは、利用規約だけでなく、すべてのバナーと広告にプロモーションの時間枠を常に追加して、顧客がプロモーションの有効期限を確実に把握できるようにすることです。

UIの例：

Pomelo Fashionは、カウントダウンタイマーを使用して、オファーの有効期限が切れたときに明確に表示します。

Sheinは、プロモーションバナーまたはカテゴリの横にある顧客に、オファーの期間についてカウントダウンで通知します。 また、切迫感を出すために、残っているピースの数も表示されます。

また、プロモーションエクスペリエンスをさらに強化するために、製品ページでオファー期間について顧客に通知します。

そして、彼らはショッピングカートにもタイマーを含めました。

モバイルアプリでの表示は次のようになります。

Pretty Little Thingのメインページのバナーにはプロモーションカウントダウンがあり、モバイル解像度でも利用できます。

公開されているクーポンを自動的に適用して、可能な限り最高のエクスペリエンスを提供します

サイトで割引またはクーポンコードが提供されている場合、ユーザーが割引コードをクリックしてカートに自動的に適用できるようにするか、少なくともクリックすると自動的にコピーできるようにすることで、償還プロセスを簡素化できます。コードを覚えておく必要はありません。 これにより、ユーザーがカートに簡単に適用できるようになり、プロモーションの使用量が増加します。 顧客が受け取ったリンクをクリックすると、さまざまなチャネル（Eメール、SMSなど）を介して送信された固有の割引コードを自動的に適用することもできます。 この投稿に従って、クーポン検証UXを修正する方法を学びます。

オファーが公開されている場合は、公開クーポンコードではなく、カートレベルの自動適用割引であるかどうかを常に慎重に検討してください。 これにより、顧客のチェックアウトプロセスが簡素化され、プロモーションのコンバージョン率が向上する可能性があります。

もう1つの優れたUXプラクティスは、クーポンコードをコピーできるようにすることです（画像に埋め込まれるのではなく、テキストとしてWebサイトまたはモバイルアプリに配置します）。

UIの例：

Vanity Planetは、カート内の対象となる注文にパブリッククーポンコードを自動的に適用します。 チェックアウトに行った後、割引コードを反映するために注文合計が再計算されます。

注文に適格な場合は、無料の製品を注文に追加し、割引コードを自動的に適用します。

ここでは、モバイル解像度で同じフローを確認できます。

「注文概要を表示」ボタンをクリックすると、注文に適用されたプロモーションやクーポンコードに関する情報を含むカートの内容が表示されます。

販売編集ページを提供する

公開されているすべてのカートレベルのプロモーションと割引クーポンを1ページに集めることは、顧客がそれらを見つけやすくするための優れた方法です。 このようにして、すべてのプロモーションを表示するために顧客のコックピットのみを使用するのではなく、新規またはログインしていない顧客にもプロモーションを表示できます。 多くの場合、企業はすべての販促バナーをホームページに表示するだけで、さまざまなページ要素がわかりにくくなり、カスタマーエクスペリエンスが損なわれる可能性があります。

UIの例：

Victoria's Secretは、利用可能なすべてのオファーを1つのサイトの明確なUIで表示します。 サイトの情報アーキテクチャがサイズを使用して、選択したオファーを強調または非強調する方法に注意してください。

UXを向上させるために、販売カテゴリでフィルタリングを有効にする

特定のカートプロモーションまたは割引コードが適用されるすべてのアイテムを収集する販売カテゴリを提供する場合は、ユーザーがそのカテゴリをナビゲートおよびフィルタリングできるようにする必要があります。 一部の訪問者は、販売中の製品だけを見たいと思うでしょう。したがって、販売カテゴリを分けることで、すべてのオファーを表示し、このセクションを簡単にナビゲートできるようにする必要があります。 フィルタリングされたナビゲーションオプションにより、買い物客は販売セクション内で並べ替えとフィルタリングを行って、選択を効果的に絞り込むことができます。 フィルタがないと、販売ショッピングは大変な作業になり、顧客がサイトからドロップする可能性があります。

UIの例：

Pomelo Fashionは、製品の種類とサイズごとに販売カテゴリフィルターを提供しています。

Fashion Novaは、価格ポイントまたはコンパートメントによる販売カテゴリのフィルタリングを提供しています。

顧客のコックピットを提供する

特定の顧客がアクセスできるすべてのカートプロモーションと割引コードを専用の顧客コックピットに表示すると、顧客はどのプロモーションが自分に特別に利用できるかを理解するのに役立ちます。 また、パーソナライズされたものではなく、一般に公開されているプロモーションのみを表示する販売ページとは対照的に、個人的な独自の割引クーポン、ギフトカード、ポイント残高、またはその他の報酬を表示することもできます。

UIの例：

H＆Mは、顧客のコックピットを提供しています。ここでは、顧客はロイヤルティポイントの残高、利用可能なプロモーションと割引、独自のバウチャー、および紹介プログラムを見つけることができます。

モバイル解像度に関する顧客のコックピット：

割引商品を[販売]セクションと適切なカテゴリに一覧表示します

販売アイテムの表示をサイトの専用の販売セクションに限定しないでください。 最高の発見可能性のために、適切なカテゴリページと販売セクションの両方に割引アイテムをリストするのが最善です。 一部のユーザーは、掘り出し物を見つけようと動機付けられたときに販売セクションに直接移動しますが、他のユーザーは特に販売セクションを探しません。 特定のアイテムを探しているユーザーは、通常、カテゴリに基づいて閲覧します。 セール商品と定価商品を一緒に表示するサイトは、ユーザーが関心のある地域内の割引を見つけるのに役立ちます。

UIの例：

Pretty Little Thingは、セールアイテムと商品カテゴリの両方にあるセールアイテムを一覧表示します。

悪い報道を避けるために、サイト全体のプロモーションをグローバルに伝達する

サイトが送料無料またはその他のサイト全体の割引やクーポンを提供している場合は、サイトの各ページにこれらのオファーを表示します。 一貫した割引リマインダーは、ユーザーが予算内のアイテムを見つけるのに役立つだけでなく、購入を促すのにも役立ちます。 繰り返しになりますが、彼らはあなたのブランドをバイヤーに特典を提供するものとして描写しています。 選択したエリアでサイト全体のプロモーションのみを表示することにより、すべてのユーザーがそれらを発見するわけではないというリスクがあります。 さらに、クーポンがすべてのページで宣伝されていない場合、人々は、最終的にブランドに悪影響を与える使用を防ぐために、クーポンが意図的に隠されていると見なす可能性があります。

可能な割引の配置は次のとおりです。

• ホームページのヒーロースペースでのプロモーション発表。
• カートプロモーションの詳細またはクーポンコードが記載されたすべてのページの上部にあるバナー–ショッピングカートページまたはクーポンコードを入力する必要があるチェックアウトページを含みます。
• 製品リストページ内または右側のレールにあるプロモーションコールアウト。
• ページの下部、フッターの中または近くにあるバナー。

UIの例：

‍PomeloFashionは、ホームページバナー、トップページリボン、およびカテゴリページでサイト全体のクーポンを伝達します。

PrettyLittleThingは、製品ページでもサイト全体の割引クーポンを顧客に思い出させます。これは、UXの観点からは大きな動きです。

これは、モバイルレイアウトでの表示方法です。

Pretty Little Thingは、メインページのバナーとトップページのリボンでカートレベルのプロモーションを宣伝しています。

彼らはすべての割引されたアイテムを表示する販売ページを提供します：

また、製品ページに割引が表示されます。

事前のプロモーションの制限について明確にする

カートのプロモーションや割引クーポンは、修飾子や制限の対象となる場合があります。 その場合は、オファーに適用される制限が明確に示されていることを確認してください。 必要に応じて、これらの条件に関するより詳細な情報にリンクしますが、基本的な制限を理解するためにユーザーが細字部分を掘り下げる必要はありません。 取引を受け取ることを期待することほどイライラすることはありませんが、チェックアウト時に資格がないことを確認するだけです。 クーポンのデザインは人目を引くだけでなく、さらに重要なことに機能的である必要があることに注意してください。

UIの例：

Pretty Little Thingは、メインページのバナーに、プロモーションではセール品と美容品を除外していると述べています。

Chewyは、リボンに宣伝されているプロモーションの詳細（[詳細]ボタン）への詳細情報へのリンクを提供します。これは、「最初のAutoshipで35％節約」です。

これは、プロモーションCTAをクリックした後に表示されるポップアップです。

モバイル解像度では、リボンにはボタンは含まれていませんが、クリック可能です。 プロモーションの利用規約が表示された同じポップアップをクリックすると、次のように表示されます。

特定のページでのクーポンUXのベストプラクティス：

ホームページ：

ホームページで宣伝されているプロモーションの種類：

顧客がオファーの数に圧倒される可能性があるため（そしていわゆるバナーブラインドになる可能性があるため）、ホームページですべてのプロモーションを宣伝するべきではありません。 公開されているカートのプロモーションまたはクーポンのみを宣伝する必要があります。 UXのベストプラクティスは、カテゴリまたは製品ページに製品またはカテゴリ固有の割引を残すことです。

UIの例：

Happy Socksは、その時点で最大の公的割引であった夏のセールの自動適用された30％オフのトップページのリボンとホームページのメインバナーに表示されました。

販売ページへのリンク

サイト全体で自動適用またはクーポンプロモーションが進行中の場合は、対象となるすべての製品と条件をホームページにリストする代わりに、顧客がのすべての条件を読むことができる販売ページにつながるティーザーを提供することができます。プロモーションを行い、対象となる製品やオファーを閲覧します。

UIの例：

Chubbies Shortsは、メインページにプロモーションバナーを表示し、販売コレクションページにリンクしています。

カテゴリページ：

ポップアップ

ポップアップを使用して、ストアで利用可能なクーポン割引やカートレベルのプロモーションを宣伝できますが、UXにはさまざまな欠点があります。 それらがプロモーションを宣伝する唯一の方法である場合、ユーザーはそれらを閉じて、正確な割引条件または必要なバウチャーコードを忘れることができます。 したがって、ポップアップは、バナー、電子メール、SMSなどの他の通信手段で使用する必要があります。 ポップアップのもう1つの問題は、煩わしいことです。 それらは、ユーザーが実際に閲覧したいと思ったコンテンツをカバーしており、迷惑と見なされる可能性があります。

一方、ポップアップは、顧客が実行したばかりのアクションに対して割引を割り当てるときに、電子メールの優れた代替または追加です。 たとえば、顧客がニュースレターを購読している場合、獲得した割引をポップアップで表示できます。 このようにして、顧客は受信トレイをチェックする必要がある場合よりも簡単かつ早期にそれを取得できます。 繰り返しになりますが、ポップアップと電子メールが共存して、顧客が後で戻ってきたい場合に割引を利用できるようにすることができます。

モバイルアプリのポップアップに代わる良い方法は、プッシュ通知です。

UIの例：

Tulaはポップアップを使用してカートレベルのプロモーションを伝達しますが、ユーザーが15％オフの固定バナーをクリックした場合にもポップアップにアクセスできます。 これにより、後でプロモーションに戻ることができます。

ページ上部のリボン：

ホームページの配置と同様に、リボンは公開またはサイト全体のカートまたは割引クーポンのプロモーション用に予約する必要があります。 公開クーポンコードを追加し、チェックアウトを含むすべてのページに表示して、ユーザーがショッピングカートをチェックしたり、チェックアウトを完了したりするときにコードに簡単にアクセスできるようにするのに最適な場所です。

UIの例：

Chubbies Shortsはリボンを使用して、公開されている大きなカートプロモーションを宣伝します。

フッター：

フッターは、Webサイトで最も読まれていない場所の1つです。 割引クーポンやカートレベルのオファーを配置することは、ほとんどの顧客が割引を見逃す可能性があるため、最善のアイデアではありません。 一方、フッターはプロモーションの利用規約を追加するのに最適な場所です。 T＆Cが非常に短いため、プロモーションのT＆Cに別のページが必要ない場合は、フッターに配置できます。

UIの例：

ThredUpはフッターを使用して、カートプロモーションの利用規約を表示します。

製品ページ：

古い値札をつけたままにする

あなたがそれを大幅に下げる前に、あなたの顧客が価格が何であったかを知っていることを確認してください。 人々は、製品をどれだけ評価するかではなく、取引をどれだけ評価するかに基づいて購入を決定します。 可能な場合はいつでも、比較して取引が見栄えがする参照価格を顧客に提供してください。

UIの例：

Sheinは古い価格を取り消し、新しい価格を設定し、割引のレベルをパーセンテージで示すタグを追加します。

モバイルでは、割引の割合と割引の金額が表示されます。

バンドルプロモーションルールを明確に記載する

バンドル割引の場合は、オファリングを簡単に確認できるようにし、製品ページで手順を実行して、ユーザーが選択した場合に資格を得るようにします。 サイトが同じ製品の複数のアイテムの購入に対して割引を提供している場合、ユーザーはそのオファーを簡単に見つけて最小要件に達することができるはずです。

UIの例：

Chubbies Shortsは、カテゴリページの商品の値札のすぐ横に「2つ購入して割引を受ける」セールを表示します。

また、ショッピングカートに割引が表示されます。

割引をクリックすると、割引が選択されて注文に追加され、価格が10ドル下がります。

ショッピングカート：

ショッピングカートとチェックアウトページの両方のコア部分としてクーポンコードフィールドを含める

クーポンコードをお持ちの方は、お早めにご入力ください。 チェックアウトプロセスの最初のステップの前に、ショッピングカート内のクーポンコードの明確な場所を提供する必要があります。 このUIアプローチにより、個人情報を入力する前に有効かどうかを確認でき、プロセスの早い段階で合計を適切に更新することもできます。

クーポンコードの配置に関しては、サイドバーアイテムではなく、プロモーションコードをチェックアウトプロセスのコア部分にすることを強くお勧めします。 プロモーションが右側のレールに配置されると、広告と混同され、バナーが見えなくなるために無視される傾向があります。

一方、顧客がクーポンコードを持っておらず、クーポンフィールドが表示されている場合、割引を探し始めるため、取引の可能性を逃していると感じて解約する可能性があります。 すべてのクーポンが公開されていない場合、最善の解決策は、表示されるオープンテキストフィールドを提供しないことです。 むしろ、テキストフィールドを公開するためのテキストリンクを提供する必要があります。 このデザインは、多くの買い物客が気付かないため、ユーザーをプライムしてクーポンクエストに送る可能性が低くなります。 もちろん、トレードオフは、クーポンコードを持っている人にとっては見つけにくいということです。

クーポンコードボックスは、自動的に展開されるかリンクの下に隠されるかにかかわらず、テキストフィールドである必要があります。 クーポンコードの文字数または特定のパターンが固定されている場合は、自動検証を追加して、追加する文字が足りない、多すぎる、または間違っている（数字、アルファベット、特殊記号）場合にユーザーに促すこともできます。彼らはより早くエラーを見つけます。 このフィールドは、ユーザーがクーポンコードを正しく入力できるように、サイトで使用されるクーポンコードを収容するのに十分な長さである必要があります。 クーポンコードの最適な長さは8〜12文字です。 クーポンコードの提案を提供する場合は、ドロップダウンリストに表示することもできます。

提供されたクーポンの周りのコピーをどのように表現するかということになると、心の会計のマーケティング心理学は、製品が必需品のカテゴリに分類される傾向がある場合は、クーポンを「獲得した」ことを顧客に伝える必要があることを示唆しています（ポップアップを想像してください） 「こんにちは！あなたはちょうど10ドルの割引クーポンを獲得しました！」というメッセージ）。なぜなら、獲得するという行為はそれをより深刻な収入源のように思わせるからです。 対照的に、あなたの製品がもっと軽薄であるならば、あなたはあなたのクーポンを驚きとして、または運のためにそれらに与えられたとしてキャストすることを試みるべきです（「あなたはちょうど10ドルの割引クーポンを獲得した！」というメッセージを想像してください）。 心の会計について詳しくは、ブログ投稿をご覧ください。

クーポンコード自体は、覚えやすく、クーポンボックスに書き込む必要があります（ドロップダウンまたはラジオボタンとして選択できる場合を除く）。 これは、組み合わせを顧客にとって意味のあるものにし、Oや0のような類似した文字や数字を避け、長さを12文字未満に保つことを意味します。 認知の流暢さについて詳しくは、ブログ投稿をご覧ください。

UIの例：

Birchboxには、カートビューに非常に目立つクーポンコードボックスがあります。 また、ショッピングカートビューでクーポンコードボックスを見逃した人のために、チェックアウトビューでクーポンコードボックスを開くためのリンクも提供しています。 これは、両方のステップでクーポンコードを追加するオプションを維持するための優れた方法であり、解約を減らすのに役立つチェックアウトフォームのクーポンコードボックスを非表示にします。

モバイル解像度では、クーポンボックスは非表示になっており、クリックして展開する必要があります。

繰り返しになりますが、チェックアウトページにプロモーションコードボックスへのリンクがあります。

最小費用のプロモーションについては、ユーザーのために計算を行い、ユーザーが支出目標を達成できるように支援します

一部のサイトでは、特定の金額を超える購入に対して送料無料などのプロモーションを提供しています。 これらの取引は、ユーザーが資格を得るために余分な時間とお金を費やすように誘惑します。

最低費用のプロモーションの場合、サイトはユーザーにオファーの資格を得るためにどれだけの費用が必要かを正確に伝える必要があります。 そのための優れたUIのアイデアは、送料無料、％割引、またはドル割引のいずれであっても、割引の対象となるためにユーザーがさらに費やす必要がある金額をショッピングカートで直接カウントダウンすることです。

顧客が送料無料に到達するためにより多くを費やすように動機付けられているが、「十分な」レベルの支出に到達するように買い物を制限せず、価格の上限を設定し、送料無料に到達するために必要な値に固定したい場合は、 UIを使用して、無料配送に向けた進捗状況を、支出の開始時に速く、注文量の「目標」に到達するまでに遅く表示します。 これは、調査に基づく「目標速度」の考え方によるものです。 あなたはこのブログ投稿でそれについてもっと読むことができます。

ショッピングカート内の関連アイテムを提案することで、サイトはさらに進んで、買い物客が最小支出目標を達成し、自分で計算する手間を省くことができます。

UIの例：

Tulaは、UIを使用して、送料無料の対象となるために不足している金額をショッピングカートに表示します。

ショッピングカートで利用できる特別オファーについてユーザーに通知する

ユーザーの注意を引き、利用可能なカートレベルおよびクーポンプロモーションを見つけるのに役立つ最後のチャンスは、カートページにあります。 そこでは、注文を簡単に変更できるため、送料無料や割引など、ユーザーが利用できる特別オファーを必ず含めてください。

ユーザーの注意を引くには、オファーがはっきりと見える必要があります。 ユーザーの目を引くには、適切な配置と視覚的な重みを使用します。

UXのベストプラクティスのいくつかを次に示します。

• 製品レベルのオファーの場合は、製品自体の近くにメッセージを表示します。
• サイト全体のオファーの場合、チェックアウトに進むためのオプションのすぐ上の優先スペースにオファーを提示します。
• 割引が送料に適用される場合は、サイト全体の割引または送料の合計の横に配置するのが適切な場合があります。
  

特にチェックアウト時に、顧客にあまりにも多くのクーポンやカートレベルのプロモーションを提供しないでください。 選択の過負荷はチャーンにつながる可能性があります。 多様性と選択肢の過負荷の価値について詳しくは、ブログ投稿をご覧ください。

UIの例：

Chubbies Shortsは、利用可能なすべての割引と特典をショッピングカートに直接表示します。

特別な条件や制限について言及する

カートのプロモーションまたはクーポンに特別な条件または制限がある場合は、顧客が購入を完了する前に、販売ページ、利用規約、およびショッピングカートにその旨を記載してください。

UIの例：

Sheinは、ショッピングカートでのプロモーションの特別な条件、たとえば、顧客が購入できるプロモーション製品の最大数や、セール品を返品できないことについて言及しています。

チェックアウトページ：

クーポンコードフィールドを含める

前に述べたように、誰かがショッピングカートの表示ページにクーポンコードを適用するのを忘れた場合は、ショッピングカートページとチェックアウトページの両方にクーポンコードフィールドを含めることをお勧めします。

コードが正常に適用された場合に成功メッセージを表示する

成功メッセージと割引額を表示して、クーポンコードが正常に適用されたことを確認します。 メッセージをクーポンコードフィールドの近くに配置して、ユーザーがメッセージを確認し、入力したクーポンコードに関連付けられるようにします。 そのメッセージをページの上部またはページの下部に表示すると、混乱する可能性があります。 クーポンが正常に適用されたという情報源は、成功メッセージだけではないことを確認してください。 追加された割引を注文合計、ショッピングカート、およびチェックアウトページに表示します。できれば、どのクーポンコードがどの割引を適用したかを指定します（特に、顧客が注文に複数の割引コードを追加できる場合）。

UIの例：

Pretty Little Thingには、有効なコードを入力した後に注文に適用されたチェックマークと節約額が表示されます。 また、注文合計で計算された割引額を表示し、割引を適用した割引コードを指定します。

また、適用されたクーポンコードと関連する割引がモバイルビューに表示されます。

{{CTA}}

UIキットに含まれている準備が整ったコンポーネントを使用してフロントエンドを構築します

構築を開始します

{{ENDCTA}}

無効なクーポンコードのエラーメッセージを表示する

コードが無効であるか、プロモーション条件が満たされていない場合は、クーポンコードの問題の種類を示す関連エラーメッセージを表示する必要があります。 何が間違っているのか、どのように問題を修正できるのかをユーザーに指示しないため、すべての場合に同じエラーメッセージを表示しないでください。

ユーザーがエラーメッセージに気付かない可能性があるため、ページの上部または下部ではなく、クーポンコードボックスのすぐ横にエラーメッセージを表示します。 たとえば、赤やその他の対照的な色を使用して、エラーメッセージが表示されていることを確認します。

表示するエラーメッセージの種類：

• クーポンコードが無効です。
• クーポンコードはすでに使用されており、これ以上利用することはできません。
• 注文金額がクーポンを適用するには不十分または過剰です（その場合、クーポンの資格を得るために不足している量、またはショッピングカートにある超過量に関する情報を返します）。
• 注文内容がプロモーション条件を満たしていません（その場合、資格を得るためにどのアイテムを削除または追加する必要があるかを記載してください）。
• クーポンの有効期限が切れました。
• その他の理由–他のケースを想像できる場合は、それらに特化したメッセージを作成してください。 考えられなかった他のすべてのケースに対して、デフォルトのメッセージを1つ用意します。

UIの例：

入力したコードが無効な場合、またはプロモーション条件が満たされていない場合、SummerSaltはエラーメッセージを表示します。 彼らは顧客に彼らのコードを再確認することを勧めます。 公開クーポンを上部のリボンに表示すると、間違いを修正するのに役立ちます。

これは、モバイル解像度での表示方法です。

顧客が複数の割引クーポンを追加できるか、プロモーションを組み合わせることができるかを明確にします

注文に追加できるクーポンを1つだけ許可する場合は、顧客が有効なクーポンコードを追加したら、クーポンコードを非表示にするか非表示にします。 顧客がクーポンコードを別のものに変更したい場合があるので、「クーポンコードを変更する」ボタンを追加して置き換えます。 クーポンコードも削除するオプションがあることを忘れないでください。 ページのどこかに、顧客が注文ごとに1つのクーポンコードしか追加できないことを明確に記載する必要があります。

顧客がさらにクーポンコードを追加できる場合は、1つのクーポンコードを追加したら、それを「注文に追加」として表示し、クーポンコードフィールドを再読み込みして再び空にして、顧客が別のクーポンコードを適用できるようにします。

割引コードとカートプロモーションを組み合わせることができない場合は、プロモーション広告、T＆C、およびチェックアウトページに、特に誰かがすでに販売されているアイテムにクーポンを追加しようとした場合のエラーメッセージとして明確に記載する必要があります。

UIの例：‍

Summer Saltは、クーポンコードフィールドの下に追加されたクーポンを追加し、クーポンが注文に適用されるとクーポンコードフィールドを空にします。これは、ユーザーが注文ごとに複数のクーポンを適用できることを示しています。

Pretty Little Thingを使用すると、顧客は注文ごとに1つのクーポンコードを適用できます。 クーポンが注文に適用された後、クーポンフィールドが非表示になり、「コードの変更」ボタンに置​​き換えられます。

ユーザーが顧客体験の向上のための割引を見つけるのを助ける

クーポンコードフィールドの横に、利用可能なすべての割引、または選択できるクーポンとカートプロモーションのリストを表示できる顧客コックピットへのリンクを表示する必要があります。 これにより、顧客は取引をはるかに簡単に使用できるようになり、ショッピングカートにアイテムを追加するだけで割引の対象となる可能性がある場合は、ショッピングカートのサイズが大きくなる可能性があります。

UIの例：

Sheinは、チェックアウト時にクーポンコードフィールドの横にある利用可能なクーポンを収集し、クーポンコードフィールドの下に公開されているクーポンについて言及している「マイクーポン」ページにリンクしています。

これは、「マイクーポン」リンクをクリックすると開かれる利用可能なクーポンと期限切れのクーポンを表示するカスタマーコックピットです。

モバイルアプリでは、クーポンを「クーポンアラート」として表示します。 そのポップアップをクリックすると、利用可能なすべてのクーポンが表示され、使用するクーポンを選択できます。

受け取った割引を反映する

カートレベルのプロモーションとクーポンの両方で、ショッピングカート内のアイテムに適用される割引または特別な制限を表示します。 クーポンコードは、支払い情報を要求する前に検証され、コストに反映される必要があります。 カートレベルの割引は、適用対象に応じて、製品レベルまたは注文レベルで表示する必要があります。 ユーザーが節約を確認し、合計がどのように計算されるかを理解できることが不可欠です。 最良の方法は、注文合計でどのクーポンコードとどのプロモーションがどの正確な節約額を提供したかを表示することです。

割引商品に関する特別な制限は、顧客が注文する前に通知する必要があります。

UIの例：

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}}