تصميم حالات التحميل
حدود زمن الاستجابة الثلاثة
يصف جاكوب نيلسن ثلاثة حدود زمنية تشكّل تجربة الانتظار. وهي تقريبية لكنها مفيدة في تحديد ما يُعرض.
نحو 0.1 ثانية
يبدو فوريًا. لا حاجة إلى ملاحظات خاصة.
نحو ثانية واحدة
يحافظ على انسياب التفكير. يُلاحظ التأخير لكن يظل المستخدم متحكمًا.
نحو 10 ثوانٍ
حد الانتباه. بعده ينصرف الناس إلى مهام أخرى، لذا اعرض التقدم وأتح الإلغاء.
تصف هذه الحدود الإدراك البشري لا عتبات دقيقة. اعتبرها دليلًا: استجب فورًا، وأظهر أن العمل جارٍ خلال ثانية، وقدّم تقدمًا فعليًا لأي مدة أطول.
اختر النمط المناسب
- الهياكل الأولية. عناصر رمادية بشكل المحتوى. تناسب تحميل الصفحات والقوائم حين يكون التخطيط معروفًا، وتهيئ توقعات المستخدم لما سيظهر.
- المؤشرات الدوارة. مؤشر متكرر للانتظارات القصيرة غير معلومة المدة، مثل تنفيذ إجراء زر. تجنبها في الانتظارات الطويلة لأنها لا تعطي إحساسًا بالتقدم.
- أشرطة التقدم. استخدمها حين تكون المدة أو كمية العمل معروفة، مثل رفع الملفات. تُظهر ما تبقى وتجعل الانتظار الطويل أقرب إلى القبول.
لا تعرض مؤشرًا للانتظارات التي تقل عن نحو ثانية؛ فالوميض القصير يشتت أكثر مما يفيد.
مهما اخترت، حافظ على الاتساق في المنتج، وأعطِ نص التحميل موضوعًا واضحًا، مثل «جارٍ تحميل الرسائل» لا «جارٍ التحميل» فقط.
يمكن للمحتوى الذي يُحمَّل على أجزاء أن يعرض كل جزء حال جاهزيته. وهذا غالبًا أفضل من حجب كل شيء حتى ينتهي أبطأ طلب، ما دام التخطيط مستقرًا.
الواجهة المتفائلة والمهلات والتخطيط
- الواجهة المتفائلة. في الإجراءات التي تنجح غالبًا، مثل الإعجاب بعنصر، حدّث الواجهة فورًا وأكّد في الخلفية. وإذا فشل الطلب فأعد الحالة السابقة واشرح السبب.
- المهلات وإعادة المحاولة. لا تنتظر إلى ما لا نهاية. بعد مدة معقولة اعرض رسالة واضحة وزر «حاول مرة أخرى»، واحتفظ بما أدخله المستخدم.
- تجنب إزاحة التخطيط. احجز مساحة للمحتوى القادم باستخدام هياكل بالحجم نفسه أو نسب أبعاد ثابتة للصور، حتى لا يقفز شيء عند وصول البيانات.
تستحق الأخطاء حالة خاصة بها. قل ما الذي فشل بلغة بسيطة، وهل بياناته آمنة، وقدّم الخطوة التالية. وزر إعادة المحاولة الذي لا يُظهر أي استجابة أسوأ من غيابه.
أعلن تغيّر الحالة
المؤشر الدوار البصري غير مرئي لمستخدمي قارئات الشاشة. علّم المنطقة التي تتحدث بالسمة <code>;aria-busy="true"</code>; ثم اجعلها false عند جاهزية المحتوى. وللنتائج التي تظهر دون إعادة تحميل الصفحة استخدم منطقة حية مهذبة مثل <code>;role="status"</code>; ليُعلن التحديث دون سحب التركيز.
اجعل الإعلانات قصيرة: «جارٍ تحميل النتائج» و«تم تحميل 12 نتيجة» تكفيان.
المصادر
- Nielsen Norman Group. Response Times: The 3 Important Limits. https://www.nngroup.com/articles/response-times-3-important-limits/
- W3C. WAI-ARIA 1.2, aria-busy and the status role. https://www.w3.org/TR/wai-aria-1.2/
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.