اختبار الانقسام باستخدام أوراق الأنماط CSS

إن أسرع طريقة لتقسيم اختبار موقع ويب بشكل كبير هي إجراء تغييرات جريئة على ورقة الأنماط المتتالية (CSS) داخل تجربة على مستوى الموقع.

لماذا تعتبر أوراق أنماط CSS مهمة

يعد ملف CSS الرئيسي لموقع الويب نقطة مرجعية مركزية تتحكم في الأنماط والمواقف والسلوكيات الشائعة لجميع العناصر عبر كل صفحة ويب.

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

يجب إجراء اختبارات تقسيم الموقع على نطاق واسع في كل مرة

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

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

أزرار الحث على الشراء

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

حجم الخط

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

نوع الخط

مرة أخرى ، نادرًا ما يتم اختبار نمط الخط على العديد من مواقع الويب ، ويبدو أنه قد تم تحديده في مرحلة التصميم الأولي من التطوير ثم نسيانه في العديد من مواقع الويب. أنماط الخط المختلفة لها مستويات مختلفة من سهولة القراءة. أيضًا ، بعض الخطوط متاحة فقط على أجهزة معينة وبعضها يظهر بشكل سيء حقًا على أجهزة معينة بأحجام معينة بدون Font Rasterization. يمكنك استخدام مجموعة خطوط لاستخدام سلسلة من الخطوط ، بدءًا من الخطوط المفضلة لديك والعمل وصولاً إلى خطوط أبسط ، مثل Arial ، والتي تكون دائمًا على كل جهاز. يمكن تضمين الخطوط الجديدة في موقع ويب من خلال JavaScript ، أو خدمة مثل خطوط جوجل. يمكنك معرفة المزيد في هذا المنشور على TypeWolf.com في أفضل عشرة خطوط ويب لعام 2016.

نوع الخط

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

ألوان الخلفية

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

إعادة تموضع أو إخفاء العناصر

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

منصات اختبار الانقسام لملفات CSS على مستوى الموقع

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

مطلوب برنامج اختبار تقسيم خاص للحفاظ على تناسق تغييرات ملف CSS من صفحة إلى أخرى لكل مستخدم فردي ، وللأسف فإن "تجارب المحتوى" المجانية في Google Analytics لا تلبي هذه الأنواع من اختبارات الانقسام. فيما يلي بعض الأدوات التي قد ترغب في استخدامها:

• مُحسِّن مواقع الويب المرئي ( VWO ) - vwo.com - وجدنا أن هذا هو أسهل برامج اختبار الانقسام في التنفيذ. يتعامل مع جميع أنواع اختبارات الانقسام على HTML أو CSS أو JavaScript ويقوم أيضًا بإنشاء خرائط حرارية للمستخدم إذا لزم الأمر. يمكن العثور على هياكل الأسعار هنا
• Optimizely - optimizely.com - يتعامل هذا أيضًا مع جميع أنواع اختبارات التقسيم على HTML أو CSS أو JavaScript ويمكنه إجراء بعض اختبارات الانقسام المتقدمة جدًا إذا لزم الأمر. يمكن العثور على معلومات التسعير هنا

استنتاج

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

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

إذا كنت بحاجة إلى مساعدة بشأنك فلا تتردد في الاتصال بنا.