वायरफ्रेम क्या है

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


वायरफ्रेम क्या है?

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

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

आगे बढ़ने से पहले, चलिए यूट्यूब.कॉम पर आधारित एक वायरफ्रेम को देखते हैं

YouTube wireframe example

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

वायरफ्रेम केवल एक ब्लूप्रिंट है

एक वायरफ्रेम उपयोगकर्ता इंटरफेस की कम गुणवत्ता वाली संस्करण है और वास्तविक स्क्रीन का प्रतिनिधित्व करने के लिए नहीं बनाई गई है। वायरफ्रेम का उद्देश्य कार्यक्षमता, उपयोगकर्ता अंतरक्रिया और स्क्रीन प्रवाह को दिखाने के लिए उपयोग करना है, बिना स्पष्ट रूप से बताए कि स्क्रीन घटक कैसे दिखने चाहिए और कैसे व्यवहार करना चाहिए ताकि उच्चतम उपयोगिता प्राप्त हो।

वायरफ्रेम उदाहरण

यहाँ एक होम पेज के लिए वेब वायरफ्रेम उदाहरण है:

Newspaper site wireframe exampleयहाँ कुछ एंड्रॉइड ऐप्स के लिए वायरफ्रेम उदाहरण हैं:

Dropbox wireframe example Sports tracking app wireframe example Facebook wireframe example

यहाँ एक आईपैड ऐप के लिए आईपैड वायरफ्रेम उदाहरण है:

Online shop wireframe exampleयहाँ एक आईफोन ऐप के लिए आईफोन वायरफ्रेम उदाहरण है:

iPhone wireframe example

अंत में, एक डेस्कटॉप एप्लिकेशन के लिए एक वायरफ्रेम उदाहरण है:

Desktop application example

वायरफ्रेम के उपयोग के लाभ

उपयोगकर्ता इंटरफेस को स्पष्ट करें

ग्राहकों को तकनीकी स्क्रीन डिजाइन जर्गॉन जैसे स्लाइडर, फ्लिप बॉक्स, बूटस्ट्रैप आदि समझने में कठिनाई हो सकती है। वायरफ्रेम में मूल ग्राफिक तत्व शामिल होते हैं जिन्हें हर कोई समझ सकता है, जिससे ग्राहकों को यह जानने में मदद मिलती है कि फीचर कैसे काम करेंगे और वे सिस्टम के साथ कैसे बातचीत करेंगे ताकि वे अपनी आवश्यकता पूरी कर सकें।

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

आजकल हर सॉफ्टवेयर में उपयोगकर्ता अनुभव (UX) एक महत्वपूर्ण विचार है। आवश्यकता एकत्र करने में वायरफ्रेम के उपयोग से उपयोगकर्ता अनुभव के विचार को प्रोजेक्ट के शुरुआती चरण में लाया जाता है। कोई प्रोटोटाइप विकसित किए बिना या कोई वास्तविक स्क्रीन डिजाइन बनाए बिना भी उपयोगकर्ता यह अनुभव कर सकते हैं कि सिस्टम कैसे काम करेगा।

लागत प्रभावी

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

बदलाव करने के लिए अधिक तैयार

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

सक्रिय ग्राहक

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

वायरफ्रेम का प्रभावी ढंग से उपयोग कैसे करें?

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

  1. एक वायरफ्रेम को सरल और बस जरूरी बनाने के लिए बनाया जाता है। यह सरल होता है ताकि इसे तेजी से और आसानी से बनाया जा सके, और इसे फिर से बनाने या छोड़ने में कोई झिझक न हो। कम गुणवत्ता वाली प्रस्तुति इसे अधिक व्यापक और संचारक बनाती है। इसलिए, ड्राइंग को सुंदर बनाने, चीजों को संरेखित करने या सुंदर टाइपोलॉजी का उपयोग करने में बहुत समय नहीं लगाना चाहिए।
  2. वायरफ्रेम में, वास्तविक सामग्री दिखाने के बजाय, हम बड़े टुकड़े टेक्स्ट (वास्तविक संदर्भ) को टेक्स्ट के स्थानापन्न से बदल सकते हैं। इससे अनावश्यक रूप से सामग्री तैयार करने में समय बर्बाद होने से बचा जा सकता है, और पाठकों को टेक्स्ट सामग्री से विचलित होने से बचाया जा सकता है। लेकिन यदि टेक्स्ट को दिखाने की आवश्यकता हो, तो आप वहां कुछ डमी टेक्स्ट रखने के बारे में सोच सकते हैं। आप इंटरनेट पर आसानी से डमी टेक्स्ट जनरेटर ढूंढ सकते हैं।
  3. अनुमान का उपयोग आपको एक तत्व (उदाहरण के लिए “कंपनी का लोगो”) का वर्णन करने या इसके व्यवहार से संबंधित कुछ बताने में मदद करता है (उदाहरण के लिए “5 सेकंड में छिपाएं”)। आवश्यकता हो तो इसका उपयोग करें। लेकिन फिर से, प्रत्येक वायरफ्रेम तत्व का वर्णन करने की कोशिश न करें। आपको केवल तभी अनुमान का उपयोग करना चाहिए जब आवश्यक हो।
    Using annotations
  4. वायरफ्रेम को हाथ से बनाया जा सकता है, लेकिन हम आमतौर पर कार्यों को अधिक कुशल और आसानी से प्रबंधित करने के लिए सॉफ्टवेयर के साथ वायरफ्रेम बनाते हैं। इसके अलावा, कुछ वायरफ्रेम सॉफ्टवेयर आपको ऐसी सुविधाएं प्रदान करते हैं जो कागज और पेंसिल से प्राप्त नहीं की जा सकती हैं। यहां उनमें से तीन हैं:
    1. अवस्था – विजुअल पैराडाइग्म का वायरफ्रेमिंग टूल अवस्था की अवधारणा का समर्थन करता है, जो आपको एक मौजूदा वायरफ्रेम पर आधारित बच्चे वायरफ्रेम बनाने की अनुमति देता है। यह केवल एक समान बच्चे वायरफ्रेम के अनुक्रम के साथ स्क्रीन फ्लो बनाने में आपके समय को बचाता है, बल्कि संबंधित बच्चे वायरफ्रेम के सुधार को भी बहुत आसान बनाता है (जब हम वायरफ्रेम की प्रारंभिक अवस्था में बदलाव करते हैं, तो बदलाव सभी उसके बच्चे वायरफ्रेम अवस्थाओं में भी प्रतिबिंबित हो जाते हैं)
    2. स्टोरीबोर्ड – एक स्टोरीबोर्ड एक विशिष्ट परिदृश्य के स्क्रीन फ्लो को प्रस्तुत करता है। यह वायरफ्रेम को अधिक प्रबंधनीय बनाता है और प्रस्तुति को बहुत आसान बनाता है।
      Wireframes in storyboard
    3. उपयोगकर्ता कथा द्वारा वायरफ्रेम का प्रबंधन – उपयोगकर्ता कथा उपयोगकर्ता के चिंताओं और आवश्यकताओं को रिकॉर्ड करने के लिए एक एजाइल उपकरण है। उपयोगकर्ता कथा के परिदृश्य के हिस्से के रूप में वायरफ्रेम शामिल करने से यह दिखाता है कि उपयोगकर्ता उस उपयोगकर्ता कथा में वर्णित अपने कार्य के हिस्से में फीचर का उपयोग कैसे करेगा। इसके अलावा, जब डेवलपर उपयोगकर्ता कथा को लागू करना शुरू करता है, तो वह वायरफ्रेम की जांच कर सकता है ताकि उपयोगकर्ता की अपेक्षा के बारे में विचार प्राप्त कर सके।
      Wireframes in user story
विजुअल पैराडाइग्म वेब वायरफ्रेम, डेस्कटॉप एप्लिकेशन वायरफ्रेम, एंड्रॉइड एप्लिकेशन वायरफ्रेम और आईओएस एप्लिकेशन वायरफ्रेम (आईफोन और आईपैड) बनाने के लिए आपको आवश्यक सभी वायरफ्रेम उपकरण और तत्व प्रदान करता है। इसके साथ ही यह समर्थन करता है एजाइल सॉफ्टवेयर विकास और यूएक्स डिज़ाइन उपकरण, जिसमें शामिल हैं उपयोगकर्ता कथा उपकरण, स्प्रिंट विकास, स्टोरीबोर्ड, आदि।

Leave a Reply