Four ways to design navigation for a large screen mobile phone

designed for the thumb

Steven Hoober observed and analyzed 1333 of users ' mobile phone habits, and found that 75% of them relied on their thumbs, while 49% were accustomed to a single handset. On a large screen mobile phone (we mainly refer to the specification of more than 4 inches), the user must extend the thumb out of the comfort zone before they can touch the interaction object at the top of the interface.

For example, I personally have this problem every day when using Amazon music apps. The navigation portal I need to use frequently is right in the upper-left corner of the interface; The conventional pattern of the past few years has now become a nightmare of one-handed operation on large screen devices. As with many people, to touch this icon, I first have to move the palms up, hold the fuselage, reach out my thumb to reach it, or stretch out the other hand to help with the operation. In fact, things can not do this.

　　System-Level Solutions

To address this type of problem, today's mobile operating systems have provided some relevant solutions to help users touch the controls at the top of the interface more easily.

In iOS, Apple allows the user to move the entire interface down by touching the home key twice in a row so that elements at the top of the interface can enter the thumb's hot area. The method is not bad, but the original one-click operation now needs three times.

In addition, there is a time limit problem with this system-level solution. When you touch the home button two times to move the interface down, and then let the line of sight reposition the target object, and prepare to do the operation, the interface is likely to automatically revert to the default position; If so, you need to go through it again; the whole experience is not very elegant.

　　Right-sliding gesture on the edge of the screen

It is difficult to let the thumb touch the elements in the upper-left corner of the screen on a large screen phone, but it is much simpler to let the fingers slide from the left edge of the phone to the bottom. This approach can be a good alternative to the traditional upper left corner entry mode for interactive navigation menu expansion.

However, as with other kinds of gesture operations, this pattern has its own drawbacks, which is less obvious than the explicit visual elements. In other words, the user must first know the existence of the interaction and then memorize it and remember it when it needs to be used. Therefore, such gestures do not completely replace the visual interaction elements, such as the Hamburger menu icon and click to expand the mode still exists, gesture operation becomes a "secondary" or "optimization" role.

There is also a problem: the right sliding gesture just makes the menu more convenient to expand, without the thumb click on the top left corner of the icon can be achieved, but to touch the menu inside those near the top of the screen, the problem persists.

　　Bottom layout

To make sure that users can comfortably use important, common functions in a single hand operation, we sometimes need to consider the layout of features or navigation elements to the bottom of the interface. This approach not only improves accessibility for important functions, but it may also improve other aspects of the experience. The classic case is that Facebook moves the navigation from the side canvas to the bottom of the interface in their iOS app. "New" design not only enhances the user participation degree, the satisfaction, but also enhances the navigation efficiency.

In Amazon Music app, we can not only throw the navigation portal to the bottom of the interface, but also try to adjust the order according to the function weight inside the bottom column.

　　Floating button

Although many solutions are cross-platform in nature, there are times when you still need to take into account the characteristics of specific systems and hardware.

For example, the hardware at the bottom of the Android platform is a system-level action bar, which means that any operating element placed at the bottom of the interface may conflict with it and cause misoperation. In fact, the Android design specification clearly points out "Don't put the tab bar at the bottom of the interface."

However, in Google's newly launched material design, there is a kind of alternative, that is, floating button scheme. The floating button is a special kind of interaction element, the layout position is independent and is not limited by other elements in the interface. Typically, floating buttons are useful for functional operations, not navigation, but in Amazon music applications, you might want to try to display navigation menu buttons in a floating form, because navigation portals do use them in high frequency.

　　Summary

When you are thinking about how to make the interface better on a big screen mobile phone, the above several processing interactive object design ideas can be used for reference. It is believed that with the increasing popularity of large-screen mobile phones, such an optimization model will become more and more.