मैं एक लंबे HTML इनपुट प्रपत्र को डिजाइन कर रहा हूँ और कुछ डिजाइन विकल्पों के बीच बहस कर रहा हूँ के लिए सर्वश्रेष्ठ डिजाइन:एक लंबे HTML इनपुट प्रपत्र
कोई शोध या सर्वोत्तम अभ्यास यहां?
यू.एस. सरकार की प्रयोज्यता.gov साइट में an interesting article है, जो नेशनल कैंसर इंस्टीट्यूट के फॉर्म उपयोगिता के अध्ययन के नतीजे पर है, लेकिन यह आपके विकल्पों को बिल्कुल कवर नहीं करता है; यह स्वयं फॉर्म तत्वों के डिजाइन पर अधिक केंद्रित है।
अलसोल, डे अलेक्जेंडर परामर्श में a list of form design usability resources है जो आपकी मदद कर सकता है।
अद्यतन: कई अन्य उत्तरों को देखते हुए, "यह सही है और अन्य विकल्प गलत हैं" यहां जा रहे हैं। अंतिम जवाब यह है कि यहां कोई भी सही दृष्टिकोण नहीं है; कुछ संदर्भ आपको आपके लिए एक अच्छे समाधान के लिए मार्गदर्शन करने में मदद कर सकते हैं। उदाहरण के तौर पर, एकाधिक HTML पृष्ठों में एक फॉर्म को विभाजित करना आदर्श हो सकता है यदि आपको वैधता और निर्णय शाखा का अच्छा सौदा करना है (उदाहरण के लिए, फॉर्म के पेज 2 पर जो दिखाई देता है वह पूरी तरह से उस उत्तर पर निर्भर करता है जो उपयोगकर्ता किसी प्रश्न को देता है पेज 1 पर), चूंकि यह आपको प्रमाणीकरण और ब्रांचिंग कोड 100% सर्वर-साइड रखने की अनुमति देता है। लेकिन फिर भी, वैकल्पिक विकल्प हैं जो आपके मामले में बेहतर हो सकते हैं, लेकिन आपके मामले के बारे में और जानने के बिना जवाब देना मुश्किल है।
ऐसा लगता है कि usability.gov के आलेख का लिंक स्थानांतरित हो गया है। [शायद यह यह है?] (Http://www.usability.gov/get-involved/blog/2009/10/online-form.html) –
जबकि मैं कोई शोध उद्धृत नहीं कर सकता, मैंने उपयोग में कई बहु-भाग रूपों को लोकप्रिय देखा है।
सबसे अच्छा ऑनलाइन रूपों है कि मैं देखा है हमेशा पड़ा है में से कुछ:
, यही कारण है कि मैं कहूंगा कि, सबसे अच्छा अभ्यास :)
एक उपयोगकर्ता के रूप में होना चाहिए, मैं निश्चित रूप से विकल्प पसंद करते हैं 1.
बाकी सब कुछ एक झूठ है। आपको लगता है कि आपने आवश्यक नौकरशाही पूरी की है, और फिर और भी कुछ है।
दूसरी तरफ, एक वेब साइट मालिक के रूप में, आप अक्सर उपयोगकर्ता को पंजीकरण प्रक्रिया में चालित करना चाहते हैं, उसे फ़ॉर्म के एक साधारण स्क्रीन 1 के साथ लुभाना चाहते हैं।
टैब इंटरफेस नेविगेशन के लिए अमूल्य हैं, लेकिन आईएमओ, अनुक्रमिक इनपुट के लिए लगभग कभी भी उपयोगी नहीं हैं।
यह थोड़ा काला और सफेद, पावेल है; अविश्वसनीय रूप से अच्छी तरह से डिज़ाइन किए गए बहु-पृष्ठ रूप हैं जिनके पास आप अपनी समस्या के रूप में उद्धृत नहीं करते हैं, क्योंकि उनके पास स्पष्ट रूप से मार्कर हैं कि आपने कितना फॉर्म पूरा कर लिया है (और अभी भी पूरा हो गया है), और यहां तक कि प्रासंगिक शेष खंडों की सामग्री के बारे में संकेत जो पृष्ठ पर नहीं हैं। – delfuego
शायद ऐसा ... और फिर भी, मैं खुद को स्क्रॉल करना पसंद करूंगा। यह मुझे आगे देखने का विशेषाधिकार देता है, "उनके पास छिपाने के लिए कुछ भी नहीं है" का नैतिक मूल्य है। मुझे लगता है यह अच्छा है। –
कम्बाइन 2 और 3
के साथ पृष्ठों के माध्यम से उपयोगकर्ता गाइड अगले और वापस बटन, और उपयोगकर्ता कूद जाने के लिए कुछ इंटरफेस तत्व (टैब महान हैं, लेकिन यह भी ब्रेडक्रंब के रूप में इंगित ..) सेट सीधे पृष्ठों पर।
उपयोगकर्ताओं को स्क्रॉल करने दें। यदि आप "विज़ार्ड" दृष्टिकोण का उपयोग करते हैं, तो उपयोगकर्ताओं को पहले से दर्ज की गई सूचनाओं की समीक्षा करने या संशोधित करने में कठिनाई होगी।
मुझे विकल्प 1 सबसे अच्छा पसंद है। आप divs या फ़ील्ड्स में तार्किक रूप से चीजों को समूहबद्ध कर सकते हैं, तो उपयोगकर्ता फॉर्म के नीचे अपना रास्ता टैब कर सकते हैं।
बहु-पृष्ठ रूपों के साथ यह हमेशा क्लिक करने के लिए परेशान होता है फिर टाइपिंग पर वापस जाएं।
सबसे पहले, एक अच्छा लेख सामान्य रूप से Nielsen है।
एक अच्छा विश्लेषण भी this post में पाया जा सकता है।
मेरा अपना विचार (वेब एप्लिकेशन डिजाइन प्लस आधार के रूप में अतीत में स्नातक स्तर यूआई डिजाइन और प्रयोज्य अध्ययन के कई वर्षों):
1. पेशेवरों और विपक्ष
लांग HTML रूपों:
स्क्रॉल बार (बहुत संकीर्ण) पर क्लिक करके नेविगेट करना मुश्किल है लेकिन माउस पर स्क्रोल व्हील का उपयोग करके नेविगेट करना बहुत आसान है। "अगला" लिंक
दोनों दुनिया के सबसे बुरे के साथ
एकाधिक पृष्ठों की है। क्लिक करना मुश्किल है ("अगला" एक छोटा सा लक्ष्य है), फ़ॉर्म के किसी भी हिस्से में कोई यादृच्छिक पहुंच नहीं है (इसे समझना चाहिए)। यह विकल्प केवल तब उपयोगी होता है जब आप विशिष्ट क्रम में फॉर्म पार्ट्स को पूरा करते हैं और वापस जाकर एक विकल्प नहीं है।
टैब इंटरफ़ेस
यह एक अच्छा विकल्प है, लेकिन कमियां के साथ है। एकमात्र नकारात्मकता एक ही समय में सभी फॉर्म जानकारी नहीं देख रही है (और आपको याद रखना होगा कि कौन सा प्रश्न था जिस पर आप पीछे/पीछे नेविगेट करना चाहते हैं)।
2. निष्कर्ष
तो यह # 1 और # 3 क्या आपके उपयोगकर्ताओं के लिए सबसे आसान लगता है पर निर्भर करता है (बनाम टैब पर क्लिक लंबे खड़ी पेज स्क्रॉल) के बीच एक टॉस अप है।
3. नोट्स
कृपया ध्यान दें कि विंडोज GUIs लगभग सार्वभौमिक टैब वाले रूपों का उपयोग, इसलिए सबसे अधिक संभावना शोध से पता चला है कि यह बेहतर प्रयोज्य बुद्धिमान है सोचा था कि मैं पर CIE के सभी संदर्भ की जरूरत नहीं है क्षण।
कृपया ध्यान दें कि "एजेक्स कॉल के माध्यम से सत्यापन/जांच/बचत/आदि करने का अवसर" ऊपर दिए गए विकल्पों के साथ बहुत कुछ करने के लिए बहुत कुछ नहीं है - आप किसी भी तत्व को चुनने के बाद एक एजेक्स कॉल शुरू कर सकते हैं एक फॉर्म फोकस/लाभ फोकस।
इसके लिए टैबबंद इंटरफ़ेस का एकमात्र लाभ यह है कि यह उपयोगकर्ता द्वारा संचालित संकेत है "मैं फ़ॉर्म तत्वों के इस सेट के साथ किया गया है" - जिसे टैब के बिना बुद्धिमान ढंग से किया जा सकता है और बिना उपयोगकर्ता के आपको बताए उसने स्पष्ट रूप से किया है (ई .. वह अगले तत्व पर केंद्रित है)।
तुम भी निष्क्रिय कर सकते हैं "अभी तक तैयार नहीं आप के लिए" सभी पूर्ववर्ती आवश्यक तत्व तक प्रपत्र तत्वों 100% बाहर भर रहे हैं।
4. साइड नोट
क्यों वास्तव में आप इतने लंबे रूप है? उपयोगिता अनुसंधान के मुख्य बिंदुओं में से एक यह है कि किसी भी रूप से भरना उपयोगकर्ताओं के लिए लंबा, कठिन और घृणास्पद है। इसलिए, जब तक आपको जानकारी प्राप्त नहीं कर लेती है, तो इसके लिए मत पूछें। यह विशेष रूप से पंजीकरण रूपों पर लागू होता है - नील्सन और अन्य संदर्भ देखें।
व्यक्तिगत रूप से, मैं बहु-पृष्ठ दृष्टिकोण का उपयोग, लेकिन यह भी टैब के लिए अनुकूलित किया जा सकता। यहाँ मेरी कारणों में से कुछ हैं:
यह कहा गया है कि आपको यह सुनिश्चित करने के लिए सावधानी बरतनी चाहिए कि उपयोगकर्ता ने कितनी प्रगति की है, यदि पृष्ठों की संख्या 2-3 से अधिक है। आपको फॉर्म के माध्यम से आगे और पीछे दोनों नेविगेट करना संभव बनाना चाहिए। यह निश्चित रूप से आपके लिए अधिक काम है, लेकिन मुझे लगता है कि, सबसे अधिक के लिए एक बेहतर उपयोगकर्ता अनुभव।
आप एक टैब किए गए प्रपत्र के साथ जाने का फैसला करते हैं। मैं AJAX का उपयोग करता हूं और टैब नेविगेशन पर सत्यापन करता हूं। इस तरह आप एक टैब-इन-ए-टाइम को मान्य कर रहे हैं और अधिक आसानी से सत्यापन त्रुटियां दिखा सकते हैं। आप टैब्स को सक्षम करके टैब-ऑर्डर को लागू कर सकते हैं क्योंकि आवश्यक होने पर पिछले टैब पूरा हो चुके हैं। मुझे लगता है कि यदि जावास्क्रिप्ट उपलब्ध नहीं है तो आपके टैबबंद इंटरफ़ेस को बहु-पृष्ठ विविधता में अपनाना चाहिए।
एक लंबे डेटा प्रविष्टि दिन भर करते थे प्रपत्र के लिए, उपयोगकर्ताओं को जल्दी से लेआउट से परिचित हो जाते हैं। जो कीबोर्ड पर कुशल हैं वे माउस के साथ नियंत्रण में नेविगेट करना पसंद नहीं करेंगे। यदि आप टैब ऑर्डर सेट करते हैं और लंबे लंबवत स्क्रॉलिंग फॉर्म का उपयोग करते हैं, तो डेटा प्रविष्टि लोगों को खुश कर सकते हैं। यदि वे टैब या अगला बटन के बीच क्लिक करने के लिए माउस का उपयोग करना चाहते हैं, तो वे डेटा फ़ील्ड को अधिक तेज़ी से भरने में सक्षम होंगे।
दोनों दुनिया के सर्वश्रेष्ठ: एक दिलचस्प हाइब्रिड जिसे मैंने उपयोगकर्ता को डिस्प्ले शैली चुनने की अनुमति दी थी। डेटा प्रविष्टि लोग लंबे, लंबवत स्क्रॉलिंग संस्करण देख सकते हैं। अन्य उपयोगकर्ता जो डेटा को देख रहे थे (और संभवतः चयनित फ़ील्ड संपादित कर रहे थे) एक सारणीबद्ध संस्करण देख सकते थे जो लंबवत स्क्रॉलिंग से बचा था। हमने डिफ़ॉल्ट दृश्य के लिए उपयोगकर्ता की प्राथमिकता सेट करने के लिए वैयक्तिकरण का उपयोग किया।
मैं (1) स्क्रॉल स्पष्ट रूप से परिभाषित वर्गों के साथ एचटीएमएल की सादगी पसंद करते हैं।
कई वाणिज्यिक वेबसाइटें (2) के कमजोर दृष्टिकोण को पसंद करती हैं, शायद कुछ (3) ग्राहकों को उनके विकल्पों की समीक्षा करने की अनुमति देती हैं। (2) स्क्रीन पर सबकुछ रखता है, यह सुनिश्चित करता है कि उपयोगकर्ता पढ़ रहा है कि आप उन्हें क्या पढ़ना चाहते हैं।
हमारे पास हमारी कंपनी में समान रूप हैं, और हम 2 और 3 के संयोजन के साथ समाप्त होते हैं, यानी, स्क्रीन के शीर्ष पर टैब दिखाएं, अगले टैब पर जाने के लिए अगला बटन भी शामिल करें। यहां कुछ कारण/विचार हैं, 1, क्लाइंट पक्ष पर फ़ॉर्म को छोटा बनाने के लिए, प्रत्येक टैब को लोड करने के लिए AJAX का उपयोग करें, आमतौर पर उपयोगकर्ता प्रत्येक बार एक या दो टैब को संपादित/संपादित करता है। 2, जब फॉर्म लोड होता है, तो हम अलग-अलग परिदृश्यों पर आधार पर विभिन्न टैब दिखा सकते हैं। 3, 1 के समान, हम उपयोगकर्ता के विशेषाधिकार पर कुछ टैब आधार दिखा सकते हैं/छुपा सकते हैं। 4, कुछ फ़ील्ड संबंधित हैं, इसलिए जब पिछला टैब अपडेट किया गया है, तो हम तदनुसार अन्य टैब पर कुछ सेटिंग्स बदलते हैं। 5, और कभी-कभी, यदि आप टैब में अलग नहीं होते हैं तो फ़ॉर्म काम करने के लिए बहुत लंबा है।
आंशिक विचारों के साथ, मैं मूल रूप से # 1 और # 3 दोनों का निर्माण कर रहा हूं और अपने उपयोगकर्ताओं से प्रतिक्रिया प्राप्त करने जा रहा हूं। मेरी प्रारंभिक भावना यह है कि # 3 अधिक स्केलेबल होने जा रहा है क्योंकि मैं अधिक से अधिक डेटा जोड़ता हूं।
मैं इस विशेष उद्देश्य के लिए एक प्लगइन लिखा है - मुख्य रूप से स्वास्थ्य सेवा और कानूनी क्षेत्रों में उपयोग के लिए - लेकिन यह किसी भी लंबे एचटीएमएल प्रपत्र आवश्यकता के लिए काम करता है:
मैं वास्तव में लंबे रूपों पसंद नहीं है एक पेज में मुझे उन्हें नेविगेट करना मुश्किल लगता है कि जब आप अपनी प्रविष्टियों की जांच करने की कोशिश कर रहे होते हैं तो कई लोगों में से एक फ़ील्ड ढूंढना मुश्किल होता है। दूसरी बात जो मुझे उनके बारे में पसंद नहीं है वह यह है कि कुछ मामलों में फॉर्म को समाप्त करने में कुछ समय लग सकता है और यदि आप बाधित हो जाते हैं तो आप क्या करते हैं? एक और संभावना यह है कि यदि सत्र गिर जाता है, या ब्राउज़र क्रैश हो जाता है या नेटवर्क नीचे चला जाता है या परमाणु युद्ध होता है, तो
मैं पिछले & पिछले बटन के साथ प्रत्येक अनुभाग के लिए टैब पसंद करता हूं। दूसरी चीज जो मैं जोड़ता हूं वह तब होता है जब उपयोगकर्ता एक सेक्शन से अगले भाग में जाता है, यह डेटा बचाता है। दूसरा विकल्प एक ऑटो सेव सुविधा शामिल करना है।
छोटे रूप बेहतर हैं, लेकिन कभी-कभी आपको केवल डेटा की आवश्यकता होती है और उन्हें कोई विकल्प नहीं दिया जाता है।
आप अजाक्स के बिना एक टैब इंटरफ़ेस भी प्राप्त कर सकते हैं, बस divs को दिखा रहा है और छुपा रहा है। सरल, लेकिन स्पष्ट रूप से प्रारंभिक पृष्ठ लोड लंबा है। –