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

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

Sam Dutton

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

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

चेकलिस्ट

• काम के एचटीएमएल एलिमेंट इस्तेमाल करें: <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" …>

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

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

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

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

खुद देखने के लिए, मोबाइल डिवाइस पर label-position डेमो खोलें.

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

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

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

फ़ॉर्म सबमिट होने की पुष्टि करना

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

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

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

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

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

इनपुट को दोहराएं नहीं

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

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

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

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

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

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

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

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

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

मोबाइल कीबोर्ड को साइन इन करें बटन को छिपाने से रोकना

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

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

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

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

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

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

इसे एक <form> के साथ लागू किया जाना चाहिए. JavaScript का इस्तेमाल करके, शुरुआत में सिर्फ़ ईमेल इनपुट दिखाएं. इसके बाद, उसे छिपाएं और पासवर्ड इनपुट दिखाएं. अगर आपको उपयोगकर्ता को ईमेल पता और पासवर्ड डालने के बीच, किसी नए पेज पर जाने के लिए मजबूर करना है, तो दूसरे पेज पर मौजूद फ़ॉर्म में ईमेल वैल्यू के साथ छिपा हुआ इनपुट एलिमेंट होना चाहिए. इससे Password Manager को सही वैल्यू सेव करने में मदद मिलती है. 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, ईमेल के सुझाव दिखाता है. साथ ही, Password Manager दिखाता है और पासवर्ड को ऑटोमैटिक तरीके से भरता है.

ब्राउज़र में पासवर्ड और जानकारी ऑटोमैटिक भरने की सुविधा को इस्तेमाल करना आसान नहीं है. वैल्यू का अनुमान लगाने, उन्हें सेव करने, और दिखाने के एल्गोरिदम स्टैंडर्ड के मुताबिक नहीं होते. साथ ही, ये हर प्लैटफ़ॉर्म के हिसाब से अलग-अलग होते हैं. उदाहरण के लिए, जैसा कि हिडे डे व्रीस ने बताया है: "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 मोबाइल के लिए सही है. हालांकि, आपको अपने उन दोस्तों या सहकर्मियों के साथ इसकी जांच करनी चाहिए जिनकी नज़र कमज़ोर है.

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

इनपुट के बीच ज़रूरत के मुताबिक स्पेस दें

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

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

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

Analytics और आरयूएम

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

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

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

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

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

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

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

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

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