मोबाइल ऐप नेविगेशन पैटर्न: टैब, ड्रॉअर और नेस्टेड फ़्लो

घटक से नहीं, संरचना से शुरुआत करें

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

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

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

तीनों पैटर्न की तुलना करें

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

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

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

काम की आवृत्ति और स्क्रीन आकार के अनुसार चुनें

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

विंडो आकार, दिशा और प्लेटफ़ॉर्म की परंपराओं की योजना बनाएँ। Apple की वर्तमान Human Interface Guidelines iPhone टैब बार को मुख्य स्तर के नेविगेशन के रूप में बताती हैं और iPad पर अनुकूलित टैब बार/साइडबार प्रस्तुति का समर्थन करती हैं। Material 3 अपने छोटे लेआउट वाले पैटर्न को नेविगेशन बार कहता है और उपलब्ध चौड़ाई बढ़ने पर दूसरे नेविगेशन रूप देता है। इन पैटर्न का उद्देश्य समान है, पर ये एक जैसे घटक नहीं हैं; एक प्लेटफ़ॉर्म की दिखावट दूसरे पर उतारने के बजाय उसी प्लेटफ़ॉर्म की स्थिति, व्यवहार और अनुकूलन का पालन करें।

स्थान समझना और वापस लौटना भरोसेमंद बनाएँ

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

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

नेविगेशन की व्यावहारिक समीक्षा

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

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

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