إذا كنت لا تعرف ما يجب تغييره ، فحاول تغيير ألوان موقع الويب الخاص بك

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

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

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

هناك العديد من الدراسات حول نظرية الألوان والطريقة التي ندركها نحن البشر. ما قد يبدو مجرد تفسير لأطوال موجية مختلفة يلتقطها نظامنا البصري (العين والعصب البصري والدماغ) ، يخفي خلفية نفسية ضخمة.

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

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

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

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

في المقارنة التالية ، يمكنك رؤية الإصدار الأصلي من الطية الأولى (على اليسار) والإصدار البديل (على اليمين) بألوان مختلفة من الأزرار والهوامش ، وصورة خلفية جديدة:

لاختبار التغييرات ، استخدمنا اختبار Nelio A / B كمكوِّن إضافي لاختبار A / B. أول شيء سنفعله هو إنشاء اختبار A / B جديد للصفحات ، وهو العنصر الذي سنختبره.

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

في شاشة التحرير الخاصة باختبار A / B ، نختار الصفحة الأساسية التي نريد اختبارها (صفحة التسعير الخاصة بنا) وننشئ متغيرًا جديدًا ، والذي سنقوم بتحريره لاحقًا:

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

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

أخيرًا ، نقوم بتحرير النسخة البديلة من الصفحة. يأخذنا هذا إلى محرر صفحة WordPress الذي نستخدمه (في حالتنا ، محرر الكتلة) ، كما ترى في لقطة الشاشة التالية:

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

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

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

تحليل نتائج الاختبار

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

لم يقتصر الأمر على حصول المتغير على عدد أقل من النقرات على أزرار الإجراءات ، ولكنه أدى أيضًا إلى انخفاض المبيعات (ما يقرب من 22٪ أقل).

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

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

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