أفضل ممارسات القسائم والخصومات والعروض الترويجية UI & UX

"يحب المتسوقون الصفقات ، سواء كانت في شكل مبيعات على مستوى الموقع ، أو عناصر بيع محددة ، أو قسائم. ومع ذلك ، لكي ينجح المستخدمون في استخدام العروض الترويجية ، يجب أن يقوم موقع الويب بأمرين جيدًا: يجب أن ينقل هذه العروض الترويجية المتنوعة بشكل فعال في جميع أنحاء الموقع ، كما يجب أن يسهل على المستخدمين الحصول على الصفقات التي يتم توصيلها ". كيم سالازار ، كبير اختصاصي تجربة المستخدم مع مجموعة نيلسن نورمان

يجمع هذا المنشور أفضل الممارسات والإلهام لتصميم واجهة المستخدم وتجربة الترويج لأكواد القسائم والعروض الترويجية المطبقة تلقائيًا على موقعك على الويب أو النظام الأساسي للجوّال. سنغطي رحلة العميل بأكملها ، من الرسائل الترويجية وانخفاض الأسعار على الموقع الإلكتروني من خلال التحقق من صحة القسيمة والعروض الترويجية والتطبيق عند الخروج ، وأخيرًا الاسترداد. لقد كتبنا هذا المنشور استنادًا إلى واجهة المستخدم وتجربة المستخدم الخاصة بعملائنا ، والأفضل أداءً من حيث عائدات واجهة المستخدم لمنصات التجارة الإلكترونية DTC ، والعديد من دراسات تجربة المستخدم.

ملاحظة: تم عمل جميع لقطات شاشة سطح المكتب على Mac و Chrome وتم عمل جميع لقطات شاشة الهاتف المحمول باستخدام دقة iPhone X على Chrome.

نأمل أن يساعدك هذا الدليل في إعادة تصميم النظام الأساسي الخاص بك ليشمل الكوبونات والعروض الترويجية على مستوى سلة التسوق أو لتحسين تجربة قسيمة العملاء الحالية. إذا كانت لديك أي أسئلة أو ترغب في معرفة المزيد عن Voucherify ، محرك الترويج الخاص بنا ، فلا تتردد في الاتصال بنا.

مجموعة واجهة المستخدم للكوبونات والعروض الترويجية

حقق وقتًا أسرع للتسويق باستخدام قسيمة جاهزة ومكونات ترويجية من مجموعة واجهة مستخدم القسائم والعروض الترويجية المتوفرة على Figma. يتعلم أكثر.

جدول المحتويات:

نصائح عامة حول واجهة المستخدم الترويجية وتجربة المستخدم:

• اذكر بوضوح الإطار الزمني للترويج.
• تطبيق القسائم المتاحة للجمهور تلقائيًا.
• عرض صفحة تجميع المبيعات.
• تمكين التصفية في فئة المبيعات الخاصة بك.
• عرض قمرة القيادة للعملاء.
• قم بإدراج العناصر المخفضة في قسم المبيعات وكذلك في الفئات المناسبة.
• انشر العروض الترويجية على مستوى الموقع على مستوى العالم.
• كن واضحًا بشأن قيود العرض الترويجي مقدمًا.

أفضل ممارسات الكوبون UX على صفحة معينة:

1. ‍ الصفحة الرئيسية:

• أنواع الترقيات المعلن عنها على الصفحة الرئيسية.
• رابط لصفحات المبيعات.

2. ‍ صفحات الفئات.
3. ‍ النوافذ المنبثقة.
4. أعلى الصفحة الشريط.
5. ‍ تذييل.
6. ‍ صفحة المنتج:

• اترك بطاقة السعر القديمة قيد التشغيل.
• اذكر قواعد عروض الحزمة بوضوح.

7. ‍ عربة التسوق:

• قم بتضمين حقول رمز القسيمة كجزء أساسي من كل من صفحات عربة التسوق والدفع.
• بالنسبة للعروض الترويجية ذات الحد الأدنى من الإنفاق ، قم بإجراء العمليات الحسابية للمستخدمين وساعدهم في الوصول إلى هدف الإنفاق.
• ذكِّر المستخدمين بالعروض الخاصة المتاحة التي يمكنهم التأهل لها في عربة التسوق.
• اذكر أي شروط أو قيود خاصة.

8. صفحة الخروج:

• تضمين حقل رمز القسيمة.
• اعرض رسالة نجاح إذا تم تطبيق الكود بنجاح.
• عرض رسالة خطأ في حالة وجود رمز قسيمة غير صالح.
• وضح ما إذا كان بإمكان العميل إضافة أكثر من قسيمة خصم واحدة.
• مساعدة المستخدمين في العثور على خصوماتهم.
• تعكس الخصومات المتلقاة.
  

أساسيات رموز القسيمة UI & UX

سنغطي هنا بعض النصائح العامة التي تنطبق على معظم قسائم الخصم وتصميم العروض الترويجية والمواضع والترويج. لاحقًا ، سوف ننتقل إلى مواضع القسيمة المحددة وعروض سلة التسوق على موقع الويب مع إبراز أفضل حل للتصميم من وجهة نظر تجربة العميل. تذكر أنه لا يكفي إطلاق حملة قسيمة فقط ، بل تحتاج أيضًا إلى الاهتمام بتصميم القسيمة ، والتنسيب ، والتحقق من الصحة ، وعملية الاسترداد لجعل حملتك ناجحة.

اذكر بوضوح الإطار الزمني للترويج

يجب عليك إبلاغ العملاء بمدة القسيمة أو الترويج على مستوى عربة التسوق لتجنب العملاء غير الراضين الذين يعلمون عند الخروج أن العرض لم يعد صالحًا. كما أنه يساعد في خلق شعور بالإلحاح وحث المتسوقين قليلاً على إكمال طلباتهم. يؤدي عدم القيام بذلك إلى تجربة مستخدم معطلة وتراجع العملاء عن موقعك.

يمكنك القيام بذلك إما عن طريق ذكر الإطار الزمني (التواريخ أو الساعات) للترقية أو عن طريق إضافة مؤقت للعد التنازلي. تتمثل أفضل الممارسات دائمًا في إضافة الإطار الزمني للترويج على كل لافتة وإعلان ، ليس فقط في الشروط والأحكام ، لضمان معرفة العملاء بتاريخ انتهاء صلاحية العرض الترويجي.

أمثلة على واجهة المستخدم:

تستخدم Pomelo Fashion مؤقتًا للعد التنازلي لعرضها بوضوح عند انتهاء صلاحية عروضها.

يقوم موقع Shein بإبلاغ العملاء بجانب اللافتة الترويجية أو الفئة الترويجية بمدة العرض من خلال العد التنازلي. كما أنها توضح عدد القطع المتبقية ، لإحداث شعور بالإلحاح.

كما يقومون بإبلاغ العملاء بمدة العرض على صفحة المنتج لتعزيز التجربة الترويجية.

وقاموا بتضمين الموقت حتى في عربة التسوق.

هكذا تبدو الشاشة على تطبيق الهاتف المحمول الخاص بهم:

يحتوي تطبيق Pretty Little Thing على عد تنازلي للترويج على لافتة الصفحة الرئيسية ، وهو متاح أيضًا في دقة الأجهزة المحمولة:

تطبيق القسائم المتاحة للجمهور تلقائيًا لتقديم أفضل تجربة ممكنة

إذا تم تقديم خصم أو رمز قسيمة على الموقع ، فيمكنك تبسيط عملية الاسترداد من خلال السماح للمستخدمين بتطبيقه تلقائيًا على سلة التسوق الخاصة بهم عن طريق النقر فوق رمز الخصم أو ، على الأقل ، نسخه تلقائيًا عند النقر فوقه ، بحيث لا يتعين عليهم تذكر الرمز. سيؤدي هذا إلى زيادة استخدام الترويج من خلال تسهيل قيام المستخدمين بتطبيقه على سلات التسوق الخاصة بهم. يمكنك أيضًا تطبيق رموز الخصم الفريدة تلقائيًا التي يتم إرسالها عبر قنوات مختلفة (البريد الإلكتروني والرسائل القصيرة وغيرها) إذا نقر العميل على الرابط الذي تلقاه. تعرف على كيفية إصلاح UX للتحقق من صحة القسيمة باتباع هذا المنشور.

إذا كان العرض متاحًا للجمهور ، ففكر دائمًا جيدًا فيما إذا كان يمكن أن يكون مجرد خصم يتم تطبيقه تلقائيًا على مستوى سلة التسوق بدلاً من رمز قسيمة عامة. إنه يبسط عملية الدفع للعملاء ويمكن أن يؤدي إلى زيادة معدلات تحويل العرض الترويجي.

هناك ممارسة جيدة أخرى لتجربة المستخدم تتمثل في جعل رمز القسيمة ممكنًا للنسخ (ضعه على موقع الويب أو تطبيق الهاتف المحمول كنص ، وليس مضمنًا في صورة).

أمثلة على واجهة المستخدم:

تطبق Vanity Planet أكواد القسيمة العامة تلقائيًا على الطلبات المؤهلة في سلة التسوق. بعد الذهاب إلى الخروج ، يتم إعادة حساب إجمالي الطلب ليعكس رمز الخصم.

حتى أنهم يضيفون منتجًا مجانيًا إلى الطلب ، إذا كان الطلب مؤهلاً لذلك ، فقم بتطبيق رمز الخصم تلقائيًا مرة أخرى:

هنا يمكنك رؤية نفس التدفق على دقة الجوال:

إذا قمت بالنقر فوق الزر "إظهار ملخص الطلب" ، يتم عرض محتويات سلة التسوق بما في ذلك المعلومات الخاصة بالعروض الترويجية وأكواد القسيمة المطبقة على الطلب.

عرض صفحة تجميع المبيعات

يُعد جمع كل العروض الترويجية على مستوى سلة التسوق وكوبونات الخصم المتاحة للجمهور في صفحة واحدة طريقة رائعة لتسهيل عثور العملاء عليها. بهذه الطريقة يمكنك عرض العروض الترويجية أيضًا للعملاء الجدد أو العملاء الذين لم يسجلوا دخولهم ، بدلاً من استخدام مقصورات العملاء فقط لعرض جميع العروض الترويجية. غالبًا ما تعرض الشركات جميع اللافتات الترويجية ببساطة على الصفحة الرئيسية مما قد يحجب عناصر مختلفة من الصفحة ويعطل تجربة العميل.

أمثلة على واجهة المستخدم:

تقدم Victoria's Secret جميع العروض المتاحة في واجهة مستخدم واضحة في موقع واحد. لاحظ كيف تستخدم بنية المعلومات على الموقع الحجم للتأكيد على العروض المحددة أو تقليل التركيز عليها.

قم بتمكين التصفية في فئة المبيعات الخاصة بك لتحسين تجربة المستخدم

إذا كنت تقدم فئة مبيعات تجمع كل العناصر التي ينطبق عليها ترويج عربة التسوق أو رمز الخصم ، يجب أن تسمح للمستخدمين بالانتقال إلى هذه الفئة وتصفيتها. سيرغب بعض الزوار فقط في رؤية المنتجات المعروضة للبيع وليس أي شيء آخر ، لذا يجب أن تسمح لهم فئات المبيعات المنفصلة بمشاهدة جميع العروض والتنقل عبر هذا القسم بسهولة. يجب أن تسمح خيارات التنقل التي تمت تصفيتها للمتسوقين بالفرز والتصفية داخل أقسام المبيعات لتضييق التحديد بشكل فعال. بدون المرشحات ، يمكن أن يكون التسوق في المبيعات عملاً شاقًا وقد يؤدي إلى سقوط العملاء من موقعك.

أمثلة على واجهة المستخدم:

تقدم Pomelo Fashion فلاتر فئة البيع حسب نوع المنتج وحجمه.

تقدم Fashion Nova تصفية فئة البيع حسب نقطة السعر أو المقصورات:

عرض قمرة القيادة للعملاء

يساعد عرض جميع العروض الترويجية للعربة وأكواد الخصم التي يمكن لعميل معين الوصول إليها في قمرة القيادة المخصصة للعملاء على فهم العروض الترويجية المتاحة لهم تحديدًا. كما يسمح لك بعرض كوبونات خصم شخصية وفريدة من نوعها أو بطاقات هدايا أو رصيد نقاط ولاء أو مكافآت أخرى ، على عكس صفحة المبيعات التي تعرض العروض الترويجية المتاحة للجمهور فقط ، وليست المخصصة.

أمثلة على واجهة المستخدم:

تقدم H&M قمرة قيادة للعملاء ، حيث يمكن للعملاء العثور على رصيد نقاط الولاء ، والعروض الترويجية والخصومات المتاحة ، والقسائم الفريدة ، وبرنامج الإحالة.

قمرة القيادة للعملاء على دقة الهاتف المحمول:

سرد العناصر المخصومة في قسم المبيعات وفي الفئات المناسبة

لا تقصر عرض عناصر البيع على قسم مبيعات مخصص بالموقع. للحصول على أفضل قابلية للاكتشاف ، من الأفضل إدراج العناصر المخفضة في صفحة الفئة المناسبة وفي قسم المبيعات. ينتقل بعض المستخدمين مباشرة إلى أقسام المبيعات عندما يكون لديهم الدافع للعثور على صفقة ، لكن البعض الآخر لا يبحث على وجه التحديد عن أقسام المبيعات. المستخدمون الذين يبحثون عن عنصر معين يتصفحون بشكل عام على أساس الفئة. تساعد المواقع التي تعرض عناصر البيع مع عناصر السعر الكامل المستخدمين على اكتشاف الخصومات في منطقة اهتمامهم.

أمثلة على واجهة المستخدم:

يسرد Pretty Little Thing عناصر البيع ضمن عناصر البيع وفئات المنتجات بحيث يمكن العثور عليها في كليهما.

انشر العروض الترويجية على مستوى الموقع على مستوى العالم لتجنب الصحافة السيئة

إذا كان الموقع يقدم شحنًا مجانيًا أو خصومات أو قسائم أخرى على مستوى الموقع ، فقم بإظهار هذه العروض في كل صفحة من صفحات الموقع. يمكن أن تساعد تذكيرات الخصم المتسقة المستخدمين في العثور على عناصر في ميزانيتهم ​​بالإضافة إلى تشجيعهم على الشراء. مرة أخرى ، يصورون علامتك التجارية على أنها تقدم امتيازات للمشترين. من خلال عرض العروض الترويجية على مستوى الموقع فقط في مناطق محددة ، فإنك تخاطر بعدم اكتشافها جميع المستخدمين. بالإضافة إلى ذلك ، إذا لم يتم الإعلان عن القسائم على جميع الصفحات ، فقد يفترض الأشخاص أنه تم إخفاؤها عمدًا لمنع الاستخدام الذي ينعكس في النهاية بشكل سلبي على العلامة التجارية.

تشمل مواضع الخصم المحتملة ما يلي:

• إعلانات ترويجية في مساحة البطل على الصفحة الرئيسية.
• لافتات في أعلى كل صفحة مع تفاصيل ترويج عربة التسوق أو رمز القسيمة - بما في ذلك صفحة عربة التسوق أو صفحة الخروج حيث يجب إدخال رمز القسيمة.
• وسائل الشرح الترويجية داخل صفحة قائمة المنتجات أو في الشريط الأيمن.
• لافتات في أسفل الصفحة ، في التذييل أو بالقرب منه.

أمثلة على واجهة المستخدم:

‍ أزياء Pomelo تنقل قسيمتها على مستوى الموقع على لافتة الصفحة الرئيسية وشريط الصفحة العليا وصفحات الفئات.

يذكر PrettyLittleThing العملاء بكوبونات الخصم على مستوى الموقع حتى على صفحات المنتج - وهي خطوة رائعة من وجهة نظر UX.

هذه هي الطريقة التي يقدمونها في تخطيط الهاتف:

تعلن شركة Pretty Little Thing عن ترويجها على مستوى عربة التسوق على شعار الصفحة الرئيسية وشريط الصفحة العليا:

أنها توفر صفحة مبيعات تعرض جميع العناصر المخفضة:

يعرضون أيضًا الخصم على صفحة المنتج:

كن واضحا بشأن القيود المفروضة على الترقيات مقدما

في بعض الأحيان ، قد تخضع العروض الترويجية لعربة التسوق أو كوبونات الخصم لمؤهلات أو قيود. إذا كان الأمر كذلك ، فتأكد من أن العرض يشير بوضوح إلى القيود المطبقة. قم بالارتباط بمعلومات أكثر تفصيلاً حول هذه الشروط إذا لزم الأمر ، ولكن لا تطلب من المستخدمين البحث في التفاصيل الدقيقة لفهم القيود الأساسية. ليس هناك ما هو أكثر إحباطًا من توقع الحصول على صفقة ، فقط لتكتشف عند الخروج أنك غير مؤهل. ضع في اعتبارك أن تصميم الكوبون الخاص بك لا يجب أن يكون ملفتًا للنظر فحسب ، بل والأهم من ذلك أن يكون عمليًا.

أمثلة على واجهة المستخدم:

تنص Pretty Little Thing مباشرة على لافتة صفحتها الرئيسية على أن العرض الترويجي يستثني عناصر البيع وعناصر التجميل.

يوفر Chewy رابطًا لمزيد من المعلومات حول تفاصيل الترويج (الزر "مزيد من المعلومات") الذي يتم الإعلان عنه على الشريط "وفر 35٪ على أول مركبة لك".

هذه هي النافذة المنبثقة التي يتم عرضها بعد النقر على CTA الترويجي:

في دقة الهاتف المحمول ، لا يحتوي الشريط على الزر ولكنه قابل للنقر عليه. بعد النقر فوق نفس النافذة المنبثقة مع عرض شروط وأحكام الترويج:

أفضل ممارسات الكوبون UX على صفحات معينة:

الصفحة الرئيسية:

أنواع الترقيات المعلن عنها في الصفحة الرئيسية:

يجب ألا تعلن عن جميع العروض الترويجية على الصفحة الرئيسية لأن العملاء قد يغرقون في عدد العروض (ويصابون بما يسمى بعمى الشعارات). يجب الإعلان فقط عن العروض الترويجية لعربة التسوق أو القسائم المتاحة للجمهور هناك. أفضل ممارسة لتجربة المستخدم هي ترك الخصومات الخاصة بالمنتج أو الفئة الخاصة بالفئة أو صفحات المنتج.

أمثلة على واجهة المستخدم:

تم عرض Happy Socks على شريط الصفحة العلوية والراية الرئيسية للصفحة الرئيسية للخصم التلقائي بنسبة 30٪ على التخفيضات الصيفية التي كانت أكبر خصم عام لهم في تلك اللحظة.

رابط لصفحات المبيعات

إذا كان هناك عرض ترويجي يتم تطبيقه تلقائيًا أو قسيمة على مستوى الموقع ، فبدلاً من سرد جميع المنتجات والشروط المؤهلة على الصفحة الرئيسية ، يمكنك فقط تقديم إعلان تشويقي يؤدي إلى صفحة المبيعات حيث يمكن للعملاء قراءة جميع شروط وأحكام الترويج وتصفح المنتجات والعروض المؤهلة.

أمثلة على واجهة المستخدم:

يعرض Chubbies Pants لافتة ترويجية على الصفحة الرئيسية مرتبطة بصفحة مجموعة المبيعات.

صفحات الفئات:

تظهر ظهور مفاجئ

يمكن استخدام النوافذ المنبثقة للإعلان عن خصومات الكوبونات والعروض الترويجية على مستوى عربة التسوق المتوفرة في المتجر ولكن لها جوانب سلبية مختلفة لتجربة المستخدم. إذا كانت هي الطريقة الوحيدة للإعلان عن عرض ترويجي ، فيمكن للمستخدمين إغلاقها ونسيان شروط الخصم الدقيقة أو رمز القسيمة المطلوب. لذلك ، يجب استخدام النوافذ المنبثقة مع وسائل الاتصال الأخرى مثل اللافتات ورسائل البريد الإلكتروني والرسائل النصية القصيرة. قضية أخرى من النوافذ المنبثقة هي أنها تطفلية. إنها تغطي المحتوى الذي أراد المستخدمون تصفحه بالفعل ويمكن اعتباره مزعجًا.

من ناحية أخرى ، تعد النوافذ المنبثقة بديلاً رائعًا أو إضافة إلى رسائل البريد الإلكتروني عند تخصيص خصم للعميل لإجراء قام به للتو. على سبيل المثال ، إذا اشترك العميل في النشرة الإخبارية ، فيمكنك عرض الخصم المكتسب في نافذة منبثقة. بهذه الطريقة ، سيحصل العميل على الأمر أسهل وفي وقت أبكر مما لو كان عليه التحقق من صندوق الوارد الخاص به. مرة أخرى ، يمكن أن تتعايش النوافذ المنبثقة والبريد الإلكتروني ، لإتاحة الخصم إذا رغب العميل في العودة إليه لاحقًا.

من البدائل الجيدة للنوافذ المنبثقة على تطبيق الهاتف دفع الإشعارات.

أمثلة على واجهة المستخدم:

تستخدم Tula النوافذ المنبثقة للإبلاغ عن عرض ترويجي على مستوى عربة التسوق ولكن يمكن الوصول إلى النافذة المنبثقة أيضًا عندما ينقر المستخدم على لافتة ثابتة بخصم 15٪. هذا يجعل من الممكن العودة إلى الترقية لاحقًا.

أعلى شريط الصفحة:

بشكل مشابه لموضع الصفحة الرئيسية ، يجب حجز الشريط للعربة العامة أو على مستوى الموقع أو العروض الترويجية لكوبونات الخصم. إنه مكان رائع لإضافة رمز قسيمة عام وجعله مرئيًا عبر جميع الصفحات ، بما في ذلك الخروج ، لتسهيل الوصول إلى الرمز عندما يقوم المستخدمون بفحص عربة التسوق الخاصة بهم أو إكمال عملية الدفع.

أمثلة على واجهة المستخدم:

تستخدم Chubbies Pants للإعلان عن العروض الترويجية الكبيرة لعربة التسوق المتاحة للجمهور.

تذييل:

يعد التذييل من أقل الأماكن قراءة على موقع الويب. إن وضع كوبونات خصم أو عروض على مستوى عربة التسوق ليس هو أفضل فكرة حيث من المحتمل أن يفوت معظم العملاء الخصومات. من ناحية أخرى ، يعد التذييل مكانًا رائعًا لإضافة شروط وأحكام الترويج. إذا لم تكن بحاجة إلى صفحة منفصلة لـ T&C للترويج لأن الشروط والأحكام قصيرة جدًا ، يمكنك وضعها في التذييل.

أمثلة على واجهة المستخدم:

يستخدم ThredUp التذييل لعرض بنود وشروط العروض الترويجية لعربة التسوق.

صفحة المنتج:

اترك بطاقة السعر القديمة قيد التشغيل

تأكد من أن عملائك يعرفون السعر قبل خفضه. يتخذ الأشخاص قرارات الشراء بناءً على مدى تقديرهم للصفقة ، وليس مقدار تقديرهم للمنتج. كلما أمكن ، امنح عملائك سعرًا مرجعيًا يجعل صفقتك تبدو جيدة بالمقارنة.

أمثلة على واجهة المستخدم:

يشطب موقع Shein السعر القديم ، ويضع السعر الجديد ، بل ويضيف علامة توضح مستوى الخصم بالنسبة المئوية.

تظهر على الهاتف المحمول النسبة المئوية للخصم وقيمة الخصم بالدولار.

اذكر قواعد عروض الحزمة بوضوح

بالنسبة لخصومات الحزمة ، اجعل العروض سهلة الرؤية واتخذ خطوات على صفحات المنتج للتأكد من أن المستخدمين مؤهلين إذا اختاروا ذلك. إذا كان الموقع يقدم خصمًا لشراء عدة عناصر من نفس المنتج ، فيجب أن يتمكن المستخدمون من اكتشاف العرض بسهولة والوصول إلى الحد الأدنى من المتطلبات.

أمثلة على واجهة المستخدم:

تعرض Chubbies Pants عملية البيع "Buy 2، get a خصم" مباشرة بجوار علامة سعر المنتج في صفحة الفئة.

يعرضون أيضًا الخصم في عربة التسوق.

عند النقر فوق الخصم ، يتم تحديده وإضافته إلى الطلب ، مما يؤدي إلى خفض السعر بمقدار 10 دولارات.

عربة التسوق:

قم بتضمين حقول رمز القسيمة كجزء أساسي من كل من صفحات عربة التسوق والدفع

المستخدمون الذين لديهم رمز قسيمة يريدون إدخاله في أسرع وقت ممكن. يجب عليك توفير مكان واضح لأكواد القسائم في عربة التسوق ، قبل الخطوة الأولى في عملية الدفع. يمكّن نهج واجهة المستخدم هذا الأشخاص من التحقق مما إذا كان صالحًا قبل إدخال أي معلومات شخصية ويسمح أيضًا بتحديث الإجمالي بشكل مناسب في وقت مبكر من العملية.

عندما يتعلق الأمر بوضع رمز القسيمة ، يوصى بشدة بجعل الرموز الترويجية جزءًا أساسيًا من عملية السداد بدلاً من عنصر الشريط الجانبي. عندما يتم وضع العروض الترويجية في الشريط الأيمن ، فإنها تميل إلى الخلط بينها وبين الإعلانات ويتم تجاهلها بسبب عمى البانر.

من ناحية أخرى ، إذا لم يكن لدى عميلك رمز قسيمة ورأوا حقل قسيمة ، فقد يشعرون أنهم يفقدون صفقة محتملة ويتسببون في اضطراب ، لأنهم سيبدأون في البحث عن خصم. إذا لم تكن جميع القسائم متاحة للجمهور ، فإن أفضل حل هو عدم توفير حقل نص مفتوح مرئي. يجب عليك بدلاً من ذلك توفير ارتباط نصي لفضح حقل نصي. من غير المرجح أن يؤدي هذا التصميم إلى جذب المستخدمين الأساسيين وإرسالهم في مهمة قسيمة لأن العديد من المتسوقين لن يلاحظوا ذلك. المقايضة ، بالطبع ، هي أنه لا يمكن العثور عليها لمن لديهم رمز قسيمة.

يجب أن يكون مربع رمز القسيمة ، سواء تم توسيعه تلقائيًا أو إخفاؤه أسفل ارتباط ، حقلاً نصيًا. إذا كانت أكواد القسيمة الخاصة بك تحتوي على عدد ثابت من الأحرف أو نمط معين ، فيمكنك أيضًا إضافة التحقق التلقائي من شأنه أن يطالب المستخدم إذا أضاف عدد أحرف غير كافية أو كثيرة جدًا أو خاطئة (علامات رقمية أو أبجدية أو خاصة) للمساعدة اكتشفوا الخطأ في وقت سابق. يجب أن يكون الحقل طويلاً بما يكفي لاستيعاب أكواد القسائم المستخدمة على الموقع ، لضمان إدخال المستخدمين لها بشكل صحيح. أفضل طول لرموز القسيمة هو 8-12 حرفًا. إذا كنت تقدم اقتراحات حول رمز القسيمة ، فيمكنك أيضًا عرضها في قائمة منسدلة.

عندما يتعلق الأمر بكيفية صياغة النسخة حول القسائم المعروضة ، يقترح علم نفس التسويق المحاسبي العقلي أنه إذا كانت منتجاتك تميل إلى أن تندرج أكثر في فئة الضروريات ، فيجب أن تخبر عملائك أنهم حصلوا على قسائم (تخيل نافذة منبثقة رسالة تقول "مرحبًا! لقد ربحت للتو قسيمة خصم بقيمة 10 دولارات!") ، لأن الكسب يجعل الأمر يبدو وكأنه مصدر دخل أكثر جدية. في المقابل ، إذا كانت منتجاتك أكثر تافهة ، يجب أن تحاول اعتبار القسائم الخاصة بك بمثابة مفاجأة أو أنها أعطيت لهم بسبب الحظ (تخيل رسالة تقول "لقد ربحت للتو قسيمة خصم بقيمة 10 دولارات!"). يمكنك قراءة المزيد حول المحاسبة العقلية في منشور المدونة الخاص بنا.

يجب أن يكون من السهل تذكر أكواد القسائم نفسها وكتابتها في مربع القسيمة (ما لم تعرضها كقائمة منسدلة أو زر اختيار للاختيار من بينها). هذا يعني جعل المجموعات تعني شيئًا للعملاء ، وتجنب الأحرف والأرقام المتشابهة مثل O و 0 والحفاظ على الطول أقل من 12 حرفًا. اقرأ المزيد حول الطلاقة المعرفية في منشور المدونة الخاص بنا.

أمثلة على واجهة المستخدم:

يحتوي Birchbox على مربع رمز قسيمة مرئي جدًا في عرض سلة التسوق. كما أنها توفر رابطًا لفتح مربع رمز قسيمة في عرض الخروج ، لأولئك الذين فاتتهم في عرض عربة التسوق. إنها طريقة رائعة للاحتفاظ بخيار إضافة رمز قسيمة في كلتا الخطوتين ، وإخفاء مربع رمز القسيمة في نموذج الخروج مما يساعد على تقليل الاضطراب.

في دقة الموبايل ، صندوق الكوبون مخفي ويجب توسيعه بالضغط عليه:

مرة أخرى ، هناك رابط إلى مربع الرمز الترويجي في صفحة الخروج:

بالنسبة للعروض الترويجية ذات الحد الأدنى من الإنفاق ، قم بإجراء العمليات الحسابية للمستخدمين وساعدهم في الوصول إلى هدف الإنفاق

تقدم بعض المواقع عروضًا ترويجية مثل الشحن المجاني للمشتريات التي تزيد عن مبلغ معين من الدولارات. تغري هذه الصفقات المستخدمين بقضاء المزيد من الوقت والمال للتأهل لها.

بالنسبة للعروض الترويجية ذات الحد الأدنى من الإنفاق ، يجب أن تخبر المواقع المستخدمين بالضبط بالمبلغ الإضافي الذي يحتاجون إلى إنفاقه للتأهل للعرض. تتمثل إحدى الأفكار الرائعة لواجهة المستخدم لذلك في العد التنازلي مباشرةً في عربة التسوق عن المبلغ الذي يحتاجه المستخدمون لإنفاق المزيد للتأهل للحصول على الخصم ، سواء كان ذلك شحنًا مجانيًا أو خصمًا بنسبة مئوية أو خصم بالدولار.

إذا كنت ترغب في التأكد من تحفيز العملاء على إنفاق المزيد للوصول إلى الشحن المجاني ولكن لا تقيد تسوقهم للوصول إلى مستوى "كافٍ فقط" من الإنفاق ، ووضع سقف للسعر والارتباط بالقيمة المطلوبة للوصول إلى الشحن المجاني ، يمكنك اللعب مع واجهة المستخدم الخاصة بك لعرض التقدم نحو الشحن المجاني بشكل أسرع في بداية الإنفاق وأبطأ نحو الوصول إلى "هدف" حجم الطلب. هذا وفقًا لفكرة "سرعة الهدف" المبنية على البحث. يمكنك قراءة المزيد عنها في منشور المدونة هذا.

يمكن للمواقع أن تذهب إلى أبعد من ذلك ، من خلال اقتراح العناصر ذات الصلة في عربة التسوق والتي من شأنها أن تسمح للمتسوقين ببلوغ الحد الأدنى من الإنفاق المستهدف وتوفير الجهد المبذول في القيام بالحسابات بأنفسهم.

أمثلة على واجهة المستخدم:

تستخدم Tula واجهة المستخدم لتظهر في عربة التسوق المبلغ المفقود للتأهل للشحن المجاني.

ذكِّر المستخدمين بالعروض الخاصة المتاحة التي يمكنهم التأهل لها في عربة التسوق

الفرصة الأخيرة لجذب انتباه المستخدمين ومساعدتهم على اكتشاف العروض الترويجية المتاحة على مستوى سلة التسوق والقسيمة موجودة في صفحة عربة التسوق. هناك لا يزال بإمكانهم إجراء تغييرات على الطلب بسهولة ، لذا تأكد من تضمين أي عروض خاصة يمكن للمستخدمين التأهل لها ، مثل الشحن المجاني أو الخصومات.

يجب أن تكون العروض مرئية بوضوح لجذب انتباه المستخدمين. لجذب عين المستخدم ، استخدم الموضع المناسب والوزن البصري.

فيما يلي بعض أفضل ممارسات تجربة المستخدم:

• بالنسبة للعروض على مستوى المنتج ، قم بتقديم الرسائل بالقرب من المنتج نفسه.
• بالنسبة للعروض على مستوى الموقع ، قم بتقديم العرض في مساحة ذات أولوية أعلى مباشرة من خيار متابعة عملية الدفع.
• إذا كان الخصم ينطبق على الشحن ، فقد يكون من المناسب وضع الخصومات على مستوى الموقع أو بجانب إجمالي الشحن.
  

لا تقدم الكثير من القسائم والعروض الترويجية على مستوى عربة التسوق للعملاء ، خاصة عند الخروج. يمكن أن يؤدي الحمل الزائد للاختيار إلى اضطراب. اقرأ المزيد حول قيمة التنوع والإفراط في الاختيار في منشور المدونة الخاص بنا.

أمثلة على واجهة المستخدم:

تعرض Chubbies Pants جميع الخصومات والمكافآت المتاحة مباشرة في عربة التسوق.

اذكر أي شروط أو قيود خاصة

إذا كان للترويج لعربة التسوق أو القسائم أي شروط أو قيود خاصة ، فاذكر ذلك في صفحة المبيعات ، في الشروط والأحكام الخاصة بك وفي عربة التسوق ، قبل أن يكمل العملاء عملية الشراء.

أمثلة على واجهة المستخدم:

يذكر موقع Shein الشروط الخاصة للترويج في عربة التسوق ، على سبيل المثال الحد الأقصى لعدد المنتجات الترويجية التي يمكن للعميل شراؤها والتي لا يمكن إرجاع عناصر البيع إليها.

صفحة التفقد:

تضمين حقل رمز القسيمة

كما ذكرنا من قبل ، من الأفضل تضمين حقل رمز القسيمة في كلٍّ من صفحة عربة التسوق وصفحة الخروج إذا نسي شخص ما تطبيقه على صفحة عرض عربة التسوق.

اعرض رسالة نجاح إذا تم تطبيق الكود بنجاح

أظهر رسالة نجاح ومبلغ الخصم لتأكيد تطبيق رمز القسيمة بنجاح. ضع الرسالة بالقرب من حقل رمز القسيمة للتأكد من رؤية المستخدمين لها وربطها برمز القسيمة الذي تم إدخاله. قد يكون ظهور هذه الرسالة أعلى الصفحة أو أسفلها أمرًا محيرًا. تأكد من أن رسالة النجاح ليست المصدر الوحيد للمعلومات التي تفيد بأن القسيمة قد تم تطبيقها بنجاح. اعرض الخصم المضاف في إجماليات الطلب ، في عربة التسوق وفي صفحة الخروج ، ويفضل تحديد رمز القسيمة الذي تم تطبيق الخصم عليه (خاصة ، إذا كان بإمكان العملاء إضافة أكثر من رمز خصم واحد إلى الطلب).

أمثلة على واجهة المستخدم:

يعرض تطبيق Pretty Little Thing علامة اختيار ومقدار المدخرات المطبقة على الطلب بعد إدخال رمز صالح. كما تعرض أيضًا مبلغ الخصم المحسوب في إجماليات الأمر ، مع تحديد رمز الخصم الذي طبق الخصم.

يعرضون أيضًا رمز القسيمة المطبق والخصم ذي الصلة على عرض الهاتف المحمول:

{{CTA}}

قم ببناء الواجهة الأمامية الخاصة بك بمكونات جاهزة مدرجة في مجموعة واجهة المستخدم الخاصة بنا

ابدأ البناء

{{ENDCTA}}

عرض رسالة خطأ لأكواد القسيمة غير الصالحة

إذا كان الرمز غير صالح أو لم يتم استيفاء شروط الترويج ، يجب أن تعرض رسالة خطأ ذات صلة توضح نوع المشكلة في رمز القسيمة. لا تعرض نفس رسالة الخطأ في كل حالة لأنها لن توجه المستخدم بالخطأ وكيف يمكنه إصلاح المشكلة.

اعرض رسالة الخطأ بجوار مربع رمز القسيمة مباشرةً ، وليس أعلى الصفحة أو أسفلها حيث قد لا يلاحظ المستخدم رسالة الخطأ. تأكد من ظهور رسالة الخطأ ، على سبيل المثال باستخدام اللون الأحمر أو لون آخر متباين.

أنواع رسائل الخطأ المطلوب عرضها:

• رمز القسيمة غير صالح.
• تم استخدام رمز القسيمة بالفعل ولا يمكن استرداده أكثر من مرة.
• مبلغ الطلب غير كافٍ أو زائد عن الحد لتطبيق القسيمة (في هذه الحالة ، أعد المعلومات المتعلقة بالمبلغ المفقود للتأهل للقسيمة أو المبلغ الزائد الموجود في عربة التسوق).
• لا تتوافق محتويات الطلب مع شروط الترويج (في هذه الحالة ، اذكر العناصر التي يجب إزالتها أو إضافتها للتأهل).
• انتهت صلاحية القسيمة.
• أسباب أخرى - إذا كان بإمكانك تخيل حالات أخرى ، فقم بصياغة رسالة خاصة بها. احصل على رسالة افتراضية واحدة لجميع الحالات الأخرى التي لا يمكنك التفكير فيها.

أمثلة على واجهة المستخدم:

يعرض Summer Salt رسالة خطأ إذا كان الرمز الذي تم إدخاله غير صالح أو إذا لم يتم استيفاء شروط الترقية. يشجعون العملاء على إعادة التحقق من التعليمات البرمجية الخاصة بهم. يساعد ظهور القسائم العامة على الشريط العلوي في تصحيح الخطأ.

هذه هي الطريقة التي يعرضونها على دقة الجوال:

وضح ما إذا كان بإمكان العميل إضافة أكثر من قسيمة خصم أو الجمع بين العروض الترويجية

إذا سمحت بإضافة قسيمة واحدة فقط إلى الطلب ، فبمجرد أن يضيف العميل رمز قسيمة صالحًا ، اجعل رمز القسيمة يختفي أو يخفي. استبدله عن طريق إضافة زر "تغيير رمز القسيمة الخاص بي" حيث قد يرغب العملاء في تغيير رمز القسيمة إلى رمز آخر. تذكر أن لديك خيارًا لإزالة رمز القسيمة أيضًا. يجب أن تذكر بوضوح في مكان ما على الصفحة أنه لا يمكن للعملاء إضافة سوى رمز قسيمة واحد لكل طلب.

إذا كان بإمكان العملاء إضافة المزيد من رموز القسيمة ، فبمجرد إضافة رمز قسيمة واحد ، يمكنك عرضه على أنه "تمت إضافته إلى الطلب" والسماح بإعادة تحميل حقل رمز القسيمة ويكون فارغًا مرة أخرى ، حتى يتمكن العملاء من تطبيق رمز قسيمة آخر.

إذا تعذر الجمع بين رموز الخصم والعروض الترويجية لعربة التسوق ، فيجب عليك ذكر ذلك بوضوح في الإعلانات الترويجية ، والشروط والأحكام وفي صفحة الخروج ، خاصةً كرسالة خطأ إذا حاول شخص ما إضافة قسيمة فوق العناصر المعروضة للبيع بالفعل.

أمثلة على واجهة المستخدم: ‍

يضيف Summer Salt القسيمة المضافة أسفل حقل رمز القسيمة ويفرغ حقل رمز القسيمة بمجرد تطبيق قسيمة على الطلب ، مما يشير إلى أنه يمكن للمستخدمين تطبيق أكثر من قسيمة واحدة لكل طلب.

يسمح تطبيق Pretty Little Thing للعملاء بتطبيق رمز قسيمة واحد فقط لكل طلب. إنهم يجعلون حقل القسيمة يختفي بعد تطبيق القسيمة على الطلب واستبداله بزر "تغيير الرمز".

ساعد المستخدمين في العثور على خصومات لتجربة عملاء عالية

بجوار حقل رمز القسيمة ، يجب عليك عرض رابط إلى قمرة القيادة الخاصة بالعميل حيث يمكنهم رؤية جميع الخصومات المتاحة أو مجرد قائمة بالقسائم وعروض عربة التسوق للاختيار من بينها. هذا يجعل من السهل على العملاء استخدام صفقاتك وقد يزيد حجم عربة التسوق الخاصة بهم ، إذا رأوا أنهم يمكن أن يكونوا مؤهلين للحصول على خصم إذا قاموا فقط بإضافة بعض العناصر إلى سلة التسوق الخاصة بهم.

أمثلة على واجهة المستخدم:

روابط شي إن إلى صفحة "كوبوناتي" التي تجمع القسائم المتاحة بجوار حقل رمز القسيمة عند الخروج ويذكر القسائم المتاحة للجمهور ضمن حقل رمز القسيمة.

هذه هي قمرة القيادة للعميل التي تعرض الكوبونات المتاحة والقسائم منتهية الصلاحية والتي يتم فتحها عند النقر على رابط "قسائمي".

على تطبيق الهاتف المحمول ، يعرضون القسائم على أنها "تنبيه قسيمة". إذا قمت بالنقر فوق هذه النافذة المنبثقة ، يمكنك رؤية جميع القسائم المتاحة واختيار الكوبونات التي تريد استخدامها.

تعكس الخصم المستلم

اعرض أي خصومات أو قيود خاصة مطبقة على العناصر الموجودة في عربة التسوق ، سواء كانت عروض ترويجية أو قسائم على مستوى سلة التسوق. يجب التحقق من صحة رموز القسيمة وإدراجها في التكلفة قبل طلب معلومات الدفع. يجب عرض الخصومات على مستوى سلة التسوق على مستوى المنتج أو الطلب ، بناءً على ما تم تطبيقها عليه. من الضروري أن يتمكن المستخدمون من رؤية المدخرات وفهم كيفية حساب الإجمالي. الأفضل هو عرض رمز القسيمة والترويج الذي منحهم مقدار التوفير المحدد في إجمالي الطلب.

يجب الإبلاغ عن القيود الخاصة على العناصر المخفضة قبل أن يقوم العملاء بتقديم طلبهم.

أمثلة على واجهة المستخدم:

يعرض موقع 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}}