استخدام خرائط التمثيل اللوني في صفحة التسعير

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

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

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

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

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

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

كيفية إنشاء اختبار Heatmap في WordPress

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

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

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

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

نتائج خريطة التمثيل اللوني

في حالتنا ، أجرينا اختبارين لخريطة الحرارة يعملان في نفس الوقت على موقعنا على الويب: أحدهما لصفحة التسعير الخاصة بـ Nelio A / B Testing والآخر لصفحة التسعير الخاصة بمحتوى Nelio.

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

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

صفحة التسعير لاختبار Nelio A / B

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

• خريطة الحرارة لصفحة التسعير الخاصة بـ Nelio A / B Testing.
• التمرير لصفحة التسعير الخاصة بـ Nelio A / B Testing.
• قصاصات ورق من صفحة التسعير الخاصة بـ Nelio A / B Testing.

دعنا الآن نلقي نظرة على الأجزاء الأكثر صلة بالنتائج السابقة:

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

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

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

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

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

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

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

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

من هذه المرشحات استخرجنا البيانات التالية:

• يعد Chrome و Firefox أكثر المتصفحات استخدامًا من قبل زوارنا ، إلى حد بعيد. لذلك ، يجب أن نجعل الويب يبدو جيدًا ، على الأقل ، في هذه المتصفحات.
• نصف زوار هذه الصفحة يأتون من الولايات المتحدة. هذا يطابق بيانات مبيعاتنا.
• يزورنا الزوار أكثر في الأيام الثلاثة الأولى من الأسبوع. يمكن أن تكون معرفة هذه المعلومات مفيدة ، على سبيل المثال ، لتقديم عروض في الأيام الأخرى في مناطق أخرى من الويب ، وبالتالي جذب حركة المرور في الأيام التي يكون فيها عدد الزيارات منخفضًا.
• يصل حوالي 100٪ من الزوار إلى الصفحة من جهاز كمبيوتر مكتبي أو كمبيوتر محمول. بالكاد نحصل على زيارات من الأجهزة المحمولة. هذا شيء يجب دراسته في المستقبل.
• نظاما التشغيل Windows 10 و Mac OS X هما نظاما التشغيل الذي من خلاله يقوم الناس بزيارتنا. إنها تتطابق مع البيانات السابقة ، حيث لا يوجد لدينا زوار من أنظمة تشغيل الأجهزة المحمولة.
• لدينا المزيد من الزوار خلال يوم العمل (تم إجراء الاختبار في منطقة شيكاغو الزمنية). هذا منطقي ، لأن عميلنا الرئيسي من الولايات المتحدة الأمريكية.
• تتم الزيارات على شاشات بحد أدنى للعرض أكبر من 1500 بكسل. حقيقة أخرى تؤكد أن الزيارات من أجهزة كمبيوتر سطح المكتب أو أجهزة الكمبيوتر المحمولة.

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

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

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

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

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

صفحة التسعير الخاصة بمحتوى Nelio

كما هو الحال مع صفحة التسعير الخاصة بـ Nelio A / B Testing ، هنا لديك الصور الكاملة مع نتائج خريطة التمثيل اللوني لصفحة التسعير الخاصة بمحتوى Nelio:

• خريطة الحرارة لصفحة التسعير الخاصة بمحتوى Nelio.
• قم بالتمرير لصفحة التسعير الخاصة بمحتوى Nelio.
• قصاصات من صفحة التسعير الخاصة بمحتوى Nelio.

تعد صفحة التسعير الخاصة بمحتوى Nelio أبسط وأقصر من صفحة اختبار Nelio A / B. من بين أسباب أخرى ، تحتوي هذه الصفحة على خطة واحدة فقط ، بينما مع اختبار Nelio A / B لدينا 3 خطط مختلفة.

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

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

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

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

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

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

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

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

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

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

وماذا الان؟

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

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

وأهم درس هنا هو: بمجرد أن تبدأ الاختبار ، لا تتوقف. بعد كل تكرار لعملية الاختبار ، ستتعلم شيئًا جديدًا من موقع الويب الخاص بك ومن زوار موقعك.

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

صورة مميزة من Steve Halama على Unsplash.