اختبار أنماط مختلفة في أزرار الخروج

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

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

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

تعريف اختبار أ / ب

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

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

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

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

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

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

لذلك ، لدينا ثلاثة إصدارات مختلفة من أنماط CSS لجدول تسعير Nelio A / B Testing:

• الأصل ، بدون تغييرات في الأنماط.
• البديل الأول بألوان أكثر بروزًا على الأزرار.
• البديل الثاني بألوان بارزة وحجم زر أكبر.

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

نقوم بإنشاء اختبار CSS A / B الجديد والبدائل الثلاثة فيه. في الواقع ، لقطات الشاشة التي رأيتها من قبل من الاختلافات هي لقطات شاشة لمحرر نمط CSS الذي يتضمنه Nelio A / B Testing لإنشاء البدائل.

كما ترى في لقطة الشاشة أعلاه ، قمنا بتقييد نطاق الاختبار في صفحة تسعير اختبار Nelio A / B ، بالإضافة إلى حقيقة أننا حددنا خمسة أهداف ليتم قياسها في الاختبار:

• النقرات على أزرار أي خطة.
• النقرات على أزرار الخطة الأساسية.
• النقرات على أزرار الخطة الاحترافية.
• النقرات على أزرار خطة المؤسسة.
• كمية المشتريات.

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

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

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

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

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

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

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

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

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

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

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

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

في النتائج التالية نرى أن هذا هو بالضبط ما يحدث. النسخة ذات الألوان الجديدة تحقق مبيعات أقل بنسبة 24.5٪ ، بينما النسخة التي تجمع بين الألوان والأحجام تبيع 16.6٪ أقل من الإصدار الحالي من صفحتنا (النسخة التي لا تحتوي على تغييرات).

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

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

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