Mobile UI Navigation Bar Patterns Gallery

Posted on August 23, 2012 by Saya






Mobile has its own rules and limitations in navigation compare to web.


Due to the screen size and function of mobile site or App, designers need to be very careful about what and how to layout the navigation strategy.




There are different patterns and styles for treating the navigation. Below I want to share some of them:






SEARCH-BASED NAV:

In this approach there is either no navigation or a limited one. It starts with a search box question, then based on the selection it refines the nav options for further information.











In following in addition to the main search box the other options are provided for navigating.





http://itunes.apple.com/us/app/saferbus/id480215353




Same as here:












LISTED ITEMS NAV:

Listed items is very popular and there are different ways to treat it:

Drop Down:
For visual references, usually there is an arrow or a (+) sign that indicating there are more info to read in the SAME page.

See below:













Gridgets Apps: Used icons and a short title together with a large + sign to inform viewers about the subject, and where to click if need to know more. They also know they won’t leave the page.


















PIPES app also offers a listed item navigation. Icons are not as clear as in the previous sample, instead they added a short description and the (>) indicates they need to navigate to another page for more information (not this page).
















VERTICAL NAV:
Vertical nav is not very common in the mobile, but in these sample you will see how they used it based on their need.




This vertical nav is corresponding to the photos needed next to it and easy to understand and navigate.














This vertical nav is transparent in order to have the background visible. It is only on the home page. The permanent and important navigation items are at the bottom.












HORIZONTAL NAV: Majority of navigation bars in the mobile are horizontal with different patterns such as:


- Multiple, layered horizontal: as you see below there is a fixed permanent nav at the bottom and then based on the selection other horizontal bar will show up.














-Scrolling horizontal bar: Within this horizontal and scrolling nav bar many options can be included.












Image-based: Instead of icons, images used for the horizontal nav












ICONIC NAV:
Using icons in the page provides more room for including items, with scrolling up and down function, even more space can be used.
























STEPPED-BASED NAV:


Similar to the searched-based this navigation refines the result based on the user’s selection and answer. However, the options are very limited and is what designer is guided and planned.

In following sample navigation starts with two options first.


















SLIDING NAV:
Slides are a great choice for presenting different items in the navigation. We see how this habit got into the web design too. This clear, nice design not only offers the slide as a nav option, but on the top it combines it with the drop down “Menu” and couple more choices at the bottom, without confusing users.





http://www.xprimegroupe.com/












GRID-BASED NAV:
Similar to using iconic nav this navigation presents all navigation items at the same level.http://www.trout.com.au/















CIRCULAR NAV:
It is fun and creative, may not work with different data and sites but if applicable it is nice and easy










Related posts:
- Free IOS Icons to download
- Why are icons important in mobile app design
- Web Appification: The effect of mobile and app design on website layout