Talk about the revision of mobile app navigation design

There has been a lot of discussion about the navigation design of mobile apps (especially for the Hamburg menu). Today's translation of this article, is the original author in the real App for the navigation of the revision, observation data and analysis of a small text, practical significance is very strong, can be used for reference >>>

Students are welcome to pay attention to the translator's micro-faith public number yo: Shejiyiyan

In the mobile interface design, the use of a variety of menu controls to simplify the interface is attractive to designers-especially on small-screen devices. However, hiding the core of the App in these menus can have a negative impact on actual usage.

　　If you are not in sight, you are not in perception.

In order to simplify the interface design of Polar, we changed the previous tabbed menu to a toggle menu. The revised menu looks more "clean", but then the daily frequency of the menu has plummeted. The fundamental reason is that when more options are hidden in the toggle menu, people are no longer switching between menus.

Polar

Statistics of daily use of polar– menu

Note that the author does not mark on the chart what the vertical axis is and its scale.

A similar situation also occurs when the Zeebox designers change the App's dominant navigation from a tabbed to a drawer-style. The core of the App is not in the user's field of vision, so it can't be perceived by the user. The result is a sharp decline in the frequency of navigation usage.

Zeebox

　　It's only in sight that it is perceived

As the core parts of the App become more visible, the frequency of their usage increases. Facebook found that when they changed the "Burger" menu in IOS App to the bottom label menu, not only did the frequency rise, but other important indicators were added.

Facebook

Similarly, the number of sessions and active users increased after Redbooth changed the Hamburg menu to the bottom label menu. Features that were previously outside the field of vision now appear in the front and center of the interface.

Redbooth

　　How to choose?

Because of the limited screen size of the mobile device, it is not possible to place everything directly on the interface. This makes the design of the mobile interface challenging. Unlike a big-screen desktop that allows us to put every feature on top, mobile devices require that we have to make trade-offs: What is really worth it?

Answering this question needs to figure out a key-what is directly affecting your users and business. In other words, this requires the product designer to think carefully and then design.