एक जीतना नेविगेशन मेनू विचार और प्रेरणा डिजाइन करना

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

आजकल आप दिलचस्प, रचनात्मक और असामान्य डिजाइन वाले विभिन्न प्रकार के नेविगेशन मेनू देख सकते हैं। लेकिन एक वेबसाइट में प्रभावी नेविगेशन के बारे में कैसे, यह कैसा दिखेगा; यह कैसा दिखना चाहिए?

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

सूचना आर्किटेक्चर

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

सूचना वास्तुकला में शामिल हैं सुविधाएँ, उपयोगकर्ता की आवश्यकता, साइटमैप, परीक्षण और वायरफ़्रेम. आप सूचना आर्किटेक्चर 101: तकनीक और सर्वोत्तम प्रथाओं में कैमरन चैपमैन द्वारा लेख में सूचना वास्तुकला के बारे में अधिक पढ़ सकते हैं.

उपयोगकर्ता-सक्षम प्रौद्योगिकियों का उपयोग करना

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

अधिक संदर्भों के लिए जावास्क्रिप्ट का सुंदर गिरावट, सीएसएस और जावास्क्रिप्ट के लिए 10 उपयोगी फ़ॉलबैक विधियों पर इस पोस्ट को देखें.

सरल, उपयोगकर्ता के अनुकूल शब्दों का प्रयोग करें

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

यदि किसी उपयोगकर्ता को यह पता लगाने के लिए एक लिंक पर क्लिक करने की आवश्यकता है कि लिंक क्या होता है तो यह आपके आगंतुकों के लिए एक खराब उपयोगकर्ता अनुभव में योगदान देगा.

उदाहरण

लारिसा नेस की वेबसाइट के नेविगेशन मेनू की शर्तों को समझना आसान है और पर्याप्त रूप से सामान्य है। उपयोगकर्ताओं को यह भ्रामक नहीं लगेगा क्योंकि उनके पास पहले से ही इस तरह के मेनू के साथ अनुभव है.

यहां पर साफ-सुथरी और स्पष्ट वेबसाइट नेविगेशन मेनू का एक और अच्छा उदाहरण है, जिसका उपयोग सामान्य शर्तों के साथ किया गया है.

क्रिएटिव एजेंसी Eighty8Four "शोरूम" शब्द का उपयोग करती है जो आगंतुकों के लिए भ्रामक हो सकती है। इस शब्द का अर्थ पोर्टफोलियो या कार्य हो सकता है लेकिन यह स्पष्ट नहीं है और आगंतुकों के पास इसे जांचने के लिए क्लिक करने के अलावा कोई विकल्प नहीं है.

नेविगेशन डिज़ाइन को मानकीकृत करें

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

Bluegg, नीचे दिखाया गया है, एक सरल और साफ नेविगेशन डिज़ाइन का उपयोग करता है जो सभी उपपृष्ठों में समान रहता है। एकमात्र अंतर रंग संकेतक है, जो उस पृष्ठ को दिखाता है जो आगंतुक वर्तमान में है.

संकेत करें कि आप कहां हैं

उपयोगकर्ता को यह बताना महत्वपूर्ण है कि वह हर समय कहां है। आप इसके द्वारा कर सकते हैं लिंक की पृष्ठभूमि, पृष्ठ नाम का रंग बदलना या टेक्स्ट को बोल्ड करें नेविगेशन मेनू में इसे दूसरों से अलग बनाने के लिए.

ऑस्टिन ईस्टसाइडर्स उपयोगकर्ता जिस पृष्ठ पर है, उसे इंगित करने के लिए एक अलग रंग और पृष्ठभूमि का उपयोग करता है। यह संकेतक एक सूक्ष्म डिजाइन परिवर्तन के रूप में भी काम कर सकता है, उदाहरण के लिए a का उपयोग करके अलग नेविगेशन पृष्ठभूमि जो यह महसूस करता है कि अन्य मेनू आइटम गहराई में हैं.

मीडिया सर्जरी एक खुले उपपृष्ठ के लिए एक संकेतक के रूप में एक गहरे रंग का उपयोग करता है। सामान्य लेकिन प्रभावी.

वेब सम्मेलनों का उपयोग करें

यह आसान उपयोग और सहज ज्ञान युक्त वेबसाइट नेविगेशन के बारे में है। वेब सम्मेलनों से डिजाइनरों को अपने डिजाइनों के आसपास काम करने में बहुत आसानी होती है। अधिकांश उपयोगकर्ता मुखपृष्ठ पर वापस जाने के लिए वेबसाइट लोगो पर क्लिक करेंगे, इसलिए ऐसा करने के लिए अपने लोगो को डिज़ाइन करें.

अगर तुम नहीं, आप उन्हें कुछ नया सीखने के लिए समय बिता रहे हैं या कुछ मामलों में उन्हें असुविधा प्रदान करने के लिए जो वे आम तौर पर स्वीकार किए जाने योग्य नौसैनिक मानदंडों की अपेक्षा नहीं करते हैं.

आप यहां वेब सम्मेलनों के बारे में अधिक जान सकते हैं:

10 वेब डिज़ाइन कन्वेंशन
वेब डिज़ाइन व्हील को फिर से तैयार न करें
वेब सम्मेलनों के साथ डिजाइन

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

एडम्स क्रिएशन सबसे आम वेब सम्मेलनों में से एक का उपयोग करता है - लोगो को वेबसाइट के बाएं शीर्ष कोने पर रखा गया है और मुखपृष्ठ से लिंक किया गया है.

इसका परीक्षण करें: एक तृतीय पक्ष को शामिल करें

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

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

संदर्भ प्रदान करें

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

मेरी अपनी बाइक उपयोगकर्ताओं को कुछ उपपृष्ठ में क्या मिल सकता है, इसके बारे में अधिक जानकारी देने के लिए सरल आइकन का उपयोग करता है.

सारा परदेशी उप नेविगेशन के बारे में कुछ जानकारी प्रदान करने के लिए मुख्य नेविगेशन के तहत लघु और अच्छा कैप्शन का उपयोग करता है जो मुख्य नेविगेशन को लिंक कर रहा है.

एसईओ प्रयोजनों

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

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

मुफ्त नेविगेशन स्क्रिप्ट (सीएसएस, और jQuery)

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

HTML और jQuery का उपयोग करके XML- संचालित वर्टिकल न्यूज स्क्रोलर स्क्रिप्ट: vScroller

Filtrify

पृष्ठ घुमक्कड़

समयरेखा पोर्टफोलियो

HorizontalNav

CSS3 न्यूनतम नेविगेशन मेनू

CSS3 के साथ सर्कल नेविगेशन प्रभाव

JQuery के साथ ग्रिड नेविगेशन प्रभाव

ascensor

एक सुरुचिपूर्ण CSS3 नेविगेशन मेनू बनाएं

सुंदर क्षैतिज नेविगेशन का प्रदर्शन

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

Ch3mical