मेनू ब्लॉक के एक आलंकारिक प्रतिनिधित्व के साथ वेब इंटरफ़ेस

कई मौजूदा इंटरनेट साइटों का विश्लेषण करने के बाद, जैसे: ru.asus.com (कंप्यूटर घटकों का एक अग्रणी निर्माता), bbc.com (दुनिया की अग्रणी मीडिया एजेंसी की साइट), msu.ru (मास्को स्टेट यूनिवर्सिटी की साइट), admhmo.ru ( खंटी-मानसी स्वायत्त ऑक्रग - उग्रा) के प्रशासन की साइट, यह पाया गया कि उपयोगकर्ता वेब इंटरफ़ेस का डिज़ाइन निम्न ब्लॉकों से मिलकर एक संरचना बनाने के लिए कम है:
1. वेब पेज ("हेडर" या हेडर) के डिजाइन लेआउट का शीर्ष, शीर्षक हिस्सा।
2. वेब पेज ("पाद" या पाद लेख) के डिज़ाइन लेआउट का निचला, शीर्षक भाग।
3. मेनू ब्लॉक, जिसे क्षैतिज और लंबवत दोनों स्थित किया जा सकता है। मेनू आइटम अक्सर ब्लॉक-टेक्स्ट या प्रतीकात्मक रूप में निष्पादित होते हैं।
4. पृष्ठ की मुख्य सामग्री ("सामग्री") के साथ एक ब्लॉक, जिसमें अतिरिक्त कार्यक्षमता भी हो सकती है।

इस डिजाइन के तरीके मुख्य रूप से हैं: गोल्डन सेक्शन विधि, मिलर का पर्स और ग्रुपिंग सिद्धांत।

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


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


अंजीर। 1 डिज़ाइन किया गया कवर पेज लेआउट।

डिजाइन के दौरान, मुख्य नियंत्रण तत्व छवियों (छवि 1) के रूप में बनाए गए थे, जो इन तत्वों (विषयगत वर्गों) की पहचान करने के लिए कार्य करते हैं।
इन तत्वों के सक्रियण से उचित खंड में संक्रमण होता है।


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


अंजीर। 3 "टूलटिप" का एक उदाहरण है।