Oracle Alta UI navigation is the method by which users access tasks within and across modules of a service, and locate ubiquitous features of the service, such as their settings.

Navigation has two main elements: the component a user activates to initiate it, and the navigation path.

Navigation Methods

There are two methods by which a UI provides a user with navigation options: UI content, and UI chrome.

UI Content Navigation

Although both navigation types can appear within a service, the Oracle Alta UI patterns advocate UI content navigation.

The following image provides a schematic of a service with both UI content (object) navigation and UI chrome navigation.

A page showing examples of both UI chrome and UI content (object) navigation within an Alta application

UI content navigation is best suited for a mobile-friendly service. The following image shows how UI content navigation works. In the illustration below, for example, the user clicks or taps onto dashboard content, list content, or table row content to navigate.

schematic of the navigation parths followed when users click on links in objects in linear content navigation

UI Chrome Navigation

UI chrome navigation appears predominately within two areas of an Oracle Alta UI suite: the Branding Area and the Navigation Area.

Within the Branding Area, there are three distinct locations for chrome navigation:

The following illustrates the Branding Area and the Navigation Area in an Oracle Alta UI page.

The Primary UI Chrome Navigation Areas on a page are in the Branding Area.

The User Menu provides ubiquitous access to suite features. The following image shows UI chrome navigation accomplished through the User Menu.

A User Menu  provides ubiqutious access to common features, as an example of UI chrome navigation/

The User Menu also provides ubiquitous access to custom features inserted between Settings and Help.

Illustration of User Menu showing optional, custom menu items.

UI Chrome Navigation Components

When necessary, Oracle Alta UI services can use a variety of UI chrome navigation components. Most commonly, they appear in the Navigation Area. The following image is an example of a page displaying links as the UI chrome navigation component.

A page that uses links in the UI chrome as  Navigation.

In the following image, finger tabs are the UI chrome navigation components.

A page using UI CHrome elements - fingertabs, as navigation components.

Horizontal tabs are shown as the UI chrome navigation component in the following image.

Illustration of Navigation as tabs

The following image shows InfoTiles as a UI chrome navigation component.

 Navigation being provided on a page by  info tiles.

Navigation Paths

There are two types of navigation paths: linear and non-linear.

Linear Navigation Paths

There are three main linear navigation paths: call and return, intervening page flow, and hub and spoke.

The following image is an example of a call and return linear navigation path.

Call and Linear -type Return navigation path

This image demonstrates a linear navigation call and return with intervening wizard or page flow.

A linear navigation of Call and Return with intervening wizard navigation or page flow.

Following is an example of a hub and spoke linear navigation path.

schematic of a Hub and Spoke navigation path

Non-Linear Navigation Paths

Non-linear navigation is used within and most frequently between service modules in the Oracle Alta UI.

Network Navigation

The most common non-linear navigation path is a network. When users complete a task on a page, they can navigate to any other available page. A non-linear navigation path is initiated by Application Navigation or tree navigation, for example.

The next image is an example of a non-linear network navigation network.

A network type navigation path.

Application Navigation

Application Navigation is a ubiquitous navigation feature that provides the user with immediate access to any service module.

In the following figure, the heavy arrows illustrate non-linear navigation via Application Navigation.

Illustration of non-linear navigation via the Application Navigation Bar

Hierarchically-Linked Lists: Tree Navigation

Hierarchically-linked lists are the mobile-friendly alternative to common tree navigation. Hierarchically-linked lists are preferred over legacy tree navigation.

In hierarchically-linked lists, a leaf node is any node in the linked lists. The hierarchy traverses upon click or touch of a leaf node in a replace-in-place fashion. The user may scroll the list items using the page scrollbar or a finger swipe.

Essential elements of hierarchically-linked lists:

The following diagram demonstrates navigation using hierarchically-linked lists.

Illustration of a linked list tree behavior

Because of their replace-in-place behavior, hierarchically-linked lists consume less horizontal page "real estate" upon traversal than a legacy UI tree. A deep tree is usually accommodated with a horizontal scrollbar.

In legacy UI design, tree navigation was used frequently, particularly in administrative products. Hierarchically-linked lists are a more appropriate and mobile-friendly navigation model to use.

In the following image, hierarchically-linked lists are used in lieu of a tree for navigation.

A hierarchically-linked listbeing used instead of a Tree for navigationon the page.

Additional Resources