تصميم واجهة المستخدم المنبثقة: أفضل الممارسات والنصائح والأمثلة

يركز كل موقع ويب يركز على الربح أيضًا على الحصول على مزيد من التحويلات من زوارهم: تشجيعهم على الشراء ... أو على الأقل الاشتراك.

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

• خفضت Kiss My Keto معدل التخلي عن سلة التسوق بنسبة 20٪
• قام كريستوفر كلوس بتحسين معدلات التحويل بنسبة 37٪
• فقاعة! بقلم سيندي جوزيف نمت عائدات التجارة الإلكترونية بمقدار 148297 دولارًا في شهر واحد فقط

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

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

في هذه المقالة ، سنلقي نظرة على 5 طرق للقيام بذلك ، بدءًا من ...

يمكن أن تكون النوافذ المنبثقة للدخول معطلة للغاية.

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

النوافذ المنبثقة للدخول أيضًا:

• منع الزوار من الوصول إلى المحتوى المطلوب
• غالبًا ما تحتوي على محتوى غير ذي صلة
• إرباك الزوار

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

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

فيما يلي بعض الطرق النموذجية لتشغيل النوافذ المنبثقة بناءً على تفاعل المستخدم:

• عرض النافذة المنبثقة بعد X ثانية: يمنح هذا الخيار للزائرين بعض الوقت لتصفح الصفحة التي يشاهدونها. يمكنك جذب انتباههم بعد أن يقضوا بعض الوقت على الصفحة.

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

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

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

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

فيما يلي مثال جيد على كيفية استخدام النوافذ المنبثقة بناءً على تفاعل المستخدم. تظهر نافذة Obvi المنبثقة بغرض الخروج فقط للزوار الذين يغادرون الموقع.

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

لسوء الحظ ، لا يمكنك تحديد الحل لمشاكل كل فرد وتقديم الحلول لهم في نافذة منبثقة.

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

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

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

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

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

2.1. الاحتمالات الباردة مقابل الساخنة

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

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

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

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

لهذا السبب ، تحتاج إلى إظهار محتوى بارد للزوار يجعلهم يرغبون في الاشتراك ، مثل كتاب إلكتروني قابل للتنزيل.

دعونا نرى كيف يعمل في العمل. هذا مثال رائع من حملتين من حملات BOOM !

إنهم يقدمون كتابًا إلكترونيًا كمغناطيس رئيسي للآفاق الباردة المهتمين بخط إنتاجهم ، لكنهم غير مستعدين بعد لإجراء عملية شراء:

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

2.2. استهداف الجغرافية

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

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

2.3 استهدف الزوار بناءً على المرحلة التي وصلوا إليها في عملية الشراء

ينتقل كل عميل من عملائك عبر مراحل الوعي التالية:

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

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

فيما يلي بعض الأمثلة على الرسائل المصممة لإحدى هذه المجموعات.

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

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

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

يتضمن أحد الأساليب التي أثبتت جدواها عرض المنتجات الأكثر شيوعًا (أو المنتجات "الشائعة") في الفئة التي يتصفحونها.

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

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

2.4 تجزئة متقدمة

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

يمكنك استخدام السلوك التالي الخاص بالمستخدم لتقسيم الزائرين بشكل أكبر:

• أن تكون في الصفحة الفرعية الحالية لمدة X ثانية على الأقل
• من مصدر حركة مرور محدد
• يتصفحون حاليا صفحة معينة
• سبق لك زيارة صفحة (صفحات) معينة
• لديهم عناصر محددة في عربة التسوق الخاصة بهم
• أن تكون قيمة سلة التسوق أكبر من حد معين

هذا يسمح لك بما يلي:

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

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

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

على سبيل المثال ، إذا كنت تبيع الأجهزة الإلكترونية وتعلم أن زائرًا معينًا مهتم بالهواتف الذكية ، فإن عبارة "خصم 25٪ على الهواتف الذكية" هي رسالة أكثر فاعلية من "خصم 25٪ على المنتجات المحددة".

هناك أربعة مستويات أساسية من التخصيص للرسائل في النوافذ المنبثقة الخاصة بك:

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

باستخدام Dynamic Text Replacement ، سيتم تحديث النص الموجود في النوافذ المنبثقة تلقائيًا بناءً على المتغيرات التي تختارها.

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

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

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

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

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

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

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

فيما يلي بعض أهداف التجارة الإلكترونية الشائعة:

1. زيادة المبيعات
2. بناء قائمة البريد الإلكتروني الخاصة بك
3. التقليل من هجر العربة
4. البيع الزائد والبيع العابر
5. تحسين تجربة العملاء

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

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

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

كلما قلت البيانات التي تطلبها ، زادت التحويلات التي ستنتهي بها. في كثير من الحالات ، يكفي مجرد عنوان بريد إلكتروني ، كما في المثال أدناه.

تطلب العديد من المواقع أيضًا الاسم الأول لتخصيص رسائلها في المستقبل ، كما في هذا المثال من The Oodie.

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

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

تسمى هذه الإستراتيجية التي يستخدمها The Oodie "طريقة حصان طروادة" وقد حققت أرباحًا إضافية بقيمة 1.9 مليون دولار لـ The Oodie في 30 يومًا فقط.

إذا كنت ترغب في "سرقة" استراتيجيتهم ، شاهد تدريبنا المجاني.

يعني إنشاء النوافذ المنبثقة مثل مصممي UX التفكير في كل زائر من زوارك كإنسان ، والتفكير بعناية في الحالة الذهنية التي سيكونون فيها عند ظهور نافذة منبثقة.

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

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

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