أضف المزيد من النمط إلى نموذج التعليق الخاص بك في WordPress

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

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

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

تحسين تصميم نموذج تعليق WordPress

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

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

لقد أجرينا ثلاثة تغييرات أساسية على نموذج التعليق:

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

الآن بعد أن أصبح التصميم الجديد جاهزًا ، ما علينا فعله هو اختباره.

إنشاء اختبار A / B لأنماط CSS

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

باستخدام Nelio A / B Testing ، نقوم بإنشاء اختبار A / B جديد لـ CSS. تُظهر الصورة التالية شاشة التحرير لهذا الاختبار:

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

لقد قمنا أيضًا بتقليل نطاق الاختبار إلى عناوين URL التي تحتوي على https://neliosoftware.com/blog/ ، بحيث لا ينطبق الاختبار إلا على المنشورات في مدونتنا.

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

قبل الانتهاء ، يجب أن نذهب لتحرير المتغير B للاختبار. نقوم بتمرير الماوس فوق هذا المتغير وسيظهر خيار تحريره. بمجرد النقر فوقه ، يتم فتح محرر CSS مع معاينة ، كما ترى في لقطة الشاشة التالية:

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

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

تحليل نتائج اختبار A / B

لقد أجرينا الاختبار لمدة ستة أسابيع تقريبًا ، حيث قمنا بتحليل ما يقرب من 20000 زائر لمدونتنا (عينة لطيفة من السكان). يمكنك رؤية النتائج الكاملة لاختبار A / B في لقطة الشاشة التالية:

العدد الإجمالي للتحويلات التي تلقاها الاختبار ليس مذهلاً. في ذلك الوقت ، تلقت مدونتنا 27 تعليقًا (وهذا هو سبب وجود 27 تحويلاً في نتائج الاختبار).

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

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

تصميم أكثر تفصيلاً يشجع التفاعل

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

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

صورة مميزة بواسطة Jason Leung على Unsplash.