Panel manager

The panel manager provides filtered views of content and allows users to navigate content without leaving the context of the screen. You can filter content in two different ways.

In the scrollable view, users can move through each panel of content. Users can move through the panels continuously. Or, you can set a start and end point so that users know when they reach the first and the last panel. You can add hint text or arrows to the left side and the right side of the screen to indicate that other panels of content are available.

This screen shows an example of the first panel in a scrollable view.

This screen shows an example of the second panel in a scrollable view.

The ability to expand and contract the size of the scrollable view is unique to the Home screen.

The tab view displays all available tabs on the screen. Users have immediate access to each tab.

This screen shows an example of a tab view.

You can also allow users to filter content within a specific panel. Users still have the ability to easily switch to other panels.

This screen shows an example of a scrollable view with the ability to filter content in a specific pane.

Users can perform the following actions in a panel manager:

User goal

Action using the navigation keys

Action using a touch screen

Switch panels.

Move a finger horizontally on the trackpad.

  • Drag a finger horizontally on the screen.
  • Swipe right or left on the screen.

Filter content in a specific panel.

Click the title.

Tap the title.

Best practice: Implementing panel managers

  • Use a panel manager if users need to navigate filtered views of content frequently.
  • Assign shortcut keys for switching to the next and previous panels. For example, in English, allow users to press "N" to switch to the next panel and "P" to switch to the previous panel.
  • In most cases, allow users to move up in a hierarchy by pressing the Escape key. If users filter content in a specific panel, then display all of the content in the panel when users press the Escape key.

Guidelines for scrollable views

  • Use a scrollable view to allow users to seamlessly navigate similar types of content. You can also use a scrollable view if users need to view the same set of content in different ways.
  • In most cases, avoid providing more than seven panels of content. The more panels of content, the more difficult it becomes for users to remember each panel. However, you can include more than seven panels if the panels are ordered in an obvious way, such as by date, by number, or in an alphabetical list.
  • Add hint text to the left side and the right side of the screen to indicate that other panels of content are available. Use arrows instead of hint text if there is a large number of panels or to indicate that users can navigate in increments, such as by date.
  • Allow users to scroll through the panels continuously if it is easy to distinguish the content in each panel. Otherwise, users might get lost. If there are only two panels, do not allow users to scroll continuously through the panels.
  • Create a start and end point for the panels if the titles in each panel are similar or if the content in each panel is similar. A fixed start and end point allows users to easily find the first panel and the last panel. It also allows users to learn the order of the titles.

Guidelines for tab views

  • Use a tab view to display related but different types of content in the same view. Use a tab view if the types of content are not expected to increase in number.
  • Show all tabs on the screen where possible. Avoid making users scroll to see additional tabs.
  • Avoid displaying tabs with dramatically different widths. Try to distribute tabs evenly across the screen.
  • If there is a limited amount of space at the top of each tab, use icons instead of labels.

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus