الدول الفارغة وتلميحات UX

1) لماذا هناك حاجة إلى حالات فارغة

• يفسر لماذا فارغة،
• يظهر ما يجب القيام به بعد ذلك،
• يقدم خطوة أولى آمنة،
• يقلل من القلق ويوفر وقت الدعم.

2) تصنيف الحالات الفارغة

1. لأول مرة - لم يفعل المستخدم أي شيء بعد.
2. بيانات صفرية - لم يتم إنشاء الكيانات أو كانت القائمة فارغة.
3. المرشحات/البحث (لا توجد نتائج) - استبعدت الظروف الجميع.
4. خطأ/عدم توفر مؤقت - الشبكة/الخادم، ولكن البيانات من حيث المبدأ.
5. لا توجد حقوق/قيود - منع الوصول، QAS/الدور/الحد المطلوب.
6. الصيانة - العمل المخطط له، الانتظار.

3) بنية بطاقة فارغة

أيقونة/رسم توضيحي (لا تحميل زائد ؛ ≥ AA).
عنوان من عنوان واحد: «هنا لا يزال فارغًا».

العقل/السياق: "لم تضيف بعد... "/" لم يجد المرشح أي تطابق. "

الإجراءات 1-2 (CTA): الأولية (السيناريو الرئيسي)، الثانوية (البديل).
رابط الإنقاذ (اختياري).
مستوى الصفحة: احتفظ بالملاحة والمرشحات المعتادة - لا تقلب الشاشة إلى طريق مسدود.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) النغمة والنص (كتابة إعلانات UX)

بوضوح ولطف. تجنب «خطأ 0x»....

سبب → عمل. "استثنى مرشح VIP جميع الإدخالات. هل تريد إعادة تعيين المرشح ؟

لا ذنب. لا تلوم المستخدم على الفراغ.
فكرة واحدة، جملة واحدة.
التوطين: تجنب الاستعارات الثقافية ؛ علامة مرجعية + 20-30٪ من طول النص.

5) الرسوم التوضيحية والمرئية

محايد وغير مزعج ؛ في الموضوع المظلم، زيادة خفة الرسوم التوضيحية.
لا تستخدم الرسوم التوضيحية كوسيلة وحيدة للمعنى.
والجدول ثابت ؛ لا تكسر الشبكة أو خط الأساس.

6) CTA والبدائل

CTA الأساسي هو الخطوة التالية الرئيسية (إنشاء/إيداع/اشتراك).
ثانوي - «انظر العرض التوضيحي»، «الاستيراد»، «مرشحات إعادة الضبط».
حد الاختيار: حتى 2 CTA ؛ الباقي في «المزيد».
مع المخاطر/المدفوعات - نص شفاف حول العواقب والإلغاء.

7) الحالات الفارغة حسب السيناريو

7. 1 الجولة الأولى

قائمة Hyde المرجعية من 3-5 خطوات: «أضف طريقة دفع»، «اختر مزودًا».
تخطي زر + رابط دليل.

7. 2 لا توجد بيانات

تفسير قصير لسبب فارغ + CTA إنشاء/استيراد.
تلميح: «يمكنك تحميل CSV» (رابط إلى قالب).

7. 3 مرشحات/بحث

أظهر أي مرشحات نشطة وزر «إعادة تعيين».
اقترح تطابق قريب أو استفسارات بديلة.

7. 4 خطأ/عدم توافر

"واجهنا مشكلة. حاول مرة أخرى لاحقًا" + "Retry "/" حالة النظام. "