Why do some custom iOS apps use the native nav bar?

Question

I'm talking about Instagram or Foursquare, they are custom designed but still are using default themed menu bar for navigation. Is there some dirty secret behind it?

Answer 1

They do this because it is easily recognizable by their users. Apple stresses using standard interface elements in their iOS Human Interface Guidelines:

In iOS, the UIKit framework provides a wide range of UI elements that you can use in your application. As you design the user interface of your app, always remember that users expect the standard views and controls to behave as they do in the built-in applications. This is to your advantage, as long as you use these elements appropriately in your application.

They also understand that apps will be customized to some extent. The fact that Instagram and Foursquare have already done some customization gives them even more reason to stick to certain conventions such as the native navigation bar. This helps ground the users into a familiar user experience when using an iOS device. It also important to note that slightly altered the look of their navigation bar (the colors are slightly different, there is a slightly browned "old" look to the shading).

Apple has no problem with this either, but they do advise you to do it a certain way:

If you create custom UI elements to replicate standard UI elements in all but appearance, you should instead consider using the appearance customization programming interfaces available in iOS 5 and later. When you use these APIs, you can customize the appearance of most UI elements and still receive automatic appearance updates.

Answer 2

I think the answer is simple. Rolling your own version of UINavigationController is a complex and a lengthy process (we've done it and it took quite some time). The animation is probably the hardest part to replicate. You can use Toggle Slow Animations in the iOS Simulator in the Settings app to see the nav bar animation slowed down. There's a few things going on at once.

Some changes and tweaks can be made to the iOS standard nav bar, like tints and transparency, but these don't get you too far if your goal is a custom nav bar.

I believe subclassing can be used to make some basic changes, like swapping the main nav bar background (I'm a designer, not a programmer, so don't take the more technical aspects as gospel). I suspect this is what Instagram is doing, because their buttons and animation looks standard.

If you're going iOS 5 only, then UIAppearance can be used to cleanly replace some portions of the nav bar and buttons with custom elements. Depending on what you want, UIAppearance may be enough.

If you are going down the custom route, the it may be worth maintaining Apple's sizes. The nav bar is 44 non-Retina pixels high for good reason: It's a nice, easy tap size for our fat human fingers.

Further reading:

• UINavigationController
• UIAppearance

Answer 3

To know the real answer to that question, you'd have to ask Instagram, Foursquare,...

I can only give you my guess. I can imagine that the consideration of choosing this approach has technical roots, not UX roots. It's just a lot quicker and easier to choose one of those built in application templates for designing an iPhone app. This is in fact quite irrespective of the rest of the UI, altough they could have made it themselves easier on that part too.