Reclaiming Space Through Compact Navigation

Project Type: Interaction Design Exploration
Focus: Mobile Navigation, Information Density, Screen Utilization

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.

Overview

This project explores an alternative approach to primary mobile navigation that reduces the persistent footprint of a traditional tab bar.

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.

The resulting concept compresses multiple navigation destinations into a compact control that expands only during interaction.

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.

Problem

Traditional tab bars provide immediate access to primary destinations, but they also consume a fixed portion of the interface across every screen.

For content-focused applications, this creates a tradeoff between:

• Navigation visibility
• Content visibility

While the vertical space occupied by a tab bar is relatively small, it is permanently reserved regardless of whether navigation is actively being used.

The example below illustrates a conventional navigation pattern where multiple destinations remain continuously visible.

This project investigates whether the same navigational functionality can be represented more efficiently.

Design Objectives

Primary Goals

• Reduce the persistent footprint of navigation
• Increase available content area
• Preserve awareness of current location
• Maintain access to primary destinations

Secondary Goals

• Support one-handed interaction
• Reduce visual complexity
• Preserve spatial consistency between destinations

Design Approach

Rather than representing every destination with a dedicated icon, the navigation system compresses the application's structure into a single pill-shaped control.

The control communicates:

• Current destination
• Number of available destinations

At rest, only the active destination is visually emphasized.

Remaining destinations are represented by lightweight indicators.

This reduces the amount of space required to represent the application's information architecture while preserving awareness of overall structure.

Interaction Model

The interaction is organized around two states.

Resting State

The navigation component remains compact and occupies minimal screen space.

Users can identify:

• Their current location
• The number of available destinations

without displaying a full navigation bar.

Selection State

When users interact with the control, destination previews become available.

The interaction allows users to move across destination positions before committing to navigation.

During this process:

• The current screen remains unchanged
• Navigation is not triggered immediately
• Destination selection remains reversible

A navigation event occurs only after a destination is explicitly selected.

Interaction Flow

Resting State → Expand Navigation → Preview Destinations → Select Destination → Navigate

Design Decisions

Compress Navigation Metadata

Instead of continuously displaying multiple destination icons, the design prioritizes only the information required during passive use.

This reduces persistent interface complexity while preserving access to navigation information.

The close-up below highlights how destination information is compressed while still communicating overall application structure.

Preserve Spatial Mapping

Each destination occupies a fixed position within the control.

This enables users to develop familiarity with destination locations over time and supports navigation through spatial memory.

Separate Exploration from Navigation

Users can inspect available destinations without immediately changing screens.

This reduces unintended navigation events and allows destination selection to occur independently from content viewing.

Tradeoffs

The concept introduces several tradeoffs compared to a traditional tab bar.

These tradeoffs were considered acceptable within content-centric applications where maximizing content visibility is a primary objective.

Outcome

The exploration demonstrates that primary navigation can be represented using significantly less persistent interface space while maintaining:

• Access to primary destinations
• Awareness of application structure
• Spatial consistency
• Navigation efficiency

The concept reallocates screen space from navigation controls to content without fully obscuring navigational functionality.

Key Learnings

Navigation Visibility Exists on a Spectrum

Navigation does not need to be either fully visible or fully hidden.

Representing only essential navigation information at rest can reduce interface overhead while preserving usability.

Information Density Can Be Increased Without Removing Functionality

The project demonstrated that the visual representation of navigation can be compressed without reducing the number of available destinations.

Content-First Applications Benefit From Compact Navigation

Applications centered around media consumption, messaging, reading, or browsing may benefit from navigation systems that prioritize content visibility over persistent control visibility.

Expected Outcomes

• Increased available content space without removing destinations
• Reduced persistent interface clutter
• Improved content-to-interface ratio
• Preserved navigation awareness through compact structural cues
• Greater flexibility for content-dense mobile experiences