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

Challenging assumptions and designing across cultures

The book cover for Senongo Akpem’s Cross-cultural design.

Release 0.4- The beginning

Exploratory research: part 3: making sense of the data captured

Illustration of a remote team coming together to conduct remote synthesis. Image consists of multi-coloured stickies and mobile devices and laptops collaborating together.

Start Think­ing About Mark­er Moments — not Cus­tomer Journeys

CityMapper / Adding a new feature

How I survived my first-year in architecture school

UX Metric: Lostness

What do Page Yield and Cost per Page Mean?

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

Need only 3 things to grow and get better at your ‘Software Engineering’ career from “South Asia”…

Best Practices to Follow with ConfigCat’s Feature Flags

React Testing & TDD Tips for Testing Behaviors

1. Adobe Experience Manager