खाली स्थिति का UI डिज़ाइन: सामग्री न होने पर अगला कदम दिखाएँ

1. पता करें कि जगह खाली क्यों है

खाली स्थिति को उत्पाद की स्थिति की रिपोर्ट मानें, सजावट का मौका नहीं। पूछें कि स्क्रीन आने से ठीक पहले क्या हुआ, सिस्टम क्या जानता है और क्या व्यक्ति स्थिति बदल सकता है। NN/g खाली स्थितियों को स्थिति बताने, सीखने में सहायता देने और महत्वपूर्ण कामों के रास्ते दिखाने के अवसर मानता है। इन अवसरों का लाभ पहले स्थिति को सही पहचानने पर निर्भर है।

खास तौर पर अनुरोध चलने के दौरान “कोई आइटम नहीं” न दिखाएँ। परिणाम ज्ञात होने तक लोडिंग संकेत या कंकाल रूप दिखाएँ। अनुरोध असफल हो तो विफलता और वापसी का विकल्प समझाएँ। अनुरोध सफल हो और शून्य आइटम हों, तो बताएँ कि कोई मिलती सामग्री नहीं है। इससे लोग अस्थायी देरी या सिस्टम समस्या को वास्तविक परिणाम समझने से बचते हैं।

2. कारण के अनुरूप भाषा लिखें

शीर्षक से स्थिति का नाम बताएँ और सहायक पाठ से उसका अर्थ या आगे बढ़ने का तरीका समझाएँ। शीर्षक जल्दी पढ़ा जा सके। वाक्य तभी जोड़ें जब वह वास्तविक सवाल का जवाब दे। Apple का लेखन मार्गदर्शन खाली स्क्रीन पर स्पष्ट अगले कदम, कार्रवाई बताने वाले लेबल और समस्या सुधारने का तरीका समझाने वाले सीधे त्रुटि संदेश सुझाता है। अर्थ छिपाने वाली चतुराई, “यहाँ कुछ नहीं” जैसे अस्पष्ट शीर्षक या व्यक्ति को दोष देने वाली भाषा से बचें।

उदाहरण के लिए, पहली बार उपयोग की काल्पनिक सहेजे आइटम स्क्रीन कह सकती है, “आपकी सहेजी हुई मार्गदर्शिकाएँ यहाँ दिखेंगी”, फिर “बाद में लौटने के लिए मार्गदर्शिका सहेजें”, साथ में “मार्गदर्शिकाएँ देखें” बटन। पूरी हुई जाँच सूची “आपने सब काम पूरे कर लिए” कह सकती है और “पूरे किए काम देखें” दे सकती है। ये उदाहरण अलग वास्तविकताएँ बताते हैं: पहला सुविधा में सामग्री जोड़ना सिखाता है, दूसरा सफल परिणाम की पुष्टि करता है।

सफल खोज में कुछ न मिलने पर काल्पनिक संदेश हो सकता है, “'orchid' से मिलता कोई प्रोजेक्ट नहीं”, और सुझाव, “बड़ा शब्द आज़माएँ या फ़िल्टर हटाएँ।” खोज शब्द सुरक्षित रखें और जहाँ संभव हो फ़िल्टर के बदलाव वापस किए जा सकें। नेटवर्क विफलता पर “प्रोजेक्ट लोड नहीं हो सके” और “फिर कोशिश करें” लिखें। जब सिस्टम जाँच ही न कर पाया हो, तब यह दावा न करें कि कोई प्रोजेक्ट नहीं है।

• संबंधित वस्तु या मानदंड का नाम लें ताकि संदर्भ से बाहर भी संदेश समझ आए।
• बटन पर “प्रोजेक्ट बनाएँ”, “फ़िल्टर हटाएँ” या “फिर कोशिश करें” जैसी क्रिया लिखें।
• निर्देश प्रभावित सामग्री के पास रखें और रंग या चित्र के साथ पाठ भी इस्तेमाल करें।
• “ओह”, दोष देने वाली भाषा और तकनीकी कोड से बचें, जब तक समस्या सुलझाने के लिए उनकी ज़रूरत न हो।

3. अगला कदम उपयोगी बनाएँ, अपने आप अनिवार्य नहीं

कार्रवाई तब दें जब व्यक्ति स्थिति को उचित रूप से बदल सकता हो या अपना काम जारी रख सकता हो। पहली बार उपयोग में बनाना या जोड़ना मददगार होता है; कोई परिणाम न मिलने पर सीमा हटाना और त्रुटि पर दोबारा कोशिश उपयोगी हो सकती है। साफ़ हो चुके इनबॉक्स या पूरा हुए व्यायाम में शायद किसी कार्रवाई की ज़रूरत न हो। केवल पैनल को इंटरैक्टिव दिखाने के लिए हर स्थिति में बटन न ठूँसें।

वापसी का तरीका स्थिति के अनुपात में रखें। असफल रिफ़्रेश के लिए आम तौर पर उसी जगह व्याख्या और दोबारा कोशिश पर्याप्त है, रोक देने वाला अलर्ट नहीं। Apple प्रतिक्रिया को जानकारी के महत्व से मिलाने और अलर्ट को महत्वपूर्ण, कार्रवाई योग्य स्थितियों के लिए रखने की सलाह देता है। खोज में व्यक्ति का काम सुरक्षित रखें और चुपचाप खोज शब्द बदलने के बजाय समझदार बदलाव सुझाएँ। Material Design भी शुरुआती सामग्री, छोटी शैक्षिक सामग्री या स्पष्ट लेबल वाले सर्वश्रेष्ठ मिलान विकल्प सुझाता है, जब वे सचमुच मदद करें।

चित्र तभी इस्तेमाल करें जब वह संदर्भ, अपनापन या पहचान बढ़ाए। वह संदेश से ध्यान न हटाए और सजावटी छवि को इंटरैक्टिव न दिखाए। छोटे फ़िल्टर परिणाम के लिए साधारण आइकन पर्याप्त हो सकता है; पहली बार खुलने वाले कार्यक्षेत्र में वहाँ रखी जाने वाली सामग्री का छोटा उदाहरण उपयोगी होगा। शुरुआती सामग्री हो तो उसे पहचानना और हटाना आसान बनाएँ।

• सीधे कारण को संबोधित करने वाली एक मुख्य कार्रवाई चुनें।
• दूसरा मदद का रास्ता तभी जोड़ें जब वह संभावित अगले सवाल का जवाब दे।
• खाली परिणाम अच्छी खबर हो तो शांत ढंग से पूरा होने का संदेश दें।
• सुनिश्चित करें कि कार्रवाई कीबोर्ड और स्क्रीन रीडर उपयोगकर्ताओं को भी समझ आए।

4. केवल चित्र नहीं, पूरी स्थिति की समीक्षा करें

स्थिति को उसके वास्तविक स्थान में देखें: पूरी स्क्रीन पर पहली बार उपयोग का दृश्य, छोटा साइडबार और फ़िल्टर की गई तालिका—इन सबकी जगह और प्राथमिकता ज़रूरतें अलग हैं। संदेश को वर्णित क्षेत्र के पास रखें। पाठ बड़ा होने या कई पंक्तियों में जाने पर भी पढ़ा जा सके और रंग पहचान पर निर्भर हुए बिना मुख्य कार्रवाई मिल जाए। स्थितियों के बदलाव भी जाँचें: लोडिंग से खाली, लोडिंग से त्रुटि, दोबारा कोशिश से सफलता और फ़िल्टर बदलकर परिणाम वापस आना।

लाइब्रेरी में व्यावहारिक समीक्षा कारण और अपेक्षित वापसी से शुरू होती है। हर पैटर्न के लिए स्थिति, शीर्षक, वैकल्पिक व्याख्या, मुख्य कार्रवाई, दूसरा रास्ता और चयन के बाद क्या होता है, दर्ज करें। उपयोगी संरचना और दृश्य प्राथमिकता के लिए स्क्रीनशॉट की तुलना करें, फिर उत्पाद व्यवहार संदर्भ में जाँचें; स्थिर छवि नहीं बता सकती कि त्रुटि से उबरा जा सकता है या परिणाम सचमुच खाली है। दृश्य संदर्भों के लिए ScreenKits UI लाइब्रेरी देखें और आसपास के पैटर्न ढूँढने के लिए सभी श्रेणियाँ देखें।

• क्या व्यक्ति समझ सकता है कि सामग्री नहीं है, अभी लोड हो रही है या त्रुटि से अनुपलब्ध है?
• क्या संदेश मौजूदा खोज, फ़िल्टर, खाते या पूरे हुए काम को दर्शाता है?
• क्या कार्रवाई उपयोगी इनपुट सुरक्षित रखती है और दिखने वाले परिणाम तक ले जाती है?
• क्या स्थिति छोटे आकार, लंबे अनूदित पाठ और सहायक तकनीक के साथ काम करती है?
• क्या व्यक्ति त्रुटि से उबर सकता है या असफल खोज बदलने का रास्ता पा सकता है?