4 प्रेरणादायक फॉर्म डिजाइन पैटर्न [मुफ़्त]

हबस्पॉट द्वारा किए गए एक अध्ययन में पाया गया कि 82% उत्तरदाताओं ने खराब या अपूर्ण रूपों के कारण वेबसाइट खरीद फ़नल को छोड़ने की सूचना दी और उनमें से 93% लोगों ने पहली बार डेस्कटॉप कंप्यूटर पर उन रूपों का सामना किया था।

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

4 प्रेरणादायक फॉर्म डिजाइन पैटर्न [मुफ़्त]

एक अच्छी तरह से डिज़ाइन किया गया रूप इसकी उपयोगिता से विचलित हुए बिना पूरे डिज़ाइन में मूल्य जोड़ता है। इसके अलावा, ऐसे रूप बहुत बेहतर प्रदर्शन करते हैं। Salesforce के नए UI डिज़ाइन ढांचे में, लाइटनिंग, छोटे प्रपत्र डिज़ाइन परिवर्तनों से प्रपत्र रूपांतरण में सुधार हो सकता है। आइए इसमें गोता लगाएँ।

बॉक्स-रहित रूप

बॉक्स-रहित वेबफ़ॉर्म ऐसे वेब फ़ॉर्म होते हैं जिनमें कोई दृश्यमान बॉक्स या बॉर्डर नहीं होते हैं। यह वेबफ़ॉर्म को अधिक समकालीन और आधुनिक बनाता है क्योंकि उनके पास वेब फ़ॉर्म का पारंपरिक रूप नहीं होता है, जिसके चारों ओर बॉक्स होते हैं। उनके चारों ओर बक्से वाले पारंपरिक वेबफॉर्म दिनांकित के रूप में देखे जा सकते हैं।

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

एनिमेटेड रूप

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

नीचे या किनारे से स्लाइड करें

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

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

फ़ुल-स्क्रीन फ़ॉर्म

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

प्राकृतिक-भाषा रूप

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

चरण-दर-चरण (प्रक्रियात्मक) प्रपत्र डिज़ाइन

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

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

लोगों को आसानी से समझ में आने वाले हिस्सों में जानकारी जोड़ने की अनुमति देने से आगे की गति को बढ़ावा मिलता है और सभी क्षेत्रों को एक साथ प्रदर्शित करने की तुलना में अधिक केंद्रित अनुभव प्रदान करता है।

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

निष्कर्ष

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