पासकी की शुरुआत करते समय इलस्ट्रेशन और बेहतर विज़ुअल का इस्तेमाल करने से, उपयोगकर्ताओं की सीखने की क्षमता को कम किया जा सकता है. साथ ही, आपके कॉन्टेंट को बेहतर बनाने में मदद मिलती है. साथ ही, आपके अनुभव को ज़्यादा दिलचस्प और समझने में मदद मिलती है.
डिज़ाइन कॉम्पोनेंट
पासकी को आपके मौजूदा प्रॉडक्ट या सेवा को बेहतर बनाने के लिए बनाया गया है. आपको इन्हें ऐसे फ़ॉर्मैट का इस्तेमाल करके पेश करना चाहिए जो आपके प्लैटफ़ॉर्म पर लोगों को पहले से ही पसंद हो.
उदाहरण के लिए, जिस तरह आपकी सेवा उपयोगकर्ताओं को अपडेट देने के लिए पेज पर अचानक दिखने वाले विज्ञापनों का इस्तेमाल करती है, उसी तरह Google खाते, साइन इन के दौरान उपयोगकर्ताओं को पासकी के बारे में बताते हैं. इस तरह, पासकी के बारे में बताने के लिए, अचानक दिखने वाले फ़ॉर्मैट का इस्तेमाल करें.
![ट्रेलब्लेज़र का लैंडिंग पेज, जिस पर 'पासकी से तेज़ी से साइन इन करें' टाइटल वाला कार्ड दिख रहा है](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=7&hl=hi)
इसके अलावा, अगर आपका प्लैटफ़ॉर्म आम तौर पर उपयोगकर्ताओं को पॉप-अप मॉडल, सूचना बार या दूसरे अलर्ट स्टाइल के ज़रिए खाते में होने वाले बदलावों की सूचना देता है, तो पासकी के बारे में बताने के लिए सूचना पाने के उन जाने-पहचाने तरीकों का इस्तेमाल करें. इस तरीके से नई पासकी सुविधा को रोल आउट करने पर, एक जैसा और लोगों के लिए आसान अनुभव को पक्का किया जाता है.
![एक पॉप-अप, जिसमें उपयोगकर्ता को पासकी का इस्तेमाल करके, तेज़ी से और सुरक्षित तरीके से पासवर्ड इस्तेमाल करने की सुविधा मिलती है.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=7&hl=hi)
पासकी के बारे में जानकारी देने वाला प्रॉम्प्ट बनाएं
पासकी से जुड़ी कार्रवाइयों के लिए, सिर्फ़ कॉल-टू-ऐक्शन वाले बटन के बजाय, जानकारी देने वाले ऐसे प्रॉम्प्ट बनाएं जिनसे उपयोगकर्ताओं को ज़्यादा जानकारी मिल सके. इनमें इलस्ट्रेशन, हेडलाइन, मैसेज, और कॉल-टू-ऐक्शन शामिल हो सकते हैं.
उदाहरण के लिए, Google खातों के लिए पासकी बनाने के लिए, सिर्फ़ “पासकी बनाएं” बटन में, पेज पर अचानक दिखने वाला एक कॉल-टू-ऐक्शन होता है. इसमें “अपना साइन इन आसान बनाएं” होता है. साथ ही, इसमें पासकी के बारे में कम शब्दों में जानकारी और पासकी आइकॉन और डिवाइस की स्क्रीन को अनलॉक करने के अलग-अलग तरीकों का इलस्ट्रेशन शामिल होता है.
![पासकी के लिए ऑप्ट-इन मैसेज वाले Google खाते के पेज का स्क्रीनशॉट.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=7&hl=hi)
कैननिकल पासकी आइकॉन इस्तेमाल करें
FIDO के सहयोग से एक पासकी आइकॉन बनाया गया है, जिसका इस्तेमाल आपको पासकी दिखाते समय करना होगा. इसका लगातार इस्तेमाल करने से, उपयोगकर्ताओं को पासकी पहचानने और पासकी से जुड़ी कार्रवाइयों को आसान बनाने में मदद मिलेगी.
![कैननिकल पासकी आइकॉन.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=7&hl=hi)
अपने यूज़र इंटरफ़ेस (यूआई) में पासकी आइकॉन का इस्तेमाल करें:
- ऑनबोर्डिंग या अन्य प्रॉम्प्ट में पासकी के कॉन्सेप्ट को दिखाने के लिए, उपयोगकर्ताओं को पासकी बनाने या पासकी को अपग्रेड करने के लिए बढ़ावा दें, ताकि वे ज़्यादा सुरक्षित तरीके से साइन इन कर सकें.
- बटन या लिंक में, जो लोगों को पासकी से साइन इन करने की सुविधा देते हैं.
- सेटिंग में जाकर, उन पासकी को पहचानने में मदद करें जिनमें बदलाव किया जा सकता है या जिन्हें मिटाया जा सकता है.
आइकॉन का रंग बदला जा सकता है, ताकि वह आपके प्रॉडक्ट, ब्रैंड या यूज़र इंटरफ़ेस की कलर स्कीम से मेल खाए.
खाता सेटिंग में “पासकी कार्ड” दिखाएं
पासकी, अक्षरों, संख्याओं, और चिह्नों का मिलकर बनाया जाता है. इसकी तरह, पासकी लोगों को काफ़ी हद तक नहीं दिखती हैं. खाता सेटिंग में पासकी कार्ड के लिए खास जगह बनाएं. कार्ड में, पासकी का आइकॉन, पासकी के बारे में जानकारी, और उसे कब और किस नेटवर्क पर बनाया गया होता है, उसे पिछली बार कब इस्तेमाल किया गया, और पासकी को मैनेज करने के विकल्प शामिल होते हैं. अगर किसी व्यक्ति के पास दो या उससे ज़्यादा पासकी हैं, तो हर पासकी का अपना कार्ड होना चाहिए.
![ट्रेलब्लेज़र की सुरक्षा सेटिंग के पेज में, पासकी सेटिंग का स्क्रीनशॉट.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=7&hl=hi)