تخط وانتقل إلى المحتوى الرئيسي

الأخطاء البصرية

ما هي الأخطاء البصرية؟

Nikola Jonic avatar
بقلم: Nikola Jonic
تم إجراء التحديث أمس

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

  • مشاكل في إطار التصميم مثل النصوص/العناصر غير المتراصة.

  • مشكلة في التصميم المتجاوب، على سبيل المثال: عنصر يظهر على جهاز محمول واحد ولكنه لا يظهر على جهاز آخر.

  • النصوص/العناصر تتداخل مع بعضها البعض دون قصد.

  • النصوص/العناصر مقطوعة.

  • أي شيء يمكن إصلاحه في ملفات HTML أو CSS.

المشاكل المتكررة

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

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

أمثلة:

  • بعض العناصر تُظهر نفس المشكلة الرسومية، مثل النصوص أو الصور التي تكون أكبر من الصناديق الخاصة بها.

  • حقول الإدخال ليست كبيرة بما يكفي لاحتواء نصوصها الافتراضية، وبالتالي لا تكون مرئية بالكامل.

  • عناصر دعائية (teasers) تتداخل مع عناصر أخرى عن غير قصد.

الترقية إلى خطأ وظيفي

بمجرد أن يمنع خطأ بصري وظيفة من العمل، يجب الإبلاغ عنه كخطأ وظيفي، حتى وإن لم تكن الوظيفة نفسها معطّلة.

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

توثيق المشاكل البصرية

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

المحتوى المتجاوب مقابل غير المتجاوب: الأخطاء البصرية المخفية

قد تحيّرك أخطاء التصميم المتجاوب عند تصنيفها بين أخطاء المحتوى والأخطاء البصرية: إنها مشاكل ناتجة عن تصميم الموقع المتجاوب.

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

— ونفقد فرصة إرسال تقرير خطأ!

مثال حالة

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

كيفية التعرّف عليها

  • ابحث عن التفاوت في تغيير حجم العناصر بين الصفحات.

  • تحقق مما إذا كان النص يصبح غير مقروء على حجم شاشتك.

  • لاحظ إذا كانت عناصر التنقل صغيرة جدًا بحيث لا يمكن النقر عليها.

  • انتبه لظهور التمرير الأفقي في بعض الصفحات دون غيرها.

اختبار متجاوب مجاني عبر الإنترنت

يمكن أن يكون Google Chrome Lighthouse (المعروف سابقًا باسم Google Mobile Friendly Test) أداة مفيدة للتأكد من أن صفحات الويب مُحسّنة للأجهزة المحمولة. تساعد هذه الأداة المختبرين في تحديد أي مشاكل بصرية في صفحات الويب من خلال تقييم عوامل قابلية الاستخدام على الأجهزة المحمولة مثل حجم الخط، وأهداف النقر، وتكوين إطار العرض (قسم SEO). إذا واجهت خطأ بصريًا، يمكن أن تساعدك هذه الأداة في تحديد ما إذا كان السبب الجذري هو استجابة الصفحة. على عكس اختبار Google Mobile-Friendly السابق، الذي كان يتم تشغيله على موقع منفصل، يجب إضافة Google Chrome Lighthouse إلى متصفح Google Chrome وتشغيله مباشرة على الموقع الجاري اختباره. تتوفر عملية التثبيت والدليل التفصيلي هنا.

هل أجاب هذا عن سؤالك؟