|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:
|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.|
|Same as here:|
|LISTED ITEMS NAV:|
|Listed items is very popular and there are different ways to treat it:|
|For visual references, usually there is an arrow or a (+) sign that indicating there are more info to read in the SAME page.
|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 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.|
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|
|Using icons in the page provides more room for including items, with scrolling up and down function, even more space can be used.|
|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.|
|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.
|Similar to using iconic nav this navigation presents all navigation items at the same level.http://www.trout.com.au/|
|It is fun and creative, may not work with different data and sites but if applicable it is nice and easy|
|- 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