4 फॉर्म डिजाइन UX टिप्स आपको पता होना चाहिए (उदाहरण के साथ)

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

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

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

उपयोगकर्ता की जरूरतों को पूरा करें

वेबसाइट और एप्लिकेशन हैं विभिन्न उपयोगकर्ता आधार और लक्ष्य, और यहां तक ​​कि एक ही स्थान कई रूपों को होस्ट कर सकता है जो विभिन्न प्रकार के डेटा एकत्र करते हैं, बस सबसे अधिक बार नाम रखने के लिए:

• लॉग इन फॉर्म
• पंजीकरण फार्म
• उपयोगकर्ता प्रोफ़ाइल रूपों
• न्यूज़लैटर साइनअप फॉर्म
• चेकआउट फॉर्म
• उपयोगकर्ता सर्वेक्षण
• संपर्क प्रपत्र
• टिप्पणी प्रपत्र
• खोज प्रपत्र

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

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

उदाहरण: उपयोगकर्ता की जरूरतों को लक्षित करने वाले सामाजिक लॉगिन

कोडपेन के लॉगिन फॉर्म में शीर्ष पर जीथब के साथ तीन सामाजिक लॉगिन हैं। यह विकल्प अधिकांश साइटों के लिए अनुचित होगा.

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

मोबाइल-फर्स्ट सोचो

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

इसके अलावा, कई फॉर्म यूआई पैटर्न जो मोबाइल पर अच्छी तरह से काम करते हैं, डेस्कटॉप पर भी अच्छी तरह से काम करेंगे.

उदाहरण: टेप करने योग्य नियंत्रण

उच्च गुणवत्ता वाले मोबाइल रूपों के बिना कल्पना नहीं की जा सकती नियंत्रित नियंत्रण जिस पर मोबाइल उपयोगकर्ता आसानी से टैप कर सकते हैं उनकी उंगलियों के साथ.

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

पाठ इनपुट फ़ील्ड हमेशा की तरह अधिक होते हैं ताकि मोबाइल उपयोगकर्ता आसानी से उन पर टैप कर सकें, और टिक आइकन के साथ बड़ा, नारंगी बटन आगे उपयोगकर्ताओं को फ़ॉर्म सबमिट करने के लिए प्रोत्साहित करता है.

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

उदाहरण: एक्सपेंडेबल इनपुट

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

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

जब उपयोगकर्ता फ़ील्ड से टैप करता है, तो वह सिकुड़ जाता है, और अतिरिक्त जानकारी गायब हो जाती है.

उदाहरण: मॉर्फिंग बटन

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

नीचे स्क्रीनशॉट अभिनव फॉर्म डिज़ाइन पर द स्टार्टअप के शानदार लेख से है, जो कई अन्य रचनात्मक समाधान भी प्रस्तुत करता है.

इनपुट टेक-इन को सुगम बनाएं

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

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

कई ई-कॉमर्स साइट (जैसे अमेज़ॅन) इस समाधान का उपयोग कार्ट परित्याग दर को कम करने के लिए करती हैं.

अगर हम फॉर्म फील्ड को पूरा करना चाहते हैं, तो अंगूठे का नियम है विचलित और उपयोगकर्ता कार्यों दोनों को कम करें जितना संभव.

उदाहरण: निजीकृत इनपुट पिकर

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

टोडोइस्ट सूची लेने वाला ऐप व्यक्तिगत संकेत देता है जब उपयोगकर्ता दिनों से अधिक हो जाता है, तो इसकी तिथि पिकर के अंदर.

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

उदाहरण: ड्रैग-एंड-ड्रॉप इनपुट

ड्रैग-एंड-ड्रॉप डिज़ाइन आमतौर पर फ़ाइल अपलोड फ़ील्ड के साथ अच्छी तरह से काम करते हैं, खासकर जहां उपयोगकर्ता छवियों को अपलोड करने वाले होते हैं.

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

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

उदाहरण: विक्षेप हटाने के लिए ओवरले

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

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

नीचे स्क्रीनशॉट पर, आप Booking.com का डेस्कटॉप संस्करण देख सकते हैं। जब उपयोगकर्ता खोज पर होवर करते हैं तो शेष सामग्री मिलती है ग्रेयिश ओवरले द्वारा कवर किया गया उनकी मदद करना फॉर्म भरने की प्रक्रिया पर ध्यान केंद्रित रखें.

उपयोगकर्ताओं को प्रतिक्रिया दें

दे रहा है सही समय पर सही प्रतिक्रिया उपयोगकर्ता अनुभव में काफी सुधार कर सकते हैं.

फॉर्म डिजाइन में, हैं दो प्रकार के उपयोगकर्ता फ़ीडबैक:

1. प्रतिक्रिया दी गई से पहले फार्म जमा करना - के लिए त्रुटियों को कम करें तथा परित्याग दर, जैसे कि प्रगति ट्रैकर, तत्काल इनपुट सत्यापन जो तुरंत सही इनपुट, या सहायक टूलटिप्स के लिए उपयोगकर्ताओं को पुरस्कृत करता है
2. प्रतिक्रिया दी गई बाद फार्म जमा करना - उपयोगकर्ताओं को बताने के लिए उन्होंने एक त्रुटि की, जैसे त्रुटि संदेश

हमारे उपयोगकर्ताओं की जिस तरह की प्रतिक्रिया की आवश्यकता है, वह हमारे लक्षित दर्शकों की विशेषताओं और हमारी साइट के लक्ष्य पर निर्भर करता है.

उदाहरण: प्रगति ट्रैकर

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

SnapSurveys सर्वे क्रिएटर वेब ऐप सबमिट बटन के ठीक ऊपर थोड़ा प्रगति ट्रैकर दिखाता है ताकि उपयोगकर्ता कर सकें स्वाभाविक रूप से इसे देख सकते हैं.

वह प्रगति ट्रैकर किसी भी लेबल का उपयोग नहीं करता है, लेकिन जिस तरह से इसे डिज़ाइन किया गया है अपने लक्ष्य को स्पष्ट करता है - मंडलियों की संख्या कदमों की संख्या को इंगित करती है, पहले से ही निष्पादित कदम नीले हो जाते हैं, और उपयोगकर्ता आसानी से देख सकते हैं कि कितने कदम अभी भी उनसे आगे हैं.

उदाहरण: वास्तविक समय मान्यता

बॉडी शॉप कॉस्मेटिक्स रिटेलर उपयोग करता है वास्तविक समय सत्यापन त्रुटियों को खत्म करने और फ़ॉर्म को पूरा करने की प्रक्रिया के UX में सुधार करने के लिए इसके उपयोगकर्ता प्रोफ़ाइल फ़ॉर्म पर.

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

उदाहरण: अभिव्यंजक टूलटिप्स

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

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

टूलटिप्स थोड़ा पीछे छिपे हुए हैं? माउस उपयोगकर्ताओं को विचलित करने के लिए नहीं कौन जानता है कि लॉगिन फ़ॉर्म कैसे पूरा करें, लेकिन हमेशा उपस्थित रहना उन उपयोगकर्ताओं के लिए जो अनिश्चित हैं.

कुछ टूलटिप्स भी शामिल हैं एक एनोटेट डेबिट कार्ड का एक छोटा सा दृश्य ताकि उपयोगकर्ता उन डेटा को आसानी से पा सकें जो उन्हें लॉगिन फ़ॉर्म में दर्ज करने हैं.