Three Zone Navigation System

Tom Söderlund
UsabilityGeek
Published in
2 min readFeb 25, 2020

--

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!

--

--

Tom Söderlund
UsabilityGeek

CTO. Dad. Feminist. Lover. Fan of AI 🧠, environment 🌎, lean startup 📊, surfskate 🛹, cappuccinos ☕ and movies 🎬. Still learning.