تصميم منبثق: التقطه وهو ساخن

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

دور النماذج المنبثقة في التسويق عبر البريد الإلكتروني

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

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

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

شارك Martin Lindstrom ، وهو كاتب وخبير في الإعلانات والعلامات التجارية ، بعض النتائج المثيرة للاهتمام لدراسة التسويق العصبي الكبيرة لمدة 3 سنوات في كتابه "Buyology: Truth and Lies About Why We Buy". للتلخيص ، لقد أثبت أن 90٪ من سلوك الشراء لدى الناس هو فاقد للوعي ، وأن الكثير من الإجراءات التي يتخذها المستخدمون تتعارض مع ما يزعمون أنهم يؤمنون به. لذلك ، على الرغم من الآراء المثيرة للجدل حول النوافذ المنبثقة ، فإنها لا تزال تعمل: قد ندعي لتتضايق من النوافذ المنبثقة ، ولكننا ما زلنا نتفاعل معها ونواصل الاشتراك.

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

في هذه التجربة ، كان متوسط ​​معدل تحويل النوافذ المنبثقة 3.09٪. أعلى 10٪ من النوافذ المنبثقة أداءً كان متوسط ​​معدل التحويل فيها 9.28٪ ، وصل بعضها إلى 50.2٪.

لاحظ سومو الاتجاهات التالية في معدلات التحويل المنبثقة:

1. وصلت النوافذ المنبثقة الموضوعة في سياق مناسب إلى أكثر من 40٪ من معدلات التحويل. نعني بالسياق المناسب أن موضوع النافذة المنبثقة يتطابق مع موضوع صفحة موقع الويب التي تظهر عليها.
2. أدى توقيت النوافذ المنبثقة ، والذي يعتمد بشكل كامل على السياق ، إلى تحقيق معدلات تحويل بنسبة 38.4٪ بفضل التأخير لمدة 15 ثانية في صفحة الكتاب الإلكتروني. تساعد أدوات مثل Google Analytics في حل اللغز الكامن وراء أنسب توقيت في كل حالة على حدة.
3. من خلال النظر في السياق والتوقيت ، وإنشاء CTA التي تتوافق مع السياق ، ومحاولة أن تكون واضحة وجلب القيمة ، تمكنت Sumo من الوصول إلى معدل تحويل 60٪.

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

نصائح وحيل تصميم النوافذ المنبثقة

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

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

اجعل النوافذ المنبثقة متوافقة مع إرشادات الشركة

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

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

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

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

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

على سبيل المثال ، موقع Wait But Why مختلف تمامًا عن موقع الويب Whole Whale. إنه ممتع ومشرق ويحتوي على الكثير من الرسوم التوضيحية التي تشبه الرسومات.

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

ضع نظريات الإدراك البصري موضع التنفيذ

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

قاعدة النسبة الذهبية

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

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

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

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

نظرية الجشطالت

الجشطالت تعني "الكل الموحد" ويضع جوهر النظرية بأكملها ، والتي تشرح كيف يدرك البشر الأشياء بناءً على وضعها في الفضاء ثنائي الأبعاد.

هناك 6 مبادئ مشتركة للجشطالت:

1. تشابه . يُنظر إلى الأشياء المتشابهة كنمط أو مجموعة.
2. استمرار . يتم النظر إلى الأشياء الموضوعة على مسار واحد كمجموعة ، ويتم توجيه عين الإنسان بهذه الخطوط المرئية.
3. الإغلاق . إذا كان كائن ما ينقصه في بعض الأجزاء ، فإننا لا نزال ندركه ككل. فكر فقط في شعار WWF مع الباندا وستفهم هذا المبدأ.
4. القرب . يُنظر إلى الأشياء التي يتم وضعها بالقرب من بعضها البعض على أنها مجموعة.
5. الشكل / الأرض . يفصل الأشخاص العناصر عن الخلفية ، لذلك يُنظر إلى الأكبر منها على أنه الأرض ، بينما يُنظر إلى العنصر الأصغر على أنه كائن أو شكل. غالبًا ما يستخدم هذا المبدأ في أعمال Escher.
6. التناسق والنظام . يشعر الناس بمزيد من الأمان والهدوء عندما يرون تصميمات متناظرة.

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

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

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

اعتني بالقراءة

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

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

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

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

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

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

كن على دراية باختيارات الألوان الخاصة بك

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

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

مثال على نافذة منبثقة لـ Tommy Hilfiger يعرض تباينًا كبيرًا بين الأحمر والأزرق والأبيض. العنوان مكتوب بأحرف كبيرة كبيرة ، وأهم جزء منه تم تمييزه باللون الأحمر. يتم سحب انتباهك على الفور من العنوان إلى زر التسجيل.

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

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

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

يقدم موقع My Deal خيارًا بسيطًا آخر مع مجموعة من الألوان. يتم توجيه طائرة ورقية حمراء إلى اليمين - حيث يوجد زر تسجيل أحمر. لاحظ كيف يتم استخدام أسلوب الطباعة لإبراز الرسالة الرئيسية للنموذج.

جرب الأشكال والتفاعلية

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

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

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

دورك

لجعل نماذج الاشتراك الخاصة بك لافتة للنظر ، تذكر مبادئ التصميم المنبثقة البسيطة هذه:

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

هل أنت جاهز لإنشاء أول نموذج منبثق لك باستخدام SendPulse مجانًا؟