web design uiMay 10, 202613 min read

खाली अवस्था ही आपका उत्पाद है, कोई गौण विचार नहीं।

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

By Boone
XLinkedIn
the empty state is your product

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

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

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

खाली स्क्रीन ही आपकी असली पहली छाप क्यों है

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

वह पल ही पूरी पिच का सार है। यह उपयोगकर्ता को बताता है कि क्या संभव है, आगे क्या करना है, और आपने वास्तव में उनके बारे में कितना सोचा है। अगर आप इसे सही करते हैं, तो वे आकर्षित होते हैं। अगर आप इसे गलत करते हैं, तो वे वापस चले जाते हैं, और ईमेल के ज़रिए दोबारा संपर्क करने से भी वे वापस नहीं आते।

एक बेहतरीन खाली स्क्रीन एक साथ तीन काम करती है: यह बताती है कि फ़ीचर किस लिए है, यह उत्पाद का भावनात्मक स्वरूप तय करती है, और यह उपयोगकर्ता को टैब बंद करने से आसान अगला कदम बताती है।

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

खाली स्क्रीन के पाँच प्रकार (और उन्हें अलग-अलग तरीके से क्यों देखना चाहिए)

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

  1. पहली बार चलने पर खाली स्क्रीन। उपयोगकर्ता ने अभी-अभी साइन अप किया है, उन्होंने इस उत्पाद को पहले कभी नहीं देखा है, और स्क्रीन पर कुछ भी नहीं है क्योंकि उन्होंने कुछ नहीं किया है। यह आपके उत्पाद में सबसे जोखिम भरी खाली स्क्रीन है।

  2. शून्य-अवस्था खाली: उपयोगकर्ता पहले भी उत्पाद का उपयोग कर चुका है, लेकिन कोई विशिष्ट क्षेत्र स्वाभाविक रूप से खाली है, जैसे कोई नया प्रोजेक्ट, नया कार्यक्षेत्र या हाल ही में बनाई गई सूची। वे उत्पाद से परिचित हैं, लेकिन इसके इस हिस्से से नहीं।

  3. स्पष्टीकरण के बाद खाली: उपयोगकर्ता ने जानबूझकर कुछ खाली किया है। उन्होंने अपना इनबॉक्स खाली कर दिया, अपने सभी कार्य पूरे कर लिए, सब कुछ आर्काइव कर दिया। यह उपलब्धि का क्षण है, अनुपस्थिति का नहीं।

  4. त्रुटि-खाली: स्क्रीन खाली है क्योंकि कुछ विफल हो गया है। डेटा फ़ेच में गड़बड़ी हुई, कनेक्शन टूट गया, या एकीकरण गलत तरीके से कॉन्फ़िगर किया गया है। उपयोगकर्ता को लगता है कि उत्पाद खराब हो गया है, जबकि ऐसा नहीं है।

  5. खोज-खाली: उपयोगकर्ता ने एक क्वेरी टाइप की और उसे कोई परिणाम नहीं मिला। उनकी मंशा थी, उन्होंने प्रयास किया, और आपको कुछ भी परिणाम नहीं मिला। यदि आप इसे सही तरीके से करते हैं, तो यह सबसे आसानी से ठीक होने वाली खाली स्थिति है।

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

एक साफ पंक्ति में पांच लेबल वाले कार्ड हैं जिन पर FIRST-RUN, ZERO-STATE, POST-CLEAR, ERROR-EMPTY और SEARCH-EMPTY लिखा है, प्रत्येक कार्ड हल्के पेस्टल रंग की पृष्ठभूमि पर स्पष्ट रूप से दिखाई देता है।
एक साफ पंक्ति में पांच लेबल वाले कार्ड हैं जिन पर FIRST-RUN, ZERO-STATE, POST-CLEAR, ERROR-EMPTY और SEARCH-EMPTY लिखा है, प्रत्येक कार्ड हल्के पेस्टल रंग की पृष्ठभूमि पर स्पष्ट रूप से दिखाई देता है।

साथ-साथ: प्रत्येक खाली स्थिति को क्या करना चाहिए और क्या नहीं करना चाहिए

जब आप इन्हें एक-दूसरे के बगल में रखते हैं तो अंतर स्पष्ट हो जाते हैं। यहाँ एक संक्षिप्त विवरण दिया गया है।

| खाली प्रकार | यह कब दिखाई देता है | इसे क्या करना चाहिए | क्या नहीं करना चाहिए |

|---|---|---|---|

| पहली बार उपयोग | उपयोगकर्ता ने अभी-अभी साइन अप किया है, अभी तक कुछ नहीं किया है | नमूना डेटा या निर्देशित पहले कार्य के साथ मुख्य क्रिया सिखाएँ | उदास चेहरा और "शुरू करें" बिना किसी गंतव्य के |

| शून्य स्थिति | एक विशिष्ट क्षेत्र नया है, लेकिन उपयोगकर्ता उत्पाद को जानता है | 2 या 3 ठोस क्रियाओं का सुझाव दें, टेम्पलेट्स का संकेत दें | संपूर्ण ऑनबोर्डिंग प्रक्रिया को दोहराना |

| प्रक्रिया पूरी होने के बाद | उपयोगकर्ता ने अभी-अभी कोई सूची समाप्त की, संग्रहीत की या खाली की | जश्न मनाएं, फिर आगे की उचित कार्रवाई बताएं | ऐसा व्यवहार करें जैसे उपयोगकर्ता ने कुछ गलत किया हो |

त्रुटि-खाली | डेटा लोड या सिंक नहीं हो पाया | विफलता का कारण सरल शब्दों में बताएं, पुनः प्रयास करने का विकल्प दें, और स्थिति पृष्ठ का लिंक भेजें | एक सामान्य खाली स्थिति दिखाएं और ऐसा दिखावा करें जैसे कुछ गलत नहीं है |

खोज-खाली | उपयोगकर्ता ने एक क्वेरी टाइप की, कोई परिणाम नहीं मिला | उनके द्वारा खोजे गए परिणाम दिखाएं, संबंधित क्वेरी सुझाएं, और नई क्वेरी बनाने का विकल्प दें | "कोई परिणाम नहीं मिला" संदेश के साथ एक गतिरोध |

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

खाली स्थितियों को प्रभावी बनाने वाले चार डिज़ाइन उपाय

आप ठीक चार उपाय अपना सकते हैं। अधिकांश बेहतरीन खाली स्थितियां इनमें से दो या तीन का संयोजन में उपयोग करती हैं, कभी भी चारों का एक साथ नहीं, क्योंकि इससे अव्यवस्था फैल जाती है।

  1. नमूना डेटा। स्क्रीन को वास्तविक उदाहरण सामग्री से भरें, जिसे उपयोगकर्ता प्रयोग कर सकता है, संपादित कर सकता है या हटा सकता है। Stripe का डैशबोर्ड, जिसमें "परीक्षण डेटा देखें" टॉगल है, इसका आदर्श उदाहरण है।

  2. सुझाए गए कार्य। दो या तीन विशिष्ट अगले चरणों को बटन या कार्ड के रूप में प्रदर्शित करें, न कि केवल एक अस्पष्ट "आरंभ करें" बटन। Notion के नए पृष्ठ पर टेम्पलेट सुझाव सबसे उपयुक्त हैं।

  3. शिक्षण उदाहरण। यह दिखाने के लिए दृश्य का उपयोग करें कि भरी हुई स्थिति कैसी दिखेगी, न कि किसी निराशाजनक कार्टून का। एक छोटा सा पूर्वावलोकन दिखाएं कि इनबॉक्स या बोर्ड भरने के बाद कैसा दिखता है।

  4. स्वरूप स्थापित करने वाला पाठ। तीन से बारह शब्द जो उत्पाद की पहचान स्थापित करते हैं और उपयोगकर्ता को बताते हैं कि यह स्थान किस लिए है। Linear के खाली इनबॉक्स पाठ में अधिकांश लैंडिंग पृष्ठों की तुलना में एक पंक्ति में अधिक ब्रांड की आवाज़ है।

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

एक साफ ग्रिड में चार लेबल वाले कार्ड हैं जिनमें नमूना डेटा, सुझाए गए कार्य, शिक्षण चित्रण और विषयवस्तु को निर्धारित करने वाली सामग्री को हल्के पेस्टल रंग की पृष्ठभूमि पर दर्शाया गया है।
एक साफ ग्रिड में चार लेबल वाले कार्ड हैं जिनमें नमूना डेटा, सुझाए गए कार्य, शिक्षण चित्रण और विषयवस्तु को निर्धारित करने वाली सामग्री को हल्के पेस्टल रंग की पृष्ठभूमि पर दर्शाया गया है।

ऐसे उत्पाद जो इसे सही ढंग से इस्तेमाल करते हैं (और जिनसे आप सीख सकते हैं)

इसे समझने का सबसे तेज़ तरीका उन उत्पादों का अध्ययन करना है जो खाली इनबॉक्स को एक डिज़ाइन समस्या के रूप में देखते हैं। कुछ बेहतरीन उत्पादों का संक्षिप्त अवलोकन।

Linear का खाली इनबॉक्स। Linear खाली इनबॉक्स को एक छोटे से अवकाश के क्षण की तरह मानता है। सामग्री नीरस, थोड़ी हास्यपूर्ण, ब्रांड के अनुरूप है, और दृश्य शांत है, क्षमाप्रार्थी नहीं। इसमें "शुरू करें" बटन नहीं है क्योंकि इसकी आवश्यकता नहीं है।

Notion के टेम्पलेट सुझाव। एक नया Notion पेज तकनीकी रूप से खाली है, लेकिन यह कभी खाली महसूस नहीं होता। कर्सर तैयार रहता है, स्लैश कमांड के संकेत मिलते हैं, और टेम्पलेट सुझाव संदर्भ के अनुसार दिखाई देते हैं। आप कभी भी खाली दीवार को नहीं देख रहे होते, बल्कि विकल्पों की एक सूची को देख रहे होते हैं।

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

क्रॉन, अब Notion कैलेंडर का ऑनबोर्डेड कैलेंडर। ऑनबोर्डिंग पूरी होने पर, कैलेंडर आपके वास्तविक कनेक्टेड इवेंट्स दिखाता है, साथ ही कीबोर्ड शॉर्टकट ओवरले और कुछ नमूना इवेंट्स भी दिखाता है जो उत्पाद की विशेषता को दर्शाते हैं। आप दस सेकंड के भीतर ही उत्पाद को अच्छी तरह समझ जाते हैं।

थिंग्स 3 का पहला लॉन्च। थिंग्स एक ऑनबोर्डिंग प्रोजेक्ट के साथ आता है जो उत्पाद को सिखाने के लिए उत्पाद का ही उपयोग करता है। प्रत्येक कार्य एक पाठ है। जब तक आप अंतिम आइटम को चेक करते हैं, तब तक आप अपनी सभी आवश्यक सुविधाओं का उपयोग कर चुके होते हैं और खाली स्थिति ही आपका वास्तविक जीवन होता है।

कुछ और उत्पाद जिनसे प्रेरणा ली जा सकती है (ग्रैनोला, सुपरह्यूमन, Stripe, रिप्लिट, ChatGPT)

कुछ और, नए उत्पादों और AI टूल्स की ओर झुकाव रखते हुए, क्योंकि अभी भी इन क्षेत्रों में रुझान स्थिर हो रहे हैं।

ग्रैनोला का पहला ट्रांसक्रिप्ट प्रॉम्प्ट। ग्रैनोला जानता है कि सबसे असहज क्षण वह होता है जब पहली मीटिंग में आपके पास ट्रांसक्राइब करने के लिए कुछ भी नहीं होता। इसलिए यह एक छोटा सा टेस्ट रिकॉर्ड करने या एक सैंपल ट्रांसक्रिप्ट आयात करने का विकल्प देता है ताकि आप देख सकें कि AI क्या करता है। यह उस उलझन को दूर करता है जो अन्यथा उत्पाद में उत्पन्न हो सकती थी।

सुपरह्यूमन का ऑनबोर्डिंग। सुपरह्यूमन आपको खाली इनबॉक्स देखने से पहले ही एक वास्तविक व्यक्ति के साथ ऑनबोर्डिंग कॉल करता है, लेकिन ऐप के पहले उपयोग में नमूना ईमेल और कीबोर्ड शॉर्टकट के माध्यम से आपको सिखाया जाता है। जब तक आप ऐप से पूरी तरह परिचित हो जाते हैं, तब तक खाली स्थिति एक विशेषता जैसी लगने लगती है।

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

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

ChatGPT का खाली प्रॉम्प्ट पेज। ChatGPT का खाली स्टेट एक सिंगल टेक्स्ट बॉक्स है, और यह कुछ हद तक काम करता है क्योंकि प्रोडक्ट का सांस्कृतिक प्रभाव है। यह नए उपयोगकर्ताओं के लिए नीचे सुझाए गए प्रॉम्प्ट भी जोड़ता है, जो न्यूनतम आवश्यकता है। यदि आपके पास ChatGPT का ब्रांड नहीं है, तो ChatGPT के खाली स्टेट की नकल न करें।

विफलता के तरीके, नाम और आलोचना

खराब खाली स्टेट कुछ पहचाने जाने योग्य पैटर्न में आते हैं। एक बार जब आप उन्हें पहचान लेते हैं, तो आप उन्हें बेचना बंद कर देते हैं।

चार विफलता कार्ड जिन पर 'दुखद चित्रण', 'कुछ भी नहीं से शुरू करना', 'अंतहीन अंत' और 'अनंत खालीपन' लिखा है, प्रत्येक पर एक छोटा सा दृश्य संकेत है कि क्या गलत हो रहा है, और ये कार्ड हल्के पेस्टल रंग की पृष्ठभूमि पर अंकित हैं।
चार विफलता कार्ड जिन पर 'दुखद चित्रण', 'कुछ भी नहीं से शुरू करना', 'अंतहीन अंत' और 'अनंत खालीपन' लिखा है, प्रत्येक पर एक छोटा सा दृश्य संकेत है कि क्या गलत हो रहा है, और ये कार्ड हल्के पेस्टल रंग की पृष्ठभूमि पर अंकित हैं।

दुखद चित्रण। "अभी यहाँ कुछ नहीं है" के बगल में झुकी हुई आँखों वाला एक दोस्ताना शुभंकर। यह Figma में प्यारा लगता है, लेकिन प्रोडक्ट में अपमानजनक लगता है। उपयोगकर्ता दुखी नहीं है, उसने अभी-अभी साइन अप किया है।

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

अंतहीन स्थिति। खोज में कुछ नहीं मिलता, बात यहीं खत्म। कोई सुझाव नहीं, कोई संबंधित परिणाम नहीं, उपयोगकर्ता द्वारा खोजी गई चीज़ बनाने का कोई प्रस्ताव नहीं। उपयोगकर्ता ने कुछ टाइप किया, आपने मना कर दिया, बातचीत समाप्त।

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

सक्रियण गणित: पहले 60 सेकंड सबसे महत्वपूर्ण क्यों हैं

हर उत्पाद का एक सक्रियण क्षण होता है, वह पहला क्षण जब उपयोगकर्ता वह काम करता है जो उत्पाद को मूल्यवान बनाता है। पहला संदेश भेजना, पहला प्रोजेक्ट बनाना, पहला संपर्क आयात करना, पहला आउटपुट उत्पन्न करना।

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

यही कारण है कि नमूना डेटा और सुझाए गए कार्य, लगभग हर बार खाली स्क्रीन से बेहतर प्रदर्शन करते हैं। ये सक्रियता की दूरी को "क्या करना है यह तय करना, फिर कैसे करना है यह समझना, फिर करना" से घटाकर "इस पर क्लिक करें, देखें क्या होता है, उत्पाद सीखें" तक कम कर देते हैं। तीन चरणों को एक चरण में बदल देते हैं।

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

AI का दृष्टिकोण: अनंत खालीपन के लिए डिज़ाइन करना

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

ChatGPT, Claude, इमेज जनरेटर, कर्सर, हर AI टूल को इस समस्या का सामना करना पड़ता है। इसका सरल समाधान है एक विशाल खाली टेक्स्ट फ़ील्ड जिसमें "मुझसे कुछ भी पूछें" लिखा हो। अनंत संभावनाओं से घिरे उपयोगकर्ता कुछ भी सामान्य सा टाइप कर देते हैं, उन्हें एक सामान्य प्रतिक्रिया मिलती है, और वे यह निष्कर्ष निकाल लेते हैं कि उत्पाद अधूरा है।

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

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

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

लहजा और स्पष्टीकरण: भावनाओं से भरी खाली अवस्थाएँ

अधिकांश टीमें पहले प्रयास में ही रुक जाती हैं। क्लियर होने के बाद की स्थिति वह होती है जब प्रोडक्ट को ऐसा महसूस होता है जैसे कोई सहकर्मी ध्यान दे रहा हो।

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

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

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

त्रुटि और खोज: खाली स्थितियाँ जो विश्वास को जीतती या हारती हैं

ये दो खाली स्थितियाँ हैं जिनकी उपयोगकर्ता को सबसे ज़्यादा परवाह होती है, क्योंकि दोनों ही कार्य के बीच में होती हैं और महत्वपूर्ण कार्य दांव पर लगे होते हैं।

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

सही तरीका है सरल अंग्रेज़ी में विफलता की जानकारी देना। उपयोगकर्ता को उनकी भाषा में बताएं कि क्या विफल हुआ, आपकी भाषा में नहीं। उन्हें पुनः प्रयास करने का मौका दें, एक स्टेटस पेज का लिंक दें, और गलत सेटिंग की ओर इशारा करें। यदि त्रुटि-रहित खाली स्थिति भरी हुई स्थिति की दृश्य संरचना को ही अपनाती है, तो यह एक अतिरिक्त लाभ है, जिससे उपयोगकर्ता समझ जाता है कि उसे क्या कमी महसूस हो रही है।

खोज-रहित खाली स्थिति को सुधारना सबसे आसान है। उपयोगकर्ता ने कुछ टाइप किया है, आप जानते हैं कि वे क्या चाहते हैं, और "कोई परिणाम नहीं मिला" लिखकर उदास चेहरा दिखाना गलत है। न्यूनतम व्यवहार्य संस्करण क्वेरी को दोहराता है और संबंधित खोजों का सुझाव देता है। बेहतर संस्करण उनके द्वारा खोजे गए विषय को बनाने का विकल्प देता है। उत्कृष्ट संस्करण क्वेरी का उपयोग करके एक टेम्पलेट, एक क्रिया या एक सहायता लेख का सुझाव देता है।

GitHub की खोज-रहित खाली स्थिति अक्सर क्वेरी को शीर्षक बनाकर एक समस्या बनाने का सुझाव देती है। Notion एक पृष्ठ बनाने का सुझाव देता है। Linear एक बग दर्ज करने का सुझाव देता है। खोज-रहित खाली स्थिति वह जगह है जहाँ "शुरू करें" विकल्प उपयोगी साबित हो सकता है, क्योंकि अब गंतव्य स्पष्ट है।

अपने उत्पाद की खाली स्थितियों का ऑडिट कैसे करें

आप उसे ठीक नहीं कर सकते जिसका आपने कैटलॉग नहीं बनाया है अधिकांश टीमें खाली स्क्रीन की गिनती करने पर उनकी संख्या देखकर आश्चर्यचकित रह जाती हैं। इस ऑडिट को इस क्रम में चलाएँ:

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

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

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

यदि आप इसे एक टीम गतिविधि बनाना चाहते हैं, तो 90 मिनट का समय निकालें और डिज़ाइन टीम, प्रोजेक्ट मैनेजर और एक ऐसे इंजीनियर को आमंत्रित करें जिसे टेक्स्ट लिखना पसंद नहीं है। एजेंडा एकदम सरल है, और आप इसी सप्ताह परिणाम प्राप्त कर सकते हैं।

पहले 30 मिनट, एक टीम के रूप में ऑडिट करें, एक ही स्क्रीन साझा करते हुए, प्रत्येक खाली सतह का बारीकी से निरीक्षण करें। प्रत्येक सतह किस प्रकार की है, इस पर चर्चा करें। असहमति होना स्वाभाविक है, चर्चा ही मुख्य बात है।

अगले 30 मिनट, सबसे अधिक ट्रैफ़िक वाली तीन खाली स्थितियों का चयन करें और उन्हें तुरंत पुनः लिखें। एक वाक्य में विषयवस्तु का परिचय दें, दो सुझाए गए कार्य और नमूना डेटा जोड़ने या न जोड़ने का निर्णय लें। विज़ुअल को परिपूर्ण करने की जल्दबाजी न करें, पहले विषयवस्तु पर ध्यान दें।

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

खाली स्थिति उत्पाद की बॉडी लैंग्वेज है

आप मार्केटिंग साइट को नकली बना सकते हैं। आप होमपेज को नकली बना सकते हैं। आप खाली स्थिति को नकली नहीं बना सकते, क्योंकि यही वह क्षण है जब उत्पाद वादे करना बंद कर देता है और परिणाम देना शुरू कर देता है।

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

खाली स्क्रीन को मुख्य द्वार की तरह समझें, न कि हाशिए पर रखी जाने वाली बात की तरह। इसे पहले डिज़ाइन करें, न कि अंत में। हर महीने इसकी समीक्षा करें। इसकी ज़िम्मेदारी किसी विशेषज्ञ को सौंपें।

आपके उत्पाद की सबसे उपेक्षित स्क्रीन वही है जिसे आपके उपयोगकर्ता सबसे ज़्यादा देखते हैं। इसे महत्वपूर्ण बनाएं।

Want your product's empty states designed by people who treat them like the front door, not a footnote? Hire Brainy.

Get Started

More from Brainy Papers

Keep reading