Home Development for Android 10 anti-patterns of navigation in Android

10 anti-patterns of navigation in Android

by admin

10 anti-patterns of navigation in Android
In this article, we’ll look at 10 anti-patterns of navigation in Android that many newbies (and not only) in creating Android app interfaces make.
10 anti-patterns of navigation in Android
10 anti-patterns of navigation in Android
We came across several applications in which the main navigation (e.g. : home screen, store, my orders, etc.) was placed in the action bar overflow. This is not a good place for this type of navigation. The main reason for not using an overflow for the main navigation is that many applications which follow the recommendations for creating user interfaces do not do so. It is recommended to use a navigation drawer or tabs for this purpose. Another reason is that older devices do not have action bar overflow and you have to press the hardwar "menu" button to open the menu.
10 anti-patterns of navigation in Android
Android has many UI navigation patterns. For example, navigation drawer, action bar spinner, and tabs. There is a strict order in which these patterns should be used. Looking at the application, you can immediately define a kind of information hierarchy, something like a tree. At the root is the main screen, the second level is categories, and each category can have subcategories, and so on. And to organize this information, these templates are used. Incorrect use of them (e.g. tabs for top level navigation, action bar spinner for the next level, and navigation drawer for the deepest level) can confuse the user. This is the wrong way to organize navigation:
10 anti-patterns of navigation in Android
Correct option :
10 anti-patterns of navigation in Android
Navigation drawer should always represent the topmost level, action bar spinner the second level and finally tabs should be on the third navigation level. And if you don’t use action bar spinner and you only have drawer and tabs (like Google Play Music) then the main navigation should be in the navigation drawer and only then in the tabs.
10 anti-patterns of navigation in Android
Tabs in Android have their own specific gesture – a left or right swipe. When you see tabs, you should be sure to use horizontal scrolling gestures to move between tabs. In this case, if we have page content that is flipped through with horizontal swipes, it creates a gesture conflict.
10 anti-patterns of navigation in Android
To fix this, you can split the content into multiple screens or change the horizontal navigation to vertical :
10 anti-patterns of navigation in Android
However, when the content is part of a tab-for example, when you use a picture gallery or a map that you can drag and drop to different directions-it’s mostly perceived as okay. But it’s better to avoid it, and you might want to think about a more proper navigation architecture.
10 anti-patterns of navigation in Android
Tabs shouldn’t have too much navigation. You can use things like changing the sort order of items or scrolling through content. But it is highly discouraged to use any kind of hierarchical navigation. For example, in this example, when you select one of the GridView items, the content appears directly in the current tab and when you click the "back" button, the GridView appears again.
10 anti-patterns of navigation in Android
This is an example of navigating in depth in tabs. The first reason is that this is not normal behavior for the platform. The second reason is that it is unknown what will happen if you navigate to another tab. The previous tab will be in an unclear state for the user. Also, there is no defined action that should happen when the "back" button is clicked.
Another example of an anti-pattern is persistent tabs. These are tabs that provide global navigation throughout the application. The problem of undefined action for the "back" button also comes up here. And so a navigation drawer was created that allows you to change the context.
The correct version of the example :
10 anti-patterns of navigation in Android
10 anti-patterns of navigation in Android
Moving through the tabs should not be saved in the action history. In our example, when you click the "back" button, you move to the previous tab. Instead you should move to the previous screen.
10 anti-patterns of navigation in Android
10 anti-patterns of navigation in Android
Similar anti-pattern with the navigation drawer. A good example of proper design is the Google+ app. When you click an item in the navigation drawer, it’s like you’re opening a separate application. So, when you open another item in the navigation drawer, the task back stack should be cleared and when you click the back button, the app should close. Or, if it is not obvious to the user, you can show the main screen of the application.
10 anti-patterns of navigation in Android
10 anti-patterns of navigation in Android
10 anti-patterns of navigation in Android
The Navigation drawer was created to allow clear and stable navigation between the individual parts of the application. You should avoid multi-level navigation drawer.
But collapsing subparagraphs are perfectly acceptable :
10 anti-patterns of navigation in Android
Another solution to this problem – when you select an item in the navigation drawer, it opens a screen with a sub-navigation :
10 anti-patterns of navigation in Android
10 anti-patterns of navigation in Android
Here the word "transitions" means both the animation and the transition itself between screens. For example, if you open the navigation drawer and click on "Section 1", a new screen should not open with a "back" button in the action bar:
10 anti-patterns of navigation in Android
The rules say that every screen present in the navigation drawer must contain a drawer indicator. The example uses the "back" button instead of the navigation drawer icon. The correct variant is :
10 anti-patterns of navigation in Android
The animation of the screen appearing is also important. When you select an item in the navigation drawer, there should be no animation of the new screen appearing. Normal behavior in this case would be to "move away" the navigation drawer and just increase the transparency of the screen smoothly.
Another question developers might have is what’s better to use: different activations or fragments for sections in the navigation drawer. There is no absolute right answer to this question. It depends very much on the situation. But mostly, the decision comes from how complex the different parts of the application are.
10 anti-patterns of navigation in Android
According to the rules, as mentioned above, every screen present in the navigation drawer must contain a drawer indicator. In our example, a particular open screen with a detail contet (in the illustration) must not have a navigation drawer icon.
10 anti-patterns of navigation in Android
Instead you need to use the button to go to the previous application level in the action bar. The correct option is :
10 anti-patterns of navigation in Android
10 anti-patterns of navigation in Android
10 anti-patterns of navigation in Android
The last anti-pattern is to use right-handed navigation. It is strongly discouraged to use right-handed navigation in your applications. When using the header-detail model, the headers should always be on the right and the item details should be on the left, since almost all of us read from left to right and only for languages where the writing is right to left can right-side navigation be done.
Correct option :
10 anti-patterns of navigation in Android
I hope these anti-patterns help you think better about the navigation and structure of your application. Some of them should not always be strictly followed, so you can look at existing applications first to implement user-friendly UI patterns.

You may also like