लॉगिन और पासवर्ड रीसेट फ़ॉर्म: क्या रखें और यूज़र को कैसे बचाएं

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

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

लॉगिन फ़ॉर्म में कौन से फ़ील्ड चाहिए?

लॉगिन फ़ॉर्म को ठीक तीन चीज़ें चाहिए। पहली, व्यक्ति की पहचान बताने का तरीका। दूसरी, उनकी पहचान की पुष्टि का तरीका। तीसरी, लॉग इन बने रहने का तरीका। यानी कम से कम तीन फ़ील्ड।

ईमेल फ़ील्ड

यूज़रनेम नहीं, ईमेल इस्तेमाल करें। ईमेल सरल है। यूज़र यूज़रनेम भूल जाते हैं। वे अपना ईमेल एड्रेस नहीं भूलते। इस फ़ील्ड में ईमेल एड्रेस लिया जाए और इसे साफ़ "ईमेल एड्रेस" लेबल दें। HTML `type="email"` इस्तेमाल करें ताकि मोबाइल कीबोर्ड में @ चिह्न दिखे और ईमेल वैलिडेशन अपने आप हो। HTML एट्रिब्यूट में `autocomplete="username"` जोड़ें ताकि ब्राउज़र और पासवर्ड मैनेजर जानें कि लॉगिन की पहचान यहीं जाती है और जिन यूज़र के सेव किए क्रेडेंशियल हैं उनके लिए ऑटोफ़िल कर सकें।

पासवर्ड फ़ील्ड

`type="password"` इस्तेमाल करें ताकि टेक्स्ट छिपा रहे। `id="current-password"` और `autocomplete="current-password"` जोड़ें ताकि पासवर्ड मैनेजर इस फ़ील्ड को पहचान सकें और सेव किए पासवर्ड ऑटोफ़िल कर सकें। पेस्ट करने की सुविधा दें। सुरक्षा विशेषज्ञ मानते हैं कि पासवर्ड फ़ील्ड पर पेस्ट बंद करने से हमले नहीं रुकते। इससे सिर्फ़ वे लोग परेशान होते हैं जो पासवर्ड मैनेजर इस्तेमाल करते हैं।

पासवर्ड फ़ील्ड को दिखने में कम से कम 10 अक्षर चौड़ा रखें। छोटा इनपुट तंग लगता है। यूज़र को शक होता है कि उनका लंबा पासवर्ड समाएगा या नहीं। चौड़ा फ़ील्ड भरोसा बनाता है और सबमिशन की गलतियां घटाता है।

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

"पासवर्ड दिखाएं" या "पासवर्ड सामने लाएं" का टॉगल रखें (आमतौर पर आंख का आइकन या चेकबॉक्स)। चालू होने पर पासवर्ड फ़ील्ड `type="text"` में बदल जाता है ताकि यूज़र देख सकें कि उन्होंने क्या टाइप किया। यह सुरक्षा का जोखिम नहीं है। यह इस्तेमाल को आसान करने वाला फ़ीचर है जो सबमिशन की गलतियां और झुंझलाहट घटाता है। यूज़र पासवर्ड ध्यान से टाइप करते हैं और सबमिट दबाने से पहले उसे जांचना चाहते हैं।

याद रखें चेकबॉक्स (वैकल्पिक पर सुझाया हुआ)

"इस डिवाइस पर मुझे याद रखें" या "मुझे साइन इन रखें" चेकबॉक्स वैकल्पिक है, पर अनुभव सुधारता है। चुना जाने पर सेशन ज़्यादा देर चलता है या ब्राउज़र (सुरक्षित तरीके से) स्थायी लॉगिन टोकन रखता है। इसका मतलब यूज़र को हर बार आने पर लॉग इन नहीं करना पड़ता। कम जोखिम वाले अकाउंट के लिए यह सुरक्षित है। ज़्यादा सुरक्षा वाले अकाउंट (वित्तीय, सेहत, एडमिन पैनल) में इसे छोड़ दें या संवेदनशील कामों के लिए दोबारा ऑथेंटिकेशन मांगें।

अगर आप "याद रखें" चेकबॉक्स रखते हैं, तो साफ़ बताएं कि वह क्या करता है। "मुझे 30 दिन याद रखें" सिर्फ़ "मुझे याद रखें" से ज़्यादा साफ़ है।

पासवर्ड भूल गए लिंक

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

पासवर्ड रीसेट फ़ॉर्म कैसे काम करना चाहिए?

पासवर्ड रीसेट फ़्लो में कई स्टेप होते हैं। हर स्टेप मायने रखता है। हर स्टेप वह जगह है जहां यूज़र उलझकर छोड़ सकते हैं।

स्टेप एक: ईमेल वेरिफ़िकेशन की रिक्वेस्ट

रीसेट फ़्लो तब शुरू होता है जब यूज़र लॉगिन फ़ॉर्म पर "पासवर्ड भूल गए" क्लिक करता है। वह ऐसे पेज पर पहुंचता है जिस पर लिखा है "अपना पासवर्ड रीसेट करने के लिए अपना ईमेल एड्रेस डालें।" एक ही ईमेल फ़ील्ड दिखता है। बस इतना। कोई अतिरिक्त फ़ील्ड नहीं। यूज़रनेम या सुरक्षा सवाल नहीं पूछे जाते। बस ईमेल।

बटन पर कुछ साफ़ और एक्शन वाला लिखा हो। "रीसेट लिंक भेजें" या "रीसेट के निर्देश पाएं" बताता है कि आगे क्या होगा। "सबमिट" धुंधला है।

स्टेप दो: ईमेल से रीसेट लिंक भेजना

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

रीसेट ईमेल में एक अनोखा लिंक होता है (या ऐसा कोड जो वे अगले पेज पर डालते हैं)। वह लिंक तय समय बाद, आमतौर पर 24 घंटे में, खत्म हो जाए। जो लिंक कभी खत्म नहीं होता, वह सुरक्षा का जोखिम है अगर कोई उनके ईमेल तक पहुंच जाए।

स्टेप तीन: लिंक जांचें और पासवर्ड रीसेट फ़ॉर्म दिखाएं

जब वे ईमेल में रीसेट लिंक पर क्लिक करते हैं, तो वे पासवर्ड रीसेट फ़ॉर्म पर पहुंचते हैं। इस पेज को साफ़ पुष्टि करनी चाहिए कि क्या हो रहा है: "अपना पासवर्ड रीसेट करें" या "नया पासवर्ड बनाएं।" इसमें कोई उलझन नहीं कि वे सही जगह पर हैं या नहीं।

वह ईमेल एड्रेस दिखाएं जिसका पासवर्ड रीसेट हो रहा है। "आप example@email.com का पासवर्ड रीसेट कर रहे हैं।" इससे उन्हें भरोसा होता है कि वे सही अकाउंट रीसेट कर रहे हैं।

स्टेप चार: सबमिट करने से पहले पासवर्ड की शर्तें साफ़ बताएं

रीसेट फ़ॉर्म पर पासवर्ड की शर्तें उनके सबमिट करने की कोशिश से पहले दिखाएं। उन्हें अंदाज़ा लगाने पर न छोड़ें। "आपका पासवर्ड कम से कम 12 अक्षर का हो, उसमें एक बड़ा अक्षर, एक नंबर और एक खास चिह्न हो।" ठोस रहें। दिखाएं कि कौन सा पासवर्ड मान्य है।

पासवर्ड स्ट्रेंथ इंडिकेटर (बार जो कमज़ोर, मध्यम, मज़बूत दिखाए) यूज़र को सबमिट करके एरर पाए बिना समझने में मदद करता है कि उनका पासवर्ड शर्तें पूरी करता है या नहीं। कुछ यूज़र को यह मददगार लगता है। कुछ को झुंझलाहट होती है अगर शर्तें अस्पष्ट हों। अगर आप स्ट्रेंथ मीटर इस्तेमाल करते हैं, तो उसे साफ़ टेक्स्ट शर्तों के साथ रखें।

स्टेप पांच: पासवर्ड फ़ील्ड और पुष्टि

नया पासवर्ड मांगें। फिर उन्हें उसे दोबारा टाइप करके पुष्टि करने को कहें। यह पुष्टि का स्टेप टाइपो पकड़ता है। नुकसान यह है कि पुष्टि फ़ील्ड झंझट जोड़ता है। रिसर्च बताती है कि पासवर्ड पुष्टि फ़ील्ड हटाने से पूरा होने की दर बढ़ती है। अगर आप इसे रखते हैं, तो दोनों फ़ील्ड में "पासवर्ड दिखाएं" टॉगल रखें ताकि सबमिट करने से पहले वे जांच सकें कि दोनों एंट्री मेल खाती हैं।

स्टेप छह: तुरंत पुष्टि और अगले कदम

जब वे सफलता से पासवर्ड रीसेट कर लें, तो सफलता का संदेश दिखाएं। "आपका पासवर्ड रीसेट हो गया। अब आप अपने नए पासवर्ड से साइन इन कर सकते हैं।" फिर लॉगिन फ़ॉर्म पर वापस जाने का लिंक या "लॉगिन पर जाएं" बटन दें ताकि उन्हें खोजना या नेविगेट न करना पड़े।

उन्हें कन्फ़र्मेशन ईमेल भी भेजें। "आपका पासवर्ड हाल ही में रीसेट हुआ। अगर यह आपने नहीं किया, तो अपना अकाउंट सुरक्षित करने के लिए यहां क्लिक करें।" इससे उन्हें पता चलता है कि कहीं किसी और ने उनका पासवर्ड रीसेट तो नहीं किया, और उसे पलटने का तरीका मिलता है।

आपकी साइट पर लॉगिन फ़ॉर्म कहां रखें?

लॉगिन फ़ॉर्म सजावट नहीं हैं। उन्हें बिना खोजे मिलना चाहिए।

हेडर या नेविगेशन

सबसे ज़्यादा दिखने वाली जगह हेडर है। आपकी साइट के ऊपरी दाएं कोने में "साइन इन" या "लॉग इन" लिंक (या बटन) वहीं है जहां यूज़र उसकी उम्मीद करते हैं। क्लिक करने पर या तो उन्हें खास लॉगिन पेज पर ले जाएं या लॉगिन फ़ॉर्म वाला मोडल खोलें। मोबाइल यूज़र हैमबर्गर मेन्यू में साइन इन का विकल्प उम्मीद करते हैं। इसे कभी नेविगेशन की परतों के पीछे न छिपाएं।

खास लॉगिन पेज

खास `/login` या `/sign-in` पेज बनाएं। इस पेज पर लॉगिन फ़ॉर्म हो, और कुछ नहीं। कोई ब्लॉग पोस्ट नहीं। कोई मार्केटिंग कॉपी नहीं। बस फ़ॉर्म और ज़रूरी मदद का टेक्स्ट। साफ़, केंद्रित पेज सामान्य पेज में लॉगिन फ़ॉर्म जोड़ने से बेहतर कन्वर्ट करता है।

पासवर्ड रीसेट पेज

पासवर्ड रीसेट फ़ॉर्म `/reset-password` या `/forgot-password` जैसे खास URL पर होना चाहिए। यह पेज सिर्फ़ लॉगिन फ़ॉर्म से या रीसेट ईमेल के लिंक से पहुंचा जा सकता है। इसे सर्च इंजन में इंडेक्स नहीं होना चाहिए। इस पेज पर अपने HTML या robots.txt में `noindex` जोड़ें ताकि Google इसे रैंक करने की कोशिश न करे।

लॉगिन फ़ॉर्म डिज़ाइन की आम गलतियां

अच्छी नीयत वाले लॉगिन फ़ॉर्म में भी अक्सर ऐसी समस्याएं होती हैं जो यूज़र अनुभव बिगाड़ती हैं।

लॉगिन से पहले बहुत ज़्यादा फ़ील्ड

कुछ साइटें लॉगिन फ़ॉर्म पर ही यूज़रनेम, ईमेल, फ़ोन और सुरक्षा का जवाब मांगती हैं। ऐसा न करें। लॉगिन रजिस्ट्रेशन नहीं है। सिर्फ़ ईमेल और पासवर्ड मांगें। बाकी सब अतिरिक्त झंझट है।

छिपी या अस्पष्ट पासवर्ड शर्तें

अगर पासवर्ड की शर्तें सबमिट करने तक छिपी रहती हैं, तो यूज़र झुंझला जाते हैं। वे पासवर्ड डालते हैं। सबमिट दबाते हैं। एरर आता है: "पासवर्ड 12 अक्षर का हो और उसमें नंबर हो।" अब उन्हें फिर कोशिश करनी पड़ती है। शर्तें पहले ही दिखाएं।

पासवर्ड दिखाने का विकल्प नहीं

यूज़र देख नहीं सकते कि उन्होंने क्या टाइप किया। वे सबमिट करते हैं। गलत हो जाता है। फिर कोशिश करते हैं। फिर गलत हो जाता है। एक सरल टॉगल यह झुंझलाहट बचाता है।

उलझाने वाले एरर मैसेज

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

रीसेट लिंक बहुत जल्दी खत्म हो जाता है

जो रीसेट लिंक 15 मिनट में खत्म हो जाए, वह यूज़र को झुंझलाता है। वे काम के बाद अपना ईमेल देखते हैं। लिंक मर चुका है। उन्हें फिर से शुरू करना पड़ता है। कम से कम 24 घंटे दें।

रीसेट फ़्लो उलझाने वाले पेज पर भेजता है

कुछ रीसेट फ़्लो यूज़र को ऐसे पेज पर भेजते हैं जो साफ़ नहीं कहता कि क्या करना है। वे रीसेट लिंक पर क्लिक करते हैं। वे अस्पष्ट टेक्स्ट और बिना फ़ॉर्म वाले पेज पर पहुंचते हैं। उन्हें लगता है कुछ गलत हो गया। इसे साफ़ रखें। "example@email.com के लिए अपना पासवर्ड रीसेट करें" और साथ में पासवर्ड फ़ील्ड और सबमिट बटन।

लॉगिन और पासवर्ड रीसेट के लिए सुरक्षा की बातें

लॉगिन फ़ॉर्म आपकी साइट का सुरक्षा के लिए अहम हिस्सा है। इसे ठीक से सुरक्षित करें।

सारे लॉगिन ट्रैफ़िक के लिए HTTPS इस्तेमाल करें

आपका लॉगिन पेज HTTPS पर चलना चाहिए, HTTP पर नहीं। HTTPS रास्ते में डेटा एन्क्रिप्ट करता है ताकि हैकर आपके सर्वर तक जाते समय ईमेल और पासवर्ड न पढ़ सकें। इस पर कोई समझौता नहीं हो सकता। अगर आपकी साइट पर SSL सर्टिफ़िकेट नहीं है, तो लगवाएं। ज़्यादातर होस्टिंग प्रोवाइडर अब मुफ़्त SSL सर्टिफ़िकेट देते हैं।

पासवर्ड की मज़बूती सर्वर पर जांचें

ब्राउज़र-साइड वैलिडेशन यूज़र की मदद करता है, पर सिर्फ़ उसी पर भरोसा न करें। JavaScript वैलिडेशन को बाइपास किया जा सकता है। पासवर्ड को अपने सर्वर पर जांचें। देखें कि वह आपकी शर्तें पूरी करता है। सिर्फ़ वही पासवर्ड स्वीकार करें जो आपकी मज़बूती के मानक पूरे करें।

अपने डेटाबेस में पासवर्ड हैश और सॉल्ट करें

पासवर्ड कभी सादे टेक्स्ट में स्टोर न करें। सॉल्ट के साथ सुरक्षित हैशिंग एल्गोरिदम (जैसे bcrypt या Argon2) इस्तेमाल करें। अगर कोई आपके डेटाबेस में सेंध भी लगा दे, तो वह पासवर्ड नहीं पढ़ सकता। ठीक से हैश किए गए पासवर्ड को उलटकर असली पासवर्ड नहीं निकाला जा सकता।

लॉगिन कोशिशों की रेट लिमिट रखें

अगर कोई एक मिनट में 10 बार लॉग इन करने की कोशिश करे, तो उसे ब्लॉक करें। रेट लिमिटिंग ब्रूट फ़ोर्स हमलों को रोकती है जहां हैकर हज़ारों पासवर्ड कॉम्बिनेशन आज़माते हैं। कुछ नाकाम कोशिशों के बाद और कोशिशें देने से पहले 15 मिनट रुकें।

पासवर्ड रीसेट टोकन जल्दी खत्म करें

जो पासवर्ड रीसेट टोकन 24 घंटे चलता है, वह मानक है। जो टोकन 7 दिन या उससे ज़्यादा चलते हैं, वे इस जोखिम को बढ़ाते हैं कि किसी के ईमेल अकाउंट में सेंध से साइट का अकाउंट भी खतरे में आ जाए। टोकन को कम समय का रखें।

धोखाधड़ी पकड़ने के लिए लॉगिन गतिविधि लॉग करें

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

मोबाइल लॉगिन फ़ॉर्म: क्या अलग है?

मोबाइल बदल देता है कि लॉगिन फ़ॉर्म को कैसे काम करना चाहिए।

टच टारगेट और बटन का आकार

मोबाइल पर उंगलियां कर्सर जितनी सटीक नहीं होतीं। बटन और इनपुट फ़ील्ड बड़े होने चाहिए। सबमिट बटन कम से कम 44 पिक्सल ऊंचा हो। इनपुट फ़ील्ड आराम से टाइप करने लायक ऊंचे हों। ऊंचाई 44 से 48 पिक्सल रखें।

मोबाइल कीबोर्ड और इनपुट टाइप

ईमेल फ़ील्ड के लिए `type="email"` इस्तेमाल करें। यह मोबाइल डिवाइस को बताता है कि @ और . चिह्नों वाला ईमेल कीबोर्ड दिखाएं। इसके बिना यूज़र को कीबोर्ड मोड बदलने पड़ते हैं। पासवर्ड फ़ील्ड के लिए `type="password"` इस्तेमाल करें ताकि कीबोर्ड मेल खाए। यह छोटी बात टैप और झुंझलाहट बचाती है।

ऑटोकंप्लीट और पासवर्ड मैनेजर

मोबाइल ब्राउज़र और पासवर्ड मैनेजर ऐप (जैसे 1Password या Bitwarden) लॉगिन क्रेडेंशियल ऑटोफ़िल कर सकते हैं। पक्का करें कि आपके HTML एट्रिब्यूट इसे सपोर्ट करें। ईमेल फ़ील्ड पर `autocomplete="username"` और पासवर्ड फ़ील्ड पर `autocomplete="current-password"` रखें। मोबाइल पर, जहां टाइप करना धीमा है, यह बहुत बड़ी सुविधा है।

छोटी स्क्रीन पर फ़ॉर्म का लेआउट

फ़ील्ड ऊपर-नीचे रखें। मोबाइल स्क्रीन पर ईमेल और पासवर्ड अगल-बगल न रखें। हर पंक्ति में एक फ़ील्ड। फ़ॉर्म पूरी चौड़ाई और ठीक-ठाक मार्जिन के साथ हो। जो फ़ॉर्म मोबाइल पर तंग लगता है, वह पूरा नहीं होता।

मोबाइल कीबोर्ड के ढकने से बचें

जब मोबाइल कीबोर्ड आता है, तो वह आधी स्क्रीन ढक लेता है। पक्का करें कि लॉगिन बटन कीबोर्ड के ऊपर दिखे, या कीबोर्ड को आसानी से हटाने का तरीका दें। कुछ साइटें बटन तभी दिखाती हैं जब कीबोर्ड बंद हो जाए। इससे यूज़र झुंझलाते हैं। बटन दिखता रखें।

अक्सर पूछे जाने वाले सवाल

लॉगिन फ़ॉर्म बनाते समय क्या देखें

अपना फ़ॉर्म टूल जांचें: क्या वह ईमेल और पासवर्ड वाला लॉगिन फ़ॉर्म बनाने देता है, पासवर्ड दिखाने का टॉगल देता है, पासवर्ड की शर्तें तय करने देता है, और रीसेट ईमेल और टोकन के खत्म होने का समय संभालता है? WEMASY के प्लान और कीमतें जानने के लिए प्राइसिंग पेज देखें।