Custom Tab Bars in iPhone Apps

There’s been a new trend with iPhone apps to use more sophisticated custom tab bars. In case you don’t know what a “tab bar” is, it’s historically been the black bar at the bottom of the screen, which provides the main navigation for the iPhone app. tb.pngApple is fairly specific about the functionality of a tab bar and provides the following specifications in the iPhone Human Interface Guidelines:

A tab bar gives users the ability to switch among different modes or views in an application, and users should be able to access these modes from everywhere in the application. However, a tab bar should never be used as a toolbar, which contains buttons that act on elements in the current mode (see “Toolbars” for more information on toolbars).

So, what makes a tab bar custom? There’s no exact definition but generally, it’s anything that veers outside this description or clearly tries to reinvent the standard tab bar implementation available in most iPhone apps. Let’s take a look at some of the latest trends and see what we can learn from them:

Airbnb
One of the more elegant custom tab bars is in the extremely polished and fun Airbnb app, which provides a marketplace for homestay. According to Andrew Vilcsak, Airbnb’s mobile platform lead and the iPhone developer who brought it to the App Store, it took five months to build the app and “hundreds of hours of work” to build the custom tab bar.

ab.png

Differentiators: Textured background, tab selected indicator, icon inactive state

Gift Plan
Glassshouse Apps’ Gift Plan also showcases a unique custom tab bar. As Milind Alvares notes, they “remixed [the tab bar] into a scrolling ticker.” In the initial release, tapping a tab would move it to the center. It’s obvious Milind was not a fan of this functionality and it’s no wonder that it was made optional in version 1.1.

gp.png

Differentiators: Sliding tab selected indicator, tab bar height, icon active state coloring

While both apps have custom tab bars, each are still familiar to users, keeping the somewhat standard blue highlight for the icon active state when the tab is selected. This provides a nice balance of being innovative yet familiar, adhering to Apple’s guidelines. But then we have…

Instagram, Path, and Gowalla

Instagram and Path are two of the hottest apps in the App Store, focused on new ways to do photo sharing. Gowalla has been around for quite some time but recently launched Gowalla 3, which supports multiple check-in’s and an overall, slick new design for its iPhone app.

All of these apps do something distinct, following Instagram’s lead: they place buttons in the middle of the tab bar. Now, this seeming no-no has gone over fine with Apple, who rewarded both Instagram and Path with the title of, “App of the Week” in their short histories. But it leads one to wonder, will they revise the guidelines, which reads, “However, a tab bar should never be used as a toolbar, which contains buttons that act on elements in the current mode.”

insta1.png

pa1.png

gow1.png

Above: Instagram, Path, and Gowalla

Surely, Apple offers guidelines only. So, despite not following them in this case, Instagram’s button in the tab bar is likely here to stay. Although I disagree with that particular choice, in general, I’m happy to see this type of innovation occurring on the iPhone. For quite some time UX, UI, and design experimentation on the iPhone has appeared absent. If Instagram brought us anything, it was to try new things again…and for that, it’s a welcome disagreement.