iOS
Hierarchical navigation
WHAT IS IT
This type of navigation make the user drill down in the structure by one choice per screen, until the last level.
WHY TO USE
This navigation is best:
with complex structure and information architecture
when the user has to make different choices and select several options for the app.
HOW TO OPEN/CLOSE
The user can trigger the microinteraction by:
pressing on a menu title at the corner of the screen;
opening the menu by other point (for istance, the flat tab menu):
landing on ther main page of ther app.
The user can come back to the previous state by:
touching the menu title/back at the corner of the screen;
swiping to the left anywhere on the screen.
HOW IT WORKS
The user browses the categories/options in different levels with a drill-down interactions, covering totally the contents.
EXAMPLES
Kayak
Flat navigation with tab
WHAT IS IT
It’s a navigation way that allows the user to have an always visible clue about the main areas in the app. It takes places in the bottom of the screen, and it’s always visible also after the scrolling.
WHY TO USE
This navigation is best:
with simple structures
whit peer categories of content of functionality
HOW IT WORKS
The user browses the categories/different views of the apps by one click. Clicking on the different tabs can open another type of menu (see hierarchical menu).
CONTENTS
The contents of the tab can include:
text
icons
notifications
EXAMPLES
Etsy, TED
Content/experience driven navigation
WHAT IS IT
It is a navigation that allows users to browse in a structure that replicates a path. Browsing is based on the content or experience of the user.
WHY TO USE
This navigation is best:
with particular experience as a game or a book;
to create an user experience based on exploration.
EXAMPLES
Bloom fm
Antipattern
iOS give some suggestions and warnings about the navigations:
to give always to make always visible the navigation bar’s title and the title/back button
to mix differents style of navigation, if it is convenient
to give users one path to each screen.
Variants
Here some trends from differents navigation models in the mobile app, partially based o the Android/iOS native one.
1. Air b&b (iOS) - PROSPECTIVE SIDE OUT
SIMILAR TO
Navigation Drawer
HOW IT WORKS
Clicking on the icon menu an animation reveals the main structure with a prospective effect on the left side. There’s not more the sliding effect, the contents aren’t covered but they’re still partially visible by the prospective effect.
WHY TO USE
The navigation is best with long list because there ‘s a lot of space between the elements.
It has to be discovered if it could be used with more levels of navigations.
2. Yummly (iOS) - FROM THE TOP
SIMILAR TO
Hierarchical navigation
HOW IT WORKS
Clicking on the icon menu an animation reveals the main structure with an effect from the top of the screen.
Contents slide down.
WHY TO USE
The navigation is best with short list and to create an engaging effect.
3. Radio wheel - Radial menu
SIMILAR TO
Context/experience driven navigation
HOW IT WORKS
The user can explore the categories/options of the app by rounding the heels.
WHY TO USE
The navigation is best with pure hierarchical structures, to create an engaging effect.