साइन-इन फ़ॉर्म बनाने के लिए, क्रॉस-प्लैटफ़ॉर्म ब्राउज़र की सुविधाओं का इस्तेमाल करें. इससे फ़ॉर्म सुरक्षित, ऐक्सेस करने में आसान, और इस्तेमाल करने में आसान बनते हैं.
अगर उपयोगकर्ताओं को कभी आपकी साइट में साइन इन करना पड़े, तो साइन-इन फ़ॉर्म का डिज़ाइन अच्छा होना ज़रूरी है. यह बात खास तौर पर उन लोगों के लिए सही है जो खराब इंटरनेट कनेक्शन का इस्तेमाल कर रहे हैं, मोबाइल पर हैं, जल्दी में हैं या तनाव में हैं. खराब तरीके से डिज़ाइन किए गए साइन-इन फ़ॉर्म की वजह से, बाउंस रेट ज़्यादा होता है. हर बाउंस का मतलब है कि आपने एक ग्राहक खो दिया और एक उपयोगकर्ता को निराश किया. इसका मतलब सिर्फ़ यह नहीं है कि साइन-इन करने का एक मौका छूट गया.
इन्हें कैसे लागू करें
साइन-इन फ़ॉर्म को बेहतर बनाने के लिए, यहां सबसे ज़रूरी दिशा-निर्देश दिए गए हैं.
सही और मान्य एचटीएमएल का इस्तेमाल करना
फ़ॉर्म बनाने के लिए, एलिमेंट और एट्रिब्यूट का ज़्यादा से ज़्यादा इस्तेमाल करें:
<form>,<input>,<label>, और<button>type,autocomplete, औरinputmode
इनसे ब्राउज़र में पहले से मौजूद सुविधाएं चालू होती हैं, सुलभता बेहतर होती है, और मार्कअप को बेहतर तरीके से समझा जा सकता है.
डेटा डालने के लिए, फ़ॉर्म फ़ील्ड को लेबल करने के लिए <label> एलिमेंट का इस्तेमाल करना
किसी <input>, <select> या <textarea> को लेबल करने के लिए, <label> का इस्तेमाल करें. लेबल के for एट्रिब्यूट को इनपुट के id एट्रिब्यूट की वैल्यू के बराबर वैल्यू देकर, लेबल को इनपुट से जोड़ें.
एचटीएमएल एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना
उपयोगकर्ताओं के लिए डेटा डालना आसान बनाएं. इसके लिए, सही <input> एलिमेंट <type> एट्रिब्यूट का इस्तेमाल करें, ताकि मोबाइल पर सही कीबोर्ड उपलब्ध कराया जा सके. साथ ही, ब्राउज़र से पहले से मौजूद बुनियादी पुष्टि की सुविधा चालू करें.
ईमेल पतों के लिए हमेशा type="email" और फ़ोन नंबर के लिए type="tel" का इस्तेमाल करें.
हर <input>, <select>, और <textarea> एलिमेंट में सही autocomplete एट्रिब्यूट होना चाहिए. इससे सुलभता को बेहतर बनाने और उपयोगकर्ताओं को डेटा फिर से डालने से बचने में मदद मिलती है.
उपयोगकर्ता नाम और ईमेल इनपुट में आइडेंटिफ़ायर होते हैं, न कि टेक्स्ट. spellcheck="false" जोड़ें, ताकि ब्राउज़र उन्हें किसी ऐसी चीज़ में फिर से न लिखे जो खाते से मैच न हो. input type="email" के लिए, autocorrect और autocapitalize हमेशा बंद रहते हैं. हालांकि, ईमेल के अलावा अन्य उपयोगकर्ता नामों के लिए इनकी ज़रूरत होती है.
बटनों को मददगार बनाएं
बटन के लिए <button> का इस्तेमाल करें. <input type="submit"> का भी इस्तेमाल किया जा सकता है. हालांकि, बटन के तौर पर div या किसी अन्य एलिमेंट का इस्तेमाल न करें. बटन एलिमेंट, सुलभता से जुड़ी सुविधाएं देते हैं. इनमें फ़ॉर्म सबमिट करने की सुविधा पहले से मौजूद होती है. साथ ही, इन्हें आसानी से स्टाइल किया जा सकता है.
फ़ॉर्म सबमिट करने वाले हर बटन को एक ऐसी वैल्यू दें जिससे पता चले कि वह क्या करता है. साफ़ तौर पर समझ में आने वाले लेबल का इस्तेमाल करें. उदाहरण के लिए, जारी रखें या सबमिट करें के बजाय, साइन इन करें का इस्तेमाल करें.
जहां हो सके वहां नाम के लिए एक ही इनपुट फ़ील्ड का इस्तेमाल करें
अपने उपयोगकर्ताओं को एक ही इनपुट का इस्तेमाल करके अपना नाम डालने की अनुमति दें. हालांकि, अगर आपके पास नाम, सरनेम, सम्मानसूचक शब्द या नाम के अन्य हिस्सों को अलग-अलग सेव करने की कोई ठोस वजह है, तो ऐसा किया जा सकता है. नाम के लिए एक ही फ़ील्ड का इस्तेमाल करने से, फ़ॉर्म भरना आसान हो जाता है. इससे कट-ऐंड-पेस्ट करने की सुविधा चालू हो जाती है और ऑटोमैटिक तरीके से भरने की सुविधा का इस्तेमाल करना आसान हो जाता है.
अंतरराष्ट्रीय नामों को अनुमति दें. पुष्टि करने के लिए, ऐसे रेगुलर एक्सप्रेशन का इस्तेमाल करने से बचें जो सिर्फ़ लैटिन वर्णों से मैच करते हों. 'सिर्फ़ लैटिन' विकल्प चुनने पर, उन उपयोगकर्ताओं को शामिल नहीं किया जाता जिनके नाम या पते में ऐसे वर्ण शामिल होते हैं जो लैटिन वर्णमाला में नहीं हैं. इसके बजाय, यूनिकोड लेटर मैचिंग की अनुमति दें. साथ ही, पक्का करें कि आपका बैकएंड, इनपुट और आउटपुट, दोनों के तौर पर यूनिकोड को सुरक्षित तरीके से इस्तेमाल करता हो. मॉडर्न ब्राउज़र, रेगुलर एक्सप्रेशन में यूनिकोड का इस्तेमाल करने की सुविधा देते हैं.
साइन इन करने की प्रोग्रेस दिखाना
साइन-इन करने के हर चरण के लिए, पेज की हेडिंग और बटन की जानकारी देने वाली वैल्यू का इस्तेमाल करें. इससे यह साफ़ तौर पर पता चलता है कि अब क्या करना है और अगला चरण क्या है.
मोबाइल कीबोर्ड के Enter बटन का लेबल सेट करने के लिए, फ़ॉर्म इनपुट पर enterkeyhint एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए, कई पेजों वाले फ़ॉर्म में enterkeyhint="previous" और enterkeyhint="next" का इस्तेमाल करें. फ़ॉर्म में आखिरी इनपुट के लिए enterkeyhint="done" और खोज इनपुट के लिए enterkeyhint="search" का इस्तेमाल करें.
उपयोगकर्ताओं को साइन-इन डेटा फिर से डालने से बचाना
पक्का करें कि साइन-इन फ़ॉर्म में सही autocomplete वैल्यू जोड़ी गई हों.
इससे ब्राउज़र, उपयोगकर्ताओं की मदद कर पाते हैं. इसके लिए, वे साइन-इन की जानकारी को सुरक्षित तरीके से सेव करते हैं और फ़ॉर्म डेटा को सही तरीके से डालते हैं. ऑटोकंप्लीट की सुविधा के बिना, उपयोगकर्ता साइन इन की जानकारी को किसी कागज़ पर लिखकर रख सकते हैं या साइन इन डेटा को अपने डिवाइस पर असुरक्षित तरीके से सेव कर सकते हैं.
ध्यान से पुष्टि करें
रीयलटाइम में और फ़ॉर्म सबमिट करने से पहले, डेटा एंट्री की पुष्टि करें. ईमेल इनपुट के लिए type="email" का इस्तेमाल करें — ब्राउज़र, फ़ॉर्मैट की पुष्टि अपने-आप कर देगा. ज़रूरी फ़ील्ड में required एट्रिब्यूट जोड़ें, ताकि फ़ॉर्म को खाली सबमिट न किया जा सके.
साइन इन को उसके <form> एलिमेंट में डालें
जब उपयोगकर्ताओं से डेटा डालने के लिए कहा जाए, तो हमेशा <form> एलिमेंट का इस्तेमाल करें
इनपुट को <div> में रैप न करें और इनपुट डेटा सबमिशन को पूरी तरह से JavaScript की मदद से मैनेज करें. आम तौर पर, <form> एलिमेंट का इस्तेमाल करना बेहतर होता है. इससे आपकी साइट को स्क्रीन रीडर और अन्य सहायक डिवाइसों से ऐक्सेस किया जा सकता है. साथ ही, ब्राउज़र में पहले से मौजूद कई सुविधाएं चालू हो जाती हैं. इसके अलावा, पुराने ब्राउज़र के लिए बुनियादी फ़ंक्शन वाला साइन-इन बनाना आसान हो जाता है. साथ ही, JavaScript के काम न करने पर भी यह काम कर सकता है.
इनपुट को दोहराएं नहीं
कुछ साइटें, उपयोगकर्ताओं को ईमेल या पासवर्ड दो बार डालने के लिए मजबूर करती हैं. इससे कुछ उपयोगकर्ताओं के लिए गड़बड़ियां कम हो सकती हैं. हालांकि, इससे सभी उपयोगकर्ताओं को ज़्यादा काम करना पड़ता है और सेशन बीच में छोड़ने की दर बढ़ जाती है. जिन ब्राउज़र में ईमेल पते ऑटोमैटिक तरीके से भरने या मज़बूत पासवर्ड सुझाने की सुविधा होती है उनमें दो बार पासवर्ड डालने के लिए कहना सही नहीं है. बेहतर होगा कि आप उपयोगकर्ताओं को उनके ईमेल पते की पुष्टि करने की सुविधा दें. आपको ऐसा करना ही होगा. साथ ही, ज़रूरत पड़ने पर उनके लिए पासवर्ड रीसेट करना आसान बनाएं.
पासवर्ड निजी रखें—हालांकि, उपयोगकर्ताओं को पासवर्ड देखने की अनुमति दें
पासवर्ड इनपुट में type="password" होना चाहिए, ताकि पासवर्ड टेक्स्ट को छिपाया जा सके. साथ ही, ब्राउज़र को यह समझने में मदद मिल सके कि इनपुट, पासवर्ड के लिए है. (ध्यान दें कि ब्राउज़र, इनपुट फ़ील्ड की भूमिकाओं को समझने और पासवर्ड सेव करने का विकल्प देने या न देने का फ़ैसला लेने के लिए, कई तरह की तकनीकों का इस्तेमाल करते हैं.)
आपको पासवर्ड दिखाएं टॉगल जोड़ना चाहिए, ताकि उपयोगकर्ता अपने डाले गए टेक्स्ट की जांच कर सकें. साथ ही, पासवर्ड भूल गए लिंक जोड़ना न भूलें.
मोबाइल उपयोगकर्ताओं को सही कीबोर्ड उपलब्ध कराना
मोबाइल उपयोगकर्ताओं को सही कीबोर्ड देने के लिए, <input type="email"> का इस्तेमाल करें. साथ ही, ब्राउज़र से ईमेल पते की पुष्टि करने की बुनियादी सुविधा चालू करें… इसके लिए, JavaScript की ज़रूरत नहीं है!
अगर आपको ईमेल पते के बजाय टेलीफ़ोन नंबर का इस्तेमाल करना है, तो <input type="tel"> मोबाइल पर टेलीफ़ोन कीपैड चालू करता है. ज़रूरत पड़ने पर, inputmode एट्रिब्यूट का भी इस्तेमाल किया जा सकता है: पिन नंबर के लिए, inputmode="numeric" सबसे सही है.
मोबाइल कीबोर्ड को 'साइन इन करें' बटन को छिपाने से रोकना
अगर आपने ध्यान नहीं दिया, तो हो सकता है कि मोबाइल कीबोर्ड आपके फ़ॉर्म को कवर कर लें या इससे भी बुरा यह हो सकता है कि वे साइन इन बटन को कुछ हद तक छिपा दें. हो सकता है कि उपयोगकर्ता, समस्या को समझने से पहले ही ऐप्लिकेशन का इस्तेमाल करना बंद कर दें.
जहां तक हो सके, साइन इन पेज पर सबसे ऊपर सिर्फ़ ईमेल (या फ़ोन नंबर), पासवर्ड डालने का फ़ील्ड, और साइन इन बटन दिखाएं. अन्य कॉन्टेंट को इसके नीचे रखें.
उपयोगकर्ताओं को डेटा फिर से डालने से बचाना
आप ब्राउज़र स्टोरेज में डेटा को सही तरीके से सेव करने और इनपुट को ऑटोमैटिक तरीके से भरने में मदद कर सकते हैं, ताकि उपयोगकर्ताओं को ईमेल और पासवर्ड डालने की ज़रूरत न पड़े. यह मोबाइल पर खास तौर पर ज़रूरी है. साथ ही, ईमेल इनपुट के लिए भी ज़रूरी है, क्योंकि इनमें सेशन बीच में छोड़ने की दर ज़्यादा होती है. इसके दो हिस्से हैं:
autocomplete,name,id, औरtypeएट्रिब्यूट की मदद से, ब्राउज़र को इनपुट की भूमिका समझने में मदद मिलती है. इससे डेटा को सेव किया जा सकता है, ताकि बाद में उसे ऑटोमैटिक तरीके से भरने के लिए इस्तेमाल किया जा सके. जानकारी अपने-आप भरने की सुविधा के लिए डेटा सेव करने की अनुमति देने के लिए, मॉडर्न ब्राउज़र को इनपुट कीnameयाidवैल्यू को स्टेबल रखना ज़रूरी है. यह वैल्यू, हर पेज लोड या साइट डिप्लॉयमेंट पर रैंडम तरीके से जनरेट नहीं होनी चाहिए. साथ ही, यह वैल्यूsubmitबटन वाले<form>एलिमेंट में होनी चाहिए.autocompleteएट्रिब्यूट की मदद से, ब्राउज़र सेव किए गए डेटा का इस्तेमाल करके, इनपुट को सही तरीके से ऑटोमैटिक भरते हैं.
ईमेल इनपुट के लिए autocomplete="username" का इस्तेमाल करें, क्योंकि username को मॉडर्न ब्राउज़र में पासवर्ड मैनेजर पहचानते हैं. हालांकि, आपको type="email" का इस्तेमाल करना चाहिए. इसके अलावा, id="email" और name="email" का इस्तेमाल भी किया जा सकता है. पासवर्ड इनपुट के लिए, सही autocomplete वैल्यू का इस्तेमाल करें. इससे ब्राउज़र को नए और मौजूदा पासवर्ड के बीच अंतर करने में मदद मिलती है.
मौजूदा पासवर्ड के लिए, autocomplete="current-password" का इस्तेमाल करें
ज़रूरी: साइन-इन फ़ॉर्म में पासवर्ड डालने के लिए, autocomplete="current-password" का इस्तेमाल करें. इससे ब्राउज़र को पता चलता है कि आपको साइट के लिए सेव किया गया मौजूदा पासवर्ड इस्तेमाल करना है.
साइन-इन फ़ॉर्म के लिए:
<input type="password" autocomplete="current-password" id="current-password" …>
ब्राउज़र को मज़बूत पासवर्ड का सुझाव देने की अनुमति देना
मॉडर्न ब्राउज़र, ह्यूरिस्टिक का इस्तेमाल करके यह तय करते हैं कि पासवर्ड मैनेजर का यूज़र इंटरफ़ेस (यूआई) कब दिखाना है और मज़बूत पासवर्ड का सुझाव कब देना है.
ब्राउज़र में पहले से मौजूद पासवर्ड जनरेटर की मदद से, उपयोगकर्ताओं और डेवलपर को "मज़बूत पासवर्ड" बनाने की ज़रूरत नहीं पड़ती. ब्राउज़र, पासवर्ड को सुरक्षित तरीके से सेव कर सकते हैं और ज़रूरत पड़ने पर उन्हें ऑटोमैटिक तरीके से भर सकते हैं. इसलिए, उपयोगकर्ताओं को पासवर्ड याद रखने या डालने की ज़रूरत नहीं पड़ती. उपयोगकर्ताओं को ब्राउज़र में पहले से मौजूद पासवर्ड जनरेटर का इस्तेमाल करने के लिए बढ़ावा देने का मतलब है कि वे आपकी साइट पर एक यूनीक और मज़बूत पासवर्ड का इस्तेमाल करेंगे. साथ ही, वे ऐसे पासवर्ड का दोबारा इस्तेमाल नहीं करेंगे जो कहीं और हैक हो सकता है.
उपयोगकर्ताओं को गलती से इनपुट छूटने से बचाने में मदद करना
ज़रूरी: ईमेल और पासवर्ड, दोनों फ़ील्ड में required एट्रिब्यूट जोड़ें. मॉडर्न ब्राउज़र, छूटे हुए डेटा के लिए अपने-आप प्रॉम्प्ट देते हैं और फ़ोकस सेट करते हैं.
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
पासवर्ड चिपकाने की अनुमति दें
कुछ साइटें, पासवर्ड डालने वाले फ़ील्ड में टेक्स्ट चिपकाने की अनुमति नहीं देती हैं.
पासवर्ड चिपकाने की अनुमति न देने से, उपयोगकर्ताओं को परेशानी होती है. इससे, वे ऐसे पासवर्ड बनाते हैं जिन्हें याद रखना आसान हो. हालांकि, ऐसे पासवर्ड को हैक करना भी आसान होता है. यूके नैशनल साइबर सिक्योरिटी सेंटर जैसे संगठनों के मुताबिक, इससे सुरक्षा कम हो सकती है. उपयोगकर्ताओं को पासवर्ड चिपकाने की अनुमति न होने के बारे में तब पता चलता है, जब वे अपना पासवर्ड चिपकाने की कोशिश करते हैं. इसलिए, पासवर्ड चिपकाने की अनुमति न देने से, क्लिपबोर्ड की कमज़ोरियों से नहीं बचा जा सकता.
फ़ॉलबैक रणनीतियां
जानकारी अपने-आप भरने की सुविधा, परतदार वृद्धि है. ऑटोमैटिक तरीके से भरने की सुविधा के साथ काम न करने वाले ब्राउज़र में, उपयोगकर्ताओं को अपने साइन-इन क्रेडेंशियल मैन्युअल तरीके से डालने होंगे. सिमैंटिक एचटीएमएल की पाबंदियां (जैसे कि type, inputmode, और required) अब भी सही तरीके से काम करेंगी. इससे उपयोगकर्ता के इनपुट की पुष्टि की जा सकेगी और सही वर्चुअल कीबोर्ड उपलब्ध कराए जा सकेंगे.