September 4, 2012 at 13:17Android Tabs Tips
- Transfer
Tabs are one of the most commonly used and useful components of mobile user interfaces. Tabs provide quick and easy access to various parts of the application. In Android applications, tabs are used in various forms. In some cases, the tab design is copied from other platforms, and in some cases, the outdated design of older versions of Android is used. This is understandable since There are many different tab implementations due to the fact that the Android design was not defined at the very beginning. Now this situation has changed, and there is a guideline for tabbed user interface design.
In this article, I would like to take a look at the current state of tabbed interfaces and give some tips on how to maintain a consistent platform style.
A year ago there was a discussion - where should the tabs be: top or bottom. I think this discussion is over. Tabs up. There are several reasons for this:
The recently updated Eurosport app gives us a great example of the points above. Take a look at the screenshots below. The first is an old application, below is a screenshot of the new version. Navigating through the hierarchy in the old application was more confusing. Firstly, it looked wrong (more about the style of the tabs below), it is also very difficult to understand how the two tab bars are connected to each other. In the new version there are no places that can cause misunderstanding of the structure of the application.
The style of tabs in Android is very different from other platforms. This design was first introduced to the platform in version 3.0, but even on later versions of the OS, the tab style looks outdated.
Here are some thoughts on styling Android tabs:
Check out these two examples of Android tab styles. On the first one of the rare cases when the tabs contain icons. This application is the default Android phone on 4.1. In general, I would advise avoiding the use of icons if you are not sure that your icons will no doubt represent functionality.
Below you can see the Foursquare app, in which the tabs contain text.
The easiest way to spoil the look of your application is to simulate the glossy square iOS tabs. The following applications require an interface update (Spiegel Online and PC-Welt).
The choice of color for tabs on Android is unlimited. In no case should all the tabs have a black background and blue backlight. You can use the brand of your application when choosing the color of the tab!
Tabs are for use when navigating between screens in your application. Do not use them to trigger actions. Use the action panels for actions. Here is another example of poor design in the Spiegel Online app. Some of the tabs are actually actions (for example, sharing) that are no longer used in the application. This is confusing and is a misuse of the tab component.
Unfortunately, Spiegel Online has pretty much done everything wrong that you can do wrong with tabs. Not only do they look wrong, are in the wrong place and contain both navigation and actions, they also do not activate correctly.
If your application uses tabs, then one of the tabs should always be highlighted when the tabs are visible. There can be no situation when the tabs are displayed to the user, but their use does not lead to the required functionality! When the user goes deeper in the application, you should hide the tab bar. A tab bar without a dedicated tab will make your users feel lost.
On Android, we always have to be careful about how the back stack works and the function of the back button. Moving between tabs is not considered a page change. Most applications that use tabs do not add changes to the stack.
There is a good reason why changing tabs does not cause changes to the stack. Users do not feel that they have closed the screen when they switch between tabs.
To make it feel like all the tabs are on the same screen, you should not use animated default activity transitions between the tabs (users associate this animation with movement deeper in the application). Tabs nearby and any animations should reflect this. The best animation is sliding. This encourages users to use gestures to move between tabs.
The tabbed interface is excellent if moving between tabs is effortless. Although clicking tabs works great, the slide between them looks even better. For slide gesture users do not need to get to the top of the interface. This method is also more convenient and natural for us. The page behaves as we intuitively expect. All tab interfaces should always support slide gesture!
Tabs are very nicely scaled for the tablet interface. If you use tabs in combination with the action bar, the API will take care of scaling for you. If there is enough space on the action bar, then the tabs move there to save space on the screen. The Google I // O app is a great example.
The tabs are amazing if used correctly. This is a relatively simple user interface component, but it is very easy to use them incorrectly. Follow the instructions and your application will look and function perfectly. Your users will instinctively know how to navigate your application.
In this article, I would like to take a look at the current state of tabbed interfaces and give some tips on how to maintain a consistent platform style.
Tabs Up
A year ago there was a discussion - where should the tabs be: top or bottom. I think this discussion is over. Tabs up. There are several reasons for this:
- The natural hierarchy of things goes from top to bottom. Tabs are headers and higher in the hierarchy of information than the content on the screen.
- More complex programs need more than one level of navigation. The tabs on the bottom will cause confusion for users when it comes to the navigation hierarchy.
- Users scan the new screen from top to bottom. They will better understand your hierarchy on the screen when the tabs are on top.
The recently updated Eurosport app gives us a great example of the points above. Take a look at the screenshots below. The first is an old application, below is a screenshot of the new version. Navigating through the hierarchy in the old application was more confusing. Firstly, it looked wrong (more about the style of the tabs below), it is also very difficult to understand how the two tab bars are connected to each other. In the new version there are no places that can cause misunderstanding of the structure of the application.
Tab Style
The style of tabs in Android is very different from other platforms. This design was first introduced to the platform in version 3.0, but even on later versions of the OS, the tab style looks outdated.
Here are some thoughts on styling Android tabs:
- Android tabs rarely contain icons. They are most often presented in the form of text. There is a good reason for this. It’s hard to come up with descriptive icons for all possible navigation options. Often the text is much better.
- Android tabs are not square buttons. Because they mainly contain text, you can save a lot of screen space by squeezing them a little.
- The visual style of Android tabs is even. It should not be glossy or reflective.
Check out these two examples of Android tab styles. On the first one of the rare cases when the tabs contain icons. This application is the default Android phone on 4.1. In general, I would advise avoiding the use of icons if you are not sure that your icons will no doubt represent functionality.
Below you can see the Foursquare app, in which the tabs contain text.
The easiest way to spoil the look of your application is to simulate the glossy square iOS tabs. The following applications require an interface update (Spiegel Online and PC-Welt).
The choice of color for tabs on Android is unlimited. In no case should all the tabs have a black background and blue backlight. You can use the brand of your application when choosing the color of the tab!
Tabs for navigation, not for action!
Tabs are for use when navigating between screens in your application. Do not use them to trigger actions. Use the action panels for actions. Here is another example of poor design in the Spiegel Online app. Some of the tabs are actually actions (for example, sharing) that are no longer used in the application. This is confusing and is a misuse of the tab component.
The tab should always be selected.
Unfortunately, Spiegel Online has pretty much done everything wrong that you can do wrong with tabs. Not only do they look wrong, are in the wrong place and contain both navigation and actions, they also do not activate correctly.
If your application uses tabs, then one of the tabs should always be highlighted when the tabs are visible. There can be no situation when the tabs are displayed to the user, but their use does not lead to the required functionality! When the user goes deeper in the application, you should hide the tab bar. A tab bar without a dedicated tab will make your users feel lost.
Tabs and backtracking
On Android, we always have to be careful about how the back stack works and the function of the back button. Moving between tabs is not considered a page change. Most applications that use tabs do not add changes to the stack.
There is a good reason why changing tabs does not cause changes to the stack. Users do not feel that they have closed the screen when they switch between tabs.
To make it feel like all the tabs are on the same screen, you should not use animated default activity transitions between the tabs (users associate this animation with movement deeper in the application). Tabs nearby and any animations should reflect this. The best animation is sliding. This encourages users to use gestures to move between tabs.
Swipe!
The tabbed interface is excellent if moving between tabs is effortless. Although clicking tabs works great, the slide between them looks even better. For slide gesture users do not need to get to the top of the interface. This method is also more convenient and natural for us. The page behaves as we intuitively expect. All tab interfaces should always support slide gesture!
Scalability
Tabs are very nicely scaled for the tablet interface. If you use tabs in combination with the action bar, the API will take care of scaling for you. If there is enough space on the action bar, then the tabs move there to save space on the screen. The Google I // O app is a great example.
Conclusion
The tabs are amazing if used correctly. This is a relatively simple user interface component, but it is very easy to use them incorrectly. Follow the instructions and your application will look and function perfectly. Your users will instinctively know how to navigate your application.