BlackBerry 10 Love it or Hate it! “1-PageOverview”

Platform overview

This image shows some examples of platform functionality.

Gestures

Find out which gestures you can use in your app

Learn about gestures ›

Keyboards

Read about virtual and physical keyboards

Learn about keyboards ›

Notifications

Discover ways to inform users about application-specific events

Notify users ›

Sharing

Learn best practices for giving users access to external services

Application structure

Navigation

Choose a navigation structure based on the most important features in your app and the type of content that the application provides. Give users quick access to the most frequent tasks 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 are always fixed along the bottom of the screen in an action bar.

Examples

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

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

tab menu (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 button for the tab menu 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 is the easiest place for users to target.

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

When users tap a tab, display the content at the top of the screen. If users tap an item in a tab (for example, a list item), include a Back button so that users can navigate to the first level in the hierarchy. Don’t use Back to move between tabs.

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.

This screen shows tabs. 

This screen shows a tab menu.

Drill-down

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

Use when

Use drill-downs when you have lots of structured, hierarchical content.

A drill-down approach is common when you use lists for content. The list item shows a small amount of the content the item has. When users click the item, it opens and shows more information.

Example

A photo app might have vacation photos grouped into different trips. You couldn’t present all of the photos on the first level, so users would click an album to see that trip’s photos. At the second level, you might present the photos from that 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 barat the bottom of the screen so that users can navigate the hierarchy.

This screen shows an example of drill down navigation.

Tab and drill-down

Allows you to combine the two approaches. Use tabs only at the first level of an app, then let users drill down into the content.

Example

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

Custom

Make sure that a 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 behavior

If your application uses drill-down navigation, the content is structured in a hierarchy. Back behavior lets users move back easily through the hierarchy.

When users move back in a BlackBerry app, the movement is hierarchical. This means that moving back takes users to the previous level in the app hierarchy. It doesn’t necessarily take them back through each screen that they viewed earlier in the app.

Use when

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

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.

Examples

Users can move back in three ways:

  • Tap the Back button
  • Swipe their finger to the right on the content area
  • Touch the Back button and drag their finger to the right to peek at the previous level.
This screen shows 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. Read more about saving.

If you combine tabs and drill-downs, make sure that back navigates within one tab only.

 

Visual style

This image shows examples of the visual style.

Application icons

Get tips for designing your application icon

Design an app icon ›

Active frames

Find best practices for active frames

Learn about active frames ›

In-app icons

Design icons for the screens in your app

Design icons ›

Typography

See the fonts that we recommended forBlackBerry 10

See fonts ›

Share/Bookmark