ek-logo2.jpg

“The privilege of a lifetime is being who you are.”

- Joseph Campbell


Navigation Design Patterns of the iPAD apps

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. 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!

Getting to know Cipe Pineles

Getting to know Cipe Pineles

The Elegance of the 50s Fashion (moodboard)

0