जल्दी साइन-इन करने की सुविधा चालू करना: यूज़र इंटरफ़ेस मोड के UX पैटर्न

Eiji Kitamura

पब्लिश करने की तारीख: 30 सितंबर, 2026, पिछली बार अपडेट करने की तारीख: 7 अक्टूबर, 2026

खास जानकारी

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

शर्त के हिसाब से यूज़र इंटरफ़ेस (यूआई) की सुविधा, उपयोगकर्ता के टेक्स्ट इनपुट फ़ील्ड पर फ़ोकस करने पर अपने-आप भरने के सुझाव दिखाती है. हालांकि, इस सुविधा के उलट, तुरंत यूज़र इंटरफ़ेस (यूआई) मोड, बटन या लिंक पर क्लिक करने के जवाब में ब्राउज़र के पुष्टि करने वाले डायलॉग को तुरंत चालू कर देता है. फ़िलहाल, uiMode सिर्फ़ "immediate" स्वीकार करता है, लेकिन आने वाले समय में इसमें बदलाव हो सकता है.

इमीडिएट यूज़र इंटरफ़ेस (यूआई) मोड की तीन मुख्य विशेषताएं हैं. इनकी वजह से, यह मोड तुरंत साइन-इन करने के लिए सबसे असरदार है:

  • क्रॉस-डिवाइस क्यूआर कोड को स्किप करना: अगर डिवाइस पर तुरंत उपलब्ध पासकी या सेव किए गए पासवर्ड मौजूद हैं, तो ब्राउज़र तुरंत पुष्टि करने वाला डायलॉग बॉक्स दिखाता है. अगर कोई भी डिवाइस कनेक्ट नहीं है, तो यह तुरंत बंद हो जाता है. साथ ही, स्मार्टफ़ोन के लिए, क्रॉस-डिवाइस क्यूआर कोड वाली स्क्रीन नहीं दिखती है. इससे आपकी साइट, सामान्य फ़ॉलबैक नेविगेशन (जैसे, साइन-इन पेज पर जाना) पर आसानी से ट्रांज़िशन कर सकती है.
  • खाते के हिसाब से क्रेडेंशियल चुनने के लिए, आसान यूज़र इंटरफ़ेस (यूआई): यह अलग-अलग तरह के क्रेडेंशियल को अलग-अलग दिखाने के बजाय, पासकी और पासवर्ड के बीच के अंतर को छिपाता है. इससे, खाते के हिसाब से क्रेडेंशियल चुनने के लिए, आसान यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराया जा सकता है. इससे यह तय किया जा सकता है कि उपयोगकर्ता किस खाते से साइन इन करना चाहता है.
  • सुरक्षित प्रोग्रेसिव एन्हांसमेंट: यह सुविधा सिर्फ़ Google Chrome और Chromium ब्राउज़र पर काम करती है. सुविधा का पता लगाने की सुविधा का इस्तेमाल करके, उन लोगों को तुरंत साइन-इन करने की सुविधा दी जा सकती है जो इस सुविधा के साथ काम करने वाले ब्राउज़र का इस्तेमाल करते हैं. इससे, उन लोगों के मौजूदा लॉगिन फ़्लो में कोई रुकावट नहीं आती जो इस सुविधा के साथ काम न करने वाले ब्राउज़र (जैसे, Safari या Firefox) या गुप्त मोड का इस्तेमाल करते हैं.

एपीआई के काम करने के तरीके और सुविधा का पता लगाने के तरीके के बारे में ज़्यादा जानने के लिए, लॉगिन के लिए तुरंत यूज़र इंटरफ़ेस (यूआई) मोड लेख पढ़ें. इस दस्तावेज़ में, हम यूज़र एक्सपीरियंस (यूएक्स) के उन पैटर्न के बारे में जानेंगे जिनसे इमीडिएट यूज़र इंटरफ़ेस (यूआई) मोड के साथ कन्वर्ज़न को बढ़ावा मिलता है. साथ ही, हम डिज़ाइन से जुड़ी उन समस्याओं के बारे में भी जानेंगे जिनसे बचना चाहिए.

इमीडिएट यूज़र इंटरफ़ेस (यूआई) मोड का इस्तेमाल करने के लिए सबसे सही जगह, पेज नेविगेशन से ठीक पहले इंटरसेप्ट करना है. जब भी कोई ऐसा उपयोगकर्ता किसी लिंक या ऐक्शन बटन पर क्लिक करता है जिसने पुष्टि नहीं की है या जिसका सेशन खत्म हो गया है, तो उसे आम तौर पर साइन-इन पेज पर ले जाया जाता है. ऐसे में, उसी समय तुरंत यूज़र इंटरफ़ेस (यूआई) मोड को चालू करने से, उपयोगकर्ता को बेहतर अनुभव मिलता है. साथ ही, उसके काम में कोई रुकावट नहीं आती.

ज़्यादातर वेबसाइटें, स्क्रीन के सबसे ऊपर मौजूद ग्लोबल हेडर में "साइन इन करें" लिंक देती हैं. इस लिंक पर क्लिक करने से, उपयोगकर्ता साइन-इन पेज पर पहुंच जाता है. जब कोई व्यक्ति ब्राउज़ किए जा रहे पेज पर इस लिंक पर क्लिक करता है, तो नेविगेशन रुक जाता है. साथ ही, Immediate UI मोड चालू हो जाता है. इससे ब्राउज़र को मौजूदा पेज पर ही खाता चुनने का डायलॉग दिखाने की अनुमति मिलती है. ऐसा तब होता है, जब डिवाइस पर क्रेडेंशियल मौजूद हों.

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

चेकआउट के दौरान डाइनैमिक साइन-इन (ई-कॉमर्स)

ई-कॉमर्स साइटों पर, शॉपिंग कार्ट से चेकआउट पेज पर ट्रांज़िशन करने के दौरान, पेज नेविगेशन में आने वाली समस्या की वजह से, खरीदारी के बिना कार्ट में सामान छोड़ने की समस्या सबसे ज़्यादा होती है. जब पुष्टि न किए गए खरीदार, कार्ट स्क्रीन पर मौजूद 'चेकआउट पर जाएं' बटन पर क्लिक करते हैं, तो तुरंत यूज़र इंटरफ़ेस (यूआई) मोड चालू हो जाता है. इससे, खाता चुनने का डायलॉग बॉक्स ठीक उसी जगह पर दिखता है जहां बटन पर क्लिक किया गया था. इस पर एक बार टैप करके, पुष्टि की प्रक्रिया पूरी की जा सकती है.

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

माइक्रो-ऐक्शन (पसंद करना, बुकमार्क करना, सेव करना) के लिए इनलाइन साइन-इन

जब लोग सोशल फ़ीड, कम्यूनिटी साइटों या ई-कॉमर्स प्रॉडक्ट कैटलॉग ब्राउज़ करते हैं, तो हर बार किसी पोस्ट को "पसंद" करने या किसी आइटम को "बुकमार्क" करने की कोशिश करने पर, उन्हें साइन-इन पेज पर रीडायरेक्ट किया जाता है. इससे कुछ लोग कार्रवाई छोड़ सकते हैं.

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

पब्लिशर की साइट पर paywall को अनलॉक करना

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

जब कोई व्यक्ति किसी लेख को नीचे की ओर स्क्रोल करता है और पेवॉल तक पहुंच जाता है, तब वह 'अपने खाते से पढ़ना जारी रखें' बटन पर क्लिक करता है. इससे, तुरंत दिखने वाला यूज़र इंटरफ़ेस (यूआई) मोड चालू हो जाता है. यह मोड, पुष्टि करने वाला डायलॉग बॉक्स ठीक उसी स्क्रोल पोज़िशन पर दिखाता है जहां व्यक्ति ने स्क्रोल करना बंद किया था. पुष्टि पूरी होने के तुरंत बाद, लेख पर लगा धुंधलापन हट जाता है. इसके लिए, पेज को फिर से लोड करने की ज़रूरत नहीं पड़ती. इससे व्यक्ति, लेख को पढ़ना जारी रख पाता है. साथ ही, उसे उस लाइन को फिर से ढूंढने की ज़रूरत नहीं पड़ती जिसे वह पढ़ रहा था. अगर कोई क्रेडेंशियल मौजूद नहीं है, तो पेवॉल सेक्शन में मौजूद इनलाइन रजिस्ट्रेशन या साइन-इन फ़ॉर्म को बड़ा करें.

इन एंटी-पैटर्न से बचें

पेज पर नेविगेट करने से पहले Immediate UI मोड का इस्तेमाल करने से, उपयोगकर्ता को बहुत फ़ायदा मिलता है. हालांकि, इसे गलत जगह पर रखने या इसे ऐसे फ़्लो पर लागू करने से जो काम नहीं करते, उपयोगकर्ता के साइन-इन करने के अनुभव पर बुरा असर पड़ेगा.

साइन-इन करने के लिए बने पेजों पर, साइन-इन बटन के लिए 'तुरंत दिखने वाला यूज़र इंटरफ़ेस (यूआई) मोड' का इस्तेमाल न करें

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

साइन-इन पेज पर, पुष्टि करने के हर तरीके का ठीक से काम करना ज़रूरी है. इसलिए, सबसे सही तरीका यह है कि इनपुट फ़ील्ड पर शर्त के हिसाब से यूज़र इंटरफ़ेस (ऑटोफ़िल इंटिग्रेशन) कॉन्फ़िगर किया जाए. इससे स्थानीय पासकी का इस्तेमाल करने में आसानी होगी. साथ ही, "पासकी से साइन इन करें" बटन को, स्टैंडर्ड इनवोकेशन के उन तरीकों के साथ जोड़ा जाए जो क्रॉस-डिवाइस क्यूआर कोड और सुरक्षा कुंजी के विकल्पों को भरोसेमंद तरीके से दिखाते हैं.

फिर से पुष्टि करने के लिए, यूज़र इंटरफ़ेस (यूआई) मोड को तुरंत चालू होने से रोकना

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

हालांकि, फिर से पुष्टि करने के लिए, Immediate UI मोड का इस्तेमाल न करें. इमीडिएट यूज़र इंटरफ़ेस (यूआई) मोड को खास तौर पर, बिना पुष्टि किए साइन-इन करने के फ़्लो के लिए डिज़ाइन किया गया है. इसमें उपयोगकर्ता की पहचान के बारे में अब तक पता नहीं चलता है. अगर कोई रिलाइंग पार्टी, Immediate UI मोड में क्रेडेंशियल आईडी की किसी सूची से क्वेरी कर सकती है और यह देख सकती है कि कोई क्रेडेंशियल मौजूद है या नहीं, तो वह यह अनुमान लगा सकती है कि उपयोगकर्ता ने पहले साइट के साथ इंटरैक्ट किया है या नहीं. साथ ही, वह अलग-अलग सेशन में उपयोगकर्ता को ट्रैक कर सकती है. सेशन के बीच में ट्रैकिंग से जुड़े इस जोखिम को रोकने के लिए, ब्राउज़र, Immediate UI मोड के ऐसे किसी भी अनुरोध को तुरंत अस्वीकार कर देते हैं जिसमें allowCredentials की सूची में कोई आइटम मौजूद हो. इसके लिए, वे NotAllowedError को थ्रो करते हैं. इसके उलट, फिर से पुष्टि करने के दौरान allowCredentials को शामिल न करने से भी समस्या होती है. ऐसा इसलिए, क्योंकि ब्राउज़र आपकी साइट के लिए, डिवाइस पर सेव किए गए हर क्रेडेंशियल को दिखाता है. इससे उपयोगकर्ता, मौजूदा समय में साइन इन किए गए खाते के बजाय किसी दूसरे खाते को गलती से चुन सकता है.

अगर उपयोगकर्ता की पहचान पहले से पता है, तो स्टेप-अप रीऑथेंटिकेशन के लिए, स्टैंडर्ड मोडल WebAuthn अनुरोध (navigator.credentials.get() के बिना uiMode: 'immediate') का इस्तेमाल करें. इसमें allowCredentials में, साइन इन किए हुए उपयोगकर्ता के रजिस्टर किए गए क्रेडेंशियल शामिल हों. इसके अलावा, उपयोगकर्ता को रीऑथेंटिकेशन के लिए चुनौती देने वाली स्टैंडर्ड स्क्रीन पर रीडायरेक्ट करें.

नतीजा

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

साथ ही, यह भी ध्यान रखें कि तुरंत दिखने वाला यूज़र इंटरफ़ेस (यूआई) मोड, बिना पुष्टि किए उपयोगकर्ताओं के लिए, पेज नेविगेशन से पहले सिर्फ़ एक प्रोग्रेसिव एन्हांसमेंट है. इसे फ़ाइनल डेस्टिनेशन के साइन-इन पेज पर मौजूद बटन पर लागू न करें, ताकि आपका डिज़ाइन अलग-अलग डिवाइसों (क्यूआर कोड) का इस्तेमाल करने वाले लोगों के लिए खुला रहे और वे इसे ऐक्सेस कर सकें. साथ ही, इसका इस्तेमाल फिर से पुष्टि करने के उन फ़्लो के लिए न करें जिनके लिए allowCredentials की ज़रूरत होती है.

पासकी लागू करने और वेब आइडेंटिटी की नई सुविधाओं के बारे में ज़्यादा जानने के लिए, यहां दिए गए संसाधन देखें: