वायरफ्रेम 101: एक शुरुआती गाइड

मेघना हज़ारी द्वारा, रेड ब्लू ब्लर आइडियाज़ (RBBi) में UX एनालिस्ट

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

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

तो, एक वायरफ्रेम क्या है?

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

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

1. सामग्री मॉड्यूल और पदानुक्रम पर निर्णय लें

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

2. सामग्री मॉड्यूल में अनुसंधान को शामिल करना

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

3. अनुसंधान के रुझान, लेबल और इंटरैक्शन।

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

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

4. स्केच, स्केच और स्केच "स्केच" का उपयोग करने से पहले

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

5. अपने वायरफ्रेम का परीक्षण करें

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

6. इसे बनाए रखें

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

7. एक मिनी-ऑडिट करें

एक बार जब आपकी वायरफ्रेम पूरी हो जाती है - थोड़ी सी पवित्रता की जाँच करें। दस Heuristics पर वापस जाएं - और अपने वायरफ़्रेम का परीक्षण करें। एक मिनी-ऑडिट करें, इसे विस्तृत करने की आवश्यकता नहीं है; आप अनिवार्य रूप से किसी भी छोटी चीजों को सही कर रहे हैं जिन्हें अनदेखा किया गया था। और भी बेहतर, एक टीम साथी को वायरफ्रेम दें। UX विशेषज्ञों के रूप में, कुछ चीजें हैं जिन्हें हमें यह सुनिश्चित करने की आवश्यकता है कि हमारे अंतिम रूप से वायरफ्रेम शामिल हैं, फिर भी हम सभी कलाकार बनते हैं जब यह हमारे काम में आता है - जब आप किसी चीज़ पर अथक परिश्रम करते हैं तो गलती ढूंढना मुश्किल है। अपना काम किसी और को दिखाने से, वे आपको एक निष्पक्ष आलोचक प्रदान कर पाएंगे और आपके पास अतिरिक्त प्रतिक्रिया होगी जिसे आप अंतिम सुपुर्दगी से पहले शामिल कर सकते हैं।

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