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

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

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" …>

दो वजहें:

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

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

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

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

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

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

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

फ़ॉर्म सबमिट हो गया है या नहीं, इसकी पुष्टि करना

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

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

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

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

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

इनपुट दो बार न डालें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

कुछ साइटें (जैसे, 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, ईमेल के सुझाव दिखाता है, Password Manager दिखाता है, और पासवर्ड को ऑटोमैटिक भरता है.

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

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

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

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

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

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

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

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

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

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

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

पक्का करें कि इनपुट और बटन काफ़ी बड़े हों

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

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

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

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

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

टेक्स्ट को ज़रूरत के मुताबिक बड़ा करना

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

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

Analytics और आरयूएम

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

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

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

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

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

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

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

सीखते रहें

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

Unस्प्लैश पर मेगन शियरैक की फ़ोटो.