Designing product with a simple, intuitive navigation system is essential for providing a good user experience. Therefore, it is important to consider about navigation when creating mockups. It helps users move through the app. In this reading, you’ll learn about different types of navigation and explore ways to create design with solid, effective navigation. So let’s get started!

Types of navigation

There a few common types of navigation you can use in your own designs: navigation bars, tab bars, navigation menus, and navigation hubs. Let’s go over each on of these.

Navigation bar

Navigation bars display the navigation links to the most important pages of the product in a single bar along one area of the screen. This bar can be horizontal or vertical depends on the design. Navigation bars are easy to find and give users a clear look at all of the areas of the website that they can interact with. This helps your users get exactly where they want to go.

Check out the article from The Creative Momentum breaks down all of the important information you need to know to build the most effective navigation bar: Designing the Ideal Navigation Bar.

Tab bar

Tab bars are very similar to navigation bars, but they display page links as tabs that can be clicked on and off. Tab bars can be icons, they can be text, or they can be both. Tab bars are a great way to sort out your content and keep the usr engaged with the content on your site. The App Store uses tab bar on the left-hand side to navigate users. As users move along the tabs, the each option changes within that area of the app, but doesn’t change the main screen of the app. Users know where they are based on the highlighted tab.

Navigation menu

A navigation menu is a menu that appears when the user clicks the three lines icon on the edge of the screen. These are sometimes called “hidden” menus (because they can be hidden away again) or “hamburger” menus (because of their shape). These menus are usually located at the top left or right of the screen appear more visually appealing by “hiding” the details of the menu until the user taps to open it. These menus usually locate at the top left or top right of the screen, which are easily to spot by the users. They aid the visually appealing by “hiding” the details of the menu until the user taps to open it. A navigation menu is a great way to showcase all of the links that you want to include without having to make them fit within your design parameters.

Read more on Hidden menus in Mobile and Web Design by Eginess.

Navigation hub

Finally, a navigation hub displays a collection of links on the homepage of the website. With a navigation hub, the user often has to go back to the homepage to change pages. This format helps reduce the amount of content on the screen at one time. There is often a visible back button to go back to the homepage. In the image above, users need to click the HOME to change from WOMENS to MENS (is the spelling on purpose?). A navigation hub might be ideal for you if your designs don’t have a lot of pages. This navigation option is not ideal if users need to navigate or move from one page to another.

Navigational design elements

Navigation organizes information so users can interact with other parts of a product. Navigation design is made up of elements, like buttons and icons, that create a clear, easy path for users so they can reach their goal. How can you use buttons and icons in your navigation?

• Buttons: these can be fully designed buttons or clickable elements, like text or icons. Buttons might be animated to look clickable or have a line underneath them to show their interactivity.

• Icons: icons are like visual shortcuts for the brain. Common icons include an envelop, email box, a house etc.

These navigation elements are considered affordances. An affordance is a visual cue of an object’s purpose within an interface. They “afford” you the opportunity to perform an action by providing you with hints about their context. Affordances are an important part of creating effective navigation.

Additional resources to learn more about navigation to incorporate in your product:

• Navigation design: Almost everything you need to know by JustinMind

• The rules for modern navigation by UX Booth

Good Luck!