Creating a good user experience (UX) with a beautiful design (UI) sometimes seems like a magic process for the uninitiated. However, even if we seem like apprentice magicians playing randomly with colors and shapes, UXs still respect certain specific principles concerning the composition of their screens.

Here you will find our other articles on basic UX principles:

• The 7 pitfalls to avoid when doing lean & agile UX
• The 5 commandments of UX design

When you know that the French spend 2 hours and 25 minutes per day on average on mobile applications (Sociomantic study, April 2016), we quickly understand the importance that applications have taken on in our daily lives. But you and I are not the only ones who understood the truth. As of June 2016, there were already over 2 million applications worldwide available on the App Store (Statista) which is more than the number of giraffes in the world (The knowledge desk).

But what does this vastly increasing number of mobile applications really mean for a UX? Let only the ones that stand out manage to stay on our phones for more than a week. That's why user experience and design are the two assets of any mobile application that wants to be respected.

However, you don't build big things without laying a good foundation. So, as we saw in the first article taken from Survival guide, all UX must respect certain principles of composition so that its application is legible and pleasant. Likewise, the organization of the application meets this need for fluidity and a positive user experience. Thus, the tree structure and the navigation of your application are the two elements that, properly managed, will allow your users to navigate freely (and not to get lost in a maze of pages and clicks) and for UX apprentices to have a global vision of the application.

1. Coherence of the navigation tree

If we define the tree structure applied to UX, we could represent it like this: the tree gives a navigation organization chart describing the link between the various pages of the project. In other words, it's a user's path as they navigate through an application. Let it be something like this:

Visualizing the navigation in the form of a tree structure is essential in order to detect possible navigation errors and to allow the user to easily and logically visualize the path of the application. To make things easier for you and to make things simple, here is the TO DO List of things to remember when designing the architecture of your mobile application:

• Key principles 1: the pages are organized in a logical way that is easy for the user to understand.
• Key principles 2: all content in the application is arranged in a logical and accessible manner.
• Level 1 pages (first line of the tree) should highlight the main content of the application.
• It is not recommended to do more than 4 level 1 pages.
• Pages that are level 2 or higher do not provide access to other pages that are at the same level as them.
• Level x pages link to level x-1 pages.
• Level x pages are linked to the theme of their x-1 page.
• It is not recommended to do more than 4 levels in a mobile application.
• The application should be as simple as possible: if you don't need a page, eliminate it.

2. Consistency of navigation

When choosing navigation, UX should always have in mind which elements are priority for the user. Navigation menus provide access to a group of functionalities and most of the time look like navigation bars or hamburger menus (the menus at the top left with small lines). Although all mobile applications contain menus, this does not mean that they all succeed in being perfectly understandable for the user.

So here is a second TO DO list that will allow you to avoid development mistakes and to choose your menu effectively.

General elements:

• The user should know immediately where they are in the application.
• His navigation choices must lead him to the desired result quickly.
• The names of the menu items are explicit in view of the context of the project.
• The user should be able to access any important element in 3 clicks.

Elements that allow visibility:

• Do not plan menus that are too small.
• Embed the menu where the user expects it.
• Show that the menu is clickable and not a decorative element.
• In the case of an infinite scroll, offer a permanent menu that allows you to easily return to the top of the page.
• Respect the contrast so that the menu comes out as can be seen on this screen:

Elements to indicate where the user is in the application:

• For navigation to be as simple as possible, the UX must indicate where the current screen is located in the application tree. In the example below, the user has no way of knowing where the menu items lead:

Elements to increase the readability of the application:

• Use relevant categories that have terminologies that clearly describe the content and functionalities of the application as in the example below:

• Offer accessible menus for similar content: users may want to move from one screen to another if the content is similar. This change of pages must therefore be quickly accessible. For example, on an e-commerce site, users buying shoes may also be interested in socks (this is just one example).
• Use visuals that increase communication and that users are used to.

Elements that increase the navigability of the application:

• Facilitate access to menu items by putting them at your fingertips.
• The menu must be standardized to the standards of telephone guidelines (Android, iOS,?)

Special Navigation BONUS: Burger menu or Tab Bar menu?

Numerous debates have been raised among supporters of the hamburger menu or the tap bar menu. To summarize what has already been said, we offer you a quick summary that will allow you to choose between the two types of menu:

The burger menu (also called split screen):

• For whom? For items that are not essential to the user.
• And in fact? For an app with many first-level pages (more than 4/5 in concrete terms)
• Disadvantages? Out of sight, out of mind, Requires one more click
• Benefits? Takes up little space on the screen

The Tab Bar menu

• For whom? For the essential functionalities of the application.
• And in fact? For an app with less than 4/5 top-level pages.
• Disadvantages? Different depending on IOS or Android, Takes up space on the screen
• Benefits? Close to the eyes, close to the heart, this menu encourages interaction. The tab bar can disappear when it is not necessary

Both?

If your application contains many first-level items and a limited number of sub-menus.

With that we hope you have understood the basics of navigation! Do not hesitate to come back for the next Survival Guide article!