Over the past weeks I’ve been trying to get my head around the new iOS navigation elements. The new focus on just text elements instead of buttons and the focus on white, flat or translucent navigation bars. (Can you finally tell that I am working on an iOS app for the iPhone?)
In iOS, Apple always had two prominent areas for obvious navigation elements:
• The navigation bar on the top, just below the status bar.
• And the the toolbar, at the bottom.
Some app developers chose complete custom UI and for some apps that worked, but not for most.
iOS 7 offers two big changes in the area of navigational elements. The top navigation bar is now white, flat and the buttons are just text. That was the area that most developers had spend lots of their attention pre-iOS 7. Navigation ware were redesigned, colored, patterns overlaid and buttons customized. This was never obvious and easy to do in Xcode, but there were enough hacks out there that made it possible and it worked.
The toolbar on the bottom of the screen never received the same amount of creative attention. It used to be black, glossy and felt bloated.
But this changed with iOS 7. For one, the navigation bar on the top of the screen now really just wants text links and is melting into the status bar creating a new header that simple, unadorned and provides description, rather than full navigation. The bottom toolbar can handle icons and is now beautifully white or translucent, perfect for some fun creative focus.
Many app designers crossed over or are still building websites and on web design the navigation of almost every website has always bee on the top. Yes, we went left or right, but really never on the bottom. Starting the crucial tools for navigating a website just below the address bar makes sense in a browser.
For almost two decades we’ve connected the logo with the navigational elements of a website, that for many years online brands defined themselves not just through their logo, but the brand extended to prominently include the navigation bar. Remember Amazon’s first button bars, and how they evolved over the years?
As a web designer designing apps for the iPhone screen there are so many new challenges, and design decisions you need to make that are fundamentally different to anything you’ve been designing for the web. You have a small, but fixed screen, elements need to be tab-able and you need to consider popular gesture controls.
But I think the web design mindset made designers focus their attention on the top navigation more so than on the toolbar on the bottom. It just didn’t feel natural to design an app from the bottom up.
And while we had small 3.5″ screens the top navigation was easy to reach. Apple even made an ad about that. But with the endless media pressure to increase the screen size to compete with the phablets of the world, with the iPhone 5 the top bar is, for average size handed people, harder to reach.
And why should you reach all the way to the top when most of the time your thumb rest close to the bottom where the main navigational element of the iPhone sits, the home button. The toolbar, in close proximity provides much shorter travel time between interactions, thus allowing for a much more intuitive and obvious user experience.
I believe to new focus on the bottom toolbar and the change of thinking to design your app from the bottom is one of the great design opportunities and challenges for designers redesigning their apps for iOS7.
PS: – For apps that require the keyboard for text input, this hides the toolbar, which might’ve been another reason why so many developers ‘forgot’ to put their attention on the toolbar at the bottom of the screen.