Published in


Three Zone Navigation System

Introducing the Three Zone Navigation System, an intuitive navigation design system for apps and websites.

What if all apps and websites had a similar navigation system? It would be much more intuitive, as you don’t have to spend time on figuring out how to use a new service.

You are probably using the Three Zone Navigation System in many apps and websites already, without thinking about it.

The three zones are:

  1. App Zone
  2. User Zone
  3. Help Zone

The App Zone is located in the left-top corner. This is where you typically have a hamburger menu and navigation menu for the different parts of your app.

The User Zone is located in the left-right corner. This is where you have user profile, account and billing, etc.

The third zone is the Help Zone, located in the bottom-right corner. This is typically just a chat box as made mainstream by Intercom etc. This is where you reach when you need help.

Codepen of Three Zone Navigation System in action

See this codepen to see the Three Zone Navigation System in action.

Want to learn more?

Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Online UX courses from the Interaction Design Foundation can provide you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!




Be a usability geek: Make better products, apps, websites and services.

Recommended from Medium

By Heart or From the Heart?

Free Tools for Sustainable and Circular Design

Top 10 Melbourne Based Web Design Companies

Mobile Game Design: Best Practices and the Workflow — Game-Ace

Designing a Neo “Mobile” Bank -ing Experience for the Nigerian Financial Market

How Teaching Help My UI/UX Journey

Instant recipe inspiration for the healthy ones

The Future of WordPress and Professionals

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tom Söderlund

Tom Söderlund

I build tools for creativity 🧩. CEO of @Weld_io , a #nocode tool for marketers. Father of two. Feminist. Fan of espresso and movies. Still learning.

More from Medium

Design and Implementation

System context for the weather station

Load Balancers

Prototype Design Pattern

Moving components using react.