🤥 ☃️ 🦂 How to think through navigation in mobile applications 👎🏻 👲🏽 🤑

It is important to place the buttons only where they will be in demand, so as not to clog the interface and visually not overload it for users. It is important to provide the user with the information necessary for making a decision to click on an existing button or not. Now about navigation. I tried to speculate why certain elements in applications are implemented like this.

Hamburger

In the “hamburger” type drop-down menu it makes sense to place rarely requested, non-target menu items, since you need to click the button to access these items. This reduces the likelihood that the user will in principle recognize the presence of those menu items that are behind the button (if this is not the only button in the interface). Also, a lot of things start depending on how noticeable this button is in the context of the screen. In a hamburger, you can often see the Policy and User Agreements, Help, FAQ and detailed technical information that is rarely requested by the user. At the same time, the target buttons are located in the lower menu - as quickly as possible for the user.

Just one click - a few seconds if you do it only once. And when this click needs to be done every time you want to use the target function of the application, it can result in several hours of wasted time in total. We care about our users.

Fig. 1. Example of a hamburger menu

Profile

Users love personalization. Therefore, the presence of a profile is quite common in applications in which there is a fraction of a social orientation. Those. if the application implies the exchange of information or something else that involves identifying you as a person in front of another person, it is automatically implied that the application must also have a profile, with the possibility of flexible settings. If the user does not have the opportunity to correct the typo formed during registration in personal data such as login or e-mail, or change the profile picture that is displayed to other users, this will bring pain and suffering. It is customary to designate a profile with a human icon or an avatar set by the user.

You should pay attention to how Instagram does it. In order not to distract the user with one connected account with a colored profile icon - the profile is indicated by a standard icon of the same color as the main menu. When several accounts are connected, then from which account you take actions - it becomes important enough to make more emphasis on which profile the user is currently working with. Therefore, the “active” profile icon is already visible in the menu.

Fig. 2. Screenshots from instagram bottom menu. On the left - one user profile, on the right - two connected profiles to one account

I also note that I saw some applications that do not imply user identification in front of other people, but at the same time, too much space and attention is paid to the user's avatar. And, of course, in such cases, people rarely strain to replace it with something personalized, because apart from them no one sees this avatar. This often happens in technically oriented systems, such as applications for accounting for something in some warehouses or tracking any statistics. In such cases, it’s really worth asking the question “is this functionality needed here or is it needed in such a volume?”

Lower menu

The most common form of menu at the moment. And this popularity has a foundation.

It is convenient, easy to read, described in the guides for the design of android and ayos. It has established itself and has confirmed with prolonged use, as convenient and understandable.

In general, I would point out several stages of this menu. For completely innovative applications that are still used by unusual users of the icon to indicate menu items, the first time, when the audience of the application is going to be aggressive marketing, is to use the signature on the menu items, as Ticktok does, for example. Signatures for menu items should also be left to applications with complex navigation or a wide range of functionality in which it is difficult to unambiguously interpret this or that icon.

When a large part of the audience for applications with a narrow focus has formed and then it is up to word of mouth and less aggressive marketing, you can remove the inscriptions of menu items and devote more space to the main content of the application. Reducing the space allocated earlier under the menu, like Instagram, for example. For standard standard applications, or applications that have already gathered their constant active audience, you can use the menu without signatures.

Fig. 3. Ticktock application screenshot

In some cases, it is customary to highlight the most basic target action visually. Being in each of the sections of the menu, we can move on to creating content, because each of the menu items is somehow related to the content, and the whole essence of the application is precisely the creation and exchange of content. An example is a screenshot of Ticktock.

I note a menu that looks unusual and enjoys some popularity on design sites, but at the same time, in real applications that count on a large audience, it most likely will not rise in popularity. Because it is not convenient to read menu items.

Fig. 4. Vertical menu

Tabs in the section

If the data belong to one section, but at the same time have some differences.

For example, in the Dribble app for designers, there is a switch in the feed between the people you follow, popular and recent publications. Those. the information is the same, but sorted and filtered, respectively, and served differently. A similar example is switching between subscriptions and featured videos in Ticktock.

Tabs are used on Instagram a little differently. With the help of tabs, you can switch between subsections in the profile. In general, this is also logical, because we go to the profile to interact with a specific object - be it my post, mention of the menu in other people's publications, or something else.

And with the example of instagram it is also easy to demonstrate that some sections do not need to be displayed to all users. Specifically on the example of the mask section. Until I knew about their existence and that you can create them yourself, I didn’t have such a section. As soon as I uploaded my first mask to this social network, this section began to appear in me. It is useless to people who do not know about masks, but use Instagram for other purposes. These users do not need to overload the screen with unnecessary information. And for those who found out about such an opportunity, this section is accordingly needed.

Fig. 5. Instagram when I uploaded the mask and before I uploaded the first mask

Back arrow / Cross

If we, for example, within the framework of a section, disclosed detailed information, it would be great to show with animation that this section was opened. And a cross or a back arrow serve to collapse detailed information and return back to the previous screen.

This often makes sense when switching from lists or product cards, so that the user understands that he will return to the same place from which he moved from the list. And also that the user will be able to continue browsing the assortment further, without having to scroll to the desired level of the catalog from which he went to the detailed section. Examples can be easily viewed in the Wildberries, Ozon, Lamoda, etc. applications.

Fig. 6. Animation of opening detailed information of the card and through the arrow back to the list

The panel coming out from below

It works similarly to the transition to detailed information, but is used in cases where you need to leave visual access to the section from which the transition is made. Therefore, it is often used in maps, where so far you decide where to go and by the distance that you need to overcome and by some more detailed information indicated in the description of the place. Also, this technique is used in food applications. When you leave access to information posted before calling the form where you need to enter the amount of ordered food. Also a good example is the traveling comment panel in Ticktock. We leave the opportunity to “remember” about which publication comments are made, literally leaving a slice of this video visible when we expand the panel with comments.

Fig. 7. Screenshots of Google maps on the left, Yandex food in the middle and Ticktok on the right

There is a lot of discussion about what influence they have and how much depends on them. But while people are looking for social approval and haven’t come up with a different form, buttons for social approval will remain in applications.

Some of the buttons perform the action itself, and some scroll to the point where this action can be performed. The focus in this case moves directly to the space in which the action is performed. As an example, in the first case, this is like. We clicked and immediately saw that their number increased, and the heart was colored. As an example of the second option, these are comments. When you click on a comment, we either expand the comments for the publication, or immediately focus on the input field to leave a comment. Those. a small but redirection occurs.

Conclusion

To build navigation in the application is a matter that requires attentiveness, perseverance and the presence of logic.

Write with what you agree, with what you disagree, and it may be worth adding something to the article.

How to think through navigation in mobile applications