web design uiMay 1, 20269 min read

एम्प्टी स्टेट ही असली प्रोडक्ट हैं

एम्प्टी स्टेट कोई पॉलिश नहीं हैं। यही एक्टिवेशन की सतह हैं, पहली छाप हैं, और वही स्क्रीन तय करती है कि यूज़र के असली डेटा देखने से पहले ही आपका रिटेंशन कर्व टूटेगा या नहीं।

By Boone
XLinkedIn
Empty States Are the Product

आपके प्रोडक्ट की सबसे अहम स्क्रीन वही है जिस पर कुछ नहीं है। डैशबोर्ड नहीं। सेटिंग्स पेज नहीं। वह स्क्रीन जिस पर यूज़र तब पहुँचता है जब कोई डेटा मौजूद ही नहीं होता। वह स्क्रीन पूरे प्रोडक्ट को एक फ्रेम में समेट देती है, और ज़्यादातर टीमें उसे बाद की बात समझती हैं।

एम्प्टी स्टेट उसे मिल जाता है जिसके पास समय हो। उसमें मैग्निफाइंग ग्लास पकड़े किसी इंसान का स्टॉक इलस्ट्रेशन लग जाता है और एक वाक्य: "यहाँ अभी कुछ नहीं है।" फिर टीम शिप करती है और सोचती है कि एक्टिवेशन फ्लैट क्यों है। एम्प्टी स्टेट पॉलिश नहीं था। वह प्रोडक्ट था। आपने बस गलत वाला बना दिया।

एम्प्टी स्टेट ही एक्टिवेशन की सतह है

एक्टिवेशन डैशबोर्ड में नहीं होता। वह एम्प्टी स्टेट में होता है। यहीं यूज़र तय करता है कि प्रोडक्ट दूसरे सेशन के लायक है या नहीं।

नया यूज़र आपका रोडमैप या केस स्टडी नहीं देखता। उसे एक खाली स्क्रीन दिखती है जिस पर आपका लोगो है और एक छोटी सी आवाज़ पूछ रही है "ठीक है, अब क्या।" इसके बाद स्क्रीन जो कुछ भी कहे, वही प्रोडक्ट बन जाता है। एम्प्टी स्टेट ही वह इकलौता प्रोडक्ट है जिसे उन्होंने कभी इस्तेमाल किया है।

Linear यह समझता है। उसका खाली इनबॉक्स "No issues" नहीं है। वह एक कसा हुआ कैनवास है जिसमें एक कीबोर्ड शॉर्टकट है, एक साफ़ अगला कदम है, और यह एहसास है कि आप ऐसे लोगों के बनाए टूल के अंदर हैं जिन्हें परवाह है। एम्प्टी स्टेट ही एक्टिवेशन है। डैशबोर्ड इनाम है।

हर एम्प्टी स्टेट क्या कह रहा होता है

एम्प्टी स्टेट वह सिस्टम है जो तब बोलता है जब उसके पास कहने को और कुछ नहीं होता। वह जो भी कहता है, वही ब्रांड बन जाता है और यूज़र की पहली छाप बन जाता है कि यह प्रोडक्ट उनके साथ कैसा बर्ताव करता है।

खराब एम्प्टी स्टेट डेटा न होने के लिए माफ़ी माँगता है। अच्छा एम्प्टी स्टेट मानकर चलता है कि यूज़र यहाँ जानबूझकर आया है और उसे अगला कदम थमा देता है। फ़र्क रवैये का है। एक कहता है "माफ़ कीजिए, यहाँ कुछ नहीं है।" दूसरा कहता है "यह ऐसे शुरू होता है।"

Notion का खाली डॉक इंडस्ट्री का सबसे साफ़ उदाहरण है। एक हल्का प्रॉम्प्ट, स्लैश मेन्यू का हिंट, और तुरंत कीबोर्ड फ़ोकस। कोई इलस्ट्रेशन नहीं, कोई वेलकम स्क्रीन नहीं। टाइप करना ही एक्टिवेशन है, और एम्प्टी स्टेट ही प्रोडक्ट है।

वे पाँच आर्केटाइप जो डिज़ाइनर बार-बार गलत करते हैं

ज़्यादातर टीमें "एम्प्टी स्टेट" को एक डिज़ाइन समस्या मानती हैं। असल में यह पाँच हैं। हर एक अलग पल पर आता है, रिटेंशन में अलग भूमिका निभाता है, और अलग वजह से फेल होता है।

पाँच लेबल वाले कार्ड्स की एक कतार का वॉक्सेल डायग्राम, हर कार्ड एक एम्प्टी स्टेट आर्केटाइप दिखाता है: पहली बार, कोई नतीजा नहीं, अनुमति नहीं, कनेक्शन नहीं, और AI आउटपुट नहीं
पाँच लेबल वाले कार्ड्स की एक कतार का वॉक्सेल डायग्राम, हर कार्ड एक एम्प्टी स्टेट आर्केटाइप दिखाता है: पहली बार, कोई नतीजा नहीं, अनुमति नहीं, कनेक्शन नहीं, और AI आउटपुट नहीं

1. ज़ीरो डेटा, पहली बार

यूज़र प्रोडक्ट को पहली बार खोलता है तो जो स्क्रीन दिखती है। कोई प्रोजेक्ट नहीं, कोई डॉक्यूमेंट नहीं, कोई हिस्ट्री नहीं। ऐप का सबसे ऊँचे दाँव वाला एम्प्टी स्टेट, और आमतौर पर सबसे उपेक्षित।

Cursor की पहली बार खुलने वाली स्थिति एक सबक है। एक अकेली एडिटर विंडो, एक हल्का प्रॉम्प्ट, कीबोर्ड के लिए तैयार एक सैंपल कमांड। कोई टूर नहीं, टूलटिप की परेड नहीं, "Welcome to Cursor" मोडल नहीं। यूज़र पहले से काम के अंदर है।

Figma का नई फ़ाइल कैनवास यही बात अलग अंदाज़ में करता है। साफ़ अनंत कैनवास, पहुँच में टूलबार, और कर्सर वहीं जहाँ आपने छोड़ा था। इसकी तुलना उन प्रोडक्ट्स से कीजिए जो पाँच कदम की चेकलिस्ट और "Connect your workspace" की दीवार के साथ खुलते हैं। एक टूल जैसा लगता है। दूसरा होमवर्क जैसा।

2. फ़िल्टर से ज़ीरो नतीजे

यूज़र ने अभी कुछ खास माँगा और आपके प्रोडक्ट के पास दिखाने को कुछ नहीं है। यह भरोसे का पल है। एम्प्टी स्टेट को खोज को स्वीकार करना है, यह पक्का करना है कि वह चली थी, और अगला कदम सुझाना है।

Linear सक्रिय फ़िल्टर दिखाता है, एक लाइन की व्याख्या देता है, और साफ़ "Clear filters" एक्शन देता है। Stripe का पेमेंट डैशबोर्ड भी यही करता है जब किसी तारीख़ सीमा में कोई नतीजा नहीं आता। पेज गायब नहीं होता। वह समझाता है, फिर विकल्प देता है।

फेलियर मोड है बंद गली: "No results found." बस। न संदर्भ, न निकलने का रास्ता। यूज़र उस हालत में फँसा है जो प्रोडक्ट ने बनाई, और प्रोडक्ट उसे बाहर निकालने से मना कर देता है।

3. ज़ीरो अनुमति

वह एम्प्टी स्टेट जिसे कोई डिज़ाइन नहीं करता और हर कोई शिप कर देता है। यूज़र ऐसी स्क्रीन पर पहुँचता है जिसका उसके पास एक्सेस नहीं है, और प्रोडक्ट उसे जिज्ञासु होने की सज़ा देता है। एक 403, "You do not have permission" की एक लाइन, और बंद गली।

अच्छा वर्शन यूज़र का सम्मान करता है। वह बताता है कि एक्सेस कौन दे सकता है, एक क्लिक वाला "Request access" बटन देता है, और बताता है कि आगे क्या होगा। Slack यह तब करता है जब आप नॉन-मेंबर के तौर पर किसी प्राइवेट चैनल पर क्लिक करते हैं। एम्प्टी स्टेट दीवार को दरवाज़ा बना देता है।

4. ज़ीरो कनेक्शन

यूज़र ने आपका प्रोडक्ट खोला और वह अभी किसी चीज़ से जुड़ा नहीं है। किसी पेमेंट से पहले Stripe। किसी डिप्लॉयमेंट से पहले Vercel। किसी चैनल के असली होने से पहले नया Slack वर्कस्पेस। ऐप में सबसे ज़्यादा छोड़ जाने का खतरा यहीं है, क्योंकि यूज़र एक खाली प्रोडक्ट को घूर रहा है और उसे भरने के लिए अभी प्रतिबद्ध नहीं हुआ है।

Stripe Atlas का "no payments yet" स्टेट मास्टरक्लास है। उदासी वाले चेहरे के साथ कोई खाली चार्ट नहीं। वह दिखाता है कि डैशबोर्ड किस तरह की गतिविधि दिखाएगा, आपको पहले इंटीग्रेशन की ओर धकेलता है, और सीधे उस API key से जोड़ता है जो आपको आगे चाहिए।

Vercel की खाली प्रोजेक्ट लिस्ट शून्य का उलटा है। एक डिप्लॉय बटन, एक इम्पोर्ट विकल्प, और उसी स्क्रीन पर एक सैंपल टेम्पलेट। पहला डिप्लॉय ही एक्टिवेशन इवेंट है, और एम्प्टी स्टेट रनवे है।

5. ज़ीरो AI आउटपुट

नया है, और ज़्यादातर प्रोडक्ट इसमें फेल हो रहे हैं। यूज़र ने प्रॉम्प्ट भेजा और सिस्टम के पास लौटाने को कुछ नहीं है। मॉडल टाइमआउट हो गया, इनपुट काफ़ी नहीं था, या किसी आउटपुट रेल ने रोक दिया।

खराब वर्शन कहता है "Sorry, something went wrong." अच्छा वर्शन खास होता है। कुछ क्यों नहीं लौटा, यूज़र क्या बदल सकता है, रिट्राई का रास्ता है या नहीं। Loom का पहला रिकॉर्डिंग फ़्लो ऐसी ही समस्या को अच्छे से संभालता है: जब रिकॉर्डिंग अपलोड नहीं हो पाती, एम्प्टी स्टेट फेल होने की वजह बताता है और फ़ाइल खोए बिना तुरंत रिट्राई देता है। AI प्रोडक्ट ऑनबोर्डिंग डिज़ाइन का विश्लेषण बताता है कि जब AI कोर सरफ़ेस हो तो ऑनबोर्डिंग का पूरा ढाँचा कैसे बदलता है।

हर एम्प्टी स्टेट को क्या चाहिए

मज़बूत एम्प्टी स्टेट में पाँच तत्व साझा होते हैं। कोई भी छोड़ दीजिए और स्क्रीन फिर माफ़ी मोड में गिर जाती है।

  1. संदर्भ। बताइए कि यूज़र क्या देख रहा है और वह खाली क्यों है। "No issues yet" काफ़ी नहीं है। "इस साइकिल में कोई issue नहीं। C दबाकर पहला जोड़ें।" वह स्क्रीन है जो अपना काम कर रही है।
  2. एक्शन। एक प्राइमरी एक्शन, एक कीस्ट्रोक, एक बटन। अगर आप उन्हें क्या करना है यह बताने के लिए तीन वाक्य लिख रहे हैं, तो डिज़ाइन गलत है।
  3. आवाज़। जब सिस्टम के पास कहने को कुछ और नहीं होता, तब उसकी आवाज़ बाकी ब्रांड से मेल खानी चाहिए। दोस्ताना प्रोडक्ट के अंदर रूखा एरर टोन जादू तोड़ देता है।
  4. हायरार्की। टाइटल, एक लाइन की व्याख्या, प्राइमरी एक्शन, वैकल्पिक सेकेंडरी लिंक। चार तत्व जिनमें असली विज़ुअल हायरार्की काम कर रही है। इससे ज़्यादा कुछ भी कबाड़ है।
  5. मोशन। इस बात का हल्का संकेत कि स्क्रीन ज़िंदा है। झपकता कर्सर, हल्की CTA पल्स, एक छोटा एनिमेटेड तीर। संकेत कि प्रोडक्ट यूज़र का इंतज़ार कर रहा है।

वे फेलियर मोड जो एम्प्टी स्टेट को मार देते हैं

छह पैटर्न किसी और चीज़ से ज़्यादा एम्प्टी स्टेट मारते हैं।

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

बंद गली वाले स्टेट। बिना अगले कदम के "Nothing here yet"। निकलने के रास्ते के बिना 404। एक्सेस के रास्ते के बिना 403। अगला एक्शन न देने वाला हर एम्प्टी स्टेट रिटेंशन में रिसाव है।

भाषण देने वाले एम्प्टी स्टेट। एक लंबा पैराग्राफ जो समझाता है कि यह सेक्शन क्या करता है। यूज़र प्रोडक्ट इस्तेमाल करने आया था, ट्यूटोरियल पढ़ने नहीं। अगर एम्प्टी स्टेट को तीन पैराग्राफ चाहिए, तो प्रोडक्ट को कम व्याख्या चाहिए, स्क्रीन को ज़्यादा नहीं।

इनबॉक्स-ज़ीरो का जाल। "पहला एक्शन" फ़्लो से पहले "सब पूरा" का जश्न डिज़ाइन कर देना। Superhuman महीनों के असली काम से इनबॉक्स ज़ीरो कमाता है। ज़्यादातर प्रोडक्ट बिना कमाए जश्न की नकल कर लेते हैं, और यूज़र पहले ही दिन खुद को बच्चा समझा हुआ महसूस करते हैं।

"Nothing here yet" वाला पल्ला झाड़ना। तीन शब्द, न संदर्भ, न एक्शन, न आवाज़। एम्प्टी स्टेट की भाषा में डिज़ाइनर का हार मान लेना। अगर यह स्ट्रिंग आपके प्रोडक्ट में शिप होती है, तो आपका रिटेंशन पहले से टूटा हुआ है।

सब आर्केटाइप के लिए एक जैसा। पहली बार, कोई नतीजा नहीं, अनुमति नहीं, कनेक्शन नहीं, सबके लिए एक ही कंपोनेंट। हर आर्केटाइप के दाँव अलग हैं। एक कंपोनेंट सबको सँभाल नहीं सकता, वह हर एक को सपाट कर देता है।

एम्प्टी स्टेट ऑडिट

एक खड़े चेकलिस्ट कार्ड स्टैक का वॉक्सेल रेंडर, जो कैमरे की ओर झुका है, हर पंक्ति में कोरल चेकबॉक्स और सफ़ेद टेक्स्ट बार है, जो चल रहे ऑडिट का संकेत देता है
एक खड़े चेकलिस्ट कार्ड स्टैक का वॉक्सेल रेंडर, जो कैमरे की ओर झुका है, हर पंक्ति में कोरल चेकबॉक्स और सफ़ेद टेक्स्ट बार है, जो चल रहे ऑडिट का संकेत देता है

हर एम्प्टी स्टेट को इन सात सवालों से गुज़ारिए। अगर आप सबका साफ़ हाँ में जवाब नहीं दे सकते, तो स्क्रीन पूरी नहीं हुई।

  1. क्या स्क्रीन यूज़र को बताती है कि वह कहाँ है और खाली क्यों है? एक लेबल, एक लाइन की व्याख्या, एक वजह। अगर उन्हें अंदाज़ा लगाना पड़े, तो स्क्रीन लोड होने से पहले ही फेल हो चुकी है।
  2. क्या ठीक एक ही प्राइमरी एक्शन है? दो टकराते बटन नहीं। एक एक्शन, जो हायरार्की और कॉन्ट्रास्ट से साफ़ दिखे, उस स्क्रीन के हीरो सेक्शन की तरह जो वह असल में है।
  3. क्या आवाज़ बाकी प्रोडक्ट से मेल खाती है? इसे भरी हुई स्क्रीन के बगल में ज़ोर से पढ़िए। अगर टोन बदलता है, तो एम्प्टी स्टेट किसी और ब्रांड का चोला पहने है।
  4. क्या अगला कदम एक कीस्ट्रोक या क्लिक में हो सकता है? "सेटिंग्स में जाइए, फिर कनेक्ट कीजिए, फिर वापस आइए" नहीं। एक चाल। इससे लंबा कुछ भी वह काम है जो एम्प्टी स्टेट को सोख लेना चाहिए था।
  5. क्या स्क्रीन ज़िंदा लगती है, छोड़ी हुई नहीं? एक कर्सर, एक पल्स, एक प्लेसहोल्डर, एक हिंट। स्थिर खालीपन ठीक चलते हुए भी टूटा हुआ लगता है।
  6. क्या स्क्रीन आर्केटाइप के लिए खास है? हर आर्केटाइप के दाँव और कॉपी अलग हैं। दोबारा इस्तेमाल हुआ जेनेरिक कंपोनेंट बदबू है, सिस्टम नहीं।
  7. अगर यूज़र सिर्फ़ यही स्क्रीन देखे, तो क्या यह प्रोडक्ट बेचती है? अगर जवाब नहीं है, तो एम्प्टी स्टेट अपना वज़न नहीं उठा रहा, और ज़्यादातर नए यूज़र प्रोडक्ट को इसी स्क्रीन पर परखेंगे।

जिस प्रोडक्ट का हर एम्प्टी स्टेट इन सातों में पास होता है, वह बिना कोशिश के एक्टिवेट होता है। बाकी सब उन स्क्रीनों के ऊपर जुड़ता है जिन्होंने पहले ही कायल कर दिया।

सिद्धांत चुनिए, फिर स्क्रीन शिप कीजिए

एम्प्टी स्टेट पॉलिश की परत नहीं हैं, वे भार उठाने वाली परत हैं। 2026 में वही प्रोडक्ट जीतेगा जिसकी पहली स्क्रीन, ज़ीरो-रिज़ल्ट पेज, और डिसकनेक्टेड डैशबोर्ड पहले से वैसे लगें जैसे प्रोडक्ट के लिए यूज़र ने साइन अप किया था। लैंडिंग पेज डिज़ाइन सिद्धांत का विश्लेषण मार्केटिंग पेज वाला वर्शन है, और वेब डिज़ाइन सिद्धांत का लेख बताता है कि बाकी प्रोडक्ट उसके पीछे कैसे चलता है।

डैशबोर्ड पहले डिज़ाइन करना बंद कीजिए। उस स्क्रीन से शुरू कीजिए जिस पर कुछ नहीं है। डैशबोर्ड इनाम है। एम्प्टी स्टेट सौदा है।

अक्सर पूछे जाने वाले सवाल

एम्प्टी स्टेट और ज़ीरो स्टेट में क्या फ़र्क है?

ज़्यादातर टीमों में दोनों का मतलब एक ही है। "ज़ीरो स्टेट" खास तौर पर पहली बार, बिना डेटा वाले हालात के लिए इस्तेमाल होता है। "एम्प्टी स्टेट" व्यापक है और हर उस स्क्रीन को कवर करता है जहाँ अपेक्षित कंटेंट गायब हो, जैसे फ़िल्टर किए नतीजे, अनुमति की दीवारें और AI की नाकामी। सिद्धांत एक जैसे हैं।

क्या हर एम्प्टी स्टेट में इलस्ट्रेशन होना चाहिए?

नहीं। ज़्यादातर में नहीं होना चाहिए। इलस्ट्रेशन तब सही है जब वह जानकारी ले जाए, ब्रांड के लिए ज़रूरी टोन सेट करे, या जटिल पहली बार की व्याख्या को दृश्य रूप से थामे। क्लिपबोर्ड पकड़े दोस्ताना कार्टून सजावट है, डिज़ाइन नहीं। अगर स्क्रीन इलस्ट्रेशन के बिना चलती है, तो उसे बिना ही शिप कीजिए।

एम्प्टी स्टेट की कॉपी कैसे लिखें?

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

खाली स्क्रीन पहले डिज़ाइन कीजिए

जिस स्क्रीन पर कुछ नहीं है, वही सब कुछ तय करती है। डैशबोर्ड और इंटीग्रेशन एक ऐसी पहली छाप के ऊपर बैठे हैं जिसे शायद आपने जानबूझकर डिज़ाइन नहीं किया। उस स्क्रीन को सही करने की कीमत एक अतिरिक्त हफ़्ता है। उसे गलत करने की कीमत वह रिटेंशन कर्व है जिसे कोई समझा नहीं सकता।

अगर आप ऐसी टीम चाहते हैं जो एम्प्टी स्टेट को आख़िर में सफ़ाई की तरह नहीं, प्रोडक्ट के हिस्से की तरह डिज़ाइन करे, तो 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