Application structure

Approaches to navigation

Choose a navigation structure based on the most important features in your app and the type of content that the app provides. Let users access the most frequent tasks quickly and don't overwhelm them with content or tasks that are less important. Determine which of the following approaches work the best for your app.

Tabs

Tabs allow you to structure content so that users can move easily between content of relatively equal importance.

Use when

You have distinct sections of content of relatively equal importance. Tabs always appear along the bottom of the screen in an action bar.

Examples

A clock might include tabs for a world clock, an alarm, a timer, and a stopwatch.

A music app might include tabs for artists, albums, songs, and playlists.

A tab menu (also known as a sidebar) is a vertically stacked, scrollable list of tabs. You can use a tab menu to hold less frequently accessed tabs, or you can use it instead of tabs along the bottom of the screen. When users tap the tab menu button at the bottom of the screen, the tab menu slides in from the left and appears to the left of the main view.

Best practices

Place the most frequently used tab in the middle tab position. This area of the action bar is the easiest place for users to target.

Include tabs on the first level of an app hierarchy only.

Use up to four tabs in an action bar. Include additional tabs in a tab menu.

In a tab menu, place the most frequently used tabs at the top. Place any tabs in the first level of the hierarchy at the top of the list.

Device showing the use of tabs in the Clock app.

Device showing an open tab menu.

Drill down

Drill-down directories let you structure content in a hierarchy and show selected parts of the content at each level.

Use when

A lot of structured, hierarchical content will be added to the app.

Example

A photo app might have vacation photos grouped by different trips. All of the photos can't be displayed on the first level, so users click an album to see that trip's photos. At the second level, you might present the photos from the trip as thumbnails. Clicking one of the photos opens it in full screen, as the third level in the hierarchy.

Best practice

Include a Back button in an action bar at the bottom of the screen so that users can navigate through the hierarchy.

Device showing drill-down navigation.

Tab and drill down

A tab and drill down strategy allows you to combine both navigation approaches. Use tabs at the first level of an app, and then let users drill down into the content.

Example

A music app can have tabs for different genres. Users tap a playlist to see a list of songs.

Custom or unstructured navigation

Make sure that your custom approach provides a better experience than the approaches listed above. You should test the model thoroughly and refine it so that it's easy for users to learn.

Example

In a map, all information (such as points of interest and directions) appears directly on the map.

Back and peek behavior

If your application uses drill-down navigation, the content is structured in a hierarchy. Back and peek behavior lets users return to previously viewed levels of a hierarchy easily.

When users return to a previous screeen in a BlackBerry app, the movement is hierarchical. Moving back takes users to the previous level in the app hierarchy. Users don't necessarily return to screen that they viewed earlier.

The Back button can contain an icon and the title of the screen or tab that users would navigate back to. If the context is clear, you can use the title "Back" instead.

Use when

You create deeper levels in an app hierarchy. Make sure the Back button appears in the far left position in an action bar.

Examples

Users can return in three ways:

  • Tap the Back button.
  • Swipe their finger to the right on the content area.
  • Peekat the previous level by touching the Back button and dragging their finger to the right, allowing them to see the previous level's contents without leaving their current screen.
Device showing a Back button in the far-left position in an action bar.

Best practices

Don't put a Back button (or any other button) on the screen as a way for users to close an app. The only way for users to leave an app is by swiping up from the bottom of the screen.

In most cases, save automatically when users move back to the previous screen.

If you combine tabs and drill downs, make sure that the Back button navigates within the tab your user chose and does not unexpectedly move them to another tab's hierarchy.



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

comments powered by Disqus