[{"data":1,"prerenderedAt":533},["ShallowReactive",2],{"page-\u002Fcase-studies\u002Freclaiming-space-through-compact-navigation":3},{"id":4,"title":5,"body":6,"description":499,"extension":527,"meta":528,"navigation":49,"path":529,"seo":530,"stem":531,"__hash__":532},"caseStudies\u002Fcase-studies\u002Freclaiming-space-through-compact-navigation.md","Reclaiming Space Through Compact Navigation",{"type":7,"value":8,"toc":498},"minimark",[9,13,31,34,42,59,64,66,69,72,75,78,87,91,93,96,99,109,112,115,125,128,132,134,139,153,157,168,172,174,177,180,188,191,194,197,201,203,206,210,213,216,224,227,231,234,237,240,251,254,259,262,266,268,272,275,317,320,323,333,337,339,342,345,349,351,354,357,361,363,366,412,415,419,421,424,438,441,445,447,451,454,457,461,463,466,470,472,475,479,481],[10,11,5],"h1",{"id":12},"reclaiming-space-through-compact-navigation",[14,15,16],"blockquote",{},[17,18,19,23,24,27,30],"p",{},[20,21,22],"strong",{},"Project Type:"," Interaction Design Exploration",[25,26],"br",{},[20,28,29],{},"Focus:"," Mobile Navigation, Information Density, Screen Utilization",[32,33],"hr",{},[14,35,36],{},[17,37,38,41],{},[20,39,40],{},"TL;DR:"," Traditional mobile tab bars reserve screen space at all times, regardless of whether navigation is being used. This concept compresses primary navigation into a compact pill-shaped control that displays only essential information at rest and expands during interaction. The result increases available content space while preserving awareness of application structure, destination access, and spatial consistency.",[43,44,45,55],"figure",{},[46,47,50],"video",{"width":48,"autoPlay":49,"loop":49,"muted":49,"playsInline":49},300,true,[51,52],"source",{"src":53,"type":54},"\u002Fcase-studies\u002Fmini-nav-behavior.mp4","video\u002Fmp4",[56,57,58],"figcaption",{},"Figure 1. Navigation expands from a resting state into a compact interactive navigation bar",[60,61,63],"h2",{"id":62},"overview","Overview",[32,65],{},[17,67,68],{},"This project explores an alternative approach to primary mobile navigation that reduces the persistent footprint of a traditional tab bar.",[17,70,71],{},"The objective was to increase the amount of screen space available for content while maintaining access to primary destinations and preserving users' awareness of application structure.",[17,73,74],{},"The resulting concept compresses multiple navigation destinations into a compact control that expands only during interaction.",[17,76,77],{},"The video below demonstrates the proposed interaction, showing the replacement of the current Instagram navigation bar, and how the suggested navigation remains condensed during use.",[43,79,80,84],{},[46,81,82],{"width":48,"autoPlay":49,"loop":49,"muted":49,"playsInline":49},[51,83],{"src":53,"type":54},[56,85,86],{},"Figure 2. Full interaction flow of the compact navigation system.",[60,88,90],{"id":89},"problem","Problem",[32,92],{},[17,94,95],{},"Traditional tab bars provide immediate access to primary destinations, but they also consume a fixed portion of the interface across every screen.",[17,97,98],{},"For content-focused applications, this creates a tradeoff between:",[100,101,102,106],"ul",{},[103,104,105],"li",{},"Navigation visibility",[103,107,108],{},"Content visibility",[17,110,111],{},"While the vertical space occupied by a tab bar is relatively small, it is permanently reserved regardless of whether navigation is actively being used.",[17,113,114],{},"The example below illustrates a conventional navigation pattern where multiple destinations remain continuously visible.",[43,116,117,122],{},[46,118,119],{"width":48,"autoPlay":49,"loop":49,"muted":49,"playsInline":49},[51,120],{"src":121,"type":54},"\u002Fcase-studies\u002Foriginal-nav-behavior.mp4",[56,123,124],{},"Figure 3. Traditional tab bar behavior with persistent destination visibility.",[17,126,127],{},"This project investigates whether the same navigational functionality can be represented more efficiently.",[60,129,131],{"id":130},"design-objectives","Design Objectives",[32,133],{},[135,136,138],"h3",{"id":137},"primary-goals","Primary Goals",[100,140,141,144,147,150],{},[103,142,143],{},"Reduce the persistent footprint of navigation",[103,145,146],{},"Increase available content area",[103,148,149],{},"Preserve awareness of current location",[103,151,152],{},"Maintain access to primary destinations",[135,154,156],{"id":155},"secondary-goals","Secondary Goals",[100,158,159,162,165],{},[103,160,161],{},"Support one-handed interaction",[103,163,164],{},"Reduce visual complexity",[103,166,167],{},"Preserve spatial consistency between destinations",[60,169,171],{"id":170},"design-approach","Design Approach",[32,173],{},[17,175,176],{},"Rather than representing every destination with a dedicated icon, the navigation system compresses the application's structure into a single pill-shaped control.",[17,178,179],{},"The control communicates:",[100,181,182,185],{},[103,183,184],{},"Current destination",[103,186,187],{},"Number of available destinations",[17,189,190],{},"At rest, only the active destination is visually emphasized.",[17,192,193],{},"Remaining destinations are represented by lightweight indicators.",[17,195,196],{},"This reduces the amount of space required to represent the application's information architecture while preserving awareness of overall structure.",[60,198,200],{"id":199},"interaction-model","Interaction Model",[32,202],{},[17,204,205],{},"The interaction is organized around two states.",[135,207,209],{"id":208},"resting-state","Resting State",[17,211,212],{},"The navigation component remains compact and occupies minimal screen space.",[17,214,215],{},"Users can identify:",[100,217,218,221],{},[103,219,220],{},"Their current location",[103,222,223],{},"The number of available destinations",[17,225,226],{},"without displaying a full navigation bar.",[135,228,230],{"id":229},"selection-state","Selection State",[17,232,233],{},"When users interact with the control, destination previews become available.",[17,235,236],{},"The interaction allows users to move across destination positions before committing to navigation.",[17,238,239],{},"During this process:",[100,241,242,245,248],{},[103,243,244],{},"The current screen remains unchanged",[103,246,247],{},"Navigation is not triggered immediately",[103,249,250],{},"Destination selection remains reversible",[17,252,253],{},"A navigation event occurs only after a destination is explicitly selected.",[17,255,256],{},[20,257,258],{},"Interaction Flow",[17,260,261],{},"Resting State → Expand Navigation → Preview Destinations → Select Destination → Navigate",[60,263,265],{"id":264},"design-decisions","Design Decisions",[32,267],{},[135,269,271],{"id":270},"compress-navigation-metadata","Compress Navigation Metadata",[17,273,274],{},"Instead of continuously displaying multiple destination icons, the design prioritizes only the information required during passive use.",[276,277,278,291],"table",{},[279,280,281],"thead",{},[282,283,284,288],"tr",{},[285,286,287],"th",{},"Information",[285,289,290],{},"Visibility",[292,293,294,302,309],"tbody",{},[282,295,296,299],{},[297,298,184],"td",{},[297,300,301],{},"Always visible",[282,303,304,307],{},[297,305,306],{},"Total destinations",[297,308,301],{},[282,310,311,314],{},[297,312,313],{},"Destination details",[297,315,316],{},"Visible during interaction",[17,318,319],{},"This reduces persistent interface complexity while preserving access to navigation information.",[17,321,322],{},"The close-up below highlights how destination information is compressed while still communicating overall application structure.",[43,324,325,330],{},[46,326,327],{"width":48,"autoPlay":49,"loop":49,"muted":49,"playsInline":49},[51,328],{"src":329,"type":54},"\u002Fcase-studies\u002Fmini-nav-closeup.mp4",[56,331,332],{},"Figure 4. Close-up view of the condensed navigation control and expansion behavior.",[135,334,336],{"id":335},"preserve-spatial-mapping","Preserve Spatial Mapping",[32,338],{},[17,340,341],{},"Each destination occupies a fixed position within the control.",[17,343,344],{},"This enables users to develop familiarity with destination locations over time and supports navigation through spatial memory.",[135,346,348],{"id":347},"separate-exploration-from-navigation","Separate Exploration from Navigation",[32,350],{},[17,352,353],{},"Users can inspect available destinations without immediately changing screens.",[17,355,356],{},"This reduces unintended navigation events and allows destination selection to occur independently from content viewing.",[60,358,360],{"id":359},"tradeoffs","Tradeoffs",[32,362],{},[17,364,365],{},"The concept introduces several tradeoffs compared to a traditional tab bar.",[276,367,368,378],{},[279,369,370],{},[282,371,372,375],{},[285,373,374],{},"Advantage",[285,376,377],{},"Tradeoff",[292,379,380,388,396,404],{},[282,381,382,385],{},[297,383,384],{},"Smaller navigation footprint",[297,386,387],{},"Less persistent destination visibility",[282,389,390,393],{},[297,391,392],{},"More content space",[297,394,395],{},"Additional interaction required",[282,397,398,401],{},[297,399,400],{},"Reduced visual clutter",[297,402,403],{},"Lower immediate discoverability",[282,405,406,409],{},[297,407,408],{},"Cleaner hierarchy",[297,410,411],{},"Greater reliance on interaction",[17,413,414],{},"These tradeoffs were considered acceptable within content-centric applications where maximizing content visibility is a primary objective.",[60,416,418],{"id":417},"outcome","Outcome",[32,420],{},[17,422,423],{},"The exploration demonstrates that primary navigation can be represented using significantly less persistent interface space while maintaining:",[100,425,426,429,432,435],{},[103,427,428],{},"Access to primary destinations",[103,430,431],{},"Awareness of application structure",[103,433,434],{},"Spatial consistency",[103,436,437],{},"Navigation efficiency",[17,439,440],{},"The concept reallocates screen space from navigation controls to content without fully obscuring navigational functionality.",[60,442,444],{"id":443},"key-learnings","Key Learnings",[32,446],{},[135,448,450],{"id":449},"navigation-visibility-exists-on-a-spectrum","Navigation Visibility Exists on a Spectrum",[17,452,453],{},"Navigation does not need to be either fully visible or fully hidden.",[17,455,456],{},"Representing only essential navigation information at rest can reduce interface overhead while preserving usability.",[135,458,460],{"id":459},"information-density-can-be-increased-without-removing-functionality","Information Density Can Be Increased Without Removing Functionality",[32,462],{},[17,464,465],{},"The project demonstrated that the visual representation of navigation can be compressed without reducing the number of available destinations.",[135,467,469],{"id":468},"content-first-applications-benefit-from-compact-navigation","Content-First Applications Benefit From Compact Navigation",[32,471],{},[17,473,474],{},"Applications centered around media consumption, messaging, reading, or browsing may benefit from navigation systems that prioritize content visibility over persistent control visibility.",[60,476,478],{"id":477},"expected-outcomes","Expected Outcomes",[32,480],{},[100,482,483,486,489,492,495],{},[103,484,485],{},"Increased available content space without removing destinations",[103,487,488],{},"Reduced persistent interface clutter",[103,490,491],{},"Improved content-to-interface ratio",[103,493,494],{},"Preserved navigation awareness through compact structural cues",[103,496,497],{},"Greater flexibility for content-dense mobile experiences",{"title":499,"searchDepth":500,"depth":500,"links":501},"",2,[502,503,504,509,510,514,519,520,521,526],{"id":62,"depth":500,"text":63},{"id":89,"depth":500,"text":90},{"id":130,"depth":500,"text":131,"children":505},[506,508],{"id":137,"depth":507,"text":138},3,{"id":155,"depth":507,"text":156},{"id":170,"depth":500,"text":171},{"id":199,"depth":500,"text":200,"children":511},[512,513],{"id":208,"depth":507,"text":209},{"id":229,"depth":507,"text":230},{"id":264,"depth":500,"text":265,"children":515},[516,517,518],{"id":270,"depth":507,"text":271},{"id":335,"depth":507,"text":336},{"id":347,"depth":507,"text":348},{"id":359,"depth":500,"text":360},{"id":417,"depth":500,"text":418},{"id":443,"depth":500,"text":444,"children":522},[523,524,525],{"id":449,"depth":507,"text":450},{"id":459,"depth":507,"text":460},{"id":468,"depth":507,"text":469},{"id":477,"depth":500,"text":478},"md",{},"\u002Fcase-studies\u002Freclaiming-space-through-compact-navigation",{"title":5,"description":499},"case-studies\u002Freclaiming-space-through-compact-navigation","M860BM60SRhfG7Oh6BbScs9P5kBINdztlwIaIYI0kxo",1789704566708]