كيفية تصميم صفحات حالة فارغة للمواقع وتطبيقات الجوال

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

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

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

قيمة الدول الفارغة

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

الصفحات الفارغة مملة ومملة ومربكة. الدول الفارغة تقديم التوجيه لمساعدة المستخدمين على فهم ما يبحثون عنه. على الرغم من أنها صفحة فارغة يساعد السياق الإضافي.

الدول الفارغة تعطي أيضًا إحساسًا “عذوبة” مع حسابات جديدة لا تحتوي على بيانات موجودة.

فحص هذا الاختبار الذي أجراه Redditor Bambo_Ocha 20 تطبيقًا مختلفًا لتصميمات الحالة الفارغة. حدثت أنماط تصميم متنوعة باستخدام أزرار CTA ، وعينات من البيانات ، وحتى إرشادات موجزة عن البرنامج التعليمي.

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

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

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

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

عناصر الصفحة الحيوية

العنصر الأكثر أهمية في صفحة حالة فارغة هو سياق الكلام. قد يأتي هذا في شكل رسومات أو نص أو كليهما. تريد إعلام المستخدمين لماذا تكون الصفحة فارغة ونوع البيانات التي يمكن أن تكون هناك (رسائل البريد الإلكتروني ، التغريدات ، ملفات تعريف الأصدقاء ، إلخ).

على الرغم من أن النص هو وسيلة الاتصال الأساسية على الويب ، لا يمكنك التغاضي عن قيمة الرسومات والرموز.

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

جانب آخر مهم من تصميم الدولة الفارغة هو دعوة إلى زر العمل. يتم تصميم هذا عادةً كزر واحد على الرغم من أن الارتباطات التشعبية تعمل بشكل جيد أيضًا.

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

دروببوإكس لديه تصميم رائع مع اثنين من أزرار CTA. كلما لم يكن لدى مستخدم Dropbox مجلدات ، يمكنه إما إنشاء مجلد جديد أو إضافة مجلد عينة إلى الصفحة.

تشجيع نشاط المستخدم

تعتبر أزرار الاتصال إلى العناصر هي العناصر النشطة ولكن تذكر أن نسخة الصفحة تشرح ماذا يفعل المستخدم؟. لا أحد ينقر فقط على الأزرار دون معرفة السبب.

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

هذه الحالة الفارغة بواسطة ModSpot هي مثال رائع لتصميم الجودة والمحتوى المشجع.

تستخدم الرموز لإظهار ما يجب على المستخدم إضافته إلى الموقع. يشير السهم إلى الزر الذي يجب على المستخدمين النقر فوقه مع بعض سلوكيات تشجيع النص. هذا هو تصميم حالة فارغة رائعة مع جميع العناصر التي تتوقعها.

وبالمثل ، توفر حالة Gumroad الفارغة خيارين يستهدفان مختلف الإجراءات المحتملة. يمكن للمستخدمين إضافة منتج رقمي أو منتج مادي للبدء في البيع.

تؤدي الارتباطات الأخرى في الصفحة إلى مساعدة الأدلة وتفاصيل الاتصال. كل شيء مبسط بشكل لا يصدق والعلاقات معا بشكل جيد.

الويب مقابل تطبيقات الجوال

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

المواقع على الشاشات الكبيرة لديك مساحة أكبر لأزرار إضافية. يمكن أن يكون صفحات الويب أيضا عناصر التنقل أكبر التي يمكن أن تجذب الناس في مكان آخر على الموقع.

يمكن حل هذا بأسلوب مشابه كما يفعل Nusii في صفحة مقترحاتهم. في حالة عدم وجود اقتراحات ، يتم توجيه المستخدم إلى “إضافة مقترحات” زر في شريط التنقل العلوي.

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

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

أمثلة تصميم حالة فارغة

ربما تكون أفضل طريقة للتعرف على تصميم الحالة الفارغة هي دراسة بعض الأمثلة. معرض الويب الرائع emptystat.es ينظم صفحات الحالة الفارغة من مواقع الويب المختلفة إلى تطبيقات الهاتف المحمول.

لقد اخترت بعض الأمثلة التي تستحق اهتمامك والتي توضح بشكل أفضل تصميم الحالة الفارغة. إذا كان لديك أي اقتراحات أخرى فلا تتردد في إعلامنا.

DigitalOcean العائمة عناوين IP