Understanding the Sidebar

The following example shows the basic structures of an app sidebar. You activate an app sidebar by focusing on a bookmark in the dock and pressing the OK key on the remote control. When you first enter the sidebar the first page of the app shows you representative and featured application content. By pressing the DOWN ARROW on the remote control, you can navigate to the featured content section of the sidebar. If the app developer has not provided featured content interactions, you can navigate to the app's menus.

This section of the document introduces the sidebar user interface and its components:

  • The app title button is a large button at the top of each sidebar that displays an icon representing the title or logo for the app. When selected the app title button returns the user to the HOME menu.
  • The navigation start point (HOME) is the initial page of an app's sidebar. It should contain navigation points to all pages of the app along with a useful featured content area.
  • The section menu is the navigation mechanism for primary pages within the app.
  • The global toolbar at the bottom of each bookmark contains four buttons: Close, Settings, Edit Bookmark, and Viewport.

The sidebar is the primary view of an app. All implementations of apps must display a sidebar. If you take no action while the sidebar is displayed, it will slide off the screen after a short time period.

Sidebar User Interface States

The following sidebar user interface states are described below:

Sidebar Overlaid Pass-thru Video

The sidebar is displayed over pass-thru video. Pressing the BLUE key will toggle the UI to viewport mode for pass-thru video. Pressing the RED key will close the running app and display fullscreen pass-thru video.

Sidebar Viewport Pass-thru Video

Pressing the BLUE key while the sidebar is displayed has toggled the UI to viewport mode for pass-thru video. Pressing the BLUE key again will display the sidebar overlaid pass-thru video.

Sidebar Overlaid Streaming Video

You can design the app to display its own sidebar over streaming video or the consumer can open the sidebar of an unrelated app while watching another app's streaming video. Pressing the RED key will close the sidebar. Pressing the RED key again will close the video and display fullscreen pass-thru video.

Sidebar Viewport Streaming Video

Pressing the BLUE key while the sidebar is displayed has toggled the UI to viewport mode for streaming video. Pressing the BLUE key again will display the sidebar overlaid streaming video.

Navigation Start Point (HOME)

When you first launch the sidebar the most prevalent section of the user interface is a graphical treatment for featured content for the app. This featured content area is a large area in the sidebar that contains compelling visual elements which set your expectations for the types of data the app contains and can provide accelerated access to those pages. For a simple app, this first section may be a static splash screen. The app developer designs the preview area to represent the broader functionality of the app—for example:

  • A slideshow app displays thumbnails of fresh image content, ready for viewing.
  • A video app shows featured videos in your preferred categories.
  • A news app shows the day's top stories.

Section Menu

The section menu is the primary navigation of the app user interface. The primary content areas are laid out in the section menu to best display and navigate the application content. Content can include textual, graphical, and media layouts. The following is an example of the NFL app's section menu to display upcoming games schedules and statistics:

Global Toolbar

The global toolbar is the four buttons located at the bottom of each sidebar. These buttons are also mirrored on the remote control as four color-coded keys: Close (RED key), Settings (GREEN key), Edit Bookmark (YELLOW key), and Viewport (BLUE key). The order and color of these keys are subject to change. Device partners can configure button order using Yahoo! Services. The colors always map to the same functions, but their order changes to match the order on the device's remote control. When implementing the fullscreen view, the GREEN, YELLOW, and BLUE color-coded keys are now available for app control. It is recommended that the BLUE key be used to resize the video where applicable.

Close

The Close button removes graphics on the screen.

Settings

The Settings button on the global toolbar launches the settings section of the current app. Typically app settings allow you to set app-specific preferences.

Edit Bookmark

The Edit Bookmark button on the global toolbar will generate a bookmark to provide a shortcut to the current sidebar page. The only way to add a bookmark is through the sidebar's global toolbar. App developers can enable the Edit Bookmark button for app content that is suited for display as a bookmark. For example, an NFL app may enable the Edit Bookmark button for each team's page. The title of the bookmark is determined by the app developer. If the bookmark is already in your dock it will not be added a second time. The Edit Bookmark button is deactivated when no bookmark for the app content is available.

Viewport

The Viewport button toggles the user interface between viewport and overlay mode when the dock or sidebar is displayed.

Table of Contents