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

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

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

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

चेकलिस्ट

• काम के एचटीएमएल एलिमेंट इस्तेमाल करें: <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 एआई (AI) रिसर्च के मुताबिक, उपयोगकर्ता तेज़ी से स्कैनिंग कर पाते हैं. आपको पूरी चौड़ाई वाले लेबल और इनपुट मिलते हैं. साथ ही, लेबल टेक्स्ट के मुताबिक फ़िट करने के लिए, आपको लेबल और इनपुट की चौड़ाई में बदलाव करने की ज़रूरत नहीं होती.

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

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

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

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

पक्का करें कि फ़ॉर्म सबमिट हो गया है

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 पिक्सल की पैडिंग करें. इसे किसी असली मोबाइल डिवाइस पर और उंगली या अंगूठे से आज़माएं. आपको अपने हर इनपुट और बटन पर आसानी से टैप करना होगा.

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

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

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

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

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

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

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

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

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

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

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

इनपुट की डिफ़ॉल्ट बॉर्डर स्टाइलिंग की वजह से, इन्हें देखना मुश्किल हो जाता है. वे 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 वैलिडेशन एपीआई का इस्तेमाल करता है, जो बड़े पैमाने पर काम करता है. इसकी मदद से, फ़ोकस और प्रॉम्प्ट दिखाने के लिए, बिल्ट-इन ब्राउज़र यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके, कस्टम पुष्टि करने की सुविधा जोड़ी जाती है.

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

आंकड़े और RUM

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

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

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

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

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

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

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

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

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

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