تصميم واجهات الحالات الفارغة: أرشد المستخدم إلى الخطوة التالية عند غياب المحتوى
إطار عملي لتصميم حالات الاستخدام لأول مرة، وعدم ظهور نتائج، ومسح البيانات، والأخطاء، مع نصوص مفيدة وإجراءات واضحة ومعالجة بصرية تراعي السياق.
اللوحة الخالية ملتبسة. قد يتساءل الشخص هل التطبيق لا يزال يحمّل، أم فشل بحثه، أم عليه إضافة شيء. تسمّي الحالة الفارغة المفيدة ما يحدث وتساعده على تحديد خطوته التالية.
ابدأ بتحديد سبب غياب المحتوى. فالاستخدام الأول، وعدم وجود نتائج بحث، ومسح البيانات عمدًا، وخطأ النظام تتطلب رسائل وإجراءات مختلفة. الأمثلة هنا تمارين تصميم افتراضية، وليست دراسات حالة لمنتجات أو ادعاءات بشأن الأداء.
أهم النقاط
- صنّف سبب غياب المحتوى قبل اختيار النص أو الرسم أو الإجراء.
- ميّز بين معلومات التحميل والفشل وبين النتيجة الفارغة المؤكدة.
- اكتب عنوانًا محددًا، وشرحًا موجزًا عند الحاجة، وخطوة تالية ذات صلة.
- راجع الحالة في سياقها، بما في ذلك إمكانية الوصول والتخطيطات الضيقة ومسارات الاستعادة.
1. شخّص سبب خلو المساحة
تعامل مع الحالة الفارغة بوصفها بيانًا عن حالة المنتج، لا فرصة للزخرفة. اسأل عمّا حدث قبل ظهور الشاشة مباشرة، وما الذي يعرفه النظام، وهل يستطيع الشخص تغيير الوضع. تصف NN/g الحالات الفارغة بأنها فرص لإبلاغ المستخدم بالحالة ودعم التعلم وفتح مسارات إلى المهام الأساسية. وتعتمد هذه الفرص أولًا على تحديد الحالة بدقة.
وعلى وجه الخصوص، لا تعرض «لا توجد عناصر» بينما الطلب لا يزال قيد التنفيذ. أبقِ مؤشر التحميل أو الهيكل المؤقت ظاهرًا حتى تُعرف النتيجة. وإذا فشل الطلب، فاشرح الفشل وخيار الاستعادة. وإذا نجح من دون عناصر، فاذكر أنه لا يوجد محتوى مطابق. يمنع هذا التمييز الخلط بين تأخير مؤقت أو مشكلة في النظام ونتيجة حقيقية.
| الحالة | ما تعنيه | استجابة مفيدة |
|---|---|---|
| الاستخدام الأول | الميزة جاهزة، لكن الشخص لم يضف أو ينشئ شيئًا بعد. | اشرح ما الذي يظهر هنا، وقدّم طريقة مباشرة للإنشاء أو الإضافة أو الاستكشاف. |
| لا توجد نتائج | اكتمل البحث أو التصفية أو نطاق التاريخ بنجاح من دون تطابقات. | أكد أن المعايير لم تُنتج نتائج مطابقة؛ واقترح تعديلًا مناسبًا أو مسح عامل تصفية. |
| البيانات الممسوحة | أكمل الشخص العناصر التي تظهر هنا عادةً أو أزالها. | أقرّ بالإكمال أو بالنتيجة الفارغة من دون الإيحاء بوجود خطأ؛ وقدّم مهمة أخرى إذا كانت مفيدة. |
| خطأ | تعذر على النظام استرجاع المحتوى المتوقع أو عرضه. | اذكر بوضوح ما الذي فشل وقدّم إجراءً للاستعادة، مثل إعادة المحاولة. |
| جارٍ التحميل | لم يحدد النظام بعد ما إذا كان المحتوى موجودًا. | اعرض التقدم أو واجهة تحميل؛ ولا تعلن نتيجة فارغة قبل الأوان. |
2. اكتب نصًا يطابق السبب
استخدم عنوانًا لتسمية الحالة ونصًا مساعدًا لشرح معناها أو كيفية المتابعة. اجعل العنوان سهل المسح البصري. أضف جملة فقط عندما تجيب عن سؤال حقيقي. توصي إرشادات الكتابة من Apple بخطوات تالية واضحة على الشاشات الخالية، وتسميات تتمحور حول الإجراء، ورسائل خطأ مباشرة تشرح الحل. تجنب الطرافة التي تحجب المعنى، والعناوين المبهمة مثل «لا شيء هنا»، والنص الذي يلوم الشخص.
فمثلًا، قد تقول شاشة افتراضية للعناصر المحفوظة في الاستخدام الأول: «ستظهر أدلتك المحفوظة هنا»، ثم «احفظ دليلًا لتعود إليه لاحقًا»، مع زر «تصفح الأدلة». وقد تقول قائمة مهام مكتملة: «أنجزت كل شيء» وتعرض «عرض المهام المكتملة». يصف المثالان واقعين مختلفين: الأول يعلّم كيفية ملء الميزة، والثاني يؤكد نتيجة ناجحة.
عند نجاح بحث بلا تطابقات، قد تقول رسالة افتراضية: «لا توجد مشاريع تطابق ’orchid‘»، وتقترح «جرّب عبارة أوسع أو امسح عوامل التصفية». احتفظ بعبارة البحث واجعل تغييرات التصفية قابلة للتراجع حيثما أمكن. وعند فشل الشبكة، اكتب «تعذر تحميل المشاريع» مع «إعادة المحاولة». تجنب الادعاء بعدم وجود مشاريع عندما لم يتمكن النظام من التحقق.
- سمّ العنصر أو المعايير ذات الصلة كي تكون الرسالة مفهومة خارج سياقها.
- استخدم فعلًا على الزر، مثل «إنشاء مشروع» أو «مسح عوامل التصفية» أو «إعادة المحاولة».
- ضع التعليمات بجوار المحتوى المتأثر، واستخدم النص إلى جانب اللون أو الصور.
- تجنب «عذرًا» واللوم والرموز التقنية إلا إذا احتاجها الناس لحل المشكلة.
3. اجعل الخطوة التالية مفيدة، لا مفروضة تلقائيًا
قدّم إجراءً عندما يستطيع الشخص تغيير الوضع أو مواصلة مهمته بصورة معقولة. يفيد الاستخدام الأول غالبًا من إجراء إنشاء أو إضافة؛ وقد يفيد عدم وجود نتائج من مسح قيد معين؛ وقد يتيح الخطأ إعادة المحاولة. أما صندوق وارد خالٍ أو تمرين مكتمل فقد لا يحتاج إلى أي إجراء. لا تفرض زرًا على كل حالة لمجرد أن تبدو اللوحة تفاعلية.
اجعل الاستعادة متناسبة مع المشكلة. غالبًا ما يحتاج فشل التحديث إلى شرح ضمن الواجهة وإعادة محاولة، لا تنبيه يحجب العمل. توصي Apple بأن تتناسب التغذية الراجعة مع أهمية المعلومات، وأن تقتصر التنبيهات على الحالات الحرجة التي يمكن اتخاذ إجراء بشأنها. وفي البحث، احتفظ بعمل الشخص واقترح تعديلات معقولة بدل تغيير عبارة البحث بصمت. وتقترح Material Design أيضًا محتوى تمهيديًا أو محتوى تعليميًا موجزًا أو أفضل تطابقات مميزة بوضوح بوصفها بدائل عندما تفيد حقًا.
استخدم الرسم فقط إذا أضاف سياقًا أو دفئًا أو سهّل التعرف إلى الحالة. يجب ألا ينافس الرسالة أو يجعل الناس يظنون أن الصورة الزخرفية تفاعلية. قد يكفي رمز بسيط لنتيجة تصفية مضغوطة؛ وقد تستفيد مساحة عمل في الاستخدام الأول من مثال صغير لنوع المحتوى الذي ستحتويه. وإذا أدرجت محتوى تمهيديًا، فاجعله سهل التمييز والإزالة.
- اختر إجراءً أساسيًا واحدًا يعالج السبب مباشرة.
- أضف مسار مساعدة ثانويًا فقط إذا أجاب عن سؤال متابعة محتمل.
- استخدم رسالة إكمال هادئة عندما تكون النتيجة الفارغة خبرًا جيدًا.
- تأكد من أن الإجراء مفهوم لمستخدمي لوحة المفاتيح وقارئات الشاشة.
4. راجع الحالة كلها، لا الرسم وحده
افحص الحالة في حاويتها الفعلية: تختلف احتياجات المساحة والتسلسل البصري بين عرض أول استخدام بملء الشاشة وشريط جانبي صغير وجدول مصفّى. أبقِ الرسالة قرب المنطقة التي تصفها. تأكد من بقائها مقروءة عندما يكبر النص أو يلتف، واجعل الإجراء الأساسي سهل العثور عليه من دون الاعتماد على تمييز الألوان. اختبر الانتقالات أيضًا: من التحميل إلى الفراغ، ومن التحميل إلى الخطأ، ومن إعادة المحاولة إلى النجاح، ومن تغيير عامل التصفية إلى عودة النتائج.
تبدأ مراجعة المكتبة العملية بمسبب الحالة والاستعادة المتوقعة. سجّل لكل نمط الحالة والعنوان والشرح الاختياري والإجراء الأساسي والمسار الثانوي وما يحدث بعد الاختيار. قارن لقطات الشاشة لفهم البنية المفيدة والتسلسل البصري، ثم تحقق من سلوك المنتج في سياقه؛ فلا تخبرك الصورة الثابتة هل يمكن الاستعادة من الخطأ أو هل النتيجة فارغة حقًا. تصفح مكتبة واجهات ScreenKits للمراجع البصرية واستكشف كل الفئات للعثور على أنماط مجاورة.
- هل يستطيع الشخص معرفة هل المحتوى غائب أم لا يزال يُحمّل أم غير متاح بسبب خطأ؟
- هل تعكس الرسالة عبارة البحث الحالية أو عوامل التصفية أو الحساب أو المهمة المكتملة؟
- هل يحتفظ الإجراء بالمدخلات المفيدة ويؤدي إلى نتيجة ظاهرة؟
- هل تعمل الحالة بأحجام صغيرة ومع نصوص مترجمة أطول وتقنيات مساعدة؟
- هل يستطيع الشخص الاستعادة من خطأ أو إيجاد طريقة لتعديل بحث لم يُنتج نتائج؟
أسئلة شائعة
هل ينبغي أن تتضمن الحالة الفارغة دائمًا دعوة لاتخاذ إجراء؟
لا. أضف إجراءً عندما يساعد الشخص على إضافة محتوى أو تعديل بحث أو الاستعادة من مشكلة. وقد تكفي مهمة مكتملة أو عرض خالٍ بطبيعته رسالة تأكيد موجزة.
هل شاشة «لا توجد نتائج» حالة خطأ؟
غالبًا لا. إذا اكتمل البحث أو التصفية بنجاح، فاذكر عدم وجود تطابقات واقترح تعديلًا مفيدًا. احتفظ بلغة الخطأ لفشل النظام الذي منع تحديد النتيجة أو عرضها.
ما الذي ينبغي أن يظهر أثناء تحميل النتائج؟
استخدم واجهة تحميل أو مؤشر تقدم حتى يكتمل الطلب. ولا تعرض نتيجة فارغة إلا بعد أن يؤكد النظام أن الاستجابة الناجحة لا تحتوي على عناصر مطابقة.
