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