10 इंटरफ़ेस डिज़ाइन टिप्स

नमस्कार, हेब्र! मैं आपके लिए “ 10 Tips to Designing Perfect Forms ” लेख का अनुवाद प्रस्तुत करता हूँ।


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

चूंकि फॉर्म यूजर इंटरफेस के लिए महत्वपूर्ण कार्य करते हैं, उनके डिजाइन के लिए नियम हैं।

1. डेटा दर्ज करके प्रारंभ करें

सबसे सरल तत्व से शुरू करें - एक पाठ क्षेत्र। यह कई रूपों का सबसे आम घटक है, इसलिए यदि आप इसे सही करते हैं, तो आप आधे रास्ते में हैं।

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

शीर्ष पर शीर्ष होना चाहिए।

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

हेडलाइंस को हमेशा देखना होगा। इसलिए, उन्हें शीर्ष पर रखा गया है।

डेटा प्रविष्टि फ़ील्ड के बाईं ओर ऊपर और क्यों नहीं?

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

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

2. त्रुटि संदेश और चेतावनी

एक मानक पाठ क्षेत्र के लिए, त्रुटि संदेशों की आवश्यकता होती है।

यहाँ उन्हें डिजाइन करने के लिए 3 सुझाव दिए गए हैं:

क्लाइंट और सर्वर दोनों के कारण त्रुटि होती है।

क्लाइंट फ़ील्ड पर, समस्याओं का पता लगाया जाता है जब आवश्यक फ़ील्ड नहीं भरी जाती है, या ईमेल पते को गलत तरीके से दर्ज किया जाता है:

• सर्वर जाँचता है कि क्या दिया गया ईमेल मौजूद है;
• फॉर्म जमा करने से पहले उपयोगकर्ता को क्लाइंट त्रुटि की सूचना दी जाती है। उपयोगकर्ता द्वारा गलत जानकारी भेजने से रोकने के लिए त्रुटियाँ आवश्यक हैं।

त्रुटि संदेशों के लिए जाँच करें

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

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

चेतावनियों का प्रयोग करें

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

इंगित करें कि पासवर्ड कितना मजबूत है, चाहे वह साइट पर ईमेल पंजीकृत हो, या यदि लॉगिन व्यस्त है।

3. मैचिंग शेप का इस्तेमाल करें

यदि संयोजन का उपयोग किया जाता है, तो नेत्रहीन, प्रपत्र अधिक संक्षिप्त दिखता है। विचार करें कि उपयोगकर्ता फ़ोन से फ़ॉर्म का उपयोग कैसे करेगा।

यदि सभी फ़ील्ड टेक्स्ट हैं, तो उपयोगकर्ता को लगातार कीबोर्ड खोलना होगा।
एक बदलाव के लिए, उपयोगकर्ता को टेक्स्ट फ़ील्ड से ड्रॉपडाउन ("ड्रॉप-डाउन सूचियाँ") या रेडियोबॉटन और इसके विपरीत में स्विच करने के लिए संकेत दें।

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

4. रेडियो बटन, ड्रॉपडाउन और चेकबॉक्स

रेडियोबॉटन, ड्रॉपडाउन और चेकबॉक्स चुनते समय कभी-कभी भ्रम होता है।

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

जब आप केवल एक विकल्प चुन सकते हैं तो रेडिओबटन सबसे अच्छा समाधान है।

जब अधिक तत्वों की आवश्यकता होती है, तो एक ड्रॉपडाउन अधिक उपयुक्त विकल्प होगा (व्यवहार में - 5-6 से अधिक उत्तर)। आप डिफ़ॉल्ट आइटम का चयन कर सकते हैं या प्लेसहोल्डर को "एक आइटम का चयन करें" सेट कर सकते हैं।

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

रेडियोबॉटन के बजाय चेकबॉक्स का उपयोग करना आपको अपने यूआई डिजाइन निर्णयों में सीमित नहीं करना चाहिए।

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

5. यदि संभव हो, तो वैकल्पिक फ़ील्ड को बाहर करें

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

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

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

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

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

फिर आप अधिक स्थितियों की पेशकश कर सकते हैं: बैग की संख्या, आदि।

6. बड़े रूपों के लिए स्वत: पूर्ण का उपयोग करें

सड़क के नाम के आधार पर, पता बार को भरने में बहुत समय लग सकता है, खासकर फोन से। पते को सही ढंग से लिखना और भी मुश्किल हो सकता है।

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

7. सशर्त तर्क का उपयोग करें

अपने जीवन को आसान बनाने के लिए उपयोगकर्ता के लिए कुछ जानकारी देने के लिए तर्क का उपयोग करें।

• यदि उपयोगकर्ता का देश ज्ञात है, तो डिज़ाइन में अतिरिक्त फ़ील्ड ("स्थिति" हो सकती है यदि आप यूएसए, आयरलैंड में "काउंटी" आदि)
• शहर, राज्य या प्रांत का नाम दर्ज करने के लिए ज़िप कोड का उपयोग करें
• यदि आप IP पते द्वारा उपयोगकर्ता के देश की गणना कर रहे हैं, तो क्या फोन इनपुट क्षेत्र में देश कोड डालना संभव है?

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

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

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

8. प्लेसहोल्डर का सही तरीके से इस्तेमाल करें

हमने पहले चर्चा की थी कि प्लेसहोल्डर का उपयोग हमेशा नहीं किया जाता है, क्योंकि यह जानकारी दर्ज करते समय गायब हो जाता है। लेकिन हमने इसका उपयोग करने के अन्य तरीकों पर विचार नहीं किया जो उपयोगकर्ता की मदद कर सकते हैं।

प्लेसहोल्डर उपयोगकर्ता को जानकारी दर्ज करने का एक शानदार अवसर है। एक अच्छा उदाहरण एक फोन में प्रवेश कर रहा है। क्या उपयोगकर्ता को एक देश कोड दर्ज करने की आवश्यकता है? या शहर कोड?

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

9. अगले चरणों की रिपोर्ट करें।

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

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

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

10. अनुकूलन के तरीकों की तलाश जारी रखें

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

निष्कर्ष

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