लॉगिन / पंजीकरण फॉर्म विचार और सुंदर उदाहरण

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

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

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

मल्टीपल इनपुट्स पर विचार करें

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

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

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

jQuery लॉगिन बॉक्स

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

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

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

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

सरल एक-पृष्ठ पंजीकरण

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

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

अब फोरम या ब्लॉग आर्काइव के लिए अपना पंजीकरण पृष्ठ बनाते समय इसे बनाना सबसे अच्छा तरीका नहीं है। मानक परिभाषा के अनुसार, पासवर्ड के साथ कम से कम कुछ प्रकार के ई-मेल पते / उपयोगकर्ता नाम संयोजन की आवश्यकता होगी। कुछ नए-युग के वेब एप्लिकेशन केवल पंजीकरण प्रक्रिया को तेज करने के लिए उपयोगकर्ताओं के लिए गतिशील पासवर्ड उत्पन्न करेंगे.

बेशक, यहां व्यापार-बंद को अपने स्वयं के पासवर्ड को उत्पन्न करने के लिए उपयोगकर्ता के अंत पर नियंत्रण का अभाव है जो बहुत से लोग इसके आदी हैं.

आकर्षक प्रभाव का निर्माण

अब तक के सबसे महान साइनअप अनुभवों में से एक मैं अपना पहला टम्बलर खाता बना रहा था। उनकी साइट का मुख पृष्ठ एक लॉगिन और साइनअप फॉर्म दोनों प्रदान करता है जो सीधे नए CSS3 हाइलाइट / फीका प्रभाव के साथ एक दूसरे के नीचे रखे जाते हैं.

यह व्यवस्थित दृष्टिकोण Pixel2Life के jQuery लॉगिन क्षेत्र के बारे में समान है। हालाँकि, Tumblr के साथ अंतर यह है कि नेटवर्क उन लोगों को ब्लॉग के बिना कोई सामग्री नहीं दे सकता है (दूसरों के खातों को ब्राउज़ करने से अलग)। Tumblr से वास्तविक लाभ आपका खुद का ब्लॉग बना रहा है और दूसरों का अनुसरण कर रहा है - इस प्रकार फ्रंट पेज पर आपका मुख्य उद्देश्य खाता बनाना या लॉग इन करना है.

इस प्रणाली के साथ कुछ कीड़े हैं। IE6 / IE7 के भीतर सबसे विशेष रूप से इन नए CSS गुणों का समर्थन नहीं। मुख पृष्ठ पर भी उपयोग किया जाता है, जो इनपुट तत्वों को फार्म इनपुट वैल्यू में जोड़ने के लिए एक प्रणाली है - मूल रूप से ओवररुलिंग “चूक” ईमेल / पासवर्ड बॉक्स के लिए उपयोग किए जाने वाले वर्ण.

ये लेबल क्रोम / फ़ायरफ़ॉक्स जैसे आधुनिक ब्राउज़र में फ़ोकस करने से दूर हो जाते हैं। लेकिन बदनाम ब्राउज़रों के साथ ऐसा कोई भाग्य नहीं है, जैसा कि आप कल्पना कर सकते हैं, अपने स्वयं के इनपुट को फिर से पढ़ने के लिए काफी कष्टप्रद है!

सुंदर रूप डिजाइन के 20+ उदाहरण

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

स्नोगल न्यूज़