اختبار واجهة المستخدم: دليل عملي للأزرار والنماذج والتنقل

ابدأ من مهام المستخدم

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

1. الأزرار والروابط

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

2. النماذج والتحقق

• اختبر الحقول المطلوبة والاختيارية والقيم غير الصحيحة والحدود.
• اربط كل حقل بتسمية واضحة واجعل رسالة الخطأ تحدد طريقة التصحيح.
• تحقق من بقاء المدخلات الصحيحة عند ظهور خطأ ومن ظهور تأكيد النجاح.
• لا تعتمد على التحقق في المتصفح وحده عندما تُرسل البيانات إلى الخادم.

3. التنقل بلوحة المفاتيح

استخدم Tab وShift+Tab وEnter وSpace وEscape حسب نوع العنصر. راقب ترتيب التركيز ووضوح مؤشره وإمكانية إغلاق القوائم والعودة إلى العنصر المناسب.

4. الحالات والحواف

• اختبر الحالات الفارغة والتحميل والنجاح والفشل وانقطاع الاتصال.
• جرّب النصوص الطويلة وتكبير الخط واللغات المختلفة.
• تأكد من عدم قص المحتوى أو اختفائه عند ظهور التنبيهات.
• اختبر عرضًا ضيقًا ومتصفحًا آخر إن أمكن.

5. سجّل العيوب بوضوح

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

قائمة تحقق

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

أدلة مرتبطة

راجع اختبار جودة الموقع على الهاتف وقائمة تدقيق جودة الموقع لتغطية التجاوب وإمكانية الوصول.