ai for designersApril 30, 202611 min read

लेटेंसी के लिए डिज़ाइन करना: जब AI की गति UX बन जाती है

एआई लेटेंसी को ध्यान में रखते हुए डिजाइन तैयार करने के लिए एक व्यावहारिक मार्गदर्शिका। स्ट्रीमिंग टेक्स्ट, ऑप्टिमिस्टिक यूआई, प्रोग्रेसिव डिस्क्लोजर, रीजनिंग सरफेसेस और बैकग्राउंड एजेंट्स, साथ ही Claude.ai, कर्सर, Linear AI, ग्रैनोला और Perplexity के वास्तविक विश्लेषण। इसके अलावा, अनुमानित गति का गणितीय विश्लेषण भी शामिल है।

By Boone
XLinkedIn
designing for ai latency

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

यह है कार्यप्रणाली। इसमें गति के अनुमान का गणित, पाँच कारगर पैटर्न, चार नाकाम पैटर्न, पाँच चरण और प्री-शिप चेकलिस्ट शामिल हैं।

एआई लेटेंसी एक डिज़ाइन समस्या है, इंजीनियरिंग नहीं

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

उपयोगकर्ता मिलीसेकंड नहीं मापता। उपयोगकर्ता यह मापता है कि कुछ हो रहा है या नहीं। चार सेकंड का निरंतर प्रवाह तेज़ पढ़ा जा सकता है। 1.5 सेकंड का विलंब बाधित पढ़ा जा सकता है।

गति के अनुमान का गणित

चार सेकंड का निरंतर प्रवाह तेज़ पढ़ा जा सकता है। 1.5 सेकंड का रिस्पॉन्स जो पढ़ने में रुकावट पैदा करता है, धीमा लगता है। महसूस की गई गति फीडबैक घनत्व पर निर्भर करती है, न कि बीते हुए समय पर। यही एक तथ्य किसी भी AI उत्पाद में विलंबता संबंधी हर निर्णय को बदल देता है।

दो वॉक्सेल पेडस्टल की वॉक्सेल संरचना, बाईं ओर एक मूंगा स्लैब जिस पर STREAM लिखा है और उस पर छोटे वॉक्सेल टोकन-बार का एक लंबा ढेर ऊपर की ओर गिरता हुआ दिखाई देता है, दाईं ओर एक चारकोल स्लैब जिस पर BLOCK लिखा है और उस पर एक बंद वॉक्सेल घन भारी और धुंधला सा दिखाई देता है।
दो वॉक्सेल पेडस्टल की वॉक्सेल संरचना, बाईं ओर एक मूंगा स्लैब जिस पर STREAM लिखा है और उस पर छोटे वॉक्सेल टोकन-बार का एक लंबा ढेर ऊपर की ओर गिरता हुआ दिखाई देता है, दाईं ओर एक चारकोल स्लैब जिस पर BLOCK लिखा है और उस पर एक बंद वॉक्सेल घन भारी और धुंधला सा दिखाई देता है।

महत्वपूर्ण संख्याएँ हैं पहले टोकन तक पहुँचने का समय और प्रति सेकंड टोकन की संख्या, न कि कुल रिस्पॉन्स समय। पहले टोकन तक पहुँचने में 500 मिलीसेकंड से कम समय लगता है, जो तुरंत प्रतिक्रिया जैसा लगता है। प्रति सेकंड 30 से 80 टोकन मानव गति के अनुरूप माने जाते हैं। पाँच सेकंड का कुल समय तब स्वीकार्य है जब डेटा पहले टोकन से ही प्रवाहित होता है, और रुकावट आने पर यह त्रुटिपूर्ण हो जाता है। इन संख्याओं को ध्यान में रखकर डिज़ाइन करने पर एक धीमा मॉडल भी प्रतिस्पर्धियों से तेज़ महसूस हो सकता है।

पाँच कारगर पैटर्न

स्ट्रीमिंग टेक्स्ट। ऑप्टिमिस्टिक UI। प्रोग्रेसिव डिस्क्लोजर। रीजनिंग सरफेसेस। बैकग्राउंड एजेंट्स। हर AI उत्पाद जो महसूस की गई गति के मामले में सफल होता है, वह इनमें से कम से कम तीन पर निर्भर करता है, और बेहतरीन उत्पाद तो सभी पाँचों पर निर्भर करते हैं।

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

स्ट्रीमिंग टेक्स्ट प्रतीक्षा को उत्तर में बदल देता है

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

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

आशावादी UI मॉडल के परिणाम देने से पहले ही कार्रवाई को प्रतिबद्ध करता है

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

स्टूडियो के फर्श पर क्षैतिज पंक्ति में स्थित पांच छोटे, भारी वोक्सेल स्तंभों का वोक्सेल आरेख, जिनमें से प्रत्येक अलग-अलग हल्के रंग का है और पतली कनेक्टिंग वोक्सेल रेखाओं द्वारा अलग किया गया है, प्रत्येक स्तंभ पर STREAM, OPTIMISTIC, DISCLOSE, REASON, BACKGROUND जैसे एकल-शब्द लेबल उकेरे गए हैं।
स्टूडियो के फर्श पर क्षैतिज पंक्ति में स्थित पांच छोटे, भारी वोक्सेल स्तंभों का वोक्सेल आरेख, जिनमें से प्रत्येक अलग-अलग हल्के रंग का है और पतली कनेक्टिंग वोक्सेल रेखाओं द्वारा अलग किया गया है, प्रत्येक स्तंभ पर STREAM, OPTIMISTIC, DISCLOSE, REASON, BACKGROUND जैसे एकल-शब्द लेबल उकेरे गए हैं।

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

प्रगतिशील प्रकटीकरण में स्केलेटन, ड्राफ्ट और अंतिम संस्करण शामिल हैं

तीसरा पैटर्न है: पहले स्केलेटन, फिर आंशिक ड्राफ्ट और अंत में अंतिम आउटपुट। संरचना सामग्री से पहले दिखाई देती है, जिससे दृष्टि को ट्रैक करने के लिए कुछ मिलता है और प्रतीक्षा का आभास कम हो जाता है।

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

रीजनिंग सरफेसेस प्रतीक्षा समय को विश्वास में परिवर्तित करते हैं

चौथा पैटर्न मॉडल की योजना या विचार प्रक्रिया को काम करते समय प्रदर्शित करना है। किसी एजेंट को तर्क करते हुए देखना, स्पिनर को देखने से बेहतर है। यह विश्वास भी बढ़ाता है, क्योंकि उपयोगकर्ता मॉडल के कार्य करने से पहले ही देख लेता है कि वह क्या करने का प्रयास कर रहा है।

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

बैकग्राउंड एजेंट उपयोगकर्ताओं को मॉडल के चलने के दौरान काम जारी रखने देते हैं

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

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

चार विफल पैटर्न

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

केवल स्पिनर उपयोगकर्ता की सभी आवश्यक चीज़ों को छिपा देते हैं

प्रगति संकेत के बिना स्पिनर एक ब्लैक बॉक्स की तरह होता है। उपयोगकर्ता के पास ध्यान देने के लिए कुछ नहीं होता और प्रतीक्षा उसी प्रतीक्षा की तुलना में धीमी होती है जिसमें टोकन स्ट्रीम होती है। स्पिनर उपयोगकर्ता को दूसरी ओर देखने के लिए कहता है, जो कि AI सतह के कार्य के विपरीत है।

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

सोचने वाले टेक्स्ट लूप बिना जानकारी के शोर हैं

घूमता हुआ सोचने वाला टेक्स्ट लूप स्पिनर से भी बदतर है। यह ऐसी प्रगति का आभास देता है जो वास्तव में नहीं है। उपयोगकर्ता दो सत्रों के भीतर इसे अनदेखा करना सीख जाते हैं, जिससे सतह द्वारा भेजे जाने वाले किसी भी वास्तविक स्टेटस के लिए चैनल बंद हो जाता है।

चार वॉक्सेल पेडस्टल की वॉक्सेल संरचना, जिन पर विफल पैटर्न बने हैं: सबसे बाईं ओर एक स्पिनर रिंग जिस पर एक कोरल रूल खींची गई है, दूसरे पर टेक्स्ट-लूप बार का एक स्टैक जिस पर वही रूल खींची गई है, तीसरे पर एक मोडल डायलॉग जिस पर वही रूल खींची गई है, और सबसे दाईं ओर एक खाली स्क्रीन जिस पर वही रूल खींची गई है, साथ ही एकल-शब्द लेबल: स्पिनर, लूप, मोडल, ब्लैंक।
चार वॉक्सेल पेडस्टल की वॉक्सेल संरचना, जिन पर विफल पैटर्न बने हैं: सबसे बाईं ओर एक स्पिनर रिंग जिस पर एक कोरल रूल खींची गई है, दूसरे पर टेक्स्ट-लूप बार का एक स्टैक जिस पर वही रूल खींची गई है, तीसरे पर एक मोडल डायलॉग जिस पर वही रूल खींची गई है, और सबसे दाईं ओर एक खाली स्क्रीन जिस पर वही रूल खींची गई है, साथ ही एकल-शब्द लेबल: स्पिनर, लूप, मोडल, ब्लैंक।

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

मॉडल ब्लॉकिंग डायलॉग प्रतीक्षा को दीवार में बदल देते हैं

मॉडल के चलने के दौरान बाकी UI को ब्लॉक करने वाला मॉडल सबसे महंगी लेटेंसी त्रुटि है। यह प्रतीक्षा को बंधक स्थिति में बदल देता है। उपयोगकर्ता स्क्रॉल नहीं कर सकता, पिछले उत्तर को कॉपी नहीं कर सकता, और कुछ भी नहीं कर सकता।

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

प्रगति संकेत न होने पर उपयोगकर्ता वेबसाइट छोड़ देता है

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

500 मिलीसेकंड से अधिक समय लेने वाले प्रत्येक AI इंटरफ़ेस को प्रगति संकेत की आवश्यकता होती है। स्ट्रीमिंग टेक्स्ट सबसे अच्छा विकल्प है। स्केलेटन इसके बाद आता है। लंबे समय तक प्रतीक्षा के लिए रीजनिंग ट्रेस काम करता है। बाकी सभी स्थितियों के लिए स्टेटस लाइन काम करती है। सिग्नल का होना अनिवार्य है।

पाँच वास्तविक उत्पाद विश्लेषण

पाँच AI इंटरफ़ेस जो विलंबता को उपयोगकर्ता अनुभव में बदल देते हैं।

Claude.ai, संपूर्ण इंटरैक्शन के रूप में स्ट्रीमिंग

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

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

कर्सर, योजना-और-संचालन लूप

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

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

⟦ब्रांड 1⟧ एआई, इनलाइन प्रगतिशील प्रकटीकरण

⟦ब्रांड 2⟧ एआई मौजूदा सतहों के भीतर प्रगतिशील प्रकटीकरण प्रदान करता है। एआई कभी भी अग्रभूमि का मालिक नहीं होता है। एक मसौदा सुझाव समस्या में इनलाइन दिखाई देता है। एक सारांश परियोजना में इनलाइन दिखाई देता है। प्रतीक्षा कभी भी उपयोगकर्ता के वास्तविक कार्य को बाधित नहीं करती क्योंकि उपयोगकर्ता पहले से ही वह कार्य कर रहा होता है जिसे AI संवर्धित कर रहा है।

उपयोगकर्ता द्वारा पहले से परिचित उत्पाद में एम्बेडेड AI को कभी भी मॉडल या टेकओवर नहीं होना चाहिए। इनलाइन प्रकटीकरण सही पैटर्न है, और विलंबता लागत उन कार्यों में छिपी रहती है जो उपयोगकर्ता पहले से ही कर रहा है।

क्या आप ऐसा AI उत्पाद चाहते हैं जो मॉडल धीमा होने पर भी तेज़ महसूस हो? Brainy को किराए पर लें। UXBrainy विलंबता ऑडिट और स्ट्रीमिंग UI रीडिज़ाइन प्रदान करता है, AppBrainy पूर्ण AI उत्पाद वितरण प्रदान करता है, और ClaudeBrainy प्रॉम्प्ट और स्किल लेयर प्रदान करता है जो स्ट्रीमिंग को किफायती बनाता है। इसे एआई एजेंट यूआई डिज़ाइन पैटर्न के साथ जोड़ें ताकि एजेंट लेयर समान शिल्प स्तर पर उपलब्ध हो सके।

ग्रैनोला, रिकॉर्डिंग-से-सारांश कैस्केड

ग्रैनोला मॉडल के मिनटों के काम को चार-चरण कैस्केड के पीछे छिपाता है। रिकॉर्डिंग पहले चरण में कच्चे वेवफॉर्म के रूप में आती है। प्रतिलेख दूसरे चरण में स्क्रॉल करने योग्य टेक्स्ट के रूप में आता है। ड्राफ्ट नोट्स तीसरे चरण में बुलेट संरचना के रूप में आते हैं। अंतिम सारांश अंत में परिष्कृत गद्य के रूप में आता है। अगला चरण तैयार होने से पहले प्रत्येक चरण उपयोगी होता है।

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

Perplexity, लाइव सोर्स स्ट्रीमिंग

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

डिजाइन की मुख्य विशेषता परिणाम से पहले काम दिखाना है। स्रोत सूची पढ़ने वाला उपयोगकर्ता प्रतीक्षा नहीं कर रहा होता है। समान कुल प्रतिक्रिया समय, यदि उत्तर तैयार होने तक स्रोत छिपे रहते हैं, तो दो से तीन गुना धीमा महसूस होगा। प्रतीक्षा की सूचना सघनता ही गति की अनुभूति का पूरा कारण है।

प्री-शिप लेटेंसी चेकलिस्ट

किसी भी AI इंटरफ़ेस को शिप करने से पहले इस चेकलिस्ट को चलाएँ। बारह जाँचें, सभी मापने योग्य।

  1. वार्म सेशन पर पहले टोकन तक पहुंचने का समय 500 मिलीसेकंड से कम।

  2. स्ट्रीमिंग लक्ष्य मॉडल पर 30 से 80 टोकन प्रति सेकंड की गति बनाए रखती है।

  3. 500 मिलीसेकंड से अधिक के प्रत्येक प्रतीक्षा समय पर प्रगति संकेत मिलता है।

  4. AI सतह पर कहीं भी कोई शुद्ध स्पिनर नहीं है।

  5. AI सतह पर कहीं भी कोई घूमने वाला थिंकिंग टेक्स्ट लूप नहीं है।

  6. मॉडल के चलने के दौरान कोई मोडल डायलॉग को अवरुद्ध नहीं करता है।

  7. ऑप्टिमिस्टिक UI, इरादे के 100 मिलीसेकंड के भीतर दृश्य क्रिया को पूरा करता है।

  8. दो सेकंड से अधिक की किसी भी प्रतिक्रिया के लिए, सामग्री से पहले स्केलेटन रेंडर होते हैं।

  9. दस सेकंड से अधिक के किसी भी कार्य के लिए रीजनिंग ट्रेस प्रदर्शित होते हैं।

  10. लंबे समय तक चलने वाले एजेंट अग्रभूमि में नहीं, बल्कि एक साइड पैनल में चलते हैं।

  11. अनुरोध के दौरान उपयोगकर्ता स्क्रॉल कर सकता है, कॉपी कर सकता है और पिछले आउटपुट को पढ़ सकता है।

  12. प्रत्येक बहु-चरणीय प्रतिक्रिया उपयोगकर्ता द्वारा उपयोग किए जा सकने वाले मध्यवर्ती चरणों को प्रदर्शित करती है।

यह सूची डिज़ाइन समीक्षा टेम्पलेट में रहती है और हर बार चलाने पर तेज़ होती जाती है।

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

किसी AI उत्पाद में सबसे महत्वपूर्ण विलंबता संख्या क्या है?

पहले टोकन तक पहुंचने का समय। कुल प्रतिक्रिया समय उतना मायने नहीं रखता जितना कि उपयोगकर्ता को पढ़ने के लिए कुछ मिलने से पहले कितना समय लगता है। 500 मिलीसेकंड से कम का समय तत्काल माना जाता है।

क्या स्ट्रीमिंग हमेशा ब्लॉकिंग से बेहतर है?

पाठ के लिए, हाँ। 500 मिलीसेकंड से कम समय के लिए, ब्लॉकिंग ठीक है क्योंकि प्रतीक्षा अदृश्य होती है। इससे अधिक समय के लिए, स्ट्रीमिंग हर गति मापदंड पर ब्लॉकिंग से बेहतर है।

मुझे स्ट्रीमिंग के बजाय ऑप्टिमिस्टिक UI का उपयोग कब करना चाहिए?

स्ट्रीमिंग का उपयोग तब करें जब आउटपुट उत्तर हो, जैसे गद्य, कोड या संरचित जनरेशन। ऑप्टिमिस्टिक UI का उपयोग तब करें जब मॉडल ऐसा निर्णय ले रहा हो जिसकी उपयोगकर्ता पहले से अपेक्षा करता हो, जैसे परिष्कृत मसौदा या स्वीकृत सुझाव। दोनों एक दूसरे के पूरक हैं।

मिनटों में प्रगति दिखाने वाले एजेंट की प्रगति कैसे दिखाऊं?

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

आज के AI उत्पादों में सबसे बड़ी लेटेंसी की गलती क्या है?

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

AI लेटेंसी के लिए डिज़ाइन करने से वास्तव में क्या लाभ होता है

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

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

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

यदि आप ऐसा AI उत्पाद चाहते हैं जो मॉडल धीमा होने पर भी तेज़ महसूस हो, तो किराया Brainy का उपयोग करें। UXBrainy लेटेंसी ऑडिट और स्ट्रीमिंग UI रीडिज़ाइन प्रदान करता है, AppBrainy पूर्ण AI उत्पाद डिलीवरी प्रदान करता है, और ClaudeBrainy प्रॉम्प्ट और स्किल लेयर प्रदान करता है जो स्ट्रीमिंग को किफायती बनाता है।

Want an AI product that feels fast even when the model is slow? Brainy ships UXBrainy as latency audits and streaming UI redesigns, AppBrainy as full AI product delivery, and ClaudeBrainy as the prompt and Skill layer that makes streaming and reasoning surfaces cheap to build.

Get Started