उपयोगकर्ताओं को साइन अप करने में मदद करना
आम तौर पर, साइन-अप फ़ॉर्म आपकी वेबसाइट पर मौजूद किसी फ़ॉर्म के साथ पहला इंटरैक्शन होता है. साइन-अप फ़ॉर्म का डिज़ाइन अच्छा होना ज़रूरी है. साथ ही, फ़ॉर्म का सुरक्षित होना भी ज़रूरी है.
साइन-अप फ़ॉर्म देखें, ताकि आपको पता चल सके कि उपयोगकर्ताओं को आपकी वेबसाइट पर साइन अप करने में कैसे मदद की जा सकती है.
साइन अप करने वाले फ़ॉर्म को छोटा रखें. साथ ही, खाता बनाने के लिए सिर्फ़ ज़रूरी फ़ॉर्म कंट्रोल दिखाएं. फ़ॉर्म कंट्रोल को दो बार न जोड़ें, ताकि उपयोगकर्ताओं को अपने खाते की जानकारी सही तरीके से भरने में मदद मिल सके. इसके बजाय, पुष्टि करने वाला ईमेल भेजें.
खाते की जानकारी
उपयोगकर्ताओं को उनके खाते की जानकारी भरने में मदद करने के लिए, सही autocomplete एट्रिब्यूट का इस्तेमाल करें. ईमेल फ़ील्ड के लिए autocomplete="email" और नए पासवर्ड फ़ील्ड के लिए autocomplete="new-password" का इस्तेमाल करें.
इनपुट कंट्रोल में अपने-आप भरने की सुविधा के बारे में ज़्यादा जानें.
उपयोगकर्ताओं को सुरक्षित पासवर्ड डालने में मदद करने के लिए, reveal-password
<button> का इस्तेमाल किया जा सकता है. पासवर्ड दिखाने के पैटर्न के बारे में ज़्यादा जानें.
साइन-अप फ़ॉर्म को सुरक्षित करना
पासवर्ड को कभी भी सामान्य टेक्स्ट में सेव या ट्रांसमिट न करें. पासवर्ड को सॉल्ट और हैश करना न भूलें. साथ ही, अपना हैशिंग एल्गोरिदम बनाने की कोशिश न करें.
मल्टी-फ़ैक्टर ऑथेंटिकेशन की सुविधा दें. खास तौर पर, तब जब आपको निजी या संवेदनशील डेटा सेव करना हो. एसएमएस ओटीपी के सबसे सही तरीके और WebAuthn की मदद से पुष्टि करने की मज़बूत सुविधा चालू करना लेखों में, कई चरणों में पुष्टि करने की सुविधा को लागू करने का तरीका बताया गया है.
पक्का करें कि उपयोगकर्ता, हैक या चोरी किए गए पासवर्ड का इस्तेमाल न करें. उदाहरण के लिए, Have I Been Pwned से एपीआई का इस्तेमाल करके, हैक किए गए पासवर्ड का पता लगाएं. साथ ही, अपने उपयोगकर्ताओं को कोई नया पासवर्ड डालने का सुझाव दें या उन्हें चेतावनी दें कि उनका पासवर्ड हैक हो गया है.
उपयोगकर्ताओं को साइन इन करने में मदद करना
उपयोगकर्ताओं को आपकी वेबसाइट पर साइन इन करने की सुविधा देने के लिए, साइन-इन फ़ॉर्म बनाने का तरीका जानें.
साइन-अप और साइन-इन बटन की जगह को साफ़ तौर पर दिखाएं. पक्का करें कि आपका फ़ॉर्म, टच डिवाइसों पर इस्तेमाल किया जा सकता हो:
- बटन के टैप टारगेट का साइज़ कम से कम 48 पिक्सल है.
- आपके फ़ॉर्म एलिमेंट का
font-sizeकाफ़ी बड़ा है. मोबाइल पर20pxका साइज़ सही होता है. - फ़ॉर्म कंट्रोल के बीच ज़रूरत के मुताबिक जगह (
margin) हो. साथ ही, इनपुट का साइज़ इतना बड़ा हो कि उन्हें आसानी से इस्तेमाल किया जा सके. मोबाइल पर कम से कमpadding: 15pxका इस्तेमाल करें.
उपयोगकर्ताओं को ईमेल और पासवर्ड भरने में मदद करना
इससे ब्राउज़र और पासवर्ड मैनेजर को खाते की जानकारी अपने-आप भरने में मदद मिलती है.
ईमेल फ़ील्ड के लिए autocomplete="email" और मौजूदा पासवर्ड फ़ील्ड के लिए autocomplete="current-password" का इस्तेमाल करें.
उपयोगकर्ताओं को खाते की जानकारी मैन्युअल तरीके से भरने में मदद करने के लिए, ईमेल फ़ील्ड के लिए type="email" का इस्तेमाल करें. इससे मोबाइल डिवाइसों पर सही ऑन-स्क्रीन कीबोर्ड दिखेगा.
अपने ईमेल और पासवर्ड फ़ील्ड के लिए required एट्रिब्यूट का इस्तेमाल करें, ताकि जब उपयोगकर्ता फ़ॉर्म सबमिट करे, तब उसे अमान्य वैल्यू के बारे में चेतावनी दी जा सके. हमारा सुझाव है कि आप रीयल-टाइम पुष्टि का इस्तेमाल करें. इससे उपयोगकर्ताओं को अमान्य डेटा डालने के तुरंत बाद उसे ठीक करने में मदद मिलती है. उन्हें फ़ॉर्म सबमिट होने का इंतज़ार नहीं करना पड़ता.
पक्का करें कि उपयोगकर्ता को वह पासवर्ड दिखे जो उसने डाला है
उपयोगकर्ताओं की निजता का ध्यान रखने के लिए, <input type="password"> के लिए भरा गया टेक्स्ट डिफ़ॉल्ट रूप से छिपा होता है.
उपयोगकर्ताओं को पासवर्ड डालने में मदद करें. इसके लिए, डाले गए टेक्स्ट को दिखाने या छिपाने के लिए <button> दिखाएं.
पासवर्ड दिखाने की सुविधा <button> लागू करने के बारे में ज़्यादा जानें.
पक्का करें कि आपके साइन-इन और साइन-अप फ़ॉर्म इस्तेमाल किए जा सकते हों
साइन-इन और साइन-अप फ़ॉर्म को नियमित तौर पर असली लोगों के साथ टेस्ट करें. इससे यह पक्का किया जा सकेगा कि पुष्टि करने की प्रोसेस सही तरीके से काम कर रही है. फ़ील्ड डेटा इकट्ठा करने के लिए, आंकड़ों और असल उपयोगकर्ता के मेज़रमेंट (आरयूएम) का इस्तेमाल करें. साथ ही, खुद टेस्ट करने के लिए Lighthouse और PageSpeed Insights जैसे टूल का इस्तेमाल करें. इस्तेमाल में आसानी से जुड़ी टेस्टिंग और Analytics डेटा इकट्ठा करने के बारे में ज़्यादा जानें.
पक्का करें कि आपके फ़ॉर्म, अलग-अलग ब्राउज़र और प्लैटफ़ॉर्म पर काम करते हों. अपने फ़ॉर्म को अलग-अलग स्क्रीन साइज़ पर टेस्ट करें. इसके लिए, सिर्फ़ कीबोर्ड का इस्तेमाल करें. इसके अलावा, Mac पर VoiceOver या Windows पर NVDA जैसे स्क्रीन रीडर का इस्तेमाल करें.
उपयोगकर्ताओं को खाते की सेटिंग बदलने में मदद करना
पक्का करें कि उपयोगकर्ता, खाते की हर सेटिंग में बदलाव कर सकें. जैसे, ईमेल पते, पासवर्ड, और उपयोगकर्ता नाम.
यह साफ़ तौर पर बताएं कि कौनसा डेटा सेव किया जा रहा है. साथ ही, उपयोगकर्ताओं को यह सुविधा दें कि वे किसी भी समय अपना पूरा निजी डेटा डाउनलोड कर सकें. पक्का करें कि अगर उपयोगकर्ता चाहें, तो वे अपना खाता मिटा सकें. खाता मैनेज करने से जुड़ी ऐसी सुविधाएं, कुछ इलाकों में कानूनी तौर पर ज़रूरी हो सकती हैं.
पक्का करें कि उपयोगकर्ता अपने पासवर्ड अपडेट कर सकें
उपयोगकर्ताओं के लिए, पासवर्ड अपडेट करने की प्रोसेस को आसान बनाएं.
पासवर्ड बदलने से पहले, उपयोगकर्ताओं से मौजूदा पासवर्ड मांगें. साथ ही, उन्हें पासवर्ड बदलने के बारे में ईमेल भेजें. इसमें, खाते को पहले जैसा करने और लॉक करने का विकल्प भी शामिल करें.
नया पासवर्ड पाने का अनुरोध करने का विकल्प जोड़ें. साथ ही, नया पासवर्ड पाने का अनुरोध करने के लिए .well-known यूआरएल दें.