محمود أبوالحسن

مطور ويب شامل

تصميم الرسومات

مطور ووردبريس

مطور لارافيل

مصمم باستخدام فيغما

مستقل

محمود أبوالحسن
محمود أبوالحسن

مطور ويب شامل

تصميم الرسومات

مطور ووردبريس

مطور لارافيل

مصمم باستخدام فيغما

مستقل

أفكار وتجارب تستحق المشاركة

تصميم حالات الفراغ والخطأ والتحميل

1 دقيقة قراءة تقريبًا
ابدأ القراءة
تصميم حالات الفراغ والخطأ والتحميل

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

الفكرة الأساسية

ميّز بين عدم وجود بيانات أصلًا وعدم وجود نتائج للبحث وفشل تحميل البيانات. لكل حالة تفسير وإجراء مختلف، ولا ينبغي استخدام رسالة عامة واحدة للجميع.

خطوات عملية

  1. اكتب رسالة قصيرة تصف الحالة دون لوم.
  2. وفّر إجراءً ملائمًا مثل إنشاء أول عنصر أو مسح البحث أو إعادة المحاولة.
  3. احتفظ بالمدخلات عند الفشل عندما يكون ذلك آمنًا.

تصميم الواجهات وتجربة المستخدم — صورة توضيحية

مثال تطبيقي

مدونة بلا نتائج لعبارة معينة يمكن أن تعرض اقتراحًا بتغيير الكلمات. أما فشل الخادم فيحتاج إعادة محاولة، لا رسالة لا توجد مقالات.

خطأ شائع ينبغي تجنبه

مؤشر تحميل بلا نهاية يترك المستخدم عالقًا. ضع مهلة منطقية ومسار تعافٍ، وأعلن تغير الحالة للتقنيات المساعدة.

للتوسع في الموضوع

التوثيق والمرجع الرسمي

صور توضيحية: الغلاف من Unsplash، الصورة الداخلية من Unsplash. ترخيص الاستخدام.

شارك المقال

شارك هذه الفكرة مع من تهمّه.

لنتحدث عن فكرتك القادمة

لديك سؤال أو فكرة مشروع؟ يسعدني التواصل معك.

اتصل بنا
Dark Mode EN English Buy Me A Coffee Buy Me A Coffee