साइन-इन फ़ॉर्म के सबसे सही तरीके

साइन इन फ़ॉर्म बनाने के लिए, क्रॉस-प्लैटफ़ॉर्म ब्राउज़र की सुविधाओं का इस्तेमाल करें. ये फ़ॉर्म सुरक्षित, ऐक्सेस करने लायक, और इस्तेमाल में आसान होते हैं.

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

यहां सामान्य साइन-इन फ़ॉर्म का एक उदाहरण दिया गया है. इसमें सभी सबसे सही तरीकों के बारे में बताया गया है:

चेकलिस्ट

• काम के एचटीएमएल एलिमेंट इस्तेमाल करें: <form>, <input>, <label>, और <button>.
• हर इनपुट को <label> से लेबल करें.
• ब्राउज़र में पहले से मौजूद सुविधाओं को ऐक्सेस करने के लिए एलिमेंट एट्रिब्यूट का इस्तेमाल करें: type, name, autocomplete, required.
• name और id इनपुट एट्रिब्यूट की ऐसी स्टेबल वैल्यू दें जो पेज लोड या वेबसाइट डिप्लॉयमेंट के बीच नहीं बदलती.
• साइन-इन को उसके खुद के <form> एलिमेंट में डालें.
• यह पक्का करें कि फ़ॉर्म सही तरीके से सबमिट हो.
• साइन-अप वाले फ़ॉर्म में पासवर्ड डालने के लिए, autocomplete="new-password" और id="new-password" का इस्तेमाल करें. साथ ही, रीसेट पासवर्ड वाले फ़ॉर्म में नए पासवर्ड के लिए, इनका इस्तेमाल करें.
• साइन-इन करने के लिए पासवर्ड इनपुट के लिए, autocomplete="current-password" और id="current-password" का इस्तेमाल करें.
• पासवर्ड दिखाएं सुविधा उपलब्ध कराएं.
• पासवर्ड इनपुट के लिए, aria-label और aria-describedby का इस्तेमाल करें.
• इनपुट को दो बार न रखें.
• फ़ॉर्म इस तरह डिज़ाइन करें कि मोबाइल कीबोर्ड इनपुट या बटन को धुंधला न करे.
• पक्का करें कि फ़ॉर्म मोबाइल पर इस्तेमाल करने लायक हों: पढ़ने लायक टेक्स्ट का इस्तेमाल करें. साथ ही, पक्का करें कि इनपुट और बटन टच टारगेट (स्क्रीन के वे हिस्से जहां छूने पर कोई कार्रवाई होती है) के तौर पर काम करने के लिए काफ़ी बड़े हों.
• साइन-अप और साइन-इन पेजों पर, ब्रैंडिंग और स्टाइल बनाए रखें.
• फ़ील्ड के साथ-साथ लैब में भी टेस्ट करें: अपने साइन-अप और साइन-इन फ़्लो में पेज के आंकड़े, इंटरैक्शन के आंकड़े, और उपयोगकर्ता के हिसाब से परफ़ॉर्मेंस मेज़रमेंट बनाएं.
• सभी ब्राउज़र और डिवाइसों पर टेस्ट करें: अलग-अलग प्लैटफ़ॉर्म पर फ़ॉर्म का व्यवहार बहुत अलग होता है.

सही एचटीएमएल का इस्तेमाल करना

इस जॉब के लिए बनाए गए एलिमेंट का इस्तेमाल करें: <form>, <label>, और <button>. इनसे ब्राउज़र में पहले से मौजूद काम करने की सुविधा मिलती है, सुलभता बेहतर होती है, और आपके मार्कअप को बेहतर बनाया जाता है.

<form> का इस्तेमाल करें

आप शायद इनपुट को <div> में रैप करें और इनपुट डेटा सबमिशन को पूरी तरह से JavaScript की मदद से हैंडल करना चाहें. आम तौर पर, एक पुराने <form> एलिमेंट का इस्तेमाल करना बेहतर होता है. इससे आपकी साइट, स्क्रीन रीडर और दूसरे सहायक डिवाइसों पर भी ऐक्सेस की जा सकती है. साथ ही, पहले से मौजूद ब्राउज़र की कई सुविधाओं को चालू किया जाता है. इससे पुराने ब्राउज़र के लिए बुनियादी फ़ंक्शन वाले साइन-इन को आसानी से बनाया जा सकता है. साथ ही, JavaScript के काम न करने पर भी यह काम कर सकती है.

<label> का इस्तेमाल करें

इनपुट को लेबल करने के लिए, <label> का इस्तेमाल करें!

<label for="email">Email</label>
<input id="email" …>

इसकी दो वजहें हैं:

• किसी लेबल पर टैप या क्लिक करने से फ़ोकस, इनपुट पर ले जाता है. लेबल की for एट्रिब्यूट का इस्तेमाल करके, इनपुट के name या id के साथ लेबल को जोड़ें.
• जब लेबल या लेबल के इनपुट पर फ़ोकस होता है, तब स्क्रीन रीडर लेबल टेक्स्ट पढ़कर सुनाता है.

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

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

खुद को देखने के लिए मोबाइल डिवाइस पर लेबल-स्थिति ग्लिच खोलें.

<button> का इस्तेमाल करें

बटन के लिए <button> का इस्तेमाल करें! बटन एलिमेंट, ऐक्सेस किए जा सकने वाले व्यवहार और फ़ॉर्म सबमिट करने की सुविधा देते हैं. साथ ही, इन्हें आसानी से स्टाइल किया जा सकता है. ऐसा करने का कोई फ़ायदा नहीं है कि बटन दिखने का दिखावा करने वाले <div> या दूसरे एलिमेंट का इस्तेमाल किया जाए.

पक्का करें कि 'सबमिट करें' बटन से पता चलता हो कि यह क्या करता है. उदाहरण के लिए, खाता बनाएं या साइन इन करें, न कि सबमिट करें या शुरू करें.

पक्का करें कि फ़ॉर्म सही तरीके से सबमिट हो

पासवर्ड मैनेज करने वाले लोगों को यह समझने में मदद करें कि फ़ॉर्म सबमिट कर दिया गया है. ऐसा करने के दो तरीके हैं:

• किसी दूसरे पेज पर जाएं.
• History.pushState() या History.replaceState() के साथ नेविगेशन को एम्युलेट करें और पासवर्ड फ़ॉर्म हटाएं.

XMLHttpRequest या fetch अनुरोध के साथ, यह पक्का करें कि जवाब में साइन इन की प्रोसेस को रिपोर्ट किया गया हो. साथ ही, डीओएम से बाहर निकालकर और उपयोगकर्ता को सफलता की जानकारी देकर मैनेज किया जाता हो.

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

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

इनपुट को दो बार न बढ़ाएं

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

एलिमेंट एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना

यहां से ही कमाल कर दिखाया जाता है! ब्राउज़र में कई काम करने वाली बिल्ट-इन सुविधाएं होती हैं, जो इनपुट एलिमेंट एट्रिब्यूट का इस्तेमाल करती हैं.

पासवर्ड निजी रखें—लेकिन अगर उपयोगकर्ता चाहें, तो उन्हें देखने की सुविधा दें

पासवर्ड इनपुट में type="password" होना चाहिए, ताकि पासवर्ड का टेक्स्ट छिपाया जा सके और ब्राउज़र को यह समझने में मदद मिल सके कि यह इनपुट पासवर्ड के लिए है. (ध्यान दें कि ब्राउज़र, इनपुट की भूमिकाओं को समझने के लिए कई तरह की तकनीकों का इस्तेमाल करते हैं. साथ ही, वे यह तय करते हैं कि पासवर्ड सेव करने की सुविधा देनी है या नहीं.)

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

मोबाइल उपयोगकर्ताओं को सही कीबोर्ड उपलब्ध कराएं

मोबाइल उपयोगकर्ताओं को सही कीबोर्ड देने के लिए, <input type="email"> का इस्तेमाल करें. साथ ही, ब्राउज़र की मदद से, ईमेल पते की बुनियादी तौर पर पुष्टि करने की सुविधा चालू करें... JavaScript की ज़रूरत नहीं है!

अगर आपको ईमेल पते के बजाय टेलीफ़ोन नंबर का इस्तेमाल करना है, तो <input type="tel">, मोबाइल पर टेलीफ़ोन कीपैड चालू करता है. जहां ज़रूरी हो, वहां inputmode एट्रिब्यूट का भी इस्तेमाल किया जा सकता है: पिन नंबर के लिए inputmode="numeric" सबसे सही तरीका है. इनपुट मोड के बारे में जो भी जानकारी चाहिए उसमें ज़्यादा जानकारी दी गई है.

मोबाइल कीबोर्ड को साइन इन करें बटन में आने वाली रुकावट से रोकें

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

जहां भी हो सके, अपने साइन-इन पेज के सबसे ऊपर सिर्फ़ ईमेल/फ़ोन और पासवर्ड इनपुट और साइन इन बटन दिखाएं. अन्य कॉन्टेंट को यहां रखें.

अलग-अलग तरह के डिवाइसों पर टेस्ट करें

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

दो पेजों का इस्तेमाल करें

कुछ साइटें (Amazon और eBay सहित) दो पेजों पर ईमेल/फ़ोन और पासवर्ड मांगकर समस्या से बचते हैं. इस तरीके से उपयोगकर्ताओं का अनुभव भी आसान हो जाता है: उपयोगकर्ता को एक बार में सिर्फ़ एक काम करना होता है.

आम तौर पर, इसे एक <form> के साथ लागू किया जाना चाहिए. JavaScript का इस्तेमाल शुरू में सिर्फ़ ईमेल इनपुट दिखाने के लिए करें. इसके बाद, इसे छिपाएं और पासवर्ड इनपुट दिखाएं. अगर आपको उपयोगकर्ता को ईमेल और पासवर्ड डालने के बीच नए पेज पर जाने के लिए मजबूर करना पड़ता है, तो दूसरे पेज पर दिए गए फ़ॉर्म में ईमेल वैल्यू के साथ, छिपा हुआ इनपुट एलिमेंट होना चाहिए. इससे पासवर्ड मैनेजर सही वैल्यू सेव कर पाएंगे. पासवर्ड फ़ॉर्म की ऐसी स्टाइल जिन्हें Chromium समझता है इसमें एक कोड का उदाहरण दिया गया है.

डेटा दोबारा डालने से बचने में उपयोगकर्ताओं की मदद करें

डेटा को सही तरीके से सेव करने और इनपुट को ऑटोमैटिक भरने में ब्राउज़र की मदद करें. इससे उपयोगकर्ताओं को ईमेल और पासवर्ड की वैल्यू डालने की ज़रूरत नहीं पड़ती. यह खास तौर पर मोबाइल के लिए ज़रूरी है. ईमेल इनपुट के लिए भी यह बेहद ज़रूरी है, क्योंकि इन पर सेशन छोड़ने की दर ज़्यादा होती है.

इसके दो हिस्से हैं:

1. autocomplete, name, id, और type एट्रिब्यूट, डेटा को सेव करने के लिए इनपुट की भूमिका को समझने में ब्राउज़र की मदद करते हैं. इस डेटा का इस्तेमाल बाद में ऑटोमैटिक भरने की सुविधा के लिए किया जा सकता है. ऑटोमैटिक भरने की सुविधा के लिए डेटा को सेव करने के लिए, मॉडर्न ब्राउज़र में name या id की वैल्यू स्थिर होनी चाहिए. यह वैल्यू हर पेज लोड या साइट डिप्लॉयमेंट पर बिना किसी क्रम के जनरेट नहीं होनी चाहिए. साथ ही, वैल्यू को submit बटन वाले <form> में होना चाहिए.

2. autocomplete एट्रिब्यूट, स्टोर किए गए डेटा का इस्तेमाल करके, इनपुट को सही तरीके से ऑटोमैटिक भरने में ब्राउज़र की मदद करता है.

ईमेल इनपुट के लिए, autocomplete="username" का इस्तेमाल करें, क्योंकि मॉडर्न ब्राउज़र में पासवर्ड मैनेजर username को पहचान सकते हैं. भले ही, आपको type="email" का इस्तेमाल करना चाहिए और id="email" और name="email" का इस्तेमाल करना चाहिए.

पासवर्ड इनपुट के लिए, सही autocomplete और id वैल्यू का इस्तेमाल करें, ताकि ब्राउज़र को नए और मौजूदा पासवर्ड में अंतर करने में मदद मिल सके.

नए पासवर्ड के लिए autocomplete="new-password" और id="new-password" का इस्तेमाल करें

• साइन-अप फ़ॉर्म में पासवर्ड डालने के लिए, autocomplete="new-password" और id="new-password" का इस्तेमाल करें या पासवर्ड बदलने के फ़ॉर्म में नए पासवर्ड का इस्तेमाल करें.

मौजूदा पासवर्ड के लिए autocomplete="current-password" और id="current-password" का इस्तेमाल करें

• साइन-इन फ़ॉर्म में पासवर्ड इनपुट के लिए, autocomplete="current-password" और id="current-password" का इस्तेमाल करें. इसके अलावा, पासवर्ड बदलने के लिए फ़ॉर्म में, उपयोगकर्ता के पुराने पासवर्ड का भी इस्तेमाल किया जा सकता है. इससे ब्राउज़र को पता चलता है कि आपको उस मौजूदा पासवर्ड का इस्तेमाल करना है जिसे साइट के लिए सेव किया गया है.

साइन-अप फ़ॉर्म के लिए:

<input type="password" autocomplete="new-password" id="new-password" …>

साइन इन करने के लिए:

<input type="password" autocomplete="current-password" id="current-password" …>

पासवर्ड मैनेज करने वाले ऐप्लिकेशन के लिए सहायता

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

डेस्कटॉप पर Chrome, ईमेल के सुझाव दिखाता है, पासवर्ड मैनेजर दिखाता है, और पासवर्ड अपने-आप भरता है.

ब्राउज़र पासवर्ड और ऑटोमैटिक भरने वाले सिस्टम आसान नहीं हैं. वैल्यू का अनुमान लगाने, सेव करने, और दिखाने वाले एल्गोरिदम स्टैंडर्ड के मुताबिक नहीं हैं. ये एल्गोरिदम हर प्लैटफ़ॉर्म पर अलग-अलग होते हैं. उदाहरण के लिए, जैसा कि Hidde de Vries में बताया गया है: "Firefox का पासवर्ड मैनेजर एक रेसिपी सिस्टम की मदद से अपने नए अनुभव को बेहतर बनाता है."

ऑटोमैटिक भरना: वेब डेवलपर को क्या पता होना चाहिए, लेकिनname और autocomplete का इस्तेमाल करने के बारे में ज़्यादा जानकारी नहीं होती. एचटीएमएल निर्देश में 59 संभावित वैल्यू दी गई हैं.

मज़बूत पासवर्ड का सुझाव देने के लिए, ब्राउज़र को चालू करें

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

यहां बताया गया है कि Safari डेस्कटॉप पर ऐसा कैसे करता है.

(मज़बूत यूनीक पासवर्ड का सुझाव, Safari में वर्शन 12.0 से उपलब्ध है.)

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

गलती से इनपुट न मिलने से उपयोगकर्ताओं को बचाने में मदद करें

ईमेल और पासवर्ड, दोनों फ़ील्ड में required एट्रिब्यूट जोड़ें. मॉडर्न ब्राउज़र अपने-आप सूचना उपलब्ध कराते हैं और जो डेटा मौजूद नहीं है उसके लिए फ़ोकस सेट कर देते हैं. JavaScript की ज़रूरत नहीं है!

उंगलियों और अंगूठों के लिए डिज़ाइन करें

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

पक्का करें कि इनपुट और बटन का साइज़ ज़रूरत के मुताबिक हो

इनपुट और बटन के लिए डिफ़ॉल्ट साइज़ और पैडिंग, डेस्कटॉप पर बहुत छोटा होता है और मोबाइल पर भी खराब होता है.

Android की सुलभता सुविधा के दिशा-निर्देश के मुताबिक, टचस्क्रीन ऑब्जेक्ट के लिए सुझाया गया टारगेट साइज़ 7 से 10 मि॰मी॰ है. Apple इंटरफ़ेस के दिशा-निर्देशों में 48x48 पिक्सल और W3C में कम से कम 44x44 सीएसएस पिक्सल का सुझाव दिया गया है. इस आधार पर, मोबाइल के लिए इनपुट एलिमेंट और बटन के लिए 15 पिक्सल की पैडिंग (कम से कम) और डेस्कटॉप पर करीब 10 पिक्सल की पैडिंग (जगह) जोड़ें. इसे किसी असली मोबाइल डिवाइस से और असली उंगली या अंगूठे से आज़माएं. इससे आपको अपने हर इनपुट और बटन पर टैप करने में आसानी होगी.

टैप टारगेट का साइज़ सही नहीं है Lighthouse ऑडिट की मदद से, ऐसे इनपुट एलिमेंट का अपने-आप पता लगाने की प्रोसेस को ऑटोमेट किया जा सकता है जो बहुत छोटे हैं.

अंगूठों के लिए डिज़ाइन करें

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

टेक्स्ट को बड़ा करें

साइज़ और पैडिंग (जगह) की तरह ही, इनपुट एलिमेंट और बटन के लिए डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट साइज़ बहुत छोटा होता है, खास तौर से मोबाइल पर.

अलग-अलग प्लैटफ़ॉर्म के ब्राउज़र में फ़ॉन्ट का साइज़ अलग-अलग होता है. इसलिए, फ़ॉन्ट का कोई ऐसा साइज़ तय करना मुश्किल होता है जो हर जगह अच्छी तरह काम करता है. लोकप्रिय वेबसाइटों के एक छोटे सर्वे से पता चलता है कि डेस्कटॉप पर पेज का साइज़ 13 से 16 पिक्सल तक हो सकता है. मोबाइल पर टेक्स्ट के लिए, उस साइज़ का इस्तेमाल करना अच्छा होता है.

इसका मतलब है कि आपको मोबाइल पर बड़े पिक्सल साइज़ का इस्तेमाल करना होगा: 'डेस्कटॉप के लिए Chrome' पर मौजूद 16px पढ़ने में आसान है, लेकिन अच्छी दृष्टि वाले डिवाइस पर भी Android के लिए Chrome पर 16px टेक्स्ट को पढ़ना मुश्किल होता है. मीडिया क्वेरी का इस्तेमाल करके, अलग-अलग व्यूपोर्ट साइज़ के लिए अलग-अलग फ़ॉन्ट पिक्सल साइज़ सेट किए जा सकते हैं. 20px मोबाइल पर सही तरीके से काम करता है—हालांकि, आपको इसकी जांच ऐसे दोस्तों या साथ काम करने वालों से करनी चाहिए जिनकी दृष्टि कमज़ोर है.

दस्तावेज़ में पढ़ने लायक फ़ॉन्ट साइज़ का इस्तेमाल नहीं किया गया है Lighthouse ऑडिट की मदद से, बहुत छोटे टेक्स्ट का पता लगाने की प्रोसेस को ऑटोमेट किया जा सकता है.

इनपुट के बीच काफ़ी जगह दें

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

पक्का करें कि आपके इनपुट साफ़ तौर पर दिख रहे हों

इनपुट की डिफ़ॉल्ट बॉर्डर स्टाइलिंग की वजह से, इन्हें देखना मुश्किल हो जाता है. वे Android के लिए Chrome जैसे कुछ प्लैटफ़ॉर्म पर करीब-करीब ग्लोब पर नहीं दिखते हैं.

पैडिंग (जगह) के साथ-साथ, बॉर्डर भी जोड़ें: सफ़ेद बैकग्राउंड पर, #ccc या गहरे रंग का इस्तेमाल करें.

अमान्य इनपुट वैल्यू के बारे में चेतावनी देने के लिए, ब्राउज़र में पहले से मौजूद सुविधाओं का इस्तेमाल करना

ब्राउज़र में पहले से ऐसी सुविधाएं मौजूद होती हैं जो type एट्रिब्यूट वाले इनपुट के लिए, फ़ॉर्म की बुनियादी पुष्टि करती हैं. अमान्य वैल्यू वाला फ़ॉर्म सबमिट करने पर, ब्राउज़र चेतावनी देते हैं. साथ ही, समस्या वाले इनपुट पर फ़ोकस करते हैं.

अमान्य डेटा को हाइलाइट करने के लिए, :invalid सीएसएस सिलेक्टर का इस्तेमाल किया जा सकता है. बिना कॉन्टेंट वाले इनपुट चुनने से बचने के लिए, :not(:placeholder-shown) का इस्तेमाल करें.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

अमान्य वैल्यू वाले इनपुट को हाइलाइट करने के अलग-अलग तरीके आज़माएं.

जहां ज़रूरी हो वहां JavaScript का इस्तेमाल करें

पासवर्ड दिखाने या छिपाने के लिए टॉगल करें

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

नीचे दिया गया कोड, पासवर्ड दिखाएं सुविधा जोड़ने के लिए, टेक्स्ट बटन का इस्तेमाल करता है.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

बटन को सादे टेक्स्ट की तरह दिखाने के लिए, यह सीएसएस ऐसा है:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

साथ ही, पासवर्ड दिखाने के लिए JavaScript:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

यहां आखिरी नतीजा दिया गया है:

पासवर्ड डालने की सुविधा को ऐक्सेस करने लायक बनाएं

aria-describedby का इस्तेमाल करके, पासवर्ड के नियमों को आउटलाइन करने के लिए, उस एलिमेंट का आईडी दें जो पाबंदियों के बारे में बताता है. स्क्रीनरीडर में लेबल टेक्स्ट, इनपुट का टाइप (पासवर्ड), और उसके बाद ब्यौरा मिलता है.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

पासवर्ड दिखाएं सुविधा जोड़ते समय, aria-label ज़रूर शामिल करें, ताकि यह चेतावनी दी जा सके कि पासवर्ड दिखाया जाएगा. ऐसा न करने पर, उपयोगकर्ता अनजाने में भी पासवर्ड दिखा सकते हैं.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

आप ARIA की दोनों सुविधाओं को, इस ग्लिच में काम करते हुए देख सकते हैं:

फ़ॉर्म को ऐक्सेस करने लायक बनाने के लिए, सुलभता फ़ॉर्म बनाने से जुड़ी और भी सलाह मिल सकती हैं.

रीयल टाइम में और सबमिट करने से पहले पुष्टि करें

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

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

ज़्यादा जानकारी पाएं: ज़्यादा जटिल रीयल-टाइम पुष्टि के लिए JavaScript का इस्तेमाल करें.

आंकड़े और आरयूएम

"आप जिसे माप नहीं सकते, आप उसमें सुधार नहीं कर सकते" खास तौर पर साइन-अप और साइन-इन फ़ॉर्म के लिए सही है. आपको लक्ष्य तय करने होंगे, सफलता का आकलन करना होगा, अपनी साइट को बेहतर बनाना होगा—और उसे दोहराना होगा.

छूट पर इस्तेमाल से जुड़ी जांच से, बदलाव आज़माने में मदद मिल सकती है. हालांकि, आपको साइन-अप और साइन-इन फ़ॉर्म इस्तेमाल करने वाले उपयोगकर्ताओं के अनुभव को समझने के लिए, असल डेटा की ज़रूरत होगी:

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

शायद आप साइन-अप और साइन-इन के अलग-अलग तरीकों को आज़माने के लिए, A/B टेस्टिंग लागू करना चाहें. साथ ही, कुछ लोगों के लिए बदलाव रिलीज़ करने से पहले, उपयोगकर्ताओं के ग्रुप में होने वाले बदलावों की पुष्टि करने के लिए, कुछ लोगों के लिए रिलीज़ करने की सुविधा का इस्तेमाल करना चाहें.

सामान्य दिशा-निर्देश

अच्छी तरह से डिज़ाइन किया गया यूज़र इंटरफ़ेस (यूआई) और UX, साइन-इन फ़ॉर्म को छोड़कर जाने की संभावना को कम कर सकते हैं:

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

सीखना जारी रखें

• बेहतरीन फ़ॉर्म बनाएं
• मोबाइल फ़ॉर्म डिज़ाइन करने के सबसे सही तरीके
• फ़ॉर्म कंट्रोल करने की बेहतर सुविधा
• सुलभता फ़ॉर्म बनाना
• क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करके, साइन इन फ़्लो को व्यवस्थित करना
• WebOTP API की मदद से वेब पर फ़ोन नंबर की पुष्टि करना

Unsplash पर मेगन शायरेक की फ़ोटो.