Interactive Design Quest Drawer Navigation of the previous incarnation

@ mu mu growth: Google recently updated its Google + apps, using new navigation methods and abandoning navigationdrawer. For a while, it has sparked a series of discussions about the pros and cons of Navigationdrawer.

Navigationdrawer also known as "Offcanvas", "Hamburgernavigation", "Sidenavigation", "Slidemenu" and so on, although the name is not the same, but is generally the same form of navigation.

　　Navigationdrawer's past and present life

According to the elegant, Navigationdrawer originally from YouTube, the following screenshot.

The "three Bar" icon first appeared in the 1981 Normcox design of the personal workstation Xeroxstar.

See "Wheredoesdraweroriginatefrom" in detail.

In the 2012, Youtube, Facebook, path and other applications have used the Navigationdrawer such navigation, for a while caused widespread concern, even can be called a design trend.

Facebook

Path

But because there is no uniform specification, each product drawer navigation design is also different, in order to control the Android platform increasingly confusing drawer interactive mode, after the 2013GOOGLEI/O conference, Google incorporated Navigationdrawer into the Androiddesign specification, and then a large number of applications began to use this interaction pattern.

2014GOOGLEI/O conference just finished, I will continue to follow up, please pay attention to follow-up updates.

　　Highly controversial?

Discussion about the pros and cons of Navigationdrawer has been non-stop, until May 2014, googleplus Update, removed the drawer navigation, for a while, and sparked a lively discussion.

It can be said that the appearance of Navigationdrawer is also required, compared to the PC, mobile device screen size is smaller, can be said that "inch of gold", drawer navigation the most obvious advantage is to save screen space, so that navigation "hidden" in the sideslip drawer, freeing up more space for the main content.

Furthermore, Navigationdrawer is actually opening up another new navigation pattern, distinguished from the previous main navigation modes: ABS (Six-Pack), Drop Bar (Spinner), tabbed (Fixedtabs), which ( Navigationdrawer makes up for several other modes of navigation between non-top-level views--users must return to the top-level view, switch to the category after the top-level view, and then move on to something else, meaning that the drawer benefit is the ability to navigate between the non top-level views.

As shown in the following figure, jump from 3.3 to 4.2, if you use other navigation, you need to step back to the top-level view and then step into the final page, but drawer can easily and quickly achieve the jump between pages.

However, since the beginning of the drawer navigation has been accompanied by questioning, and even luisabreu use "why and how to avoid the use of Hamburg navigation?" As the title of the article, its attitude to Navigationdrawer can be seen.

And, of course, Anthonyrose's experience with Zeebox tells us, "drawer navigation may reduce the user involvement of half your product." (self-owned ladder)

The question of Navigationdrawer can be summed up in the following points:

1. can be found low;

2. Under certain platforms, there is a conflict with the inherent navigational design patterns of the platform;

3. Inefficiency is not a glimpse.

Most of the skepticism is focused on the drawer of this discovery, they think that "if you don't see it, you can't think of it" (Outofsight,outofmind), in the default state, drawer are hidden, with the traditional experience-the most important and most commonly used function on the first screen, It is difficult for users to find hidden navigation, which increases the cognitive burden.

Second, under the iOS platform, the official standard navigation mode is generally returned in the upper left corner, and supports Zoli (sliding from left to right) to return the gesture operation; Drawer is also put the icon to the upper left corner, which produces the following diagram of the conflict, Actionbar the upper left corner of a number of icon, And the interactive mode is similar to the following figure.

Again, especially in the information level flat products, drawer just visually simplifies the interface, the function does not reduce, "hidden" is actually increased "out of the drawer" operation, so that the process of direct operation has become complicated. It's hard to imagine how it would have been if the Micro-mail tab navigation had become navigationdrawer.

　　Issues that need to be cleared up

Navigationdrawer as a navigation mode, has not only the Android platform alone, iOS and even Windows platform has a similar pattern, when we mention the drawer navigation, in fact, should refer to the broader, cross-platform.

Although all is "Drawer", but "this Drawer is not that Drawer", cannot confuse. This kind of confusion is not uncommon in the navigationdrawer of all kinds of disputes.

For example, the controversial issue of "conflict"-"left-sliding return" and "left-slip-Outbound navigation" conflict, in fact, is confusing platform features. The reason for the conflict is based on the following, that is, "in the product at any one level can activate the drawer navigation" (see the official Android document, own ladder), so you need to reserve left-hand gesture for outbound navigation, and then pointed to the system gesture (left-sliding return) conflict.

Note that the former is a specification of Android, but the latter is iOS! So for this problem, should be treated according to different platforms, to find solutions.

With the iOS platform for example, the use of navigationdrawer, but not any interface can be paged out navigation (who let the iOS specification, tut), after entering the details page, left and upper left corner only return operation, You need to switch to another detail page or return to the problem List page to exhale the navigation menu, and the conflict problem is resolved.

Admittedly, just looking at Android, even in the official norms there are still some problems that can not be solved perfectly, such as to reach specific details page, Actionbar on Upicon and Drawericon have a certain sense of conflict, keep any one is not so perfect. But that's another question, isn't it?

　　Be abandoned?

Not long ago, googleplus update, removed the Navigationdrawer navigation form, so someone rage the drawer navigation will be abandoned, but I think it is not so. The problem is not abandonment or not, but how to not be abandoned? In other words, how to use navigationdrawer correctly?

Navigationdrawer as a mode of navigation, has its application of the scene and value, and its much criticized the "difficult to find" problem also with the user's long-term use of gradually weakened, the use of the cultivation of habits so that users now see the "three-bar" is no longer like two years ago do not know why things.

In what scenarios is it recommended to use drawer navigation? The Android specification has been summed up in a better, interesting clickable link view, which is briefly summarized as follows:

1. More than 3 top-level views;

2. Low-level view cross navigation;

3. The navigation level is very deep;

4. Navigation Hub: Users need frequent access to navigation.

The above scenario, other platforms also apply. Drawer navigation is only one of many navigation, need to consider clearly use the scene careful use.

How to use it correctly? In combination with some of the navigationdrawer apps that I've observed, the following recommendations are provided:

1. Novice guide, first access to the app, the default expansion of the drawer, and then automatically put up, you can consider setting the display frequency, such as the first 50 times the default expansion;

2. Distinguish the platform to local conditions. You can do different solutions for different platforms, using only the advantages of drawers, not necessarily the interactive mode defined in the official Android document. I have experienced and watched dozens of of drawers navigation app, the following will be the Android platform of the Amazon and iOS platform for example, for reference.

Amazon (Android)

Android platform using Navigationdrawer apps, Amazon is the most compliant Android code, such as Actionbar fixed, even into a deeper level of interface, Actionbar has been displayed navigation icon, Can activate the drawer navigation at any time, support from the edge of the left sliding, but not support from the middle of the screen left, so there is no conflict problem, but also circumvent the details page Upicon and navigation icon conflict problem, let return through the system navigation back button to complete, although and the current mainstream design is somewhat different, But logically there is no conflict at all, the most "standard" drawer navigation app.

Know (IOS)

and the iOS platform, for example, it is only in the top-level view (such as the navigation listed in the first page, found, I focus on the first column) under the Actionbar to show the navigation icon, that is, only in the top-level view to activate the drawer navigation, and Actionbar will move with the navigation (" Extrusion "Rather than" overwrite "). To avoid the return collision with left-sliding, remove the edge left-slide Active drawer navigation function, whether it is left-sliding or edge left-sliding is "back." Overall, although the navigation menu cannot be activated at any time, but considering the characteristics of their products-reading class, the frequent switch between the first column of the demand is not strong, more in the column under the switch (previous, next), so the design has its reasonable place.

A simple comparison is listed below:

3. Optimization of information architecture is kingly. Navigationdrawer is only one of many navigation modes, and is not a universal solution. So to provide a friendly user experience, not only in the navigation design, should stand in a higher angle to rethink the product information architecture, remove those unnecessary levels/information to reduce the information level, is the fundamental solution.