Following a kick-off with your CSM, the first task you will be asked to do will be to define your app navigation. Defining a good app navigation requires to follow some basic recommandations. This article is aimed to help your structure your thoughts step-by-step with some customers' examples.

Which sections should you highlight?

For the sake of your end users, you must list out key navigation elements that will help your end user achieve key business processes within your app (login, purchasing process...).

Once you are done making this list, depending on how big it is and your needs you will oriente yourself to one of the following navigation types...

Native header navigation only

Purpose

When you choose a Native header navigation only, it will allow you to have a simple access to the different tabs of the application's menu. Also, it will make your end-user's navigation more fluid and give him easy access to the sections he is looking for.

The app will have full control on the display of the header and the display of the called components.

Example

Honest, an e-commerce application that chose very simply to integrate only the native header navigation.

Access to product categories and cart are the highlights of this navigation. A button to quickly access to the top of the page was also added to ease up the navigation while scrolling down.

Bottom bar navigation only

Purpose

The bottom bar navigation consists in having up to 5 main items accessible on all your app screens. Each item is represented by an icon of the customer's choice (with or without text). This type of navigation can apply if you have a working and nice looking website header and you wish to highlight specific paths / categories in your app.

This type of navigation applies if you have no header or very light modifications to make on your default website header.

Please note while designing your app that the items accessibles in the page (even your website header) may vary to give your customers the best experience possible. For instance if your user is starting a checkout process, you might not want the navigation to be polluted by an account button or a search in the header to prevent your users from dropping their cart. In that case we can hide them while being on the checkout process!

Example

Alo, a e-commerce application that chose to integrate the bottom bar navigation to facilitate the accessibility of the application's far screens

Native header & bottom bar navigation

Purpose

This solution combines both advantages of a native header and a bottom bar navigation. It allows us to integrate a large number of navigation options for a minimum of space.

Example

Micromania app chose navigation combining both a native header and a bottom bar. Their requirements fitted completely this type of navigation.

The header display is customized depending on the section of the app. The search including the barcode scanner is collapsed on other sections than the home.

The name of the section selected is displayed in the header for the user to better acknowledge on which section they are on.

The bottom navigation on the other hand is highlighting key sections of the app:

  1. Homepage: Latest news and release

  2. Store locator

  3. Loyalty card: An easy access to members QR code to ease up in-shop checkout process

  4. Fanzone: Key information on latest games and gaming machines

  5. Account: manage your sections, coupons..

Did this answer your question?