15 Mobile Web Navigation Patterns


The choice of navigation determines the usability of your site. It’s the way the user interacts with the website, and it should be short and easy. When it comes to designing the layout of mobile version of the site, the question of navigation becomes of the key priority. With so little space, it’s hard enough to do everything correctly, but quite possible.

The main idea of a good navigation is to guide the users to the key areas of your mobile website in no time, and make this journey really interesting. The navigation type should be chosen according to the amount of content you have and the way it is presented.

When choosing the particular type of navigation the following points matter: the screen size, load speed, the size of buttons, the navigation options etc. If you act smartly, you can make your mobile site really user-friendly. It’s a challenging to do it, but let’s try. We want to share with you 15 separated categories of the most used types of mobile web navigation patterns. While browsing these bright examples with descriptions, you’ll find out what type of navigation you need for the mobile version of your website.

The Right-to-Left

Instead of various drop-downs and flyouts, this type of layout features following: you hit the button and the switching menu items goes from right to left or backwards. It looks as if the whole page moves from side to side.

Coosh

 

Priority+

The name “Priority+ pattern” speaks for itself. The essence of this layout is to hide less relevant (menu) items, and to reveal most important ones. All that remains is to press “More” button to see all items.

ESPN

 


Off-Canvas Flyout

Mobile websites where this type of layout is applied have a hidden column of navigation. You hit the button and a panel slides out from the left or right (depending on how you are looking at it).

Our Story

 

Horizontal Navigation Panels

Good idea for mobile menu which helps to arrange the space wisely and put all the menu points in horizontal bars. The clickable area becomes larger and it facilitates the user’s interaction with the site.

Marina Yachting

 

***

Dolce & Gabbana

 

The Multi-Toggle

Multi-toggle layout is an analogue of the accordion menu. By tapping separate item, the subcategories get revealed. The main difference is the following – these subcategories have a number of child ones underneath.

McDonald’s

 

***

Victoria’s Secret

 

Accordion Navigation

This type of accordion is written using CSS3. Such kind of navigation is quite convenient due to the minimum place that it takes and the way you use it. It looks like the buttons being placed in several lines one upon another. When clicking each of them, it moves up and reveals the hidden parts of the menu.

Bamboo

 

***

Moire

 

The ‘Skip the Sub-Nav’

Sub-navigation layout includes items that are featured in the parent directory. Even though the content is available accessible through the landing page, it’s much more comfortable to bring users to the landing page and let them make their next step from there.

Ikea

 

***

Calvin Klein

 

Binary Linear Navigation

In the top part of sites with this type of navigation you will notice the twofold navigation bar. Clicking each of these folders, you’ll move to the main blocks of information placed within the site.

Made by Mode

 

Drop-Down Menu

It is usually placed in the right or left top corner. When clicking it, you can see the menu displayed in the drop-down section.

Charmin Toilet Paper

 

***

Pennington Wild Bird

 

Icon Based Navigation

We’re all used to Windows and iOS icons, so why not to add relevant icons to your content. Icons can not only give you an aesthetic boost, but actually make visual read of the link much quicker.

Stowe

 

***

North Carolina Wine Country

 

Image Based Navigation

Most interesting and appealing of all mobile layouts. Depending upon the website you can find both regular menu and an image based one. When scrolling this website you will notice that the whole page is crammed with various images, when tapping each of them you’ll be redirected to the content referring this image.

Diesel

 

***

Flirt

 

Column Navigation Menu

Column Navigation is the most popular type of menus in mobile layouts. As a rule, most important items are gathered and grouped into 1-3 columns, that is exactly where the name came from. Upon tapping these items either the new page open, or they fall part as in accordion menu.

Pirelly

 

Top Horizontal Bar Navigation

The simple and clear solution for arranging the menu part of the site. It results in the placements of all menu links in a row in the top area of the mobile site. It provides the clean and clear look of the site and doesn’t draw attention away from the content part.

American Diabetes Association

 

Footer Navigation

It’s quite simple – the navigation menu is to be found the footer area of the mobile site. The navigation items, links, icons – everything is placed there.

3seventy

 

Vertical Navigation

One of the main navigation techniques when the menu is placed in a single vertical column. It’s usually presented in the left part of the layout preceding the main content area.

Reno-Tahoe International Airport

 

Share this post:

  • http://www.facebook.com/profile.php?id=100004746253129 Christen Stevart

    As I thought, this blog….. have wonderful information about navigation pattern on mobile phones. Great collection as well…..

  • Pingback: Tweet Parade (no.10 Feb/Mar 2013) | gonzoblog