प्रपत्र इंटरफ़ेस अनुशंसाएँ

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

मुख्य सिफारिशें और डेटा प्रविष्टि

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

समूहीकरण, टैब और बहु-पृष्ठ रूप

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

खेतों

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

हस्ताक्षर

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

मान्यता और संकेत

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

चेकबॉक्स और रेडियो बटन सिफारिशें

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

ड्रॉप डाउन सूची

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

रद्द करें और साफ़ करें बटन के लिए अनुशंसाएँ

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

तैयारी में, निम्नलिखित सामग्रियों का उपयोग किया गया था:

• जैकब नीलसन द्वारा अलर्टबॉक्स।
• Ux.stackexchange.com से विषयों का एक गुच्छा।
• SmashingMagazine के लेख
• बिजनेस लिंच।
• Artgorbunov.ru से सुझाव।