الحقيقة حول أفضل ألوان زر الدعوة للعمل لموقعك على الويب

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

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

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

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

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

دعنا نذهب!

إنشاء اختبار A / B لـ CSS

أسهل طريقة لتغيير لون الأزرار على الصفحة هي إضافة بعض قواعد CSS الإضافية لتطبيق اللون الجديد. أنت تضع قاعدة background-color جديدة على الزر باللون الذي تريده وهذا كل شيء. سهل جدا.

باستخدام Nelio A / B Testing ، لديك إمكانية إنشاء اختبار A / B لأنماط CSS لاختبار المتغيرات المختلفة لقواعد CSS الإضافية. عليك فقط إنشاء اختبار جديد وتحديد خيار CSS في محدد نوع الاختبار:

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

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

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

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

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

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

أخيرًا ، لاحظ أن اختبارات A / B لـ CSS ستؤثر على جميع صفحات موقع الويب الخاص بك. للحد من هذا السلوك في Nelio A / B Testing ، في الشريط الجانبي الأيمن لمحرر اختبار A / B لديك خيار تحديد نطاق الاختبار. لقد فعلت ذلك بحيث يؤثر فقط على الصفحة الرئيسية لمحتوى Nelio وصفحة التسعير.

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

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

تحليل النتائج

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

لكن لنبدأ بنتائج الاختبار على الويب باللغة الإسبانية:

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

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

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

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

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

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

الاستنتاجات

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

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

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

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

صورة مميزة لروبرت كاتزكي على Unsplash.