Navigation

Enriching the hybrid navigation by adapting to a native behaviour.

Hybrid anatomy

The communication between the native application and web view is limited. The native app loads the web view in a container. The native navigation bar is shown in order for the user to get back from the web view. The navigation bar can either show a back button or a close button, see example below for how this will look in iOS and Android.

Hierarchic or modal navigation

The native app can present the web view either hierarchically or modally.

  • Hierarchical navigation is used when the user navigates different levels of a structure, for example from a list view to a detail view. The native navigation bar will in this case show a back button.
  • Modal navigation is used when the user needs to finish a task or a flow. In this case the native navigation will show a close button.

See examples of the two below.

Hierarchial navigation

Above: Image

Above: Animated

Modal navigation

Navigate less

Since the native navigation bar will be shown at all times, navigation inside the web view can become confusing. For this reason we try to keep navigation inside the web view to a minimum. When navigation is needed it is important that the user understands where they are, where they can go and how they can get back.

Use breadcrumbs

When using hierarchical navigation in the web view the user should be able to navigate up by using breadcrumbs. The breadcrumb will display the title of the page the user can get back to, see example below. Swiping back on iOS or using the device back button on Android should have the same behaviour as the breadcrumb.

When the web view includes hierarchical navigation it will be shown modally in the native app, not to confuse the breadcrumbs with the back button in the native navigation bar.

Avoid full screen navigation

Full screen modals in a hybrid experience should not be used since the close action will collide with the native navigation bar. Replace the full screen modal with a modal that doesn’t fill the viewport, such as the slide-up sheet, see example below.

Example of a flow with hierarchical and modal animation

Do's and don'ts

Do

  • Navigating back should display the view as the user left it, including scroll position and inputted data
  • Back gestures such as swipe to go back and device back buttons need to be supported
  • External links are always opened in the mobile (iOS/Android) browser. To indicate this they must show the “external-link” icon from Font Awesome library at the end of the actual link text
  • Assets that are part of the chrome UI (such as menus, footer, zone 3 etc.) intended for standalone web must be hidden whilst in a native context

Don't

  • Use content or experience-driven navigation so the user can navigate from the web view to something completely different
  • Show native back button together with breadcrumbs
  • Repeat information in each view, keep in mind where the user came from