आपकी साइट के नेविगेशन को सरल बनाने के लिए टिप्स

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

उस झिझक को दूर करना जरूरी है। यदि एक खराब नेविगेशन संरचना प्रयोज्य मुद्दों (जैसे कि इस लेख के लिए उदाहरण साइट में मामला) को शुरू करने जा रही है, तो हमें साइट को जारी रखने के बजाय उस गलत संरचना को ठीक करने की आवश्यकता है।

यदि हम नहीं करते हैं, तो बाद में नुकसान की मरम्मत करना अधिक कठिन होगा। नेविगेशन को डिज़ाइन या रीडिज़ाइन करते समय, हमें उपयोगकर्ता की जरूरतों को याद रखना होगा।

जटिल नेविगेशन संरचनाएं शायद ही कभी आवश्यक होती हैं। हमें लगता है कि वे तब हैं जब हम पहली बार उन्हें बनाते हैं। क्या आप हमेशा करने की जरूरत है अपने आप से पूछ रहा है कि क्या एक ही लक्ष्य को प्राप्त करने के लिए एक सरल तरीका नहीं है।

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

चरण 1: मौजूदा डिज़ाइन की जाँच करें

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

पहले यह समझने में मदद मिलेगी कि मूल नेविगेशन पहले स्थान पर जटिल क्यों था। विषय साइट एक ट्यूटोरियल साइट है, और ट्यूटोरियल की विषय वस्तु एक जटिल प्रणाली के लिए है।

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

इसलिए नेविगेशन लिंक हमेशा भौतिक पृष्ठों पर रीडायरेक्ट नहीं होते हैं, और अधिकांश वर्चुअल पृष्ठों पर रीडायरेक्ट होंगे। इस मामले में नेविगेशन को पाठ, अध्यायों और विषयों में विभाजित किया जा सकता है।

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

उपयोगकर्ता को इस मेनू से एक पाठ चुनने की आवश्यकता है इससे पहले कि वे व्यक्तिगत पाठ अध्याय और विषयों को देख पाएंगे, जैसा कि अंजीर XNUMX में दिखाया गया है।

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

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

CSS3 ज़ूम फ़ंक्शन के लिए सार्वभौमिक पूर्ण ब्राउज़र समर्थन से पहले कोड के साथ इसका आकार बदलना मतलब सभी जावास्क्रिप्ट कोड (10,000 लाइनों पर) को बदलना होगा, जो एक बेकार हो गया होता।

तो मूल नेविगेशन डिज़ाइन क्षैतिज स्थान को बचाने का एक प्रयास है ताकि पाठ और उत्सर्जित उपकरण दोनों एक साथ स्क्रीन पर फिट हो सकें।

अब जब हम मौजूदा नेविगेशन संरचना के दोष को जानते हैं, तो यह अगले चरण में नए नेविगेशन डिजाइन की योजना बनाता है।

चरण 2: एक नई डिजाइन की योजना बनाएं

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

यदि यह ठीक से किया जाता है, तो बाईं ओर अधिक स्थान उपलब्ध होगा, जिससे हमें बीच में एक अतिरिक्त स्तंभ मिल सकता है।

वास्तव में स्पष्ट परिवर्तन यह है कि पाठ निकाय को पूरी तरह से नेविगेशन क्षेत्र से दूर ले जाया गया है, जो कि ठीक उसी तरह से होना चाहिए।

यह परिवर्तन नेविगेशन सिस्टम में अधिक लचीलेपन की अनुमति देगा, और पाठ निकाय को प्रदर्शित करने के लिए अधिक जगह प्रदान करेगा।

चरण 3: योजना को लागू करें

याद रखें कि प्रत्येक पाठ में कई अध्याय हो सकते हैं और प्रत्येक अध्याय में कई विषय हो सकते हैं। हम इससे कैसे निपटेंगे? सबसे आसान तरीका मेनू आइटम का एक बंधनेवाला स्टैक बनाना है। एक पाठ का विस्तार करने से इसके अध्याय का पता चलता है, और एक अध्याय का विस्तार करने से इसके विषयों का पता चलता है।

अंजीर XNUMX पर आप बाएं मेनू में दिखाए गए पाठों की अनपेक्षित सूची देख सकते हैं।

पाठ शरीर में नेविगेशन बटन के आवश्यक जोड़ को भी नोटिस करें। यह उपयोगकर्ता को अध्याय में अगले या पिछले विषय पर कूदने के लिए हमेशा नेविगेशन मेनू का उपयोग करने की आवश्यकता को दूर करना है।

यह वही है जो उपयोगकर्ता देखेंगे कि क्या वे बाएं मेनू से कोई पाठ चुनते हैं:

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

जैसे ही लिंक की सूची बढ़ती है, पृष्ठ पर एक ऊर्ध्वाधर स्क्रॉलबार जोड़ा जाता है। हम स्क्रॉलबार को मेनू के लिए एक निश्चित ऊँचाई सेट करके मेनू से जोड़ सकते हैं।

तकनीकी सामान

उपरोक्त उदाहरण में उपयोग की जाने वाली बाहरी स्क्रिप्ट, सीएसएस फ्रेमवर्क और फोंट शामिल हैं:

  • बूटस्ट्रैप v3.3.7
  • फ़ॉन्ट विस्मयकारी v4.7.0
  • Google फ़ॉन्ट्स: धूमधाम, कॉन्सर्ट एक, वरेला राउंड

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

यदि आप बूटस्ट्रैप को अपने सीएसएस फ्रेमवर्क के रूप में उपयोग कर रहे हैं, तो मेनू प्रोटोटाइप के लिए निर्माता उल्लेखनीय रूप से सरल है।

पहले इंडेंट स्तर पर, आप नेविगेशन क्षेत्र के लिए एक div बनाते हैं (यहाँ "leftSide" की आईडी के साथ) और इसके अंदर एक वर्ग div है जिसमें यह निर्धारित करने के लिए कि किस स्थान पर क्या गुण होना चाहिए। इस मामले में हम केवल मानक "अच्छी तरह से" वर्ग का उपयोग कर रहे हैं जो पहले से ही बूटस्ट्रैप (अंजीर 7) में पूर्वनिर्धारित है।

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

जैसा कि आप देख सकते हैं, लिंक पर क्लिक करने से कॉलम को छिपाने या दिखाने के लिए जावास्क्रिप्ट फ़ंक्शंस ट्रिगर होंगे। इस मामले में "छिपाना" का अर्थ है कि सामग्री को हटाना और स्तंभ को एक छोटे आकार में सिकोड़ना, जैसा कि अंजीर 9 में दिखाया गया है।

छिपने का कार्य क्या है यह 40px की चौड़ाई के लिए बाएं कॉलम को सिकोड़ता है (केवल इसे वापस सामान्य करने के लिए आवश्यक आइकन दिखाने के लिए पर्याप्त है), और मध्य स्तंभ की चौड़ाई को व्यूपोर्ट के 50% तक विस्तारित करता है। मूल रूप से जिस तरह से यह सब वापस तस्वीरें दिखा रहा है।

अब हमें मेनू आइटम को रखने के लिए एक कंटेनर बनाने की आवश्यकता है।

फिर नेविगेशन आइटम जोड़ें, इस मामले में "निर्देश" पैनल।

आइटम की टकराहट बूटस्ट्रैप के स्वयं के सीएसएस और जावास्क्रिप्ट द्वारा नियंत्रित की जाती है, इसलिए जब हमें कोई आइटम क्लिक किया जाता है (l1s1 और lNNUMXs1) पर क्लिक करने के लिए मध्य स्तंभ की सामग्री को बदलने के लिए हमें सभी कार्य करने होंगे।

ये एक बाहरी स्क्रिप्ट द्वारा नियंत्रित किए जाते हैं, लेकिन पूर्णता के लिए अंजीर 12 पर दिखाए जाते हैं।

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

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

सभी आइटम सूची टैग जोड़ी के बीच जोड़े जाने की आवश्यकता है, जैसा कि दिखाया गया है।

अगले मेनू आइटम को लाइन 75 पर एक नई पंक्ति सम्मिलित करके जोड़ा जाएगा, और फिर आइटम T1-L2 के लिए एक ही प्रक्रिया का पालन करें, और इसी तरह।

एक बार T1-L1 के माध्यम से T1-L6 से सभी आइटम (अध्याय) जोड़ दिए गए हैं, हम एक नई लाइन ब्रेक जोड़ देंगे, और फिर मेनू पूरी होने तक समान प्रक्रियाओं का पालन करते हुए एक नई सूची (श्रेणी T2 के रूप में) शुरू करेंगे।

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

यदि आपकी साइट को आपके इच्छित परिणाम नहीं मिल रहे हैं, तो एक संभावित कारण यह हो सकता है कि आपके नेविगेशन सिस्टम की तुलना में यह अधिक जटिल है।

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

बोगदान रैंकी

बोगदान इंसपायर्ड मैग का एक संस्थापक सदस्य है, जिसके पास इस अवधि में लगभग 6 वर्षों का अनुभव है। अपने खाली समय में वह शास्त्रीय संगीत का अध्ययन करना और दृश्य कला का पता लगाना पसंद करते हैं। वह भी Fixies के साथ काफी जुनूनी है। वह पहले से ही 5 का मालिक है।