Theory
अपने ही App में Lost
एक FestConnect user Garba Night की details देखने के लिए tap करता है। फिर वे event schedule में drill करते हैं, फिर एक performer के profile में। अब वे वापस Events list पर जाना चाहते हैं: पर कोई back button नहीं है, कोई breadcrumb नहीं है, और top tabs इतने पीछे scroll हो चुके हैं कि दिखते नहीं। वे stuck हैं।
Content सारा वहाँ था। Information architecture (पिछला lesson) सारी सही थी। पर उस structure का EXPERIENCE करने का कोई तरीका नहीं था। वह missing piece navigation है: वे actual UI elements जो एक user को move करने देते हैं।
Theory
Navigation, formally
Navigation UI elements का वह system है जो users को एक product के through move करने और content ढूँढने देता है: यह underlying information architecture की VISIBLE expression है।
अगर IA skeleton है, navigation वह तरीका है जिससे आप उस skeleton को महसूस करते हैं और उसके ज़रिए move करते हैं। Good navigation हमेशा user के तीन eternal questions का answer देता है:
1. मैं कहाँ हूँ? (current location/highlight)
2. मैं कहाँ जा सकता हूँ? (visible options)
3. मैं वापस कैसे जाऊँ? (back/home)
Garba Night incident में, question 3 answer-less था: कोई way back नहीं था। यही navigation design fail करता है।
At a glance
Navigation की Types
| Type | यह क्या है | FestConnect Example |
|---|---|---|
| Global/Primary | Main menu, हर जगह present | Bottom tab bar: Events, Schedule, My Passes, Profile |
| Local/Secondary | एक section के अंदर navigation | Events section के अंदर: Music, Dance, Food categories |
| Contextual | Content के अंदर links | Event description के अंदर एक performer का नाम, उनके profile से linked |
| Breadcrumbs | Hierarchy में location दिखाते हैं | Home > Events > Garba Night |
| Utility | Search, login, settings | Top-right search icon, profile settings |
Theory
Good Navigation के Principles
- Consistency: same navigation हर screen पर same जगह; users location सीखते हैं और उस पर भरोसा करते हैं
- Clear Labels: user की language इस्तेमाल कीजिए ('My Passes'), internal jargon नहीं ('User Registrations Table')
- Current Location Highlight कीजिए: एक visual indicator (bold tab, underline) दिखाता है 'आप यहाँ हैं'
- Clicks Minimise कीजिए: key tasks (register करना) कुछ taps के भीतर reachable होने चाहिए, buried नहीं
- Menu Overload मत कीजिए: top-level items को सीमित रखिए (mobile पर आमतौर पर 4-5); हर चीज़ जोड़ना navigation को खुद noise बना देता है
- Discoverable बनाइए: users को navigation ढूँढने के लिए hunt नहीं करना चाहिए
Quiz
Navigation को सबसे अच्छी तरह कैसे समझा जाए?
- एक decorative element जो app को modern दिखाता है
- Information architecture की visible expression, जो answer देती है मैं कहाँ हूँ, मैं कहाँ जा सकता हूँ, और वापस कैसे जाऊँ
- सिर्फ़ एक hamburger menu जो हर app में होना चाहिए
- Content का एक replacement जब content ढूँढना मुश्किल हो
- कुछ जो सिर्फ़ desktop apps को चाहिए, mobile को नहीं
Show the answer
Information architecture की visible expression, जो answer देती है मैं कहाँ हूँ, मैं कहाँ जा सकता हूँ, और वापस कैसे जाऊँ
Navigation उस underlying structure (IA) को VISIBLE और USABLE बनाता है, तीन eternal user questions का answer देते हुए: मैं कहाँ हूँ (location), मैं कहाँ जा सकता हूँ (options), और वापस कैसे जाऊँ (escape route)। Option A navigation को purely cosmetic treat करता है, जबकि यह functional है: बिना इसके users stuck हो जाते हैं (Garba Night example)। Option C एक single PATTERN (hamburger menu) को पूरे CONCEPT से confuse करता है; कई navigation approaches exist करते हैं। Option D ग़लत है: navigation content का substitute नहीं है, यह content तक पहुँचने का रास्ता है। Option E ग़लत है: navigation हर platform को चाहिए, patterns adapt होते हैं (bottom tabs mobile पर, top nav desktop पर) पर need universal है।
Think first
Hamburger Menu का Trade-Off
FestConnect सारे secondary options को एक hamburger icon (☰) के पीछे hide कर सकता है, या उन्हें एक visible bottom tab bar में रख सकता है। दोनों screen space बचाते या इस्तेमाल करते हैं अलग तरीके से: trade-off क्या है? फिर tap कीजिए।
Show the answer
Hamburger menu screen space बचाता है (सब कुछ एक icon के पीछे hidden है) पर discoverability को चोट पहुँचाता है: users को पता नहीं चलता क्या अंदर है जब तक वे tap न करें, और research बार-बार दिखाती है लोग इसे कम इस्तेमाल करते हैं क्योंकि यह invisible है ('out of sight, out of mind')। Bottom tab bar हमेशा visible options दिखाता है (higher discoverability, key destinations को constantly reinforce करता है) पर screen space लेता है और सिर्फ़ कुछ items (आमतौर पर 4-5) hold कर सकता है इससे पहले कि यह overload हो जाए। FestConnect के लिए, EVENTS और REGISTRATION जैसे high-frequency tasks को एक visible bottom tab में रहना चाहिए; कम-इस्तेमाल settings एक hamburger या profile menu में जा सकती हैं। Rule: navigation को visibility से बचाई गई space के against balance कीजिए, task frequency से guided।
Watch out
Navigation Slips
कोई 'मैं कहाँ हूँ' नहीं: बिना current-location highlighting के, users disoriented हो जाते हैं (Garba Night incident)।
कोई Way Back नहीं: हर screen पर एक escape route (back, home) होना चाहिए; कभी users को dead end पर मत छोड़िए।
Overloaded Menus: बहुत सारे top-level items navigation को खुद एक findability problem बना देते हैं।
Primary Navigation छुपाना: high-frequency actions (जैसे register करना) को एक buried menu में hide करना उन्हें discoverable होने से रोकता है।
Inconsistent Navigation: screens के बीच nav position या labels बदलना हर बार users को फिर से सीखने पर मजबूर करता है।
Theory
Unit 3 बंद होती है: Structure Design हो चुकी है
IA और navigation के साथ, structure सुलझ गई है: content organised है, और users इसके through move कर सकते हैं। अगली unit उस structure के ऊपर VISUAL LAYER शुरू करती है: typography, colour theory, layout, visual hierarchy, iconography, और branding: वह चीज़ें जो एक sound structure को एक beautiful, usable surface में बदल देती हैं।
Summary
Key takeaways
- Navigation उन UI elements का system है जो users को product के through move करने देते हैं; यह information architecture की visible expression है।
- यह तीन eternal questions answer देता है: मैं कहाँ हूँ, मैं कहाँ जा सकता हूँ, और मैं वापस कैसे जाऊँ।
- Types: global/primary, local/secondary, contextual, breadcrumbs, utility।
- Principles: consistency, clear labels, current-location highlighting, कम clicks, कोई menu overload नहीं, discoverability।
- Hamburger menus space बचाते हैं पर discoverability चोट पहुँचाती है; visible tab bars discoverable हैं पर space limited करते हैं।
- High-frequency tasks visible navigation में रहने चाहिए; कम-इस्तेमाल options secondary menus में जा सकते हैं।
- Memory hook: अगर एक user कभी stuck feel करता है, navigation ने उसके तीन questions में से एक का answer नहीं दिया।