Return to site

UX responsive mobile patterns

Part II - iOS

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.

 

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly