يمكنك ملء نموذج بعدة طرق. قد يستخدم الأشخاص النموذج الخاص بك على هواتفهم الذكية أثناء الوقوف في حافلة مزدحمة، أو مع قارئ الشاشة، أو من جهاز كمبيوتر محمول قديم. دعنا نتعرّف على كيفية التأكّد من عمل النموذج على أجهزة مختلفة وفي سياقات مختلفة.
التأكّد من أنّ النموذج يناسب مستخدمي لوحة المفاتيح
وأفضل اختبار لضمان إمكانية الوصول إلى النموذج هو ملء النموذج باستخدام لوحة المفاتيح فقط.
افتح النموذج وحاوِل التنقّل باستخدام مفتاح tab.
هل من الواضح ما حقل النموذج النشط حاليًا؟
لمساعدة المستخدمين على فهم حقل النموذج النشط،
يمكنك استخدام مؤشرات التركيز.
التجربة الآن
يمكنك استخدام مفتاح tab للانتقال إلى مصدر الإدخال.
هل يمكنك رؤية المخطط عندما يكون الإدخال نشطًا؟
هذا هو مؤشر التركيز.
يمكنك إضافة مؤشرات تركيز باستخدام الفئة الزائفة في لغة CSS :focus.
input:focus {
outline: 4px solid #222;
}
تعرف على المزيد حول تصميم مؤشرات التركيز التي يمكن الوصول إليها.
مساعدة المستخدمين على التنقّل في النموذج
هناك اختبار جيد آخر لسهولة الاستخدام وإمكانية الوصول هو التأكد من أن ترتيب علامة التبويب المنطقي يتبع ترتيب علامة التبويب المرئي. كيف يمكنك اختبار ترتيب التنقل بـ Tab؟ اضغط على مفتاح التبويب (Tab) بالكامل في النموذج. هل تلاحظ أي انتقالات غير منطقية غير منطقية؟ تأكد من تطابق طلب DOM مع الترتيب المرئي.
تعرَّف على المزيد من المعلومات حول كيفية التأكّد من اتّباع الترتيب المرئي على الصفحة لترتيب العناصر في المستند (DOM).
مساعدة المستخدمين في إكمال النموذج على الأجهزة التي تعمل باللمس
رائع! لقد تأكدت من أن النموذج يعمل مع لوحة المفاتيح. والآن، لنرَ كيف يمكنكم التأكّد من عمل هذه الميزة على الأجهزة التي تعمل باللمس مثل الهواتف الجوّالة.
افتح النموذج على جهازك الذي يعمل باللمس،
واملأ جميع الحقول ثم أرسل النموذج.
هل اضطررت إلى النقر عدة مرات لاختيار عنصر تحكّم في النموذج؟
قد تكمن المشكلة في أن مناطق النقر صغيرة جدًا.
احرص على ألا يقل
حجم هدف النقر للزر عن 48 بكسل،
وأن يكون حجم كل <input> و<select> كبيرًا بما يكفي للنقر عليه.
يمكنك أيضًا مساعدة المستخدمين في التنقل في النموذج على الأجهزة التي تعمل باللمس من خلال إضافة مسافات كافية بين عناصر التحكم في النموذج.
ضمان حصول المستخدمين على لوحة مفاتيح محسَّنة
في الوحدات السابقة، تعلّمت كيفية تفعيل لوحة مفاتيح مختلفة على الشاشة
باستخدام السمتَين type أو inputmode.
افتح
العرض التوضيحي
على هاتفك وانقر في حقل رقم الهاتف.
لاحظ أن الأرقام يتم عرضها بشكل افتراضي على لوحة المفاتيح على الشاشة،
إلى جانب أحرف أخرى قد تحتاجها لرقم الهاتف.
يمكنك استخدام type="tel" للحصول على لوحة مفاتيح على الشاشة محسَّنة لإدخال أرقام الهواتف.
استخدم هاتفًا لتجربته بنفسك،
ولمعرفة ما إذا كان بإمكانك بسهولة إدخال كل حرف لازم لملء رقم الهاتف.
إذا أردت معرفة طريقة عمل لوحة المفاتيح على الشاشة مع جهاز type آخر، يمكنك الاطّلاع على type="email" في العرض التوضيحي.
التأكّد من عدم إخفاء أزرار النموذج
تخيل أنك ملأت نموذجًا طويلاً،
وأنت مستعد لإرساله. ولكن أين يوجد زر إرسال؟
قد يكون خلف شريط أدوات المتصفح، في أسفل الشاشة.
يمكن استخدام دالة CSS env() لضمان ظهور الأزرار.
تعرَّف على كيفية التأكّد من عدم حجب واجهات مستخدم الجهاز للأزرار.
التأكّد من عمل النموذج على منصات مختلفة
جرِّب اختبار نماذجك على أكبر عدد ممكن من الأجهزة. هل لديك كمبيوتر محمول قديم؟ افتح المتصفح التلقائي عليها واختبِر النموذج. هل لدى صديقك جهاز لوحي؟ يمكنك استعارته واختبار النموذج هناك أيضًا.
هل تبدو بعض الأنماط مختلفة في متصفح واحد؟ يمكنك معرفة كيفية التأكد من أنّ الأنماط تعمل على مختلف الأنظمة الأساسية في وحدة لاحقة.
يوفّر BrowserStack حسابات اختبارية مجانية للمشاريع مفتوحة المصدر، ويقدّم BrowserStack فترةً تجريبية مجانية للاختبار على المتصفحات والأجهزة وأنظمة التشغيل المختلفة.
مساعدة المستخدمين في إكمال نماذجك في سياقات مختلفة
لا يستخدم الأشخاص متصفحات وأجهزة وأنظمة تشغيل مختلفة فحسب. يستخدم الأشخاص أيضًا نماذجك في سياقات مختلفة. ننصحك بتجربتها. هل الشمس في الخارج تشرق الآن؟ خذ هاتفك وانتقِل إلى الخارج. يعد استخدام النموذج في الضوء الساطع طريقة جيدة لاختبار ما إذا كانت نسب التباين قابلة للاستخدام.
تعرَّف على المزيد من المعلومات حول تسهيل استخدام الألوان والتباين.
التأكُّد من ضعف الاتصال في النموذج
لنفترض أنك سافرت إلى مكان ما على متن قطار. فتحت صفحة ويب على هاتفك. تتساءلون عن المدة التي يمكن أن يستغرقها تحميل موقع إلكتروني وقتًا طويلاً PII.
يمكنك محاكاة الاتصالات البطيئة وأنواع الشبكات المختلفة باستخدام WebPageTest أو DevTools.
اطّلِع على مزيد من المعلومات عن الاختبار باستخدام معدل نقل بيانات منخفض ووقت استجابة مرتفع.
مساعدة المستخدمين على استخدام النموذج أثناء التنقل
تخيل أنك تمشي إلى موعد. فجأة، يرنّ هاتفك، وتردّ على المكالمة، وفي الوقت نفسه، ستتلقّى تنبيهًا من شركة التأمين التي تتعامل معها لإكمال نموذج الطلب الذي بدأته. تفتح النموذج، وتحاول ملؤها بينما لا تزال تمشي وتتحدث.
تذكر أن الأشخاص سيستخدمون نماذجك في سياقات مختلفة عديدة. في المواقف العصيبة وأثناء القيام بأشياء أخرى أثناء التنقل. يمكنك مساعدة المستخدمين من خلال التأكد من سهولة استخدام النموذج.
جرِّب ضبط مهلة زمنية لإكمال النموذج. حاوِل محاكاة الظروف غير المثالية حيث يمكنك اختبار النموذج.
احرِص على مشاركة نتائج الاختبار
توثيق جميع الاختبارات، ومشاركة النتائج مع فريقك. سيساعد هذا في تحديد أولويات بنود العمل، للتأكد من أن الجميع في فريقك على دراية بأهم المهام.
تعرَّف على المزيد من المعلومات حول مشاركة نتائج الاختبار.
التحقق من فهمك
اختبر معلوماتك عن الاختبار عبر المنصات
هل يمكنك إظهار مؤشرات التركيز لمستخدمي لوحة المفاتيح فقط؟
:focus-visible".:focus-detected".:focus-shown".المراجِع
- WebPageTest: اختبارات أداء الموقع الإلكتروني وتحسينه
- الاختبار باستخدام معدل نقل بيانات منخفض ووقت استجابة مرتفع
- مشاركة نتائج الاختبار