Pattern - Springboard

Skip to end of metadata
Go to start of metadata

The Springboard pattern allows the user to open and/or switch between different application features. The Springboards displays a menu of navigation options, which can show additional features including: search, profile, notifications, branding, etc... When opened the Springboard pushes the page off the display to the right. When closed the Springboard is usually hidden. This pattern is common for both phone and tablet. A less commonly version used in older phone applications, is a grid based Springboard. This version works as a launch pad into a feature.

Used On: Tablet, Phone

Also Called: Navigational Drawer, Shuttle, Side Bar, Sliding Menu 

Related Components: List View, Component - Input Text, Component - Image, Component - Indicator

Related Patterns: Pattern - Detail on Demand, Navigation Bar

Appearance

Appearance characteristics for this pattern

Menu Shown

Menu Hidden

Sliding Sidebar Springboard

  • Support: The default springboard, displays a list of each of the application's features.
  • Placement: The list springboard slides in and out from the left side of the display. Sliding menus from the right side maybe available in the future.
  • Top of Springboard: Application names, global searches and user profiles may display at the top of a springboard.
  • Bottom of Springboard: Branding, sign out and other notices may display at the bottom of the springboard.
  • Global Search: Refer to Pattern - Search pattern for using global search in the springboard.
  • Profile: User profile information (i.e. a photo and name) can be place at the top of the springboard, below the global search.
  • Branding: The white Oracle logo may display at the bottom of the springboard. Other product naming may display at the bottom.
  • Item Layout: Inside a list item the icons are left aligned, with the feature names left aligned to the right of the icon. Do not use carets as drill downs.
  • Width: The width of the springboard can be customized. This determines how much of the page will be 'pushed'. This allows the springboard to appear at the specified width in both landscape and portrait.
  • Page View: Since the springboard width can be defined, the page maybe 'pushed' slightly, most of the way, fully to the right or not 'pushed' at all.
  • List Headers: List headers display above grouped sets of list items. This maybe used in custom implementations.
  • Icons: Springboard icons are function and  mono chromatic.
  • Badge/Bubble: No default count bubbles or badges are available. Custom implementation could be done to support count bubbles or badges.
  • Back Control: On all pages there can be 'Back to Springboard' control, that navigates the user back to springboard page. This can be toggled off across the application.

Dashboard Grid Springboard

  • Support: This requires custom implementation possibly using Table Layout or Iterator.
  • Home Page: The grid springboard is the initial page or 'home' page of the application.
  • Layout: The icons and feature names are organized into a grid. On the phone typically 3x3 or 2x3 or 3x2 or 2x2, while other combinations are possible.
  • Above Springboard: Components can display on the page below the header and above the springboard (i.e. search bar, filter, etc...)
  • Below Springboard: Components can display on the page below the springboard and above the footer (i.e. pagination dots, etc...)
  • Cell Layout: Inside a grid cell the icons are centered with the feature name centered beneath the icon.
  • Icons: Springboard icons can be either rich color or monochromatic.
  • Badge/Bubble: No default count bubbles or badges are available. Custom implementation could be done to support count bubbles or badges.
  • Back Control: On all pages there can be 'Back to Springboard' control that navigates the user back to springboard page. This can be toggled off across the application. 

Back to Springboard Control

  • Description: The "Back to Springboard" is a button that will hover in the lower-left corner of any screen.
  • Tapping: The button will display the Springboard and allow the user to make a selection. 
  • State: The Back to Springboard control maybe turned on or off. This toggle state applies to all pages in the application.

Behavior

Common behaviors for this pattern

Sliding Sidebar Springboard

  • Selection: The springboard list is tappable. When tapping the list item the panel to the right will change to the selected content. Also the springboard will slide off the screen to the left allowing the right panel to expand.
  • Orientation: On device orientation change the springboard will redraw, but not change the layout. Custom implementation could be done to support layout changes. The swipe right gesture can open the menu or swipe left to close the menu.
  • Placement: The springboard will slide over the top of the page when it shows and hides. Custom implementation could be done to support adjustable placement.
  • Scrolling: Vertical scrolling of the springboard can be allowed, but horizontal scrolling should not occur.
  • Gestures: There are no directly available gestures to manipulate the springboard. Custom implementation could be done to support gestures. springboard
    • For example in landscape orientation the full list may show, when changing to portrait orientation the springboard may either hide the list or show the icon list.

Dashboard Grid Springboard

  • Selection: The icon and feature name are tappable and drills down to the feature.
  • Orientation: On orientation change the layout of the grid may change (i.e. 2x3 to 3x2).
  • Multiple Pages: If multiple springboard pages are available a swipe gesture could be use to show the additional page.

Usage

Usage guidelines for this pattern

  • Springboards provide a good overview of an application can provide fast access to different features from the initial screen.
  • It is not recommended to use a Navigation Bar with a Springboard, due to the complexity of navigation.
  • It is not recommended to use combinations of different Springboards across the application.
  • It may not be recommended to use when there are too few or too many features across the application. You may need to find a better navigation method in these cases.
  • Pagination dots should be used on grid springboards when there are more than one springboard view.

Samples

AMX Sample code for this pattern

Sliding Menu Springboard Sample

Dashboard Grid Springboard Sample (Custom)

Resources

Labels:
slidingmenu slidingmenu Delete
springboard springboard Delete
shuttle shuttle Delete
drawer drawer Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Sign up or Log in to add a comment or watch this page.


The individuals who post here are part of the extended Oracle community and they might not be employed or in any way formally affiliated with Oracle. The opinions expressed here are their own, are not necessarily reviewed in advance by anyone but the individual authors, and neither Oracle nor any other party necessarily agrees with them.