تصميم حالات فارغة مفيدة

01ما هي الحالة الفارغة

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

02أربعة أنواع

• أول استخدام

  لم يُضَف شيء بعد. اشرح الغرض من المكان وادعُ إلى أول إجراء.

• لا نتائج

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

• مسح أو إنجاز

  القائمة فارغة لأن العمل انتهى. يكفي تأكيد قصير.

• خطأ

  تعذّر تحميل المحتوى. اذكر ما حدث وقدّم طريقة لإعادة المحاولة.

03ماذا تضمّن والنبرة

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

أمثلة نصوص عامة:

• أول استخدام: لا توجد مشاريع بعد. أنشئ مشروعًا للبدء. [إنشاء مشروع]
• لا نتائج: لا شيء يطابق هذا البحث. جرّب كلمة أخرى أو امسح عوامل التصفية. [مسح عوامل التصفية]
• إنجاز: اكتملت كل المهام. ستظهر المهام الجديدة هنا.
• خطأ: تعذّر تحميل القائمة. تحقق من اتصالك وحاول مجددًا. [إعادة المحاولة]

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

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

04تجنّب الطرق المسدودة وحافظ على الإتاحة

• الطريق المسدود شاشة بلا إجراء. قدّم دائمًا طريقًا للأمام أو للخلف.
• الرسوم اختيارية. يعمل العنوان الواضح والزر من دونها.
• اجعل الرسالة نصًا حقيقيًا لا جزءًا من صورة، ليقرأها قارئ الشاشة.
• عند تحديث النتائج بعد البحث، فكّر في الإعلان عن الرسالة الفارغة عبر منطقة حيّة (live region).

اكتب الرسالة لتشرح وتساعد، لا لتلوم المستخدم.

راجع كل حالة فارغة عند تغيّر الميزات. فرسالة تذكر زرًا لم يعد موجودًا أسوأ من غياب الرسالة.

05المصادر

• Nielsen Norman Group. Usability Heuristics for User Interface Design (10 heuristics by Jakob Nielsen).