April 13, 2011

Tab Bar Design for the iPhone

Many examples of iPhone tabs from various apps displayed in a grid

With our latest project Farmanac, an iPhone app for fruits and vegetables, 2 Out of Three dove headfirst into app development. We spent days reading through Apple’s Human Interface Guidelines (HIG) and mocking up navigational models and screen flows. For the initial release of Farmanac we kept the feature set and navigation simple by using a basic list view which leads to a detail screen for specific items. But we’ve got a number of features we plan on implementing in subsequent versions that will require a more complex navigational model – which probably means introducing a tab bar. Luckily for us, Petter Silfver recently shared his thoughts concerning the do’s and don’ts of tab bar design in an article titled The iPhone Tab Bar, Lessons From Reality.

If you’re an interface designer, iPhone or otherwise, it’s worth a read. Silfver has done an excellent job documenting useful design tips and explaining the logic behind them. Below is an excerpt where he argues you should avoid changing tabs automatically, just one of the many helpful items of information found within this informative article

You are breaking the users sense of control by doing something that to them is unexpected. When a user clicks on a table view item they are in 9 out of 10 cases expecting the outcome to be: a) a right to left view transition or b) a bottom to top modal view transition.