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

الخلفيات الداكنة والمناطق القابلة للنقر

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

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

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

تقنيات العرض

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

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

الرسائل التسويقية Popover

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

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

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

CSS مقابل JS

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

مشروط العجاف

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

إعادة التشكيل

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

مشروط بسيط

إذا كنت تبحث عن تصميم جيد وفريد ​​من نوعه، فلا تنس Simple Modal. تعديل بسيط للمكونات الإضافية، وهو مجاني ولكن بموضوع رائع.
الخلفيات التي ليست داكنة بما فيه الكفاية ليست جذابة للغاية ويمكن أن تغير الكود المناسب لتلائمها. يمكن أن يعمل النموذج البسيط مع المحتوى المضمن وإطارات iframe وطلبات Ajax وأي شيء آخر تحتاجه.
كل هذه الخيارات رائعة والعديد منها يحتوي على خيارات Vanilla JS بالإضافة إلى jQuery.
إذا كنت تفضل جذر CSS، فهناك بدائل جيدة وهي:

CSS مشروط
الأساسية مشروط
مشروط الصرفة CSS

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

خاتمة

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