Navigation Design Patterns of the iPAD apps

I’ve been looking deeper these days into the best practise for the iPAD application design. As a result, I’ve assembled a few interesting examples which illustrate the navigation design patterns for the iPAD apps. I hope you’ll find it useful!

Sidebars

A sidebar is a popular way to navigate through most of the iPAD apps. Here are some examples of where they are placed and how they guide the user through the app:

Twitter ipad app sidebar
Twitter iPAD app’s sidebar.

The { Flipboard } app has the main sidebar collapsed by default. Tapping on the blinking red ribbon slides out the sidebar with two panels:

flipboard ipad app navigation

flipboard ipad app navigation

To close the sidebar, one needs to tap on the greyed out content.

 

Buttons & Tabs

The main sections are often displayed in the top section or the bottom section of the screen:

Source: Curioux Blog
Source: Curioux Blog

 

This sort of navigation is most relevant for the content apps.

The French TV channel’s { Canal + } app enables the user to browse through the app’s sections using the buttons in the bottom. The top links are then visible once a user is within the section and thus serve as the aid to browse within a section (secondary navigation):

canalplus ipad navigation design

 

The { Ted } app’s main sections are located in the bottom of the screen. The secondary navigation within the homepage is slightly above. Tapping on the button such as “top tags” pops-out the menu which enables the user to filter the “featured” videos (secondary navigation):

ted ipad app - navigation design patterns

 

Personally, I find both styles of navigation easily understandable. The only thing is that on the Ted’s app the secondary navigation is more visible because it is against a different background. I find the secondary navigation on the Canal+ app blending in too much with the contents. One really needs to look to see it – it does not stand out enough, don’t you think?

And here is the menu bar of the { MOMA } app. Tapping on the menu opens up the sub-menu which is attached to the main bar:

moma ipad app navigation design

 

moma ipad app navigation design

 

Layered Navigation

A good example of such navigation is the { Twitter } app which seems to have set the trend for this pattern.

The left panel is the menu bar.

The middle panel is the listing section (index of contents)

The right panel displays the contents.

 

Tapping on the item within the middle listing section, collapses the left menu bar and shows the preview of the contents within the right panel:

ipad navigation model - twitter

 

If pertinent (the shared contents is a web page or so), the middle panel also collapses once the item is tapped on and the full contents is displayed on an expanded right panel:

ipad navigation model - twitter

 

 

Flexible Pop-out Navigation

When in the landscape view, the { Epicurious iPAD application } displays the left sidebar integrated with the right panel:

ipad navigation model - epicurious

 

When in the portrait view, the menu “pops-out” allowing the user to close it completely by tapping on the appeared “control panel” button:

ipad navigation model - epicurious

In a similar fashion, the { Guardian eyewitness application } also enables to browse through the photos by tapping on the index button and then shows the other photos in a “pop-out” panel within which you can slide the photos:

guardian eyewitness pop-out menu

This way the user has more space to browse through the content while not compromising on the breathing space and making the overall experience more pleasant. That’s “user friendly” , isn’t it?

 

Grid-style Navigation

I particularly like the { FontBook } iPAD app which invites us to discover the world of typography in such a playful and elegant fashion…

The listing page is of the grid layout:

Fontbook - ipad navigation design patterns

 

Tapping on the item opens another page while having the “zoom in” effect:

Fontbook - ipad navigation design patterns

 

One can understand that this is a “sub-category” because of the different color palette as well as the bread-crumb navigation forming in the bottom of the screen:

Fontbook - ipad navigation design patterns

 

Then, when we arrive at the actual font-level, we see the font in its full glory on a seperate page:

font details page

 

The similar fonts (listing section) is then shown on the left in case we wanted to view another font. The call to action “buy font” is prominently yet very elegantly displayed in the bottom right corner:

call to action

and the share button in the form of a plus sign is displayed in the top right corner:

call to action

 

The grid layout and the tap create a feeling of discovery, of play. It is fun to browse and discover the fonts in such a way. The font details page showcases the font in a very pleasant fashion and one can truly enjoy viewing it. Such experience really motivates to buy the font – we want to own it. Very well done – thumbs up for the Fontbook team!

Another very interesting iPAD app is the { Chinagram }. It tells the history of the Chinese Writing. I love not only the design of this app, but the overall idea of it. Really nice… Their navigation’s idea is similar to the Fontbook’s one but is a bit differently implemented.

Tapping on the category slides down the listing of the items just below. Tapping on the category icon once again, collapses the listing of items.

chinagram - ipad navigation design

 

Tapping on the actual symbol opens up the symbol page. Then I can explore other symbols by tapping on the button in the sidebar just at the bottom. It expands the other symbols within the same category. To switch the categories there is an index button just in the top of the sidebar.

chinagram - ipad navigation

 

Listing & Grid Type Navigation

In some cases giving a user options on how s/he could browse the content – in the listing or grid fashion, for example, – can create a more personalized and fun experience. Let’s have a look how this is done on the { Jamie Oliver } iPAD app.

The default view is the “featured recipe” and the “listing in the grid fashion” just below it:

jamie oliver ipad app navigation

 

Tapping on the listing button changes the view into the sidebar panel and the grid layout on the right. Fun and beautiful, isn’t it?

jamie oliver ipad app navigation

 

I’ll be on the look-out for the other navigation styles on the iPAD apps. If you discover anything on your side, would you mind sharing them in the comments box below? Thanks!

 

One Response to “Navigation Design Patterns of the iPAD apps”

  1. Peter Sawchuk

    Cool! Thanks so much this really gives a great overview of several options . . . Such great examples!

    Reply

Leave a Reply

  • Best read while sipping
    a cup of tea...
  • My Visual Brief
    Our web-based tool to help clients communicate more effectively with the designers about their aesthetic preferences and likes.
    Check it out
  • twitter rss