List Navigation Version 2.0.0.0 Print this Page
Navigation Pattern Set
 
Description
Return to Top
The List Navigation pattern presents the categories and functions of the application as a list on the home screen. The List Navigation pattern focuses on a few specific tasks and presents key data right away. This design scales better when designing for a web application that must address a wide variety of screen sizes and platforms.
 
Pattern Set Decision Table
Return to Top
 
List Navigation
Springboard Navigation

The application contains a large amount of functionality that can be presented to the user as a grid of easily understood icons.

 

yes

The application is optimized to show application data immediately upon entry.

yes

 

The design needs to scale across a wide variety of device screen sizes and platforms.

yes

 

 
Pattern Sample
Return to Top

When entering the application, the user will view a list of the major categories of the application and key functionality.

List Navigation
Figure 1. Sales application home page
Required Screen Elements
Component Type Required Components Customizable or Extendable Components
Branding and Title Area Logo with application name and Sign Out button You may use the Page Header pattern with a Sign Out button instead of the logo.
Search Optional See the Search design patterns.
List
  • Icon
  • Category label
  • Chevron
Showing summarized data beneath a category label is optional.
Application Header
Return to Top
After drilling down, the user returns to the home screen by tapping the application header. Typically, web applications will benefit from a dedicated application header because the Back button is not a quick and reliable navigation method.

List Drill Down Navigation
Figure 2. Return to home from application header
Required Screen Elements
Component Type Required Components Customizable or Extendable Components
Application Header
  • Home icon
  • Enable the application header to return to the home page
  • You may extend the application header to support additional functionality.
  • You may remove the application header. However, if you remove it here, you must remove it throughout the application.
Page Header See Page Header pattern If the application header has been removed, enable the page title to return to the home screen.
Content List, form, or other pattern NA
 
Key Considerations
Return to Top

The entry screen can be specific for certain roles (for example, a field service technician may be presented with a list of scheduled tasks).

 
Interaction Examples
Return to Top
Flow with Application Header
This flow shows how a user selects the Opportunities section and then drills into a specific opportunity to see details. To return home, the user selects the application header.
List Navigation Flow 1
Figure 3. Flow with application header
Flow with No Application Header
This flow shows how a user selects the Opportunities section and then drills into a specific opportunity to see details. To return home, the user selects the page title.
List Navigation 2
Figure 4. Sales application navigation flow with no application header
On Device Examples
Return to Top
Here are two examples from Oracle Human Capital Management (HCM) Portrait Gallery.
iPhone Example
Figure 5. iPhone
Blackberry Bold Example
Figure 6. Blackberry Bold
 
 
About Oracle | Legal Notices | Terms of Use | Your Privacy Rights