Toolbars provide users with a quick and easy way to access frequent actions for an application or screen. Each toolbar consists of a set of icons that appears along the bottom of the screen. Consider the following examples of typical toolbar actions:

  • Create a new item in a list screen.
  • Reply to an email message, forward an email message, and reply to all in an email message.
  • View the day, week, or month in a calendar.

You can also include frequent actions for an item in the toolbar. For example, you might want to include a Delete action in the toolbar for a list.

Users can perform the following actions with toolbars:

User goal

Action using a touch screen

Perform the action associated with an icon.

Tap the icon.

Display a tooltip.

Touch the icon.

Users cannot interact with a toolbar using a trackpad.

This image shows a screen with a toolbar.

Most BlackBerry devices with a touch screen use toolbars since access to shortcut keys might not be readily available.

Best practice: Implementing toolbars

  • Use a toolbar to display frequent actions associated with the application or screen. Use a pop-up menu for actions associated with the highlighted item. In some cases, such as deleting an item from a list, the same action could appear in the toolbar and the pop-up menu.
  • Do not include the action that occurs when users click or tap the screen.
  • Place positive actions or actions associated with the screen, such as New, Send, and Save, at the far left of the toolbar.
  • Place more destructive actions at the far right of the toolbar. For example, if the screen displays a list of items that users can delete, place Delete at the far right of the toolbar.
  • If an action appears on the screen (for example, Create a new contact), do not include the action in the toolbar.
  • If only infrequent actions are associated with a screen, do not include a toolbar (for example, the Options screen). An application could have screens with a toolbar and screens without a toolbar.
  • If an action involves choice, display the choices in a dialog box. For example, if users can attach a picture, audio file, or video file to an email message, provide an "Attach" icon in the toolbar and then display a dialog box to allow users to choose the type of file to attach.
  • Include all actions in the toolbar in the full menu for the application.

Guidelines for icons

  • Provide a clear, concise tooltip for each icon. Use title case capitalization.
  • If an action is not possible for the current context but is possible for other items in the screen, dim the icon in the toolbar.
  • Include a maximum of five icons in a toolbar. If an application is available only in landscape view, you can add two additional icons to the toolbar.
  • Create icons with an average size of 33 x 33 pixels. These icons appear on a 60 x 40 pixel canvas and should have some negative space.
  • Use colors and shapes to differentiate similar icons. For example, use the BlackBerry 7 theme colors to distinguish between the arrows for replying to and forwarding an email message. Vary the number and direction of arrows to distinguish forwarding an email message from replying to an email message and replying to all in an email message.

These toolbar icons show an example of how colors and shapes differentiate similar icons.

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

comments powered by Disqus