Hub and spoke

Hub lists major sections. Actors navigate to spokes, complete tasks, then return to hub for other sections. Spokes link only to hub, not to each other.

This structure trades navigation flexibility for cognitive simplicity—actors always know the path to any destination. Limited space in spokes constrains additional navigation options.

Most commonly found on mobile devices where screen space is limited and clear task focus is valuable. The iPhone home screen exemplifies the pattern: apps are spokes, the home screen is the hub.

Behavioural position

Supports

• Monitoring — hub can surface updates and status from all spokes
• Transactional search — direct selection from hub when target is known

Constrains

• Navigating — forces hub return even when destination is known
• Browsing — limits lateral movement between related spokes

The constraint on navigating can frustrate actors who know their destination but must take two-step journeys. However, for exploring, the hub provides clear overview of available spaces.

Variants

• Pure hub and spoke: Spokes contain no navigation to other spokes. Only path back is to hub. Best for completely independent sections.
• Hub and spoke with limited cross-links: Spokes can link to closely related spokes directly. Good for sections with clear relationships.
• Hub and spoke with global navigation: Hub provides entry point, but spokes include global navigation to all sections. Becomes hybrid pattern.

States

Hub states

• Active — currently displaying, actors select destination
• Returning — navigated back from spoke, may need visual indication of previous context
• Updated — indicators show changes in spokes (badges, highlights, notifications)

Spoke states

• Active — currently displaying content/functionality
• Accessible — available from hub
• Restricted — greyed out or hidden based on permissions or prerequisites
• Notifying — has updates or requires attention (shown on hub)

To-do

Follow-up to capture: mobile app architectures with tab bars, a common realisation where the tab bar acts as the persistent hub.

Resources & references

• Tidwell, Brewer, Valencia (2020) Designing Interfaces, 3rd ed.
• Nielsen Norman Group (2015) Mobile Navigation Patterns