04 أغسطس 2025·6 دقيقة
تصميم الحالة الفارغة الذي يحفز إتمام الإعداد في التطبيقات
نماذج تصميم الحالة الفارغة التي تقلل الالتباس وتوجه المستخدمين إلى خطوة الإعداد الناجحة التالية، مع نصوص وتخطيطات وقوائم تحقق يمكن تطبيقها بسرعة.
نماذج تصميم الحالة الفارغة التي تقلل الالتباس وتوجه المستخدمين إلى خطوة الإعداد الناجحة التالية، مع نصوص وتخطيطات وقوائم تحقق يمكن تطبيقها بسرعة.
شاشة فارغة ليست محايدة. إنها تخلق توقفًا حيث يبدأ الناس بالتخمين عمّا يجب فعله، أو إذا فاتتهم خطوة، أو إذا كان المنتج يعمل أصلاً. أثناء الإعداد، ذلك التوقف مكلف — يحول "أنا أبدأ" إلى "سأعود لاحقًا".
حالة الفراغ هي ما يراه المستخدم عندما لا يوجد شيء ليُعرض بعد لأنهم لم ينشئوا أو يستوردوا أو يربطوا أي شيء بعد. ليست شاشة تحميل، أو رسالة خطأ، أو تحذير أذونات. إنها اللحظة قبل القيمة، عندما يحتاج التطبيق لمساعدة المستخدم للوصول إلى أول نتيجة ذات مغزى.
لوظيفة واحدة فقط: نقل المستخدم إلى الإجراء الناجح التالي بأقل قدر من التفكير. والمهم أن يكون الإجراء "ناجحًا" — يجب أن تؤدي الخطوة التالية إلى نتيجة حقيقية (مشروع أول، مصدر بيانات متصل، عنصر أول منشأ)، وليس إلى نموذج مسدود أو جولة غامضة في المنتج.
تظهر هذه اللحظات أكثر مما يتوقعه الفرق: أول تسجيل دخول بعد الاشتراك، مساحة عمل جديدة كليًا، تبويب ميزة بلا عناصر بعد (مشروعات، عملاء، ملفات)، أو مسار إعداد تخطى الاستيراد ولم يبقَ شيء.
عندما تقوم حالة الفراغ بعملها، تجيب سريعًا عن ثلاثة أسئلة:
مثال: في Koder.ai، يمكن للمستخدم الجديد فتح مساحة عمل جديدة ورؤية عدم وجود تطبيقات بعد. حالة فراغ قوية تقول بصراحة أنه لم يتم إنشاء أي شيء، وتعرض إجراءً واحدًا واضحًا مثل "أنشئ تطبيقك الأول" وتضيف ملاحظة أمان صغيرة (مثلاً إمكانية تصدير الشيفرة واللقطات بعد البدء). الهدف تحويل "لا شيء هنا" إلى "أستطيع الوصول إلى أول نتيجة عملية."
بالنسبة للمستخدم الجديد، قد تبدو الشاشة الفارغة وكأن التطبيق توقف أو أنهم أخطأوا شيء. العقل يملأ الفراغ بسرعة، وعادة ليس لصالحك.
معظم الناس يسألون نفس الأسئلة صامتًا:
المشاعر وراء هذه الأسئلة توجه السلوك. عدم اليقين يجعل الناس يتلكأون. الخوف من الخطأ يجعلهم يتجنبون الزر الأساسي. النفاد الصبر يجعلهم يغلقون التطبيق إن لم يظهر خطوة واضحة خلال ثوانٍ.
حالات الفراغ للمستخدمين الجدد تختلف عن حالات فراغ المستخدمين المتقدمين. يحتاج المستخدمون الجدد للسياق والطمأنة لأنهم لا يعرفون مصطلحاتك بعد. المستخدمون العائدون يريدون السرعة: طريقة سريعة لإنشاء عنصر آخر، استيراد بيانات، أو تكرار إجراء مألوف.
حالات إعداد الفراغ تختلف أيضًا عن حالات الخطأ والتحميل. التحميل يقول "انتظر، هناك عملية جارية." الخطأ يقول "فشل شيء ما، هذا سببه." الإعداد يقول "لا يوجد شيء هنا بعد، وهذا أمر طبيعي. إليك كيف تبدأ."
مثال ملموس: إذا فتح شخص مساحة عمل جديدة في Koder.ai ورأى صفحة المشروعات فارغة، فلن يفكر في الميزات. سيفكر: "أبدأ من موجه، أم أستورد كودًا، أم أختار قالب، وهل سينكسر شيء؟" يجب أن تجيب حالة الفراغ عن ذلك دون أن ترسله إلى التوثيق.
حالة الفراغ الجيدة لا تبدو فارغة. إنها تعمل كلوحة إرشاد: "هذا ما هذه، وهذا هو النقر التالي."
بنية تنجح في معظم تدفقات الإعداد تتألف من ثلاثة أجزاء:
اجعل الشرح موجزًا. إن احتجت لفقرة لشرح الشاشة فأنت تطلب من المستخدمين أن يفكروا كثيرًا. استهدف 1 إلى 2 جملة قصيرة بكلمات بسيطة مثل "أضف مشروعك الأول" أو "أنشئ مساحة عملك الأولى."
ثم اجعل الخطوة التالية واضحة بزر أساسي واحد. إذا عرضت ثلاثة أزرار متساوية فأنت تطلب من المستخدم اختيار مسار قبل أن يفهم الصفحة. إن اضطُررت لتقديم بدائل (استيراد، قالب، تخطي)، اجعلها بصريًا أهدأ من الإجراء الرئيسي.
استخدم سطر الطمأنة لإزالة المخاوف الشائعة: الخوف من الخطأ، إضاعة الوقت، أو الحاجة لمهارات تقنية. دلائل صغيرة حول ما سيحدث بعد وما يمكن التراجع عنه تفعل أكثر من شرح طويل.
مثال نصي لشاشة "المشروعات" للمستخدم الجديد:
العنوان: ابدأ مشروعك الأول
الشرح: المشاريع تحتوي على إعداد التطبيق والإصدارات.
الإجراء الأساسي: إنشاء مشروع
الطمأنة: يستغرق حوالي دقيقتين. يمكنك إعادة تسميته في أي وقت.
إذا كان منتجك يدعم طرقًا متعددة للبدء (من الدردشة، استيراد، أو قالب، كما في Koder.ai)، اجعل "إنشاء" الافتراضي وضع "استيراد" و"استخدام قالب" كإجراءات ثانوية أدنى ترتيبًا.
تفشل حالات الفراغ عندما يتحدث النص عن الميزات بدلًا من ما سيحصل عليه المستخدم. كلماتك يجب أن تجيب سريعًا: ما هذه الشاشة؟ لماذا أفعل شيئًا هنا؟ ماذا أفعل بعد ذلك؟
صيغة عنوان بسيطة: النتيجة + الشيء. سم النتيجة والشيء الذي سيُنشأ، لا اسم الميزة الداخلية.
في نص الجسم، استخدم ما هو + لماذا يهم في جملة أو اثنتين:
"العملاء هم الأشخاص الذين تبيع لهم. أضف واحدًا الآن لتتمكن من إرسال فاتورة وتتبع المدفوعات."
يجب أن تبدأ أزرار الحث بالفعل بفعل واضح وتحتوي على اسم محدد. تجنب أزرار غامضة مثل "ابدأ" عندما توجد مسارات متعددة.
أضف نصًا صغيرًا بجوار الخيار الذي يبدو محفوفًا بالمخاطر. الطمأنة الصغيرة غالبًا ما تفعل أكثر من شرح طويل:
إذا كان منتجك يولد مخرجات للمستخدم (مثل Koder.ai)، ضع توقعات حتى يعرف الناس أنهم لا يلتزمون بنسخة نهائية: "سننشئ مسودة أولى؛ يمكنك مراجعتها وتحريرها قبل النشر."
حالة الفراغ الجيدة يجب أن تُقرأ كلوحة إرشاد، لا كملصق. يحتاج التخطيط إلى ترتيب واضح حتى يفهم الناس بسرعة وما الذي يفعلونه.
استخدم تسلسلًا بسيطًا يتوافق مع طريقة مسح العينين: العنوان، جملة قصيرة، زر CTA أساسي، ثم إجراء ثانوي أهدأ (استيراد، قالب، تخطي).
ضع الزر الأساسي قريبًا من الرسالة. إن اضطر المستخدم للقراءة والتمرير ثم اتخاذ قرار، فعادة ما يتوقف. نمط شائع هو كتلة ضيقة (عنوان + نص + CTA)، مع مسافة بيضاء بينها وبين بقية الصفحة (التنقل، التذييل، الألواح الجانبية).
يمكن أن تساعد الأيقونات والرسوم الصغيرة على المسح البصري، لكن فقط إذا أضافت معنى. أيقونة مجلد بجانب "لا توجد مشروعات" مفيدة. تميمة عشوائية لا تفيد. إن استخدمت رسمًا توضيحيًا، اجعله صغيرًا وضعه فوق العنوان حتى لا ينافس الزر.
أحد أقوى الأنماط هو عرض لمحة صغيرة عن النجاح: بطاقة عينة، صف تجريبي واحد في جدول، أو بلاطة مثال باهتة. في أداة مثل Koder.ai، يمكن لشاشة "التطبيقات" الفارغة أن تعرض بلاطة تطبيق نموذجي (الاسم، الحالة، آخر تحديث) حتى يفهم المستخدم بسرعة الشكل الذي سَينشئه.
عندما يصل المستخدم إلى شاشة فارغة، عادةً ما يريد أحد ثلاثة أمور: البدء من الصفر، جلب بيانات موجودة، أو التحرك بسرعة بنقطة انطلاق. حالات الفراغ الجيدة توضح هذه المسارات دون إجبار المستخدم على دراسة المنتج.
قدّم "إنشاء" عندما يكون الفوز الحقيقي الأول هو صنع شيء جديد: مشروع، مساحة عمل، صفحة، أو سجل أول. يعمل هذا أفضل عندما يمكن للمستخدم الانتهاء بسرعة والإجراء قابل للعكس.
إن استغرق الإنشاء وقتًا أطول، قسمه إلى خطوة أولى أصغر (مثلاً "أنشئ مسودة") حتى يستطيع المستخدم التقدّم دون الشعور بأنه محاصر.
قدّم "استيراد" عندما يصل معظم المستخدمين الجدد مع نظام أو ملف أو حساب يمكن ربطه. يجب أن توضح حالة الفراغ ما تدعمه عملية الاستيراد وماذا يحصل بعد (مثلاً الحقول المربوطة والعناصر المنشأة).
طريقة عملية لاختيار الزر الأساسي هي استخدام السياق. إن جاء المستخدم من محتوى هجرة، أبرز "استيراد". إن نقر على زر "مشروع جديد" الفارغ، أبرز "إنشاء". إن كان الإعداد معقدًا، أبرز "قالب".
قدّم القوالب عندما يحتوي منتجك على نقاط انطلاق شائعة ويريد المستخدمون التعديل وليس التصميم من الصفر. سمّ القوالب بالنتيجة ("قناة مبيعات"، "مخطط أسبوعي"), لا بالميزات.
خيار "جرّب ببيانات عينية" يزيل الخوف. اجعل من الواضح أنه يمكن حذفه. بالنسبة لباني يتركز على الدردشة مثل Koder.ai، يمكن لمشروع عيّنة أن يظهر شكل تطبيق يعمل قبل أن يكتب المستخدم مواصفاته.
الشاشات الفارغة ليست محايدة. الأفضل منها يجعل الإجراء الناجح التالي واضحًا، آمنًا، وسريعًا.
مثال: إن فتح شخص تبويب "جهات الاتصال" في CRM جديد ورآه فارغًا، أسرع فوز هو "أضف جهة الاتصال الأولى." اجعل الحقول اسم + بريد إلكتروني فقط، قدم "استيراد CSV" كخيار احتياطي، واطمئنهم أنه يمكنهم تحديث الحقول لاحقًا.
معظم حالات الفراغ العالقة تفشل لسبب واحد: تجعل الخطوة التالية تبدو محفوفة بالمخاطر أو غير واضحة.
إن عرض ثلاثة أزرار تبدو بنفس الأهمية يجعل المستخدم يتردد. اختر إجراءً أساسيًا واحدًا وإجراءً ثانويًا واحدًا. ضع كل شيء آخر وراء سطر "خيارات أكثر" الهادئ.
"لوحات متقدمة، أدوار مرنة، إعدادات متقدمة" لا يخبر الناس ماذا يفعلون الآن. استبدل ذلك بالنتيجة التالية بعد النقر.
أمثلة:
النماذج الطويلة في حالة الفراغ تبدو كالتزام. إن احتجت لتفاصيل، اكسبها لاحقًا. ابدأ بأصغر خطوة تنتج شيئًا مرئيًا.
بدلًا من طلب الاسم، وحجم الشركة، والدور، والأهداف قبل أن يظهر أي شيء، اطلب فقط "اسم المشروع" واجعل الباقي اختياريًا بعد ظهور الشاشة الأولى.
الفكاهة مقبولة، لكن ليس حيث يحتاج المستخدم للوضوح. "لا شيء هنا" يضيع اللحظة. قل بالضبط ماذا سيحدث بعد النقر وماذا لن يحدث.
بعض المستخدمين لا يستطيعون الإنشاء من الصفر. قدّم مسارًا بديلًا حقيقيًا: استيراد، قالب، أو تجربة بيانات عينية. مثلاً، إن لم يكن لدى المستخدم فكرة في Koder.ai، فإن "ابدأ بمشروع عيّنة" قد توصله إلى شاشة تعمل دون كتابة مواصفة كاملة.
يجب أن يفهم المستخدم الجديد ما هي الشاشة، ولماذا تهم، وماذا يفعل بعد خلال حوالي خمس ثوانٍ.
الطمأنة هي ما يحول التردد إلى فعل. أضف سطرًا صغيرًا بجانب الزر يقلل الخوف، مثل "يمكنك تغيير هذا لاحقًا" أو "لا يُنشر شيء حتى تؤكد." اجعلها هادئة ومحددة.
اختبار بسيط: اطلب من زميل إلقاء نظرة على الشاشة لمدة خمس ثوانٍ، ثم أخبرك ماذا يتوقع أن يحدث عند النقر على الزر الرئيسي. إن لم يستطع الإجابة، شدد النص أو التسلسل البصري.
إن كنت تبني تدفقات إعداد في باني يتركز على الدردشة مثل Koder.ai، تنطبق نفس القائمة. يجب أن تدعو حالة الفراغ إلى إجراء واحد ناجح: البدء من قالب، استيراد بيانات، أو توليد أول نسخة عملية يمكنك تحريرها بأمان.
مؤسس مستقل يشترك في Koder.ai ويفتح مساحة عمل جديدة. يصل إلى شاشة المشروعات بالصفر ولا يعلم ما "المقبول" بعد.
بدلًا من جدول فارغ، تعرض حالة الفراغ وعدًا قصيرًا، خطوة واضحة، وملاحظة أمان صغيرة. هذا مثال للنص والزر (اعتبر تقديرات الوقت قابلة للتحقق):
Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.
[Create your first app]
Secondary: Import existing code | Browse templates
Note: You can export the source code anytime.
بعد نقر المؤسس على Create your first app، تطلب الشاشة التالية سؤالًا بسيطًا: "ماذا تبني؟" مع حقل واحد فقط و2 مثالين كموجهات (مثل "CRM لوكالة صغيرة" أو "صفحة هبوط مع نموذج تسجيل"). اجعل المسار ضيقًا: حقل واضح واحد، وزر واضح واحد.
يمكن أن تكون الشاشة الثانية مراجعة خطة سريعة (الميزات، الصفحات، البيانات)، تليها خطوة بناء ومعاينة عملية. لحظة النجاح الأولى هي عندما يستطيع المستخدم فعل شيء حقيقي في تلك المعاينة، مثل إضافة سجل أو إرسال تسجيل اختبار.
بمجرد وجود بيانات، لا ينبغي للمستخدمين العائدين رؤية نفس حالة الفراغ مرة أخرى. يمكن أن تتحول شاشة المشروعات إلى عرض "التطبيقات الأخيرة" مع إجراء سريع واضح واحد (مثلاً تطبيق جديد) وإجراءات أصغر (مثل لقطات أو نشر) بناءً على ما فعلوه آخر مرة.
لمعرفة ما إذا كانت حالة الفراغ تقوم بعملها، تتبع بعض الأرقام:
اختر تدفق إعداد واحد لتحسنه هذا الأسبوع. اختر الذي فيه أكبر معدل تسرب، أو الذي يصله المستخدمون الجدد أولًا. أعد كتابة حالة الفراغ لتجيب سريعًا عن ثلاثة أسئلة: ما هذه؟ لماذا أفعلها الآن؟ ما هو النقر التالي؟
اجعل التغيير صغيرًا. أنت لا تعيد تصميم مسار الانخراط بأكمله. أنت تجعل الفعل الناجح الأول واضحًا.
خطة أسبوعية بسيطة:
بعد تحقيق فوز واحد، قم بالتوحيد. أنشئ نمطًا داخليًا قصيرًا لحالات الفراغ: التباعد، نمط العناوين، قواعد الأيقونة أو الرسم التوضيحي، وتخطيط CTA ثابت. عندما تتبع الفرق نفس البنية، يتعلم المستخدمون مرة واحدة ويتحركون أسرع في كل مكان.
إن كنت تبني تطبيقًا جديدًا وتريد نمذجة خطوات الإعداد بسرعة، فإن Koder.ai (koder.ai) يمكن أن يساعدك في صياغة تدفق في Planning Mode وتوليد النسخة الأولى للاختبار، ثم التكرار بناءً على أماكن تردد المستخدمين فعليًا.
حالة الفراغ هي ما يراه المستخدمون عندما لا يوجد شيء ليُعرض بعد لأنهم لم ينشئوا أو يستوردوا أو يربطوا شيئًا بعد. يجب أن تشرح ما الغرض من الشاشة وتوجه المستخدم إلى الإجراء الناجح التالي بدلًا من تركه يتخمين.
شاشة التحميل تقول "انتظر، هناك شيء يحدث"، وحالة الخطأ تقول "حدث فشل، هذا السبب". حالة إعداد الفراغ تقول "لا يوجد شيء هنا بعد، وهذا أمر طبيعي" ثم توجه المستخدم إلى الإنشاء أو الاستيراد أو البدء من قالب ليصل إلى أول نتيجة حقيقية.
حاول الإجابة سريعًا على ثلاثة أشياء: ما هي هذه الشاشة، لماذا هي فارغة، وماذا أفعل الآن. إذا لم يستطع المستخدمون فهم ذلك خلال ثوانٍ قليلة، فغالبًا ما يتوقفون أو يقلقون أو يغادرون.
استخدم بنية بسيطة: شرح قصير لغرض هذه المنطقة، إجراء أساسي واضح واحد، وسطر طمأنة يقلل الخوف أو الجهد. اجعل النص موجزًا حتى لا يضطر المستخدمون لقراءة فقرة ليعرفوا ما ينقرون عليه.
افتراضًا زرًا رئيسيًا واحدًا يتطابق مع أكثر خطوة محتملة، واجعل كل شيء آخر ثانويًا بوضوح. عند عرض عدة أزرار متساوية الأهمية، يتوقف الناس غالبًا لأنهم لا يعرفون أي مسار هو "الصحيح".
قدّم "إنشاء" عندما يكون البدء من الصفر هو أسرع طريق لتحقيق فوز مرئي (مشروع أول أو سجل أول). قدّم "استيراد" عندما يصل معظم المستخدمين الجدد ببيانات موجودة مسبقًا، وقدم "قالب" عندما يريد المستخدمون السرعة ونقطة انطلاق مثبتة.
اكتب العناوين وفق صيغة النتيجة + الكائن، مثل "أنشئ مشروعك الأول" بدلًا من تسميات ميزة عامة مثل "المشروعات". في نص الجسم، أضف جملة توضح ما يحدث بعد النقر حتى يتوقع المستخدم النتيجة.
ضع العنوان، جملة قصيرة، والزر الأساسي في كتلة ضيقة ذات تسلسل بصري واضح. اجعل الخيارات الثانوية أهدأ ومقربة، وتجنّب دفع الزر الرئيسي بعيدًا إلى أن يضطر المستخدم للتمرير أو البحث عنه.
ضع ملاحظة أمان قصيرة بجانب الإجراء، مثل "يمكنك تغيير هذا لاحقًا" أو "لا يتم النشر حتى تؤكد". في أدوات مثل Koder.ai، قد يساعد ذكر الإجراءات القابلة للعكس مثل اللقطات/الاسترجاع أو إمكانية تصدير الشيفرة بعد البدء.
تعقّب عدد مرات عرض شاشة الفراغ، ونقرات الزر الأساسي، وإتمام المعلم المستهدف. راقب أيضًا الوقت إلى أول نجاح ونسبة التسرب بين شاشة الفراغ والخطوة التالية، لأن شاشة الفراغ قد تحصل على نقرات لكنها لا تنتج نتائج فعلية.