في هذا المقال، ستجدون تطبيقات عملية لكتابة وتصميم الحالات الفارغة (Empty States) وتحسين هذا المكون، أحد أهم مكونات واجهة الاستخدام UI. مع أن ما يُقدّر بنسبة 2-5% فقط من المستخدمين يواجهونها؛ إلا أن الصفحات الفارغة المصممة جيداً تُحسّن سهولة الاستخدام، وتُعزّز هوية العلامة التجارية، وتُنشئ روابط عاطفية مع المستخدمين، لذا من الخطأ إهمالها.
ما هي الحالات الفارغة في تجربة المستخدم؟
الحالات الفارغة هي شاشات تظهر للمستخدم عندما لا يكون هناك محتوى لعرضه في ذلك الجزء من واجهة المستخدم (UI). بعبارة أخرى، هي الواجهة التي يراها المستخدم لأول مرة قبل إضافة أي بيانات أو عندما يقوم بحذف كل المحتوى الموجود.
إذاً الحالة الفارغة = لا يوجد محتوى لعرضه داخل مكوّن أو صفحة في الواجهة. أهم أمثلتها:
- قائمة مفضّلة بدون أي منتج مضاف بعد.
- سلة مشتريات قبل أن يضيف المستخدم شيئاً.
- لم يتم العثور على نتائج: عندما لا تُظهر فلاتر المستخدم أو خانة البحث أي بيانات.
- الاستخدام لأول مرة: عندما يكون المستخدمون جدداً ولا توجد بيانات لديهم بعد.
- حذف المستخدم للبيانات: عندما يحذف المستخدمون أو يُكملون أو يُزيلون جميع العناصر من قائمة.
- عندما يكون المحتوى مقيداً بخطة اشتراك أعلى.
أهمية تصميم الحالات الفارغة في تجربة المستخدم
هذه الحالات ضرورية لأنها تمنع ظهور “فراغ” أو “شاشة بيضاء” غير مفهومة للمستخدم. مهمّة الحالة الفارغة ليست أن تقول فقط “لا يوجد شيء هنا”، بل أن:
- تفسّر للمستخدم لماذا لا يوجد محتوى (هل هو جديد؟ خطأ؟ لا توجد نتائج؟).
- تقترح عليه الخطوة التالية (زر لإضافة منتج، تعديل الفلتر، تصفح الفئات…إلخ).
- أحيانًا تحفّزه (نبرة لطيفة، مثال صغير، أو اقتراحات جاهزة).
وهي بمثابة فرصة لـ:
- تعزيز شخصية العلامة التجارية باستخدام نبرة صوت لطيفة.
- تحسين تجربة المستخدم.
- بناء الثقة والموثوقية في العلامة.
- تخفيف الإحباط الناتج عن عدم وجود محتوى، مما يزيد التفاعل.
الشكل النموذجي لتصميم الحالات الفارغة في المواقع والتطبيقات
يتضمن تصميم الحالة الفارغة المنظم جيداً عادةً ما يلي:
- عنصر مرئي: صورة أو أيقونة تلفت الانتباه عن المساحة الفارغة، وتعزز الرسالة بصرياً (بحيث أيقونة تدل على الفراغ).
- العنوان: رسالة قصيرة توضح حالة النظام (مثل: “لا توجد بطاقات محفوظة”).
- الوصف: فقرة قصيرة:
- تشرح سبب فراغ الشاشة.
- تطمئن المستخدمين بشأن ما يجب أن يكون موجوداً هنا.
- تقترح الخطوات التالية.
- دعوة إلى اتخاذ إجراء: دعوة لاتخاذ إجراء (CTA) لتوجيه المستخدمين نحو ملء المساحة أو استكشاف بدائل لما يريدونه.
دراسة كتابة وتصميم الحالات الفارغة في بعض المتاجر والمواقع العربية
الحالة 1: تطبيق العجي للتسوق (AlAji)
تطبيق العجي للأدوات المنزلية هو تطبيق إلكتروني فيه كافة المواد المنزلية الغذائية والأدوات الخاصة بالمطبخ، كما هناك قسم خاص بألعاب الأطفال.
مكان الدراسة: صفحة سلة التسوق + صفحة المفضلة + شريط البحث
نلاحظ أن مكون الحالة الفارغة في الصفحة الخاصة بـ “سلة التسوق” مُطبّق بشكل مميز نوعاً ما، إلا أنه من الواضح أنّ صفحة “المفضّلة” ليست مميزة عندما تكون فارغة!
لاحظ الفرق:
ومع ذلك، هناك خطأ واحد بسيط في تصميم الحالات الفارغة في صفحة سلة التسوق الفارغة: النص المكتوب خاطئ. فيجب أن يُكتب “قائمة التسوق فارغة” وليس “قائمة المفضلة فارغة”.
لاحظ أن صفحة المفضلة فارغة تماماً، وهذا إجرام بحق الحالات الفارغة في كتابة تجربة المستخدم. لا عنوان، لا عنصر حركي أو حتى ثابت، لا نصّ، ولا زر مباشر لاتخاذ إجراء. فقط علامة الـ (+) في الأعلى، والتي قد لا ينتبه المستخدم لها، أو ربما لا يفهم معناها (أضف إلى قائمة المفضلة).
وأما صفحة نتائج البحث عن مُنتج ليس متوفر، ففيها فقط عنصر حركي يشير إلى سلة فارغة. لا عنوان، لا نص، لا زر. لا يمكن للمستخدم إلا أن يتصرف بنفسه ويختار وجهته من القائمة في الأسفل، إذا تذكر أن يختار.
بالنسبة لتحسين سلة التسوق، يكفي أن نصحح “قائمة المفضلة فارغة” لتصبح قائمة التسوق فارغة”.
المهم، كيف يجب أن تُصبح صفحة “المفضلة”؟ إليك التحسينات المقترحة:
- وضع عنصر تفاعلي سواء حركي أو عادي ثابت.
- ثم نضع عنوان “قائمة المفضلة فارغة!”.
- ثم نصّ “أضف بعض المنتجات المفضلة لديك والتي تطلبها دائماً، أو أضف بعض المنتجات التي تريد تذكّرها.”
- الزر: “أضف منتجات مفضلة”.
أما في تصميم الحالات الفارغة في صفحة نتائج البحث، فيمكن تحسينها كالآتي:
- الإبقاء على العنصر الحركي لأنه معبر ولطيف.
- عنوان: عذراً، لم نعثر على طلبك
- نصّ: تأكد من صحّة كتابة المنتج الذي تريده. تصفّح منتجاتنا الأخرى وأضف مستلزماتك،، أو استمتع بأقوى العروض.
- زر رئيسي: تصفح منتجات أخرى
- زر ثانوي: تصفح العروض
الحالة 2: منصّة (كوفي Cofe) للقهوة
منصة خاصة ببيع مستلزمات القهوة من ماكينات ومطاحن وأدوات تحضير القهوة، كما تبيع أنواع مميزة وفاخرة من القهوة والشاي أيضاً.
مكان الدراسة: سلة التسوق + شريط البحث
المحتوى الحالي في سلة التسوق:
- العنوان: السلة فارغة
- النص: لا توجد منتجات في السلة (الرسالة تكرار لنفس المعلومة (“السلة فارغة” + “لا توجد منتجات في السلة”) بدون قيمة إضافية (لماذا لا يوجد أو ماذا أفعل؟).
- الزر: تسوق الآن (جيد، لكن عمومي جداً، لا يقول لي أين سأذهب ولا ما الذي أبدأ به (قهوة؟ معدات؟ اشتراك؟)).
- باقي الصفحة: دعوة لتحميل تطبيق المنصة (وهي فكرة جيدة، كي لا تبقَ الصفحة فارغة من نصفها السفلي).
التحسينات المقترحة:
- العنوان: سلتك الآن فارغة ☕
- النصّ: أضف قهوتك المفضّلة أو جرّب العروض الجاهزة.
- زر أساسي: تصفّح القهوة
- زر ثانوي: عرض العروض الجاهزة
المحتوى الحالي في شريط البحث عند البحث عن منتج غير موجود:
هنا لدينا خلط بين حالتين، الحالة الفارغة واقتراحات البحث (Search Assist).
نلاحظ أنه عندما بحثنا عن مُنتج غير موجود، ظهرت الحالة الفارغة بيّنت أن المنتج غير متوفر، لكنها بلا شك تحتاج إلى التحسين. لكن لو جربنا أيضاً أن ننقر على شريط البحث، يظهر لنا تنبيه أو توجيه ضمن نافذة منبثقة يخبرنا أننا ربما أخطأنا في كتابة المنتج الذي نريد.
الحالة الفارغة:
حالة التوجيه:
هنا قد تختلط الأمور على المستخدم:
بالنسبة لحالة التنبيه والتوجيه، فبينما يحاول التطبيق أن يوجّه المستخدم لتصحيح كتابته أو تجريب كلمة أخرى، تظهر عدة أخطاء؛ والخطأ الأول هو إرهاب المستخدم بعنصر “المفاجأة”، عدا عن كون العنوان مكتوب بشكل خاطئ إملائياً، حيث يجب أن يُكتب “يا للمفاجأة” لا “يا المفاجئة”. أما الخطأ الثاني فهو فكرة كتابة اقتراحات البحث بهذه الطريقة “عنوان + نص”، حيث شخصياً، اختلطت علينا الأمور في البداية، نحن الخبراء، فكيف بالنسبة للمستخدم؟
فكرة اقتراحات البحث من الأفضل أن تكون سهلة وبسيطة وتظهر للمستخدم على شكل قائمة اقتراحات (Dropdown/Panel) مرتبطة مباشرة بمربع البحث. وبجميع الأحوال، لا ينبغي أن نجعل المستخدم يشعر وكأنه أخطأ. كما أن النص “لم نتمكن من العثور على أي شيء يتوافق مع بحثك. تحقق من إملائك أو جرب كلمة أخرى” محبط جداً. يُقضّل ألا نحبط المستخدم بهذه الطريقة. يجب أن نأسف لعدم قدرته على إيجاد طلبه، ونحفزّه للإكمال.
أما بالنسبة للحالة الفارغة، فتوضح للمستخدم أن المنتج غير متوفر وتطلب منه استخدام الفلاتر بشكل صحيح! ثم زر “تسوق الآن” الاعتيادي. أولاً، صيغة العنوان مزعجة ولا تحتوي تعاطفاً مع المستخدم. ثانياً، قد لا يفهم المستخدم ماذا يعني الرجاء استخدام الفلاتر بشكل صحيح؟ هل هناك طُرُق لاستخدام فلتر البحث؟
اقرأ أيضاً: أهمية التعاطف في منهج التصميم المتمحور حول الإنسان
التحسينات المقترحة لتصميم الحالات الفارغة في هذه الصفحة:
- العنوان: لم تجد طلبك؟
- النص: تأكد من كتابة الطلب بشكل صحيح أو حاول استخدام كلمات أخرى. اكتشف أنواع القهوة أو تمتع بأحدث عروضنا.
- زر رئيسي: اكتشف أنواع القهوة
- زر ثانوي: تصفح العروض
الحالة 3: مطعم برجرايز (Burgrize) للوجبات السريعة
برجرايز سلسلة من 4 مطاعم متخصصة بتقديم وجبات اللحوم والبرغر والصوصات والبطاطا، يعمل بنظام المطابخ السحابية.
مكان الدراسة: صفحة تأكيد الطلب
المحتوى الحالي في الصفحة:
- عنوان: تأكيد طلبك – ملخص الطلب
- نصّ الملخص: لا توجد منتجات في السلة.
- نص آخر تحت خطوة إدخال كود الخصم: السلة فارغة! من فضلك، أضف منتجات إلى السلة من المنيو قبل تأكيد الطلب.
لكن في نفس الوقت:
- يوجد نموذج إدخال بيانات (الاسم، الهاتف، العنوان…).
- يوجد زر إرسال الطلب عبر الواتساب متاح حتى مع سلة فارغة، وهذا يفتح احتمال أن يرسل المستخدم طلباً ناقصاً أو رسالة غير مفهومة لخدمة العملاء.
يعني المستخدم يرى تحذيراً بأن السلة فارغة، لكن في نفس الوقت يرى نموذجاً كاملاً وزراً جاهزاً للإرسال. وهذا يخلق مشكلة جوهرية، حيث أن هذه حالة فارغة ملخبطة بين حالتين: من جهة تقول النصوص “السلة فارغة”، ومن جهة أخرى تدفعك لإكمال الطلب وكأن لديك سلة ممتلئة! وهنا المستخدم يمكن أن يشعر بالحيرة: هل أرجع للمنيو؟ أم أملأ بياناتي وأرسل طلب بدون منتجات كي يتم تسجيلها؟
التحسينات المقترحة:
عند كون السلة فارغة يجب:
- إلغاء البوكس الخاص بالخصم (ولو كان هناك خصم فيُضاف البوكس الخاص به بعد بوكس ملء البيانات).
- إلغاء قسم ملء البيانات.
- إلغاء زر “تأكيد الطلب” و”إرسال الطلب”. أو ممكن جعله يظهر بوضع غير مفعّل مع نص توضيحي صغير مثل: “لا يمكنك إرسال الطلب قبل إضافة وجبات إلى السلة”.
وبدلاً من ذلك:
- عنوان لطيف مميز”لم تختر أي وجبة بعد 🍔”
- نص قصير تحفيزي: ابدأ من المنيو، ثم عُد لتأكيد طلبك.
- زر أساسي واضح: عرض المنيو
- ممكن زر ثانوي صغير: “أشهر الطلبات” لبدء طلب سريع.
وثم بعد أن يختار المستخدم وجباته، يأخذه زر تأكيد الطلب إلى صفحة يمكن فيها وضع:
- العنوان: تأكيد طلبك
- النص: من فضلك، أدخل بياناتك لتأكيد طلبك
- البيانات (كما هي موجودة في الصفحة الحالية)
- زر إرسال الطلب.
- وفي حال وجود كود الخصم يُمكن أن يُضاف في قسم البيانات.
