In this article I wanted to take a look at the current state of tabbed UIs and give some tips how to keep the platform consistent.
Tabs Still Go to the TopA year ago there still was some discussion whether or not the tabs should be on top or bottom. I think that this discussion is now over. Tabs go to top. There are few reasons for it:
- Natural hierarchy of things go from top to bottom. Tabs are headers and higher in information hierarchy than content on a screen.
- More complex apps need more than one level of navigation. Having tabs on bottom will cause confusion to users when it comes to navigation hierarchy.
- Users scan a new screen from top to bottom. They will understand your screen hierarchy better when tabs are on top and have a better sense for location.
Recently updated Eurosport app provides us a great example of the points above. Take a look at the screenshots below. The left one is from their old app and the right one is the new one. Navigation hierarchy in the old app was more than just confusing. Firstly, it looked wrong (more about tab style below) but it is also very difficult to understand how the two tab bars relate to each other. In the new version there's no chance place for misunderstanding the structure of the app.
Tab StyleStyle of tabs in Android is pretty distinct from other platforms. This design was introduced to the platform first in version 3.0 but even on older OS versions the old tab style is starting to look dated and out of place.
Here's few thoughts about Android tab styling:
- Android tabs only rarely have icons. They're most often presented as text. There's a good reason for this. It is difficult to come up with descriptive icons for all the possible navigation option. Text is often much better.
- Android tabs aren't square buttons. As they mostly contain text a lot of screen real estate can be saved by squashing them a bit.
- Visual style of Android tabs is flat. There should not be any glossy or reflection effects.
The easiest way to ruin your app's look is to imitate iOS's glossy square tabs. These apps need a UI refresh (Spiegel Online & PC-Welt).
Color choice for tabs on Android is limitless. By no means should all tabs be black background and blue highlight. Your apps brand can be visible in the tab color selection!
Tabs Are for Navigation, not for Actions!
A Tab Must Always Be SelectedUnfortunately, the Spiegel Online app has done wrong pretty much all that can be wrong with tabs. Not only do they look wrong, are in wrong place and mix navigation and actions they are not activated correctly.
If your app uses tabs one of the tabs must always be selected when the tabs are visible. There can not be a situation where the tabs are shown to the user but use isn't on any of the pages the tabs lead to! When user navigates deeper to the app you should hide the tab bar. A tab bar without a selected tab will make your users feel lost.
Tabs & BackOn Android we always need to be careful with the back stack and function of the back button. Moving between tabs is not considered changing pages. Most apps on the platform do not add tab changes to back stack and neither should you.
There is a good reason why changing tabs does not go to back stack. The users don't feel like they've left the screen when they change between tabs. While there definitely is a possibility for confusion the best guess is to treat screens with tabs as a single screen.
To enforce the feeling that all the tabs are on the same screen you should not use the default animated activity transitions between the tabs (users associate them with moving deeper into the app). The tabs are side by side and any animations used should reflect that. The best animation is sliding animation. This also encourages users to use swipe gestures to move between tabs.