इंटरएक्टिव प्रोटोटाइप। मौजूदा यूजर इंटरफेस मॉडल, भाग 2. प्रक्रिया दृष्टिकोण

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

प्रोटोटाइप का अनुमोदन

इंटरएक्टिव प्रोटोटाइप स्वयं HTML में सिस्टम के प्रमुख पृष्ठों का लेआउट है और परस्पर जुड़ा हुआ है। दो दृष्टिकोण हो सकते हैं।

पृष्ठ लेआउट के आधार पर काले और सफेद प्रोटोटाइप

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



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



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

ग्राहक-स्वीकृत दृश्य प्रणाली डिज़ाइन के आधार पर रंग प्रोटोटाइप

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



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

मैं HTML लेआउट सहित वेब विकास के कई मोर्चों पर जाने में कामयाब रहा। सामान्य साइटों के प्रोटोटाइप के लिए टेम्प्लेट लगाए और संयोजित किए जाते हैं। लेकिन ये काफी सरल और समझ में आने वाली चीजें हैं, इंटरफ़ेस के साथ प्रयोग करने का कार्य नहीं है - बल्कि, यह सिर्फ विकास का समर्थन प्रदान कर रहा है।

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

प्रोटोटाइप की संरचना

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

मुख्य कार्यक्षमता

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

सिस्टम के साथ उपयोगकर्ता परिदृश्य

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



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



यह संभव है कि ग्राहक को भविष्य के साथी या निवेशक को भविष्य के उत्पाद की अतिरिक्त विशेषताओं को दिखाने की आवश्यकता हो। उदाहरण के लिए, एक एमएस एक्सेल फ़ाइल या इंट्रानेट सिस्टम से नौकरी की सूची आयात करना। इसलिए आवश्यक पृष्ठों की सूची फिर से विस्तारित होगी।



अब यह स्पष्ट है कि आपको किस रूप और मात्रा में क्या करना है। बिल्डिंग टूल्स से निपटने का समय आ गया है।



सामग्री का पहला भाग इंटरएक्टिव प्रोटोटाइप के वर्गीकरण के साथ और तीसरा उनके निर्माण की प्रक्रिया की विशेषताओं के साथ पढ़ें।



मूल: इंटरएक्टिव प्रोटोटाइप। मौजूदा यूजर इंटरफेस मॉडल, भाग 2. प्रक्रिया दृष्टिकोण