web design uiMay 1, 20269 min read

الحالات الفارغة هي المنتج

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

By Boone
XLinkedIn
Empty States Are the Product

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

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

الحالة الفارغة هي سطح التفعيل

التفعيل لا يحدث في لوحة التحكم. يحدث في الحالة الفارغة. هناك يقرر المستخدم هل يستحق المنتج جلسة ثانية.

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

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

ماذا تقول كل حالة فارغة

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

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

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

الأنماط الخمسة التي يخطئ فيها المصممون باستمرار

معظم الفرق تعتبر "الحالة الفارغة" مشكلة تصميم واحدة. هي في الحقيقة خمس. كل واحدة تظهر في لحظة مختلفة، وتلعب دورًا مختلفًا في الاحتفاظ بالمستخدمين، وتفشل لسبب مختلف.

مخطط فوكسل لخمس بطاقات معنونة في صف، تمثل كل واحدة نمطًا من الحالات الفارغة: أول تشغيل، لا نتائج، لا صلاحية، لا اتصال، ولا مخرجات ذكاء اصطناعي
مخطط فوكسل لخمس بطاقات معنونة في صف، تمثل كل واحدة نمطًا من الحالات الفارغة: أول تشغيل، لا نتائج، لا صلاحية، لا اتصال، ولا مخرجات ذكاء اصطناعي

1. صفر بيانات، أول تشغيل

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

حالة أول فتح في Cursor درس بحد ذاتها. نافذة محرر واحدة، وموجّه خفيف، وأمر تجريبي جاهز للوحة المفاتيح. لا جولة تعريفية، ولا استعراض تلميحات، ولا نافذة "مرحبًا بك في Cursor". المستخدم أصلًا داخل العمل.

لوحة الملف الجديد في Figma تفعل الشيء نفسه بأسلوب مختلف. لوحة لانهائية نظيفة، وشريط أدوات في المتناول، ومؤشر حيث تركته. قارن ذلك بمنتجات تفتح بقائمة مهام من خمس خطوات وجدار "اربط مساحة عملك". الأول يبدو كأداة. والثاني يبدو كواجب مدرسي.

2. صفر نتائج من مرشّح

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

Linear يعرض المرشّح النشط، وشرحًا في سطر واحد، وإجراء "مسح المرشحات" واضحًا. ولوحة المدفوعات في Stripe تفعل الشيء نفسه حين لا يعيد نطاق التاريخ أي نتائج. الصفحة لا تختفي. تشرح ثم تعرض.

نمط الفشل هنا هو الطريق المسدود: "لم يتم العثور على نتائج." نقطة. لا سياق ولا مخرج. المستخدم عالق في حالة صنعها المنتج، والمنتج يرفض مساعدته على الخروج منها.

3. صفر صلاحية

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

النسخة الجيدة تحترم المستخدم. تشرح من يستطيع منح الوصول، وتعطيه زر "طلب الوصول" بنقرة واحدة، وتخبره بما سيحدث بعد ذلك. Slack تفعل هذا حين تدخل قناة خاصة وأنت لست عضوًا. الحالة الفارغة تحوّل الجدار إلى باب.

4. صفر اتصال

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

حالة "لا مدفوعات بعد" في Stripe Atlas درس متقن. لا مخطط فارغ بوجه حزين. تعرض نوع النشاط الذي ستعرضه اللوحة، وتدفعك نحو أول تكامل لك، وترتبط مباشرة بمفتاح API الذي تحتاجه تاليًا.

قائمة المشاريع الفارغة في Vercel عكس الفراغ تمامًا. زر نشر، وخيار استيراد، وقالب تجريبي على الشاشة نفسها. أول نشر هو حدث التفعيل، والحالة الفارغة هي المدرج.

5. صفر مخرجات ذكاء اصطناعي

جديدة، ومعظم المنتجات تفشل فيها. أرسل المستخدم موجّهًا ولا يجد النظام ما يعيده. انتهت مهلة النموذج، أو كان المدخل غير كافٍ، أو حجبته قاعدة حماية على المخرجات.

النسخة السيئة تقول "عذرًا، حدث خطأ ما." النسخة الجيدة محددة. لماذا لم يعد شيء، وما الذي يستطيع المستخدم تغييره، وهل هناك مسار لإعادة المحاولة. تدفق أول تسجيل في Loom يعالج مشكلة مشابهة جيدًا: حين يفشل رفع التسجيل، تشرح الحالة الفارغة سبب الفشل وتعرض إعادة محاولة فورية دون فقدان الملف. يشرح تحليل تصميم تهيئة منتجات الذكاء الاصطناعي كيف يتغير شكل التهيئة الأوسع حين يكون الذكاء الاصطناعي هو السطح الأساسي.

ما تحتاجه كل حالة فارغة

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

  1. السياق. سمِّ ما ينظر إليه المستخدم ولماذا هو فارغ. "لا مهام بعد" لا تكفي. "لا مهام في هذه الدورة. أضف الأولى بالضغط على C." هذه شاشة تؤدي عملها.
  2. الإجراء. إجراء رئيسي واحد، ضغطة مفتاح واحدة، زر واحد. إذا كتبت ثلاث جمل تخبره ماذا يفعل، فالتصميم خاطئ.
  3. الصوت. صوت النظام حين لا يجد ما يقوله يجب أن يطابق بقية العلامة التجارية. نبرة خطأ معقمة داخل منتج ودود تكسر السحر.
  4. التسلسل. عنوان، وشرح في سطر واحد، وإجراء رئيسي، ورابط ثانوي اختياري. أربعة عناصر يقوم التسلسل البصري الحقيقي بالعمل فيها. أي زيادة فوضى.
  5. الحركة. إشارة خفيفة بأن الشاشة حية. مؤشر وامض، أو نبضة خفيفة في زر الدعوة لاتخاذ إجراء، أو سهم صغير متحرك. إشارة بأن المنتج ينتظر المستخدم.

أنماط الفشل التي تقتل الحالات الفارغة

ست ممارسات تقتل من الحالات الفارغة أكثر من أي شيء آخر.

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

الحالات المسدودة. "لا شيء هنا بعد" بلا خطوة تالية. صفحة 404 بلا مخرج. صفحة 403 بلا طريق إلى الوصول. كل حالة فارغة بلا إجراء تالٍ هي ثقب في الاحتفاظ بالمستخدمين.

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

فخ صندوق الوارد الصفري. تصميم احتفال "أنجزت كل شيء" قبل تدفق "الإجراء الأول". Superhuman تستحق صندوق الوارد الصفري بعد شهور من العمل الحقيقي. معظم المنتجات تنسخ الاحتفال دون أن تستحقه، فيشعر المستخدمون بالاستعلاء عليهم من اليوم الأول.

تهرّب "لا شيء هنا بعد". ثلاث كلمات، بلا سياق ولا إجراء ولا صوت. المعادل في الحالات الفارغة لمصمم استسلم. إذا خرجت هذه العبارة في منتجك، فالاحتفاظ بالمستخدمين مكسور أصلًا.

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

تدقيق الحالات الفارغة

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

مرّر كل حالة فارغة على هذه الأسئلة السبعة. إذا لم تستطع الإجابة عنها كلها بنعم واضحة، فالشاشة لم تكتمل.

  1. هل تخبر الشاشة المستخدم أين هو ولماذا هي فارغة؟ تسمية، وشرح في سطر واحد، وسبب. إذا اضطر إلى التخمين، فقد فشلت الشاشة قبل أن تُحمَّل.
  2. هل يوجد إجراء رئيسي واحد بالضبط؟ لا زرّان متنافسان. إجراء واحد، يجعله التسلسل والتباين واضحًا، مثل القسم الرئيسي للشاشة التي هي عليه فعلًا.
  3. هل يطابق الصوت بقية المنتج؟ اقرأه بصوت عالٍ بجوار شاشة ممتلئة. إذا تغيرت النبرة، فالحالة الفارغة ترتدي علامة تجارية أخرى.
  4. هل الخطوة التالية ممكنة بضغطة مفتاح أو نقرة واحدة؟ لا "اذهب إلى الإعدادات، ثم اتصل، ثم عد." حركة واحدة. أي شيء أطول هو عمل كان على الحالة الفارغة أن تمتصه.
  5. هل تبدو الشاشة حية لا مهجورة؟ مؤشر، نبضة، نص بديل، تلميح. الفراغ الثابت يبدو معطلًا حتى لو كان يعمل بشكل صحيح.
  6. هل الشاشة خاصة بنمطها؟ لكل نمط رهانات ونص مختلفان. مكوّن عام معاد استخدامه رائحة سيئة لا نظام.
  7. إذا رأى المستخدم هذه الشاشة فقط، فهل تبيع المنتج؟ إذا كان الجواب لا، فالحالة الفارغة لا تؤدي دورها، وهي الشاشة التي سيحكم معظم المستخدمين الجدد على المنتج بناءً عليها.

المنتج الذي تجتاز كل حالاته الفارغة هذه الأسئلة السبعة يُفعّل مستخدميه دون عناء. وكل شيء آخر يتراكم فوق شاشات أنجزت الإقناع فعلًا.

اختر المبدأ، ثم اشحن الشاشة

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

توقف عن تصميم لوحة التحكم أولًا. ابدأ بالشاشة التي لا شيء عليها. لوحة التحكم هي المكافأة. والحالة الفارغة هي الصفقة.

الأسئلة الشائعة

ما الفرق بين الحالة الفارغة والحالة الصفرية؟

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

هل يجب أن تحتوي كل حالة فارغة على رسمة؟

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

كيف تكتب نصًا لحالة فارغة؟

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

صمّم الشاشة الفارغة أولًا

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

إذا أردت فريقًا يصمم الحالات الفارغة كجزء من المنتج لا كتنظيف في النهاية، وظّف Brainy. نحن نشحن منتجات تكون فيها أول شاشة يراها المستخدم هي الشاشة التي يتذكرها.

Want a product where the empty states do the selling instead of the apologizing? Brainy designs first-run flows and zero states as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading