ملاحظات UX في الحالات الفارغة

1) ما هي الدول الفارغة ولماذا هي مطلوبة

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

• شرح «لماذا هو فارغ هنا» ؛
• وبيان قيمة الباب ؛
• اقترح خطوة تالية واضحة (أو أكثر للاختيار من بينها)
• تقليل القلق ومنع الاستمالة.

حالة فارغة جيدة = سياق + فائدة + عمل.

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

1. لأول مرة فارغة لم يقم المستخدم بإنشاء/تكوين أي شيء بعد.
2. Zero Search/Filter: لم يعط الاستعلام أي نتائج.
3. الفراغ المؤقت: يتم تحميل البيانات أو تشغيل قائمة الانتظار.
4. التقييد/الحق: عدم الوصول، وعدم كفاية مستوى التحقق.
5. مسح المستخدم: مسح سلة المهملات/التاريخ.
6. مشكلة فنية: فشل الشبكة/الخدمة، إعادة الدرج.

3) مبادئ التصميم

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

4) إطار حالة فارغ (نموذج)

العنوان (اختياري، سطر 1) - قيمة المطالبة أو السبب.
النص (1-2 جملة) - «لماذا فارغ» + «ما التالي».
CTA الأولية هي الإجراء المستهدف الرئيسي.
ثانوي ACS/link - help/rules/document.
البصرية (اختيارية) - التوضيح السهل لـ 24-96 px، لا تحميل زائد.

5) أنماط مكتوبة

5. 1 على متن الطائرة/الصفر الأول

الهدف: القيام بأول عمل ناجح.
النص: «لمشاهدة التوصيات الشخصية، املأ ملفًا شخصيًا وحدد الخيوط».
CTA: ملء الملف الشخصي/تحديد الخيوط.
نصيحة: أضف مؤشرًا دقيقًا للقوة/الوقت: «سيستغرق الأمر دقيقة ~ 1».

5. 2 بحث/مرشحات = نتيجة صفرية

الغرض: المساعدة في تعديل الطلب.

النص: «لا شيء موجود على «بلاك جاك الحي. "جرب" بلاك جاك "أو قم بإزالة مرشح" المزود: X "

CTA: «إعادة تعيين المرشحات» الثانوية: «الدليل المفتوح».

5. 3 المدفوعات/المحفظة فارغة

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

5. 4 التحقق/الوصول

الغرض: شرح التقييد وطريق الانسحاب بشفافية.

النص: "هذا القسم متاح بعد تأكيد الهوية. عادة ما يستغرق ما يصل إلى 2 دقائق "

CTA: «احصل على التحقق» ثانوي: «لماذا هو ضروري ؟»

5. 5 بيانات المرور العابر/الفراغ المؤقت

الهدف: تقليل القلق في الانتظار.

النص: "جمع بياناتك. هذا عادة ما يستغرق ما يصل إلى 30 ثانية. يمكنك ترك صفحة - سنبلغك عندما يكون كل شيء جاهزًا"

CTA: ثانوي «مفهوم»: «ماذا سيحدث بعد ذلك ؟»

5. 6 بعد التنظيف/الإزالة

الهدف هو تأكيد الإجراء واقتراح الخطوة التالية.

النص: "التاريخ مسح. وستظهر معاملات جديدة بعد إعادة التعبئة التالية"

CTA: «Top Up».

5. 7 خطأ/إعادة

الهدف: مسار واضح للتعافي.

النص: "فشل في تحميل البيانات. تحقق من شبكتك أو حاول مرة أخرى"

CTA: «كرر» ثانوي: «حالة النظام».

6) Microtexts: قوالب جاهزة

• "ستظهر ألعاب مختارة هنا عند إضافة اللعبة الأولى. إضافة إلى مفضل

• "لم يتم العثور على شيء لـ "{استعلام}" صقل الطلب أو إعادة ضبط المرشحات. [إعادة تعيين المرشحات]"

• "ليس لديك أي طرق محفوظة حتى الآن. أضف بطاقة أو محفظة لتسريع مدفوعاتك. [تضاف الطريقة]"

• "الميزة غير متوفرة بدون تأكيد العمر. سيستغرق ~ 2 دقائق [تأكيد العمر] [لماذا ؟]"

• "نحن نحسب الإحصائيات خلال الـ 24 ساعة الماضية... هذا عادة ما يصل إلى 30 ثانية. سنعرض عليك إشعارًا عند الانتهاء"

• الخدمة غير متوفرة نحن بالفعل نقوم بالإصلاح. من فضلك حاول لاحقًا أو تحقق من الحالة. [تكرار] [حالة النظام]"

7) اللغة البصرية والرسوم التوضيحية

استخدم الرسوم التوضيحية أحادية اللون/ثنائية النغمة لتجنب الجدال مع CTA.
الأبعاد والفواصل - مثل بطاقة المحتوى (الاتساق المرئي).
لا تصور مشاهد فكاهية في سيناريوهات مرهقة (الدفع/الأمان).

8) التوطين والتوافر

ضع مخزونًا لطول الخطوط (DE/TR أطول).
ترجمة الأشكال الرقمية، العملة، التواريخ محليا.
لقراء الشاشة: الدور = «الحالة»، aria-live = «مهذب/حازم» للديناميكيات.
لا تضع المعنى فقط في الصورة: مكرر بالنص.
تحقق من إمكانية قراءة 320 بكسل وتباين WCAG.

9) المقاييس والتجارب

• CTR على CTA الرئيسية الفارغة ؛
• والتحول إلى «النجاح الأول» (حدث تفعيل) ؛
• حان الوقت للعمل الأول
• وتواتر العودة إلى الشاشة دون إحراز تقدم ؛
• النسبة المئوية لنتائج البحث الصفرية
• تدعو إلى دعم السيناريوهات.

• ورأس محدد مقابل رأس مشترك ؛
• فعل CTA ضد محايد ؛
• إضافة تقدير الوقت
• ووجود اتفاقيه ثانويه (FAQ) وترتيب الأزرار ؛
• رسم توضيحي مقابل أيقونة مقابل بدون مرئي.

10) الأنماط المضادة

«هنا فارغ» بدون تفسير أو خطوة.
نكات في خطوات حاسمة (الدفع والأمن).
واحد تعلم المزيد CTA بدون سياق.

الامتياز السلبي: "يجب إضافته. "اكتب بنشاط: "أضف..."

الفقرات الطويلة: 1-2 جملة كحد أقصى.
العنصر المساعد بدلاً من التسمية في الأشكال - يؤدي إلى تفاقم A11y والفهم.
قيود خفية («فورية»، على الرغم من أن التأخير ممكن).

11) القائمة المرجعية السابقة للإفراج

• من الواضح لماذا هو فارغ ؟
• هل هناك قيمة للقسم في جملة واحدة ؟
• هل هناك CTA رئيسية واحدة، وإذا لزم الأمر، ثانوية ؟
• هل النص قصير (≤ 140 حرفًا) ومحدد ؟
• تقدير الوقت/الجهد الإضافي إذا كان ذلك مناسبا ؟
• نغمة تطابق النص (هادئ/داعم) ؟
• التوطين والتحقق A11y (سمات الأريا، التباين) ؟
• الصورة لا تهيمن على CTA ؟

12) قبل/بعد الأمثلة

كتالوج الألعاب (الصفر الأول)

قبل: «لا يوجد شيء هنا بعد»

بعد: "اجمع الشريط الخاص بك. اختر 3 أنواع مفضلة - لنبدأ في التوصية. [اختر الأنواع]"

البحث الصفري

قبل: «لم يتم العثور على شيء»

بعد: "بواسطة "الروليت عالي الحد" لا توجد نتائج. قم بإزالة مرشح "الحد العالي" أو جرب "الروليت. «[إعادة تعيين المرشحات]»

المدفوعات

قبل: «لا طرق دفع»

بعد: "احفظ بطاقتك أو محفظتك - ستصبح التجديد والسحب أسرع. [تضاف الطريقة] [الرسوم والشروط]"

التحقق

قبل: «لا وصول»

بعد: "القسم متاح بعد تأكيد الهوية. يستغرق ~ 2 دقائق [احصل على التحقق] [لماذا يهم]"

13) تضمين في نظام التصميم

• «العنوان» (سلسلة، اختياري)
• «الجسم» (جمل قصيرة من 1 إلى 2)
• 'primaryAction {label, onClick}'
• 'SecondaryAction {label, href/onClick}'
• «أيقونة/توضيح» (اختياري)

قم بتخزين النصوص في ملفات i18n بجوار المكون، واحتفظ بالمفاتيح والأوصاف، واتصل بخريطة النغمة (النغمة والمعجم للمواقف).

14) منشئ سريع (نسخ واستخدام)

• العنوان: «ابدأ بالخطوة الأولى»
• النص: «ستكون هناك توصيات هنا بمجرد اختيار المصالح».
• CTA: «حدد الخيوط»
• ثانوي: «كيف يعمل ؟»

• النص: "لم يتم العثور على شيء بواسطة "{استفسار}" أعد تعيين المرشحات أو صقل الاستعلام"
• CTA: «إعادة تعيين المرشحات»
• ثانوي: «فهرس»

• النص: "ميزة متاحة بعد تأكيد العمر. عادة ما تصل إلى 2 دقائق "
• CTA: 'تأكيد العمر'
• ثانوي: «لماذا هو ضروري ؟»

• النص: "نجمع البيانات لهذا اليوم. هذا عادة ما يصل إلى 30 ثانية. سنخبرك عندما يتم ذلك"
• CTA: «جيد»

ورقة الغش النهائية

السياق + القيمة + العمل - في «كومة» واحدة.
CTA رئيسي واحد بدون منافسة في الوزن البصري.
قصير ومحدد: 1-2 جملة.
دائمًا ما يكون المخرج من المأزق: لا توجد شاشات مسدودة.
التوطين A11y على مستوى المكونات.