أفضل 12 ممارسة لتصميم النوافذ المنبثقة تحتاج إلى معرفتها (للجوال وسطح المكتب)

على الرغم من الاعتقاد السائد ، فإن الناس اليوم أكثر من سعداء للتعامل مع النوافذ المنبثقة.

منحت ، إذا كنت تقوم بتجميع النوافذ المنبثقة الجيدة .

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

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

ستتعلم في هذا الدليل:

• العوامل التي تجعل النوافذ المنبثقة "الجيدة" لسطح المكتب أو الجوّال (مع ثلاثة عشر مثالاً)
• ثلاثة أخطاء كبيرة يمكن أن تفسد أداء نافذة منبثقة واعدة
• خمسة أمثلة لتصميم النوافذ المنبثقة الإضافية لتنمية قائمة بريدك الإلكتروني

مع ذلك ، دعنا نتعمق!

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

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

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

1. اجذب انتباه زوارك من خلال مجموعات الألوان التي تجذب الأنظار

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

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

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

على سبيل المثال ، نظام الألوان الأبيض والأسود هذا من Thredup.com بسيط ولكنه أنيق ومذهل.

2. قم بإغراء الزوار بكتابة عبارات الفوائد الرئيسية

دعونا نواجه الأمر: فترات اهتمام المتسوقين أصبحت أقصر وأقصر.

لذلك ، من الأفضل أن تكون رسائلك التسويقية مفهومة على الفور.

تأكد من:

• اجعل النوافذ المنبثقة موجزة: فكر في "الأقل هو الكثير" وتجنب الجدران النصية.
• اكتب عناوين قوية بعبارات شديدة التأثير مثل "مجاني" أو "الآن" أو "حفظ" لتسليط الضوء على مزايا عرضك على الفور.
• افصل النص المنبثق إلى أقسام واضحة (فكر في: العنوان ← النص الأساسي ← زر الحث على اتخاذ إجراء (CTA)) لتوجيه القراء إلى الاشتراك.

يوجد أدناه مثال رائع لعرض من Trade Coffee يتبع أفضل ممارسات التصميم المنبثقة المذكورة أعلاه.

3. تقديم النوافذ المنبثقة كعرض مخصص (تلميح: ليس إعلانًا)

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

لقد حصلنا عليها: الكثير من المستهلكين ليسوا متحمسين تمامًا للنوافذ المنبثقة. سنوات وسنوات من الإعلانات المزعجة تركت النوافذ المنبثقة مع ممثل سيء.

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

ضع في اعتبارك العروض التي تطلب من زوار موقعك مدخلاتهم ورغباتهم.

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

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

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

هذا مثال آخر من Uniqlo. لاحظ كيف تُؤطر الرسالة نفسها كمساعدة ("ساعدنا في تخصيص الرسائل لك"):

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

قد لا تبدو بضع ثوانٍ إضافية في الموقع كثيرًا ، لكنها تمثل وقتًا ثمينًا لبناء اتصال مع عملاء متوقعين جدد.

4. الاتصال بالعملاء المحتملين من خلال نسخة حوارية

بناء الثقة هو أمر مهم للغاية بالنسبة للنوافذ المنبثقة الخاصة بك.

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

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

هذه النافذة المنبثقة من Quip هي مثال رائع لما نتحدث عنه. ودود ومرحب بدون أي مصطلحات أو "حديث تجاري".

5. ادعُ الزوار إلى النقر دون مقاطعة تجربة المستخدم

لا يجب أن تكون النوافذ المنبثقة في مواجهة وجهك تمامًا حتى تكون فعالة.

في الواقع ، في بعض الأحيان ، يمكن للبراعة أن تقطع شوطًا طويلاً نحو بناء قائمتك.

لا تنظر إلى أبعد من رواج الرسائل الجانبية والقضبان اللاصقة كدليل.

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

تحقق من المثال من Free People أدناه:

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

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

6. تأكد من وصول النافذة المنبثقة إلى الأشخاص في الوقت المناسب

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

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

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

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

نسبة مذهلة تبلغ 63٪ من حركة التجارة الإلكترونية تأتي من الأجهزة المحمولة. هذا يعني أنه لا يمكنك حرفيًا تجاهل المشتركين القادمين من الهواتف الذكية.

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

7. شجع الزائرين على التصرف بسرعة من خلال الإيجاز بنسختك

أن تكون اقتصاديًا مع كلماتك هو رهان آمن للنوافذ المنبثقة.

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

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

على سبيل المثال ، تصل النافذة المنبثقة لاشتراك البريد الإلكتروني من Casetify مباشرة إلى صلب الموضوع.

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

8. اجعل النوافذ المنبثقة سهلة النقر قدر الإمكان

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

ومع ذلك ، ستندهش من عدد النوافذ المنبثقة للجوال التي تعد كابوسًا للتنقل.

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

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

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

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

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

نفس الشيء بالنسبة إلى هذه النافذة المنبثقة للجوال من Pura Vida:

9. اجعل عروضك سهلة وتتطلب عددًا أقل من حقول النموذج

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

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

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

10. اختر عبارة واحدة قوية للحث على اتخاذ إجراء (عبارة تحث المستخدم على اتخاذ إجراء) تجذب زوار موقعك

عبارات الحث على الشراء هي جزء أساسي من تحسين التحويل.

كلما كانت الحث على اتخاذ إجراء أكثر إقناعًا ، زادت احتمالية تسجيلك للاشتراك.

تعد CTA من Nectar Sleep ("وفر 399 دولارًا") بمدخرات ضخمة وتجعل عرضها أكثر قيمة.

مجرد مطالبة زوار الموقع "بالنقر هنا" يعد فرصة ضائعة لتسليط الضوء على الفوائد.

11. استخدم الأرقام لتسليط الضوء على المدخرات الجادة في أسرع وقت ممكن

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

من الأسهل على أدمغتنا معالجة الأرقام بدلاً من قراءة النص. لاحظ كيف تعتمد العديد من النوافذ المنبثقة للجوّال على "خصم 10 دولارات" أو "وفر 10٪" باعتبارها الركيزة الأساسية لعرضها؟

إليك عنوان قائم على الأرقام يشجع الأشخاص على الاشتراك في رسالة إخبارية من Arctic Fox. لاحظ التصميم الجذاب أيضًا:

12. تحقق جيدًا من أن النوافذ المنبثقة متوافقة مع Google

على الرغم من أن النوافذ المنبثقة لا تؤثر على مكانة موقعك مع Google بشكل مباشر ، إلا أن محرك البحث اتخذ موقفًا تجاه المحتوى "المتطفّل" .

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

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

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

سؤال جيد! أحيانًا تكون أفضل طريقة للالتزام بأفضل ممارسات النوافذ المنبثقة الأكثر أهمية هي معرفة ما لا يجب فعله.

لنلقِ نظرة على أكبر الأخطاء التي قد تؤدي إلى إضعاف أداء النوافذ المنبثقة.

1. نقل محتوى غير ذي صلة أو غير ضروري

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

2. تقديم عرض مخيب

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

احصل على حوافز إبداعية وعصف ذهني تتجاوز التحديثات الأساسية أو خصم 5٪.

3. الاعتماد على تصميمات المدرسة القديمة غير المرغوب فيها المنبثقة

هنا في OptiMonk ، نحن في حملة صليبية ضد النوافذ المنبثقة السيئة.

مشغول. غير مرغوب فيه. المبيعات. أنت تعرف ما نتحدث عنه.

الاخبار الجيدة؟ يمكن إنشاء نوافذ منبثقة أنيقة تستحق النقر لأي علامة تجارية - بفضل أدوات مثل OptiMonk.

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

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

1. خيمة

هذه الرسالة الجانبية من Tentree هي مثال ساطع على نافذة منبثقة غير تدخلية.

لاحظ كيف يبرز زر CTA الخاص بالعرض عن باقي نظام ألوان الموقع؟ في حين أن دقة الرسالة الجانبية تجعلها تشعر أنها جزء من الصفحة الرئيسية بالفعل.

2. BLK & Bold

هذا العرض ، بشكل مناسب ، عرض جريء بعنوان مباشر يصعب تفويته.

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

3. بيلي

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

إن العرض المباشر مقابل البريد الإلكتروني للزائرين هو دائمًا لعبة عادلة.

4. الاستيلاء على المنزل الأخضر

هذا مثال آخر على نافذة منبثقة بسيطة وفعالة تساعد في زيادة قائمة بريدك الإلكتروني.

تعرض لغة المحادثة ("هل تريد عرضًا خاصًا على طلبك الأول؟") و CTA ("YES PLEASE") كيف يمكن لخيارات النسخ الأساسية إقناع الزائرين بتقديم معلوماتهم.

5. ملعقة سحرية

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

وبهذا ، نختتم دليلنا!

عندما يتعلق الأمر بإنشاء نافذة منبثقة "جيدة" ، فهناك الكثير من القطع المتحركة التي يجب إدارتها.

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

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