Pros and cons of side sidebar interaction

The side-pull menu is a popular way to navigate, although the debate about it has never stopped, but the foreign Amazon and domestic mobile phone clients are using the same navigation, so that some people love to hate the navigation method in the end what advantages and disadvantages, and what can be resolved? Today, I'm sharing a very hot article on Twitter. , and share with you the author's experience.

Now we have data to show that the use of the sidebar menu (also known as the Hamburger menu) may do more harm than good.

Here are some data:

Side Drawer navigation could is costing you half your user engagement

Mobile Menu AB tested

Hamburger vs menu:the Final AB Test

It should be noted that this is a very delicate issue. And the same problem, we have found in user testing and other things.

I hope you have read this article to understand the problem and the solution, and know the consequences before using this model.

　　Problem

Not easy to find

Less effective

Conflict with platform native navigation mode

Not at a glance.

　　Not easy to find

"Not in the eye, would not have thought. ”

In this mode, the default state, the sidebar menu and all the contents are hidden.

People need to first recognize that the side-pull menu buttons are clickable-companies think they should use a menu or tool icon, and they do feel the need to do so--but this may not be the case when the application is used, because the main feature is shown in the home page.

　　It's not that effective.

Although the user understands and values this feature, this pattern creates a navigational cognitive rub because it forces people to open the menu before they can see the entries.

The following is a case in contrast. Shows how quickly navigation works if the navigation element is always visible.

　　and platform native Navigation mode conflict

In addition to the above problems, there is a conflict between the side-pull menu and the standard navigation mode on a platform such as iOS.

The left-hand navigation bar button needs to keep a menu button, but we also have to let the user have a way back. Designers either acknowledge the overload of the navigation bar that exists in the image above-not even leaving the title blank or forcing the user to click several times to go to the list shown in the following illustration.

　　Not at a glance

Because navigation is only visible when the user wants to enter other parts of the application, making the presentation of specific content information more difficult.

You might use a similar approach to the Jawbone Up application: Place a symbol message icon next to the side-pull menu button.

This is not practical because it requires you to deal with more icons, and as a designer you may be forced to add a generic icon instead of weakening the meaning of the icon.

Conversely, the following tab bar (from Twitter) allows the user to understand the context of the notification and direct it to the relevant page.

　　Cognitive

You may sometimes be forced to use it to save screen space, but it does make people misleading about what they see. When you think that the user sees all the content in front of him, we actually have a focus area (not the entire screen), even if the screen size is small.

Case: Vanishing icon--changing the blindness of mobile devices

So saving screen space can be achieved by not compromising navigation or violating basic human-computer interaction principles, such as providing feedback or displaying the current state.

Another caveat: What we need is to update our understanding of human-computer interaction in our minds. I'm pretty sure this will help people avoid a lot of mistakes in visual design.

　　Solving method

There is a lot of writing about the problem, but the concrete solution is not clear.

　　When should you use it?

In rare cases, this pattern is useful, but the general principle is to avoid it as much as possible.

Irccloud is a suitable application for this model-it enables navigation between channel and channel members.

Because there is no hierarchical navigation for subpages below the main screen, this can be used and the information can be simply presented.

But even in this scenario, you can see that the user interface is still overloaded with information, and the application's information architecture needs to be reconsidered.

The sidebar on the right shows that the result of the channel member content is simply to render the active button and weaken the entire channel-related operation. Instead, designers have no other choice but to mix channels, networks, and Accounts in a separate menu:

Next, let's take a look at the next part of the article.

　　What should I do if I don't use this method?

A side menu can cause a bad information architecture because you just add it to the table without thinking about the result-until people actually use it to realize how bad it is.

　　The solution is to re-examine your information architecture.

Above is an example of how to remove the sidebar menu. You can follow the color points to see how the two solutions between the elements of the transition.

　　Note the point:

Display the current status directly on the Message tab

Items are always visible and can be reached immediately

Navigation gestures cannot conflict

In terms of these fixed problems, we can also save the vertical space of the screen by scrolling the direction to hide the navigation bar, both Facebook and Safari have applied this way. A fixed tab bar clearly tells the user where the current position is, so we don't have to rely on the navigation bar to determine it.

If you want to be simpler, then a toolbar is enough. The key is not to hide the navigation, but to allow direct manipulation, not to conflict with existing navigational gestures, and to provide feedback on related icons.

For the site, I think the best solution is to re-examine the information architecture, rather than directly divert the iOS design model. The following is a good design to display navigation only at the top of the page. As a site navigator It's obvious enough that people can go down and scroll, and immediately see the available options for rendering.

Site Long map here: lmjabreu.com

Similarly, the best way to optimize the mobile site experience is to remove the 300-millisecond click Delay, or to add a touch event, based on the following tips: Updates.html5rocks (self-owned ladder)

　　How to expand?

The example I give here is based on the iOS platform and is in the context where you use the tab bar or toolbar.

But how to hold more than 5 tabs inside the tab bar?

This is not an ideal situation and you may need to reconsider the information architecture of your application. But if you have to have more than 5 labels, the normal pattern is to use the last tab to provide more options, unfortunately, it's like a menu.

You can also use a scrolling tool bar, see Rookie. This avoids the problem of using a side-pull menu, but requires a slightly higher number of navigational cognitive frictions because the system increases the error rate when distinguishing between user clicks and sliding intent.

Remember that the second solution is more reasonable than navigation.

The method taken by the rookie refers to the presence of scroll after scrolling in the indeterminate state of the toolbar, which is hidden after completing one of the tasks, such as cropping, rotation, and so on, which indicates that the task has been completed.

The method of hiding the toolbar and resetting it before the next occurrence can prevent the viscous state from being indeterminate.

　　Conclusion

So you've read about the side-pull menu pattern and here's a workaround for the iOS environment.

Hey, although the translation of the thick, but also a good article na.