हम पंजीकरण और साइट तक पहुंच को आसान बनाते हैं

मैं आपको एंथोनी डी से " इनोवेटिव टेक्नीक्स टू सिंपल साइन-अप्स एंड लॉग-इन " नामक लेख का अनुवाद प्रस्तुत करता हूं । स्मैशिंग मैगज़ीन के प्रकाशन की स्वीकृति के साथ विशेष रूप से हबराब्रिज उपयोगकर्ताओं के लिए UXDepot में स्थानांतरित किया गया।

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



बेसकैंप लॉगिन फ़ॉर्म

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

---

पंजीकरण फॉर्म को सरल बनाएं

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

।

पंजीकरण के बाद उपयोगकर्ता नाम के लिए पूछें

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



।

केवल एक बार पासवर्ड के लिए पूछें

कई पंजीकरण फॉर्म उपयोगकर्ताओं को दो क्षेत्रों में एक पासवर्ड दर्ज करने की पेशकश करते हैं। इसके कारणों को समझा जा सकता है - फॉर्म में दर्ज पासवर्ड सुरक्षा कारणों से मास्क के पीछे छिपा हुआ है: इसलिए उनकी पीठ के पीछे के लोग इसे नहीं देख पाएंगे। और इस मामले में दो फ़ील्ड टाइपोस से बचने में मदद करते हैं।

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



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

• पासवर्ड छिपाने / खोलने के लिए JQuery प्लगइन

ज़िप कोड के आधार पर स्वत: पूर्ण शहर फ़ील्ड

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

• एक ज़िप कोड से शहर और क्षेत्र डेटा प्राप्त करने के लिए AJAX का उपयोग करना

।

"देश" क्षेत्र में ऑटो प्रतिस्थापन

आमतौर पर, उपयोगकर्ता को लंबी ड्रॉप-डाउन सूची से निवास का देश चुनने के लिए कहा जाता है। हालांकि, देश के नाम के स्वचालित प्रतिस्थापन का उपयोग क्षेत्र में दर्ज किए गए वर्णों के अनुसार करना अधिक उचित होगा - उपयोगकर्ता अपने नाम के कुछ वर्णों को लिखकर अपने देश का चयन करने में सक्षम होगा।

• AJAX ऑटो jQuery के तहत पूरा करें

।

उपयोगकर्ताओं को वितरण पते से बिलिंग पते की प्रतिलिपि बनाने की अनुमति दें

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

• JQuery का उपयोग करके बिलिंग पते और वितरण पते की प्रतिलिपि बनाएँ
• JQuery का उपयोग करके दूसरे इनपुट क्षेत्र में इनपुट कॉपी करें

।

डिफ़ॉल्ट रूप से "न्यूज़लेटर की सदस्यता" चेकबॉक्स की जांच न करें, पहले पत्र का पूर्वावलोकन देखने का सुझाव दें

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

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



।

कैप्चा का उपयोग करने के बजाय जावास्क्रिप्ट के साथ एक पाठ क्षेत्र छिपाकर स्पैम से लड़ें

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

• रूपांतरण दर पर कैप्चा का प्रभाव
• ** वें कैप्चा

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

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

---

वेबसाइट लॉगइन फॉर्म को सरल बनाएं

प्राधिकरण के किसी भी रूप का कार्य उपयोगकर्ता को अपने खाते में जाने देना है। इतने सरल कार्य के बावजूद, प्राधिकरण के कुछ रूप इसे दूसरों की तुलना में बेहतर तरीके से हल करते हैं। यहां कुछ सरल तरीके हैं जिनसे उपयोगकर्ताओं को अपने खाते को आसान और तेज़ी से एक्सेस करने में मदद मिलती है।

।

लॉगिन के रूप में ईमेल पते का उपयोग करने का अवसर दें

एक ईमेल पता याद रखना बहुत आसान है (हम इसका लगातार उपयोग करते हैं) एक लॉगिन को याद करने से (जो किसी विशेष साइट के लिए आविष्कार किया गया था)। उपयोगकर्ताओं को अपने उपयोगकर्ता नाम और उनके ईमेल का उपयोग करके लॉग इन करने की क्षमता दें। यदि उपयोगकर्ता अपना लॉगिन भूल जाता है, तो वह हमेशा अपने ईमेल से लॉग इन कर सकेगा।



।

उपयोगकर्ता को अधिकृत करें ताकि वह उसी पृष्ठ पर बना रहे

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

ऐसी प्रक्रिया को लागू करने के दो तरीके हैं: एक ड्रॉप-डाउन फॉर्म और एक मोडल विंडो।

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

• JQuery के लिए सरल और कुशल ड्रॉपडाउन लॉगिन फ़ॉर्म
• AJAX ड्रॉपडाउन लॉगिन फॉर्म jQuery के लिए

मोडल विंडो भी उपयोगकर्ता को वर्तमान पृष्ठ से दूर नहीं ले जाती है - यह पृष्ठ के केंद्र तक फैलता है, पूरी तरह से प्राधिकरण फॉर्म पर ध्यान केंद्रित करता है। यह विकल्प फ़ॉर्म पर अतिरिक्त जानकारी रखना संभव बनाता है।

• मोडल पॉपअप में jQuery के लिए AJAX लॉगिन फ़ॉर्म कैसे एम्बेड करें
• JQuery के लिए एक सरल मोडल विंडो बनाने पर ट्यूटोरियल

।

प्रपत्र के पहले फ़ील्ड में स्वचालित रूप से कर्सर रखें

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



।

उपयोगकर्ताओं को अपने पासवर्ड देखने दें

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

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

• पासवर्ड छिपाना बंद करें

।

पासवर्ड रिकवरी लिंक के रूप में प्रश्न चिह्न का उपयोग करें

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



।

"पुष्टि करें" बटन को इनपुट फ़ील्ड के समान चौड़ाई बनाएं

पुष्टिकरण बटन न केवल एक कार्रवाई को संभव बनाने के लिए बनाया गया था - यह यह भी दिखाता है कि उपयोगकर्ता अब कौन सी कार्रवाई करेगा। बटन के छोटे आकार का मतलब हेरफेर के लिए एक कमजोर संकेत है, क्योंकि उपयोगकर्ता इस कार्रवाई की आवश्यकता पर संदेह कर सकता है।

विस्तृत बटन आत्मविश्वास देता है और याद करना मुश्किल है। बटन का नाम भी अधिक दिखाई देता है, इसलिए उपयोगकर्ता बेहतर ढंग से उस क्रिया को समझता है जो वह करने वाला है।



।

उपयोगकर्ताओं को फेसबुक, ट्विटर या ओपनआईडी के साथ लॉग इन करने की अनुमति दें

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



बेशक, आप आगे जा सकते हैं और आवश्यक डेटा को स्वचालित रूप से इकट्ठा करने और सहेजने के लिए फेसबुक कनेक्ट का उपयोग कर सकते हैं। उदाहरण के लिए, Friend.ly सेवा पर, फेसबुक के लिए एक आवेदन, पंजीकरण प्रक्रिया के दौरान, उपयोगकर्ता बस "रजिस्टर" बटन पर क्लिक करते हैं - सभी उपयोगकर्ता जानकारी स्वचालित रूप से एकत्र की जाती है। यह दृष्टिकोण तुरंत गोपनीयता के बारे में कई चिंताओं को जन्म देता है, इसलिए शायद यह इसका उपयोग करने के लायक नहीं है।

---

निष्कर्ष

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

।
अनुवादकों से पुनश्च: मुझे आशा है कि आपको लेख अच्छा लगा होगा। हमें खुशी होगी यदि आप हमें अनुवाद में त्रुटियों का संकेत देते हैं, ताकि हम उन्हें जल्दी ठीक कर सकें। कृपया मुझे पीएम में लिखें :)