BlackBerry Smartphones

Version: 2.3

UI Guidelines

SWDT893501-893501-1105021039-001

Contents
1 Design principles for BlackBerry devices................................................................................................................................ Best practice: Designing applications for BlackBerry devices................................................................................................... Creating a UI that is consistent with standard BlackBerry UIs................................................................................................. Display specifications for BlackBerry devices.............................................................................................................................. 5 6 6 7 8 9 9 9 11 11 11 12 12 12 13 14 16 17 18 19 21 22 23 24 24 27 28 28 29 30 30

2 Considerations for BlackBerry devices with a touch screen................................................................................................. 3 Interaction.................................................................................................................................................................................... Interaction methods on BlackBerry devices................................................................................................................................ Touch screen.................................................................................................................................................................................... Best practice: Designing applications for touch screen devices...................................................................................... Trackball or trackpad...................................................................................................................................................................... Best practice: Designing applications for trackball or trackpad devices......................................................................... Trackwheel....................................................................................................................................................................................... Keyboard.......................................................................................................................................................................................... Best practice: Designing applications for different types of keyboard............................................................................ QWERTY keyboard.................................................................................................................................................................. SureType keyboard................................................................................................................................................................. Key functionality..................................................................................................................................................................... Typing indicators.................................................................................................................................................................... Shortcut keys........................................................................................................................................................................... Cursors............................................................................................................................................................................................. Best practice: Implementing cursors................................................................................................................................... Highlighting items.......................................................................................................................................................................... Best practice: Highlighting items......................................................................................................................................... 4 Screens.......................................................................................................................................................................................... Application screens......................................................................................................................................................................... Best practice: Designing application screens..................................................................................................................... Common actions on application screens............................................................................................................................. Banner.............................................................................................................................................................................................. Best practice: Implementing banners.................................................................................................................................. Dimensions for banners on BlackBerry devices.................................................................................................................. Dialog boxes....................................................................................................................................................................................

Best practice: Implementing dialog boxes.......................................................................................................................... Alert dialog boxes................................................................................................................................................................... Information dialog boxes....................................................................................................................................................... Input dialog boxes.................................................................................................................................................................. Inquiry dialog boxes............................................................................................................................................................... Picker dialog boxes................................................................................................................................................................. Reminder dialog boxes.......................................................................................................................................................... Status dialog boxes................................................................................................................................................................ Progress indicators......................................................................................................................................................................... Best practice: Implementing progress indicators............................................................................................................... Wizards............................................................................................................................................................................................. Best practice: Designing wizards......................................................................................................................................... 5 Controls......................................................................................................................................................................................... Buttons............................................................................................................................................................................................. Best practice: Implementing buttons................................................................................................................................... Check boxes..................................................................................................................................................................................... Best practice: Implementing check boxes........................................................................................................................... Drop-down lists............................................................................................................................................................................... Best practice: Implementing drop-down lists..................................................................................................................... Labels................................................................................................................................................................................................ Best practice: Implementing labels...................................................................................................................................... Lists................................................................................................................................................................................................... Best practice: Implementing lists......................................................................................................................................... Option buttons................................................................................................................................................................................ Best practice: Implementing option buttons....................................................................................................................... Search fields.................................................................................................................................................................................... Best practice: Implementing search fields.......................................................................................................................... Spin boxes........................................................................................................................................................................................ Best practice: Implementing spin boxes.............................................................................................................................. Text fields......................................................................................................................................................................................... Best practice: Implementing text fields............................................................................................................................... Tree views......................................................................................................................................................................................... Best practice: Implementing tree views.............................................................................................................................. 6 Media.............................................................................................................................................................................................

31 32 33 34 34 35 36 37 37 38 39 39 41 41 41 42 42 43 43 44 44 44 45 45 45 46 47 47 48 49 50 50 51 52

Displaying images........................................................................................................................................................................... Best practice: Displaying images......................................................................................................................................... Zooming and panning images....................................................................................................................................................... Best practice: Zooming, panning, and rotating images..................................................................................................... Displaying information on a screen temporarily......................................................................................................................... Best practice: Displaying information on a screen temporarily........................................................................................ 7 Menus............................................................................................................................................................................................ Best practice: Implementing menus............................................................................................................................................. Context menus................................................................................................................................................................................ Best practice: Implementing context menus...................................................................................................................... 8 Text................................................................................................................................................................................................ Fonts................................................................................................................................................................................................. Best practice: Fonts................................................................................................................................................................ Writing conventions........................................................................................................................................................................ Best practice: Punctuation.................................................................................................................................................... Best practice: Capitalization................................................................................................................................................. Best practice: Abbreviations and acronyms........................................................................................................................ Product names and trademarks............................................................................................................................................ Trademark symbols and UI elements................................................................................................................................... Logos........................................................................................................................................................................................ Best practice: Terminology.................................................................................................................................................... Terms to avoid......................................................................................................................................................................... 9 Themes.......................................................................................................................................................................................... Best practice: Designing themes.................................................................................................................................................. Precision theme............................................................................................................................................................................... Dimension theme............................................................................................................................................................................ 10 Icons and indicators.................................................................................................................................................................... Best practice: Designing icons and indicators............................................................................................................................ Precision theme icons and indicators........................................................................................................................................... Best practice: Designing icons and indicators for the Precision theme.......................................................................... Dimension theme icons and indicators........................................................................................................................................ Best practice: Designing icons and indicators for the Dimension theme.......................................................................

52 53 54 54 55 55 56 56 57 58 59 59 59 59 59 60 60 61 62 62 62 63 65 66 67 67 69 69 69 70 72 73

Default themes and dimensions for screens and application icons on BlackBerry devices.................................................. 11 Sound............................................................................................................................................................................................. Best practice: Implementing sound.............................................................................................................................................. 12 Localization................................................................................................................................................................................... Best practice: Designing applications for different languages and regions............................................................................ Best practice: Coding for different languages and regions....................................................................................................... Best practice: Writing for different languages and regions....................................................................................................... 13 Accessibility.................................................................................................................................................................................. Best practice: Designing accessible applications....................................................................................................................... 14 Glossary......................................................................................................................................................................................... 15 Provide feedback......................................................................................................................................................................... 16 Document revision history......................................................................................................................................................... 17 Legal notice..................................................................................................................................................................................

73 75 75 76 76 76 77 78 78 80 81 82 84

UI Guidelines

Design principles for BlackBerry devices

Design principles for BlackBerry devices

1

Applications designed for BlackBerry® devices should provide a balance between the best possible user experience and a long battery life. When you design your BlackBerry device application, consider the differences between mobile devices and computers. Mobile devices have the following characteristics: • • • • • • a smaller screen size that can display a limited number of characters slower processor speeds wireless network connections with a longer latency period than standard LANs less available memory shorter battery life one screen appears at a time

Mobile device users use applications on their mobile devices differently than they would use applications on a computer. On mobile devices, users expect to find information quickly. For example, a customer relationship management system can provide a massive amount of information, but users only require a small amount of that information at one time. The BlackBerry device UI is designed so that users can perform tasks easily and access information quickly. Before you design your application, consider using the existing applications on the BlackBerry device or the BlackBerry Smartphone Simulator to learn more about the navigation model and best practices for designing the UI for your application.

For information on designing web pages for BlackBerry devices, see the BlackBerry Browser Content Design Guidelines.

5

UI Guidelines

Best practice: Designing applications for BlackBerry devices

Best practice: Designing applications for BlackBerry devices
When you design applications for BlackBerry® devices, try to be as consistent as possible with other BlackBerry device applications. Consider the following guidelines: • • • Use or extend existing UI components where possible so that your application can inherit the default behavior of the component. Follow the standard navigation model as closely as possible so that a particular user action produces a consistent result across applications. For example, allow users to open the context menu in all applications by clicking the trackball or trackpad. Support and extend user tasks in useful ways. For example, when users download an application, the application should open automatically. The application should also be saved in the Applications folder.

When you design your application, also consider the following guidelines: • • • • Stay focused on users' immediate task. Display only the information that users need at any one moment. Verify that the actions that are available in the menu are relevant to users' current context. Minimize the number of times that users need to click the trackwheel, trackball, trackpad, or touch screen to complete a task. Design your UI to allow users to change their mind and undo commands. Users sometimes click the wrong menu item or button accidentally. For example, use an alert dialog box to notify users of a critical action such as deleting data from their BlackBerry devices. Display information in a way that makes effective use of the small screen.

Creating a UI that is consistent with standard BlackBerry UIs
You can use standard MIDP APIs and BlackBerry® UI APIs to create BlackBerry® Java® Application UIs. The BlackBerry UI APIs are a library of UI components that are designed to provide default layouts and behaviors that are consistent with BlackBerry® Device Software applications. • • Field components provide standard UI elements for date selection, options, check boxes, lists, text fields, labels, and progress bar controls. Layout managers provide an application with the ability to arrange components on a BlackBerry device screen in standard ways, such as horizontally, vertically, or in a left-to-right flow.

You can use the BlackBerry UI APIs to create UIs that include tables, grids, and other specialized features. The BlackBerry® Java® Development Environment uses a standard Java event model to receive and respond to specific types of events. Applications can receive and respond to BlackBerry device user events, such as when the BlackBerry device user clicks the trackwheel, clicks the trackball, or types on the keyboard, and to system events, such as global alerts, real-time clock changes, and USB port connections.

6

UI Guidelines

Display specifications for BlackBerry devices

Display specifications for BlackBerry devices
BlackBerry device model BlackBerry® 7100 Series BlackBerry® 8700 Series BlackBerry® 8800 Series BlackBerry® Bold™ 9000 smartphone BlackBerry® Curve™ 8300 Series BlackBerry® Curve™ 8350i smartphone BlackBerry® Curve™ 8500 Series BlackBerry® Curve™ 8900 smartphone BlackBerry® Pearl™ 8100 Series BlackBerry® Pearl™ Flip 8200 Series BlackBerry® Storm™ 9500 Series BlackBerry® Tour™ 9600 Series 480 x 360 pixels 240 x 260 pixels 240 x 320 pixels 360 x 480 pixels 480 x 360 pixels 245 161 166 184 245 0.1035 0.15825 0.153 0.138 0.1035 Display screen size 240 x 260 pixels 320 x 240 pixels 320 x 240 pixels 480 x 320 pixels 320 x 240 pixels Pixels per inch 151 154 163 217 163 Dot pitch (mm) 0.168 0.165 0.156 0.117 0.156

7

UI Guidelines

Considerations for BlackBerry devices with a touch screen

Considerations for BlackBerry devices with a touch screen
• • • • • •

2

If you design an application for BlackBerry® devices with a trackball or trackpad, you can optimize the user experience with the application on a BlackBerry device with a touch screen by considering the following items: Users interact with the BlackBerry device by touching the screen with a finger. Toolbars appear at the bottom of most screens. Users type text on a virtual keyboard. Users can view application screens in portrait mode or landscape mode. Some cursors, controls, and methods for highlighting items are different from cursors, controls, and methods for highlighting items on other BlackBerry devices. The screen, banner, background images, and icons on a BlackBerry device with a touch screen are larger than other BlackBerry devices.

Related topics Touch screen, 9 Keyboard, 12 Cursors, 19 Controls, 41 Screens, 24 Banner, 28 Default themes and dimensions for screens and application icons on BlackBerry devices, 73 Precision theme icons and indicators, 69 Highlighting items, 22

8

UI Guidelines

Interaction

Interaction
Interaction methods on BlackBerry devices
BlackBerry device model BlackBerry® 7100 Series BlackBerry® 8700 Series BlackBerry® 8800 Series BlackBerry® Bold™ 9000 smartphone BlackBerry® Bold™ 9700 smartphone BlackBerry® Curve™ 8300 Series BlackBerry® Curve™ 8500 Series BlackBerry® Curve™ 8900 smartphone BlackBerry® Pearl™ 8100 Series BlackBerry® Pearl™ Flip 8200 Series BlackBerry® Storm™ 9500 Series BlackBerry® Tour™ 9630 smartphone Interaction method trackwheel trackwheel trackball trackball trackpad trackball trackpad trackball trackball trackball touch screen trackball

3

Touch screen
On BlackBerry® devices with a SurePress™ touch screen, users use a finger to interact with the applications on the device. Users type text and navigate screens by performing various actions on the touch screen. Users can also perform actions by clicking icons on the toolbar or by pressing the Menu key. On BlackBerry devices with a touch screen, users can perform the following actions: Action touch the screen lightly Result This action highlights an item. In a text field, if users touch the screen near the cursor, an outlined box displays around the cursor. This box helps users reposition the cursor more easily. In applications that support a full-screen view, such as BlackBerry® Maps and the BlackBerry® Browser, this action hides and shows the toolbar.

tap the screen

9

UI Guidelines

Touch screen

Action tap the screen twice hold a finger on an item

Result On a web page, map, picture, or presentation attachment, this action zooms in to the web page, map, picture, or presentation attachment. On the toolbar, this action displays a tooltip that describes the action that the icon represents. In a message list, if users hold a finger on the sender or subject of a message, the BlackBerry device searches for the sender or subject. This action moves the content on the screen in the corresponding direction. For example, when users touch and drag a menu item, the list of menu items moves in the same direction.

touch and drag an item on the screen

In a text field, this action moves the outlined box and the cursor in the same direction. touch the screen in two locations at the This action highlights the text or the list of items, such as messages, between the same time two locations. To add or remove highlighted text or items, users can touch the screen at another location. click (press) the screen This action initiates an action. For example, when users click an item in a list, the screen that is associated with the item appears. This action is equivalent to clicking the trackwheel, trackball or trackpad. On a map, picture, or presentation attachment, this action zooms in to the map, picture, or presentation attachment. On a web page, this action zooms in to the web page or follows a link. In a text field, this action positions the cursor. If the field contains text, an outlined box appears around the cursor. Quickly sliding a finger up displays the next screen. Quickly sliding a finger down displays the previous screen. When the keyboard appears, quickly sliding a finger down hides the keyboard and displays the toolbar. This action displays the next or previous picture or message, or the next or previous day, week, or month in a calendar. In the camera, sliding a finger up zooms in to a subject. Sliding a finger down zooms out from a subject. This action pans a map or web page. If users zoom in to a picture, this action also pans a picture.

slide a finger up or down quickly on the screen

slide a finger to the left or right quickly on the screen slide a finger up or down on the screen slide a finger in any direction

10

UI Guidelines

Trackball or trackpad

Action press the Escape key

Result This action removes the highlight from text or a list of items. On a web page, map, or picture, this action zooms out one level. Users can press the Escape key twice to zoom back to the original view.

Best practice: Designing applications for touch screen devices
• • • • Respond to each touch action that you use in your application. For more information about how to respond to events created by each action, see the BlackBerry UI and Navigation Development Guide. Where possible, create a target area for user interface elements that is at least 6 mm. Provide enough space around controls so that users can easily touch the screen with their fingertips to initiate a specific action. Familiarize yourself with navigation models for BlackBerry® devices with a touch screen and BlackBerry devices without a touch screen. Verify that your application works well for each model.

Trackball or trackpad
On BlackBerry® devices with a trackball or trackpad, the trackball or trackpad is the primary control for user navigation. Users can perform the following actions: • • • Roll the trackball or slide a finger on the trackpad to move the cursor. Click the trackball or trackpad to perform default actions or open a context menu. Click the trackball or trackpad while pressing the Shift key to highlight text or highlight messages in a message list.

BlackBerry devices with a trackball or trackpad also include a Menu key that is located to the left of the trackball or trackpad. Users can press the Menu key to open a full menu of available actions.
Related topics Menus, 56

Best practice: Designing applications for trackball or trackpad devices
• • Assign a default action or open a context menu when users click the trackball or trackpad. When users highlight text or multiple objects, use the context menu to provide the most relevant actions that apply to the selection. For example, when users edit a message, they can use the context menu to send the message. If users highlight text in the message, the context menu changes and users can use the menu to copy the text. Avoid making users alternate between using the keyboard and using the trackball or trackpad. Users should be able to perform most actions using either the keyboard or the trackball or trackpad.

11

UI Guidelines

Trackwheel

Trackwheel
BlackBerry® devices that precede the BlackBerry® Pearl™ 8100 Series use a trackwheel as the primary control for user navigation. The trackwheel is located on the right side of the BlackBerry® device. Users can perform the following actions: • • • roll the trackwheel to move the cursor vertically roll the trackwheel while pressing the Alt key to move the cursor horizontally click the trackwheel to initiate an action or open the menu

Keyboard
Users use the keyboard primarily to type text. On BlackBerry® devices without a touch screen, users can also use the keyboard to move around a screen (for example, to move around a map). However, navigation using the keyboard should always be an alternative to navigation using the trackwheel, trackball, or trackpad. BlackBerry devices with a trackwheel or trackball have either a QWERTY keyboard or SureType® keyboard. BlackBerry devices with a trackpad have a QWERTY keyboard. Both types of keyboard include character keys and modifier keys. Character keys send a character to the BlackBerry device and include text keys, the Menu key, and the Escape key. A modifier key alters the functionality of character keys. Modifier keys include the Shift key and the Alt key. On BlackBerry devices with a SurePress™ touch screen, in most cases, the QWERTY keyboard appears in landscape view and the SureType keyboard appears in portrait view.
Related topics Text fields, 49

Best practice: Designing applications for different types of keyboard
• • • • If you alter the functionality of a key, always return the key to its original state when users close the application. Verify that your application is compatible with both QWERTY keyboards and SureType® keyboards. Support modifier keys where appropriate. Make sure that users can undo commands easily. Typing can be challenging for new users. Make sure that users can use the Escape key to cancel actions or return to the previous screen. Users should return to the Home screen if they press the Escape key repeatedly. They should also be able to close the browser or media application by pressing and holding the Escape key. Make sure that users can perform the following actions: • Press the Menu key to open a full menu. • Press the Menu key to initiate an action when a menu item is highlighted. • Press and hold the Menu key to open the dialog box for switching applications.

12

UI Guidelines

Keyboard

Press the Menu key to initiate an action when a button has focus in a dialog box on BlackBerry® devices with a touch screen. Choose an appropriate field based on what you expect users to type. For example, if you expect users to type numbers, use a field that accepts only numbers so that users can type numbers easily. Use the following information to determine which input method to choose.

QWERTY keyboard
The QWERTY keyboard provides users with a keyboard that is similar to the keyboard on a computer. Users type as they would on a computer keyboard except that numbers and symbols are located in different places. To type common symbols on BlackBerry® devices without a touch screen, users press the Alt key and the appropriate character key. To type other symbols, users press the Symbol key. To type common symbols on BlackBerry devices with a touch screen, users press the Symbol key. When users press a modifier key, a typing mode indicator appears in the upper-right corner of the screen.

13

UI Guidelines

Keyboard

QWERTY keyboard on a BlackBerry device without a touch screen

QWERTY keyboard on a BlackBerry device with a touch screen

SureType keyboard
BlackBerry® devices with SureType® technology integrate a traditional phone keypad and a familiar QWERTY-style keyboard with intuitive software. SureType technology is designed to predict words as users type them. Users who have a BlackBerry device with SureType technology can type text using the SureType input method or the multi-tap input method.

14

UI Guidelines

Keyboard

When users use SureType technology, they press the letter key for each letter in a word once. For example, to type run, users would press the ER key once, the UI key once, and the BN key once. As users type, a list of possible letter combinations and words appears on the screen. SureType technology selects letter combinations or words from the list based on context. If users type a word or letter combination (for example, a web address or an abbreviation) that SureType technology does not recognize, users use the list that appears on the screen to build the word letter by letter. SureType technology is designed to "learn" new words or letter combinations that users type and add them to a custom word list. When users use the multi-tap input method, they press a letter key once to type the first letter on the key and twice to type the second letter. For example, to type run, users would press the ER key twice, the UI key once, and the BN key twice.

SureType technology is the default input method for most fields. Multi-tap is the default input method for phone number fields and password fields. If users switch from using SureType technology to using the multi-tap input method, a typing indicator appears in the upper-right corner of the screen to indicate the current input method.

SureType keyboard on a BlackBerry device without a touch screen

15

UI Guidelines

Keyboard

SureType keyboard on a BlackBerry device with a touch screen

Key functionality
Key Alt End/Power Use Type the alternate character on a key. End a call. Turn on or turn off most BlackBerry® devices. The Power/Lock key turns on or turns off BlackBerry® Storm2™ Series devices. Escape Display the Home screen or application list. The application maintains its current state. Move back a screen. Close a menu or dialog box. Press and hold to close applications such as the browser or media applications. Menu Mute Play/Pause/Mute Send Delete text in a search field. Open the application list on the Home screen. Open the menu in an application. Turn on standby mode from the Home screen. Turn on or turn off mute during a call. Play, pause, or mute a media file on the BlackBerry® Curve™ 8500 Series. Open the phone.

16

UI Guidelines

Keyboard

Key Space

Use Call a highlighted phone number. Type a space. Select an option button, check box, or drop-down list item. Insert a period (.) when pressed twice in a text field. Insert a period (.) in a web address field or an email address field. Insert an at sign (@) in an email address field. Move down a screen in the browser or message list. Press the Shift key and the Space key to move up a screen. Turn on or turn off the speakerphone during a call. Open the symbol list.

Speakerphone Symbol

Typing indicators
Typing indicators appear in the upper-right corner of the BlackBerry® device screen. Indicator Description These indicators indicate that the BlackBerry device is in Alt mode. To enter this mode, users press the Alt key. On BlackBerry devices with a SureType® keyboard, these indicators indicate that the BlackBerry device is in multi-tap input mode. These indicators indicate that the BlackBerry device is in number lock mode. On BlackBerry devices with a QWERTY keyboard, users press the Alt key and the Left Shift key. On BlackBerry devices with a SureType keyboard, users press the Alt key and the Shift key. On BlackBerry devices with a touch screen, users press and hold the 123 key until the lock indicator appears on the key. These indicators indicate that the BlackBerry device is in Shift mode. To enter this mode, users press the Shift key. This indicator indicates the typing input language.

17

UI Guidelines

Shortcut keys
On BlackBerry® devices without a touch screen, shortcut keys provide users with direct access to common actions within an application. Users can use shortcut keys for common actions such as composing an email message or adding a browser bookmark. Users can also use shortcuts to access buttons in a dialog box. Application menu items do not have shortcut keys assigned to them. After users open the menu, they can press the key for the first letter of a menu item to highlight the menu item. To initiate the action associated with a highlighted menu item, users press the Enter key or click the trackwheel, trackball, or trackpad. If multiple menu items have the same first letter, users can continue pressing the key for the letter until they highlight the menu item that they want.

Best practice: Implementing shortcut keys
• Assign and document shortcut keys for common actions. For example, on BlackBerry® devices with a QWERTY keyboard, users can press "N" to move to the next date in a message list. Users can press "P" to move to the previous date in a message list. Use shortcuts keys to increase efficiency for users but not as a primary means for users to interact with your application. Users should be able to access all available actions from the menu. Localize shortcut keys where possible for the French, Italian, German, Spanish, Hungarian, Czech, and Polish languages. Use English shortcut keys for all other languages. In dialog boxes, assign shortcut keys to all buttons. Underline the character that is associated with the shortcut key. In wizards, do not assign shortcut keys to buttons. Avoid creating shortcut keys for destructive actions, actions that cannot be undone easily, or actions for which the consequences might be unclear. Use different shortcut keys for QWERTY keyboards and SureType® keyboards. For example, on QWERTY keyboards, users can press "T" to move to the top of a message list or web page. On SureType keyboards, users can press "1" to move to the top of a message list or web page. For screens, use the first or most memorable character in an action for the shortcut key. For example, in a message list, the shortcut key "R" represents "Reply" and the shortcut key "F" represents "Forward." In dialog boxes, use the first character in the button label as the shortcut key. Use the same shortcut keys that are used in other applications for similar actions where possible. Verify that custom shortcut keys do not overlap with existing reserved shortcut keys. For more information about existing shortcuts keys, visit http://na.blackberry.com/eng/support/docs/ to see the product documentation. Avoid assigning different actions to well-known shortcut keys.

• • • • •

Guidelines for choosing shortcut keys
• • • • • •

18

UI Guidelines

Cursors

Cursors
As users roll the trackwheel or trackball, or slide a finger on the trackpad, the cursor moves the focus to each control on the screen. The cursor takes on different shapes to indicate its current behavior. On web pages, users can roll the trackwheel to move vertically. Users can roll the trackball or slide a finger on the trackpad to move vertically and horizontally. As the cursor moves over controls such as links or text fields, the cursor changes to indicate the type of interaction that users can have with the control. Cursors do not appear as often on BlackBerry® devices with a touch screen. When users touch a control on the screen, the focus is set on that control. In some cases, as users touch controls such as links or text fields, a cursor appears to indicate the type of interaction that users can have with the control. Cursor arrow Purpose The arrow cursor indicates the position of the cursor on a web page. User interaction To move the cursor, users can perform the following actions: • • Roll the trackwheel or trackball. Slide a finger on the trackpad.

bar

The bar cursor indicates the position of the cursor in a list such as a menu or drop-down list.

To perform an action, users click the trackwheel, trackball, or trackpad. To highlight an item in the list, users can perform the following actions: • • • Roll the trackwheel or trackball up or down. Slide a finger up or down on the trackpad. Touch the touch screen.

hand

hourglass

The hand cursor indicates the position of the cursor when users pause on a link. On BlackBerry devices that use the Dimension theme, the hourglass cursor indicates that the BlackBerry device is saving information or performing

To open an item or initiate the action associated with the item, users click the trackwheel, trackball, trackpad, or screen. To follow the link, users click the trackwheel, trackball, or trackpad.

Users cannot perform any actions while the BlackBerry device displays this cursor.

19

UI Guidelines

Cursors

Cursor

Purpose garbage collection. This cursor also appears when users turn on their BlackBerry devices. On BlackBerry devices that use the Precision theme, the clock cursor indicates that the BlackBerry device is saving information or performing garbage collection. This cursor might also appear when users turn on their BlackBerry devices. The magnifying cursor indicates that users can zoom in to or out from a web page in Page view.

User interaction

clock

Users cannot perform any actions while the BlackBerry device displays this cursor.

magnifying

To move around the web page, users can perform the following actions: • • Roll the trackwheel or trackball. Slide a finger on the trackpad.

To zoom in to the web page, users click the trackwheel, trackball, or trackpad. caret The caret cursor indicates the position of the cursor in a text field. To zoom out from the web page, users press the Escape key. To move the cursor in a text field, users can perform the following actions: • • • • Type text in the field. Roll the trackwheel or trackball. Slide a finger on the trackpad. Click the trackball or trackpad to open the context menu if applicable.

To highlight text, users can perform the following actions: • • Press the Shift key and roll the trackwheel or trackball. Press the Shift key and slide a finger on the trackpad.

To highlight text on BlackBerry devices with a touch screen, users can perform the following actions:

20

UI Guidelines

Cursor

Purpose

User interaction • • Touch the screen in two locations. Touch the screen near the cursor to display an outlined box. This box is designed to help users reposition the cursor more easily. Press the Menu key and click Select. Drag a finger over the text to highlight it.

text

underscore

The text cursor indicates that the cursor is positioned over a text area. The underscore cursor indicates the position of the cursor when users highlight a link in an application other than the browser. Links can be for items such as phone numbers, web sites, and email addresses.

Depending on the design of web pages, users can click the trackwheel, trackball, or trackpad to perform actions. To perform additional actions, users can perform one of the following actions: • • Click the trackwheel, trackball, or trackpad. Click the touch screen.

To highlight a link character by character, users can perform one of the following actions: • • • • Press the Shift key and roll the trackwheel. Press the Shift key and roll the trackball horizontally. Press the Shift key and slide a finger horizontally on the trackpad. Touch the touch screen near the cursor to display an outlined box. Drag a finger over the text to highlight it.

Best practice: Implementing cursors
• • • • • Use the standard cursors and colors where possible. Where possible, inherit the visual style of the theme that users have selected. If your application does not inherit the visual style from the theme, try to provide a consistent experience for your users. Avoid hardcoding color values. The color values that you choose might not work with the theme that users have selected. Choose a highlight color that has high contrast and clearly implies focus (for example, white text on a blue background). Use the same highlight color for all controls. Avoid changing the font, font size, or font style for highlighted text or items.

21

UI Guidelines

Highlighting items

Highlighting items
In a text field, a caret cursor indicates that users can highlight text. In the browser, users can highlight text when their BlackBerry® devices are in Select mode. In Select mode, the cursor changes from the arrow cursor to the caret cursor.

In a list, users can highlight multiple items. The bar cursor indicates the position of the cursor. The primary highlight color identifies the active item, and the secondary color identifies the items that users have highlighted.

Action Highlight contiguous text or messages in a message list.

BlackBerry devices without a touch screen • •

BlackBerry devices with a touch screen To highlight contiguous text, press the Menu key and click Select. Drag a finger over the text. To highlight messages in a message list, touch the first and last item simultaneously.

Press the Shift key and roll the trackwheel • or trackball. Press the Shift key and slide a finger on the trackpad. •

22

UI Guidelines

Highlighting items

Action Perform additional actions after highlighting text.
Related topics Cursors, 19

BlackBerry devices without a touch screen Click the trackwheel, trackball, or trackpad.

BlackBerry devices with a touch screen Press the Menu key.

Best practice: Highlighting items
• On BlackBerry® devices with a trackball or trackpad, when users highlight text or messages in a message list, use the context menu to provide the most relevant actions that apply to the highlighted items. For example, if users highlight messages in a message list, they can use the context menu to file the messages. On BlackBerry devices with a touch screen, provide a context menu when users click an item that has a number of common actions associated with it (for example, a date separator in a message list or a contact name in a message). For example, if users click a contact in an email message, they can use the context menu to save a draft of the message. Verify that users can use the Escape key to remove the highlight from text or items. If users can highlight text, always provide a menu item for copying text. Likewise, provide a menu item for cutting the highlighted text when users can edit the text. Use the menu item for copying as the default menu item. Where possible, inherit the visual style of the theme that users have selected. If your application does not inherit the visual style from the theme, try to provide a consistent experience for your users. Choose a highlight color that has high contrast and clearly implies focus (for example, white text on a blue background). Use the same highlight color for all controls. Avoid changing the font, font size, or font style for highlighted text or items.

• • • • •

23

UI Guidelines

Screens

Screens
Application screens

4

Multiple screens can be open on a BlackBerry® device at one time, but users can view only one screen at a time. When multiple screens are open, they are organized in a stack. The screen at the top of the stack is the active screen. When an application displays a screen, the BlackBerry® Java® Virtual Machine pushes it to the top of the stack. When a screen closes, the BlackBerry Java Virtual Machine deletes the screen from the top of the stack and displays the next screen on the stack. The application redraws the screen as necessary. A screen typically has the following characteristics: Screen element nonscrolling title bar Description This bar appears at the top of the screen and can include a descriptive screen title and indicators such as the battery power indicator and wireless coverage indicator.

scroll arrows or bars

If content extends beyond the viewing area, scroll arrows or scroll bars appear. Vertical scroll arrows or scroll bars appear on the right side of the screen, and horizontal scroll bars appear at the bottom of the screen. Scroll bars do not interfere with text.

24

UI Guidelines

Application screens

Screen element context menu

Description A context menu contains a list of the most common available actions that users can perform within the current context. On BlackBerry devices with a trackball or trackpad, a context menu appears when users click the trackball or trackpad and there is no default action. The context menu appears at the bottom of a screen, centered horizontally. On BlackBerry devices with a touch screen, a context menu appears when users click an item that has a number of common actions associated with it (for example, a date separator in a message list or a contact name in a message). The context menu appears to the right of the highlighted item. If there is not enough space to the right, the context menu appears to the left of the highlighted item.

full menu

A full menu contains all the available actions for an application. To open a full menu, users press the Menu key. Full menus appear in the lower-left corner of the screen.

toolbar

On BlackBerry devices with a touch screen, a toolbar appears at the bottom of the screen. Toolbars provide users with access to common actions, such as composing an email message or adding a browser bookmark.

25

UI Guidelines

Application screens

Screen element

Description

portrait and landscape view

On BlackBerry devices with a touch screen, users can switch between portrait view and landscape view by turning the device sideways.

Landscape view

Portrait view

Related topics Menus, 56

26

UI Guidelines

Application screens

Best practice: Designing application screens
• • • • • • Delete your application screen from the stack when users close a screen. If you use standard components, the BlackBerry® device automatically deletes screens from the stack. Set appropriate focus when your application screens open. Typically, you should set the focus on the control that users are most likely to use first. If this control is not near the top of the screen, consider changing the layout of the screen. Repaint the screen judiciously. Your BlackBerry device application should not perform unnecessary screen repaints. Use a limited number of nested layouts. The more nested layouts that you use to build your screen, the longer it takes for the BlackBerry device to render the screen. Verify that your application receives and loses focus appropriately. Support multiple screen resolutions and sizes. If you use standard UI fields to build your screens, the BlackBerry device automatically renders content to fit the screen. Otherwise, you might need to include the necessary logic to determine the screen size at runtime. Always test your application on different BlackBerry device models and screen sizes. Include a Close menu item that users can use to close the application. When users click the menu item or press the Escape key, the application should close. If you use standard components, the Close menu item appears in the menu automatically. Prompt users with a dialog box to save any unsaved data before closing a screen. Where possible, inherit the visual style of the theme that users have selected. If your application does not inherit the visual style from the theme, try to provide a consistent experience for your users. Avoid hardcoding color values. The color values that you choose might not work with the theme that users have selected. Use a vertical layout for your application screens and include scroll arrows or a scroll bar to allow users to scroll up or down the screens. If you use standard components, scroll arrows are inherited. If you build a custom scroll bar, try to be consistent with other applications on the BlackBerry device. On BlackBerry devices with a touch screen, verify that the screens display correctly in both portrait and landscape view. Include a title bar that describes the content of the screen. Consider including the date, time, battery power level indicator, and wireless coverage indicator in the banner of the application, especially if the application requires a wireless connection. Display the most important information at the top of the screen. For example, for contact information, display the name first, followed by the email address and phone numbers. Display a field such as the Notes field last. Limit the number of controls that appear on the screen at one time. Place all actions that the user can perform in the full menu for the application. Use line separators on a screen to separate controls or to indicate a group of controls. Consider localization requirements as early in the design process as possible. Localization can affect the layout of screens.

• • • • • • • • • • • • •

Guidelines for layout

Related topics Display specifications for BlackBerry devices, 7 Default themes and dimensions for screens and application icons on BlackBerry devices, 73 Themes, 65

27

UI Guidelines

Banner

Common actions on application screens
Users can perform the following common actions on screens: Action Move around the screen. Open the menu. Invoke an action in the menu. Switch applications. Close an application. Return to the Home screen without closing the application screen. User interaction • • • • • • • • Roll the trackwheel or trackball. Slide a finger on the trackpad or touch screen. Click the trackwheel. Press the Menu key. Click the item. When an item is highlighted in the menu, press the Menu key. Press the Alt key and the Escape key. Hold the Menu key.

Click Close in the menu. Press the End key.

Banner
The banner, or the device status section of the Home screen, displays the following information: • • • • • • • date and time wireless service provider battery power indicator wireless coverage indicator sound profile indicator status indicators, such as the alarm indicator, missed call count indicator, and unopened message count indicator third-party indicators

The theme that users have selected on their BlackBerry® devices determines the design of the Home screen banner.

28

UI Guidelines

Banner

Medium or small banners appear in the title bar of some applications. For example, in a message list, the medium banner displays the time, battery power indicator, and wireless coverage indicator.

Best practice: Implementing banners
• Choose a medium banner or small banner depending on how much of the screen you want to reserve for displaying the application screens. For example, consider displaying a small banner for the media application or the browser application to display more content on the screen. Where possible, inherit the visual style of the theme that users have selected. If your application does not inherit the visual style from the theme, try to provide a consistent experience for your users. Include the date, time, battery power indicator, and wireless coverage indicator in the banner, especially if the application requires a wireless connection. Add an indicator to the Home screen banner if necessary to provide a notification or to communicate important information about the status of your application. For example, include an unopened message indicator and count to provide users with new message information. Consider the legibility of the text. Text becomes illegible when it appears on a background of a similar color or brightness.

• • •

Related topics Themes, 65

29

UI Guidelines

Dialog boxes

Dimensions for banners on BlackBerry devices
BlackBerry device model BlackBerry® 7100 Series BlackBerry® 8700 Series BlackBerry® 8800 Series BlackBerry® Bold™ Series BlackBerry® Curve™ 8300 Series BlackBerry® Curve™ 8350i smartphone BlackBerry® Curve™ 8500 Series BlackBerry® Curve™ 8900 smartphone BlackBerry® Pearl™ 8100 Series BlackBerry® Pearl™ Flip 8200 Series BlackBerry® Storm™ 9500 Series Large banner size 240 x 65 pixels 320 x 50 pixels 320 x 50 pixels 480 x 75 pixels 320 x 50 pixels 320 x 51 pixels Medium banner size 240 x 32 pixels 320 x 32 pixels 320 x 32 pixels 480 x 48 pixels 320 x 32 pixels 320 x 36 pixels Small banner size 240 x 17 pixels 320 x 17 pixels 320 x 17 pixels 480 x 28 pixels 320 x 17 pixels 320 x 20 pixels

480 x 75 pixels 240 x 65 pixels 240 x 73 pixels 360 x 96 pixels

480 x 48 pixels 240 x 32 pixels 240 x 55 pixels • • portrait view: 360 x 48 pixels landscape view: 480 x 48 pixels

480 x 28 pixels 240 x 17 pixels 240 x 28 pixels • • portrait view: 360 x 24 pixels landscape view: 480 x 24 pixels

BlackBerry® Tour™ 9600 Series

480 x 75 pixels

480 x 48 pixels

480 x 28 pixels

Dialog boxes
Use dialog boxes to perform the following actions: • • • Prompt users for information that is required to complete a user-initiated task. Inform users of urgent information or the status of important actions. Warn users of unexpected or potentially destructive conditions or situations.

Dialog boxes are modal; they interrupt the normal operation of the BlackBerry® device and are pushed to the top of the stack. A dialog box includes an indicator that indicates the type of dialog box, a message, and buttons that allow users to perform an action. The size of the dialog box depends on the size of the BlackBerry device screen. Scroll arrows appear if necessary. The theme that users select on their BlackBerry device determines the visual style of the dialog box.

30

UI Guidelines

Dialog boxes

Best practice: Implementing dialog boxes
• • • • Always use buttons as controls in dialog boxes. Avoid using links or other controls. Use a standard indicator that is appropriate for the type of dialog box. Avoid using multiple indicators in a dialog box. Include scroll arrows if your dialog box message or buttons cannot be displayed fully on the dialog box. If you use standard components, scroll arrows appear automatically if necessary. Always allow users to use the Escape key to close a dialog box. Avoid implementing another action when users press the Escape key to close a dialog box. For example, if a dialog box allows users to change a setting, do not implement any changes when users press the Escape key. If necessary, display the dialog box at a later time. If users press the End/Power key when a dialog box appears on an application screen, display the Home screen or application list. If users return to the application, display the dialog box again. Where possible, inherit the visual style of the theme that users have selected. If your application does not inherit the visual style from the theme, try to provide a consistent experience for your users. Choose a highlight color that has high contrast and clearly implies focus (for example, white text on a blue background). Use the same highlight color for all controls. Avoid hardcoding color values. The color values that you choose might not work with the theme that users have selected. Center the dialog box on the screen. If you use standard components, the BlackBerry® device automatically centers the dialog box. Create dialog boxes that are 90% or less of the width and height of the screen. If you use standard components, the BlackBerry device automatically calculates the appropriate size for dialog boxes. Center the dialog box indicator vertically with the dialog box message. Display messages to the right of the indicator and above any buttons. Place buttons for confirmation actions first. For example, place "Save" before "Discard" or "Cancel." Center buttons horizontally in dialog boxes. Place buttons vertically in the dialog box. The vertical layout allows buttons to expand to accommodate localized button labels.

• • • • • • • • • • •

Guidelines for layout

Guidelines for messages

31

UI Guidelines

Dialog boxes

• • • • • • • • • • • • • • • •

Be specific. If possible, use one short sentence to clearly state the reason for displaying the dialog box and the actions that can dismiss it. Use complete sentences for messages where possible. Use vocabulary that users understand. For example, use "The file could not be saved because the media card is full" instead of "Error writing file to disk." Use positive language where possible and avoid blaming the user. Never write messages that blame users for errors or unexpected conditions. Instead, focus on the actions that users can take to resolve the issue. Use the second person (you, your) to refer to users. Use sentence case capitalization. Avoid using exclamation points (!) in messages. Avoid using an ellipsis (...) in messages unless you are indicating progress (for example, "Please wait..."). For the default button, use the button that users are most likely to click. Avoid using a button that is associated with a destructive action as the default button. An exception to this rule are those cases where users initiate a minor destructive action (such as deleting a single item) and the most common user action is to continue with the action. Avoid using more than three buttons in a dialog box. If there are more than three, consider using an application screen instead with option buttons. On BlackBerry devices with a trackwheel, trackball, or trackpad, provide shortcut keys for buttons. Typically, the shortcut key is the first letter of the button label. Use clear, concise labels. Use one-word labels where possible. The size of a button changes depending on the length of the label. If a label is too long, an ellipsis (...) appears to indicate that the text is truncated. If you do use a label with multiple words, use sentence case capitalization. Avoid using the labels "Yes" and "No." Use verbs that describe the associated action (for example, "Cancel," "Delete," "Discard," or "Save"). This approach helps users quickly and easily understand what happens when they click the button. If necessary, include more descriptive text elsewhere on the screen (for example, in an application message). Avoid using symbols or graphics in labels. Avoid using punctuation in labels. Use an ellipsis in a button label to indicate that additional information is required before the associated action can be performed.

Guidelines for buttons

Related topics Themes, 65 Buttons, 41

Alert dialog boxes
Use alert dialog boxes to notify users of a critical action such as turning off the BlackBerry® device or an error such as typing information that is not valid. An exclamation point (!) indicator appears in an alert dialog box. To close an alert dialog box, users can click OK or press the Escape key.

32

UI Guidelines

Dialog boxes

Best practice: Implementing alert dialog boxes
• • • • Include only an OK button. This button should be highlighted by default. When users click the button, the dialog box should close. To provide users with multiple buttons, such as an OK button and a Cancel button, use an inquiry dialog box instead. Allow users to press the Escape key to close the dialog box. Use a concise, descriptive message to explain the situation that prompted the alert. Avoid phrasing messages as questions. Use statements instead.

Information dialog boxes
Use information dialog boxes to provide feedback about a user action. Information dialog boxes close automatically after a predefined period of time, or users can close the dialog box by pressing the Escape key. An information indicator appears in an information dialog box.

Best practice: Implementing information dialog boxes
• • • • Do not include buttons in information dialog boxes. To provide buttons, use another type of dialog box. Allow users to press the Escape key to close the dialog box. Set an appropriate timeout period for the dialog box based on the amount of time that is required for users to read the message. If users require more than 10 seconds to read the message, consider using another type of dialog box. If you do not want to allow users to perform any other actions while the dialog box appears on the screen, use a status dialog box instead.

33

UI Guidelines

Dialog boxes

Avoid phrasing messages as questions. Use statements instead.

Input dialog boxes
Use an input dialog box when users must specify information such as a date or file name. After users type the required information, they can press the Enter key to close the dialog box and save their changes. To close the dialog box without saving changes, users can press the Escape key. You can include buttons on this type of dialog box.

Best practice: Implementing input dialog boxes
• • • • • • Use a standard cursor that is appropriate for the type of text that is required from users. Allow users to press the Escape key to close the dialog box. Use a concise, descriptive phrase for field labels. Avoid stating in the message that users must provide information. Use the labels to imply that action is required. Avoid using prompt text in fields. Punctuate field labels with a colon (:).

Inquiry dialog boxes
Use inquiry dialog boxes when users must confirm an action before continuing. A question mark (?) indicator appears in an inquiry dialog box.

34

UI Guidelines

Dialog boxes

Best practice: Implementing inquiry dialog boxes
• • • • • Use a concise, descriptive question for the message. Always prompt users with an inquiry dialog box to save their changes when they attempt to close a screen with unsaved changes. Include a Cancel button so that users can close the dialog box without making changes. Use verbs for labels that describe the associated action (for example, "Cancel," "Delete," "Discard," or "Save"). If necessary, include more descriptive text elsewhere on the screen (for example, in an application message). Avoid using the labels "Yes" and "No."

Picker dialog boxes
You can use picker dialog boxes to help users choose an item from a list easily. Type of picker File Description This picker allows users to browse for files on their BlackBerry® devices.

Location

This picker allows users to choose a location from a list that you define. For example, you can allow users to choose their GPS location or a previously selected location.

Date

This picker allows users to choose a specific day, month, or year. For example, you can allow users to choose a month and year to specify when their credit card expires.

35

UI Guidelines

Dialog boxes

Type of picker

Description

Time

This picker allows users to choose a specific hour, minute, or second.

Best practice: Implementing picker dialog boxes
Use the FilePicker, LocationPicker, and DateTimePicker classes to create picker dialog boxes. For more information about creating picker dialog boxes, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide.

Guidelines for file picker dialog boxes
• • Allow users to start browsing from an appropriate default folder. If the application does not have a default folder and a media card is inserted in the BlackBerry device, allow users to start browsing from the root folder. If the application supports different file types and a media card is inserted in the BlackBerry device, allow users to start browsing from /Media Card/BlackBerry. If the application supports different file types and a media card is not inserted in the BlackBerry device, allow users to start browsing from /Device Memory/home/user.

Reminder dialog boxes
Use reminder dialog boxes to remind users of time-sensitive activities such as appointments or tasks. Include a Snooze button that users can click to receive another reminder at a later time and a Dismiss button to dismiss the reminder. To dismiss the reminder, users press the Escape key. To close a reminder dialog box, users click a button or press the Escape key. Reminder dialog boxes include an indicator that represents the application that generated the reminder.

36

UI Guidelines

Progress indicators

Status dialog boxes
Use status dialog boxes to indicate to users that a process is occurring. When a status dialog box appears, users cannot perform other actions. Status dialog boxes include a clock indicator for the Precision theme or an hourglass indicator for the Dimension theme.

Best practice: Implementing status dialog boxes
• • • • Use a status dialog box when you cannot determine the duration of an operation. If you can determine the duration of the operation, use a progress bar instead. Always indicate progress when the operation takes more than 1 second to complete. Do not include buttons in a status dialog box. If users can perform other actions when the status dialog box appears, consider using another type of dialog box. Punctuate the dialog box message with an ellipsis (...).

Progress indicators
Use progress indicators to indicate the status of an operation. There are two types of progress indicators: • Use definite progress indicators when you can determine the duration of an operation. Definite progress indicators include a label to indicate what the operation is and a horizontal bar that fills from left to right as an operation progresses. A percentage appears in the bar to indicate how much of the operation is complete. In the browser, progress indicators also

37

UI Guidelines

Progress indicators

indicate the number of kilobytes out of a total number of kilobytes that a BlackBerry® device has downloaded. To hide a definite progress indicator, users press the End key. If users press the End key, the operation continues, but users can perform other tasks at the same time. Use an indefinite progress indicator when you cannot determine the duration of an operation. You can indicate progress using a status dialog box or by using an animated clock cursor for the Precision theme or an hourglass cursor for the Dimension theme. Users cannot perform any other actions while an application displays an indefinite progress indicator.

Definite progress indicator

Indefinite progress indicator

Best practice: Implementing progress indicators
• • • • Always indicate progress when an operation takes more than 1 second to complete. Use a definite progress indicator when you can determine the duration of an operation. Use an indefinite progress indicator when you cannot determine the duration of an operation. Use the GaugeField class to create progress indicators. For more information about creating progress indicators, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. Always allow users to use the End key to hide a definite progress indicator. Provide useful progress information. For example, if users are loading a web page, indicate the amount of data that their BlackBerry® device has loaded (for example, 8 KB of 10 KB). If they are downloading applications to their device, indicate the progress as a percentage. Be as accurate as possible with the progress information. To indicate indefinite progress, use a clock icon for the Precision theme or an hourglass icon for the Dimension theme. Use a status dialog box to indicate indefinite progress when you can provide a meaningful message about the operation that is in progress. To indicate garbage collection, use the animated clock cursor for the Precision theme or an animated hourglass cursor for the Dimension theme. Where possible, inherit the visual style of the theme that users have selected. If your application does not inherit the visual style from the theme, try to provide a consistent experience for your users.

• •

• •

Guidelines for labels

38

UI Guidelines

Wizards

• • •

Use a concise, descriptive label (for example, "Loading data" or "Building an application list"). Use sentence case capitalization. Punctuate the dialog box message with an ellipsis (...).

Related topics Status dialog boxes, 37

Wizards
Use a wizard to simplify a series of complex steps or to order tasks that have dependencies, such as the steps that users must perform to set up an application. Wizards can help users make decisions if they do not have the background knowledge to complete a task.

Best practice: Designing wizards
• • • • • • • • • • • • Use wizards judiciously. Instead of designing a wizard, try to make your application as user friendly as possible. Include a table of contents in wizards. The table of contents should provide users with a list of all the steps or screens in the wizard. If users close a wizard, they can use the table of contents to return to the appropriate location in the wizard. Use the title bar to identify the current screen. Center the title horizontally in the title bar. Include instructions for users at the top of each wizard screen. Include default values or settings for controls where possible. Use "Next" as the default menu item in the full menu and the context menu. Avoid including “Select” in the context menu. Users can accidentally remain in Select mode. Allow users to move the focus to the UI controls on the screen. Avoid allowing users to move the focus to a read-only text area. If you are designing for the Dimension theme, include a progress indicator that indicates the current step out of the total number of steps. If you are designing for the Precision theme, do not include a progress indicator. Save changes as the user progresses through each screen of a wizard. Include a Next button to allow users to move to the next screen in a wizard. This button should be selected by default. Do not include a Next button on the last screen of a wizard. Include a Back button to allow users to move to the previous screen in a wizard. Do not include a Back button on the first screen of a wizard.

Guidelines for buttons

39

UI Guidelines

Wizards

• •

Include a Finish button on the last screen of a wizard. Include a Close button to close the wizard. When users close a screen in the wizard, the application should save any changes and return users to the table of contents screen.

40

UI Guidelines

Controls

Controls
Buttons

5

Use buttons to allow users to perform an action from a dialog box. Menus typically include actions that are associated with a screen. Users can perform the following actions with a button: Action Highlight a button. Perform an action. BlackBerry devices without a touch screen • • Roll the trackwheel or trackball. Slide a finger on the trackpad. BlackBerry devices with a touch screen Touch the button lightly. Click the screen.

Click the button or press the Enter key.

Best practice: Implementing buttons
• Avoid using buttons on an application screen. To provide actions that are associated with a screen, use the application menu instead where possible. The menu is available to users immediately, regardless of the position of the cursor on the screen. Buttons are static and require users to highlight the button to perform the associated action. If you use buttons, include menu items for the actions in the application menu as well. Use check boxes or option buttons for options such as turning on or turning off a feature where possible. Use the ButtonField class to create buttons. For more information about creating buttons, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. For the default button, use the button that users are most likely to click. Avoid using a button that is associated with a destructive action as the default button. Use clear, concise labels.

• •

Guidelines for labels

41

UI Guidelines

Check boxes

• • • •

Use one-word labels where possible. The size of a button changes depending on the length of the label. If a label is too long, an ellipsis (...) appears to indicate that the text is truncated. If you do use a label with multiple words, use sentence case capitalization. Use verbs for labels that describe the associated action (for example, "Cancel," "Delete," "Discard," or "Save"). If necessary, include more descriptive text elsewhere on the screen (for example, in an application message). Avoid using the labels "Yes" and "No." Avoid using punctuation in a label. Use an ellipsis in a button label to indicate that users must perform another action after they click the button.

Check boxes
Use check boxes for options that users can turn on or turn off. Users can perform the following action with a check box: Action Select a check box. BlackBerry devices without a touch screen Press the Space key or click the trackwheel, trackball, or trackpad. BlackBerry devices with a touch screen Click the screen.

Best practice: Implementing check boxes
• • Use check boxes when users can select multiple options. Use the CheckboxField class to create check boxes. For more information about creating check boxes, see the API reference for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. Do not start an action when users select a check box. For example, do not open a new screen. Align check boxes vertically. Group and order check boxes logically (for example, group related options together or include the most common options first). Avoid ordering check boxes alphabetically; alphabetical order is language specific.

• • •

Guidelines for labels

42

UI Guidelines

Drop-down lists

• • • • •

Use clear, concise labels. Verify that the label clearly describes what occurs when users select the check box. Use positive labels where possible. For example, if users have the option of turning on or turning off a feature, use "turn on" instead of "turn off" in the label. Place labels on the right side of check boxes. Use title case capitalization. Do not use end punctuation.

Drop-down lists
Use drop-down lists to provide a set of mutually exclusive values. Users can perform the following action with a drop-down list: Action Click a value from a drop-down list. BlackBerry devices without a touch screen Press the Space key or click the trackwheel, trackball, or trackpad. BlackBerry devices with a touch screen Click the screen.

Best practice: Implementing drop-down lists
• • Use a drop-down list for two or more choices when space is an issue. If space is not an issue, consider using option buttons instead so that users can view the available options on the screen. Use the ObjectChoiceField class to create drop-down lists. For more information about creating drop-down lists, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. For the default value, use the value that users are most likely to click. Use the highlighted option as the default focus when users scroll through the list. If users are not required to click a value, include a "None" value in the drop-down list. Always place the "None" value at the top of the list.

• • •

43

UI Guidelines

Labels

Group and order values logically (for example, group related values together or include the most common values first). Avoid ordering values alphabetically; alphabetical order is language specific. Use clear, concise labels for drop-down lists and for the values in a drop-down list. Verify that the label clearly describes what occurs when users click the value. The width of the drop-down list changes based on the length of the value labels. If a label is too long, an ellipsis (...) appears to indicate that the text is truncated. Place the label on the left side of a drop-down list. Use title case capitalization for drop-down list labels and for the value labels in a drop-down list. Punctuate labels for drop-down lists with a colon (:).

Guidelines for labels
• • • •

Labels
Use a label to display text that identifies a control.

Best practice: Implementing labels
• Use the LabelField class to create labels. For more information about creating labels, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. Use clear, concise labels. Group and order labels logically (for example, group related items together or include the most common items first). Avoid ordering values alphabetically; alphabetical order is language specific. Use title case capitalization. Punctuate the label with a colon (:).

• • • •

Lists
Use a list to display items that users can highlight and open. Users can perform the following actions in a list:

44

UI Guidelines

Option buttons

Action

BlackBerry devices without a touch screen Roll the trackwheel or trackball. Slide a finger on the trackpad.

BlackBerry devices with a touch screen Touch the item lightly. Click the screen.

Highlight an item in the • list. •

Open an item in the list. Click the item or press the Enter key.

Best practice: Implementing lists
• Use the ListField class to create lists. For more information about creating lists, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide.

Option buttons
Use option buttons to indicate a set of mutually exclusive but related choices. Users can perform the following action with option buttons: Action BlackBerry devices without a touch screen BlackBerry devices with a touch screen Click the screen.

Select an option button. Press the Space key or click the trackwheel, trackball, or trackpad.

Best practice: Implementing option buttons
• • Use option buttons for two or more choices when space is not an issue. If space is an issue, consider using a drop-down list instead. Use the RadioButtonField class to create option buttons. For more information about creating option buttons, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide.

45

UI Guidelines

Search fields

• • • •

Verify that the content for option buttons remains static. Content for option buttons should not change depending on the context. Do not start an action when users select an option button. For example, do not open a new screen. Align option buttons vertically. Group and order values logically (for example, group related option buttons together or include the most common values first). Avoid ordering option buttons alphabetically; alphabetical order is language specific. Use clear, concise labels. Verify that the label clearly describes what occurs when users select the option button. If the labels are too long, they wrap. Place labels on the right side of option buttons. Use title case capitalization. Do not use end punctuation.

Guidelines for labels
• • • •

Search fields
Use search fields to allow users to search for items in an application. Several BlackBerry® device applications include search fields. For example, in the task list, users can use a search field to search for specific tasks. As users type text in a search field, the application searches for and displays items that begin with the search text. If users type multiple words in the search field, the application displays results that match both words. For example, if users type "ca ba", the application returns all items with a word that begins with "ca" and a word that begins with "ba" (such as "call back"). Users can perform the following actions in a search field: Action Open a highlighted item in the search results. Delete the text in a search field. BlackBerry devices without a touch screen Press the Enter key or click the trackwheel, trackball, or trackpad. Press the Escape key. BlackBerry devices with a touch screen Click the screen.

Press the Escape key.

46

UI Guidelines

Spin boxes

To help users type a specific value quickly, you can create a field that supports autocompletion. As users type, a list of suggested values appears in a drop-down list. Users can click a value or continue typing to restrict the values in the list.

Best practice: Implementing search fields
• • Provide a search field when you have a constrained list of items. Use the KeywordFilterField class to create search fields. For more information about creating search fields, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. Use the AutoCompleteField class and the BasicFilteredList class to create autocomplete fields. For more information about creating autocomplete fields, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. Allow users to use the Escape key to delete search text that they type. Set the default focus to the search field and the first item in the list. Display items in the search results that contain a word that begins with the typed search text. Do not assign shortcut keys for a screen that includes a search field. If you want to use shortcut keys and you have a constrained list of items, provide alternative search functionality. For example, users can search for messages in a message list by pressing S or using the menu. Place a search field in the title bar of an application screen. Do not make search fields case sensitive. Use the label "Find:" for the search field. Do not include prompt text in the search field.

• • • •

• • • •

Guidelines for labels

Spin boxes
Use a spin box to allow users to choose an item from an ordered list easily. For example, use spin boxes to allow users to find a number or to change the day of the week.

47

UI Guidelines

Spin boxes

Action Find an item in the list.

BlackBerry devices without a touch screen • •

BlackBerry devices with a touch screen

Slide a finger up or down quickly. Roll the trackball up or down. Slide a finger up or down on the trackpad. Click OK. Touch the spin box.

Choose an item from the Click the trackball or trackpad. list. Move to another spin • Roll the trackball to the left or right. box. • Slide a finger to the left or right on the trackpad.

Best practice: Implementing spin boxes
• • • • Use spin boxes for a list of sequential items. Use drop-down lists for non-sequential items or items with irregular intervals. For a short list of non-sequential items, you can use a spin box to provide a more interactive experience for users. Avoid using a spin box if several other controls appear on the screen. Use the SpinBoxField class and the SpinBoxFieldManager class to create spin boxes. For more information about creating spin boxes, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. Add spin boxes to dialog boxes instead of screens where possible. On BlackBerry devices with a touch screen, users need to click OK to choose an item from the list. When users highlight a spin box, display three to five items vertically. Use an identifiable pattern for the sequence of items (for example, 5, 10, 15) so that users can estimate how much they need to scroll to find the target item. Avoid making users scroll horizontally to view multiple spin boxes. If necessary, separate spin boxes into multiple fields. If the text in a spin box is too long, use an ellipsis (...).

• • • • •

48

UI Guidelines

Text fields

Text fields
Users can use a text field to type text. Type of text field email date and time Description Users can insert an at sign (@) or a period (.) in an email address field by pressing the Space key. On BlackBerry® devices with a trackwheel or trackball, users can change the date or time using the keyboard or by rolling the trackwheel or trackball vertically. On BlackBerry devices with a trackpad, users can change the date or time using the keyboard or by sliding a finger vertically on the trackpad. On BlackBerry devices with a touch screen, users can change the date or time by clicking the Date or Time field and sliding a finger up or down. On BlackBerry devices without a touch screen, when users type in a number field, the BlackBerry device switches to number lock mode so that users do not need to press the Alt key to type numbers. On BlackBerry devices with a touch screen, when users need to type in a number field, the number keyboard appears. When users type in a password field, asterisks (*) appear instead of text. Users cannot cut, copy, or paste text or use AutoText in password fields. On BlackBerry devices with SureType® technology, multi-tap is the default typing input method in password fields. On BlackBerry devices without a touch screen, when users type in a phone number field, the BlackBerry device switches to number lock mode so that users do not need to press the Alt key to type numbers. You can also allow users to perform the following actions in phone number fields: • • • • • Type the plus sign (+) for international phone numbers. Type formatting characters such as the minus sign (-), period (.), parentheses (()), and spaces. Type a number sign (#) or an asterisk (*). Indicate a pause by typing a comma (,) or indicate a wait by typing an exclamation point (!). Indicate an extension by pressing the Alt key and pressing E, X, or T.

number

password

phone number

On BlackBerry devices with a touch screen, when users need to type in a phone number field, the number keyboard appears. You can also allow users to perform the following actions in phone number fields:

49

UI Guidelines

Tree views

Type of text field

Description • • • Type a number sign (#) or an asterisk (*). Indicate a pause or an extension by holding the asterisk (*) key. Indicate a wait or an extension by holding the number sign (#) key.

text

In text fields, users type text. Users can cut, copy, and paste text in text fields. When the cursor reaches the end of a line of text, the text wraps to the next line. In text fields, BlackBerry devices can also turn telephone numbers, web pages, and email addresses into links automatically. Users can insert a period (.) in an address field by pressing the Space key.

web address
Related topics Keyboard, 12

Best practice: Implementing text fields
• Use the RichTextField class to create text fields. For more information about creating text fields, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. Choose a type of text field based on what you expect users to type. Using the most appropriate text field is important so that the appropriate typing indicator appears on the screen when users type text. For example, when users type text in a phone number field, the number lock indicator appears in the upper-right corner of the screen. The field that you choose also affects the default typing input method for the field on BlackBerry devices with SureType® technology. Use or extend existing fields instead of creating custom fields where possible so that fields inherit the appropriate default behavior. Set an appropriate focus. Where possible, set the focus to the field that users are most likely to use first. Use prompt text only when space on a screen is limited and you cannot include a label or instructional text. Prompt text appears in the field and disappears when users type. Use concise, descriptive labels. Avoid labels that wrap. Use title case capitalization. Punctuate labels for fields with a colon (:). If you use prompt text, keep it concise. Use sentence case capitalization.

• • •

Guidelines for labels
• • • •

Tree views
Use a tree view to display objects, such as folders, in a hierarchical manner.

50

UI Guidelines

Tree views

Objects in the tree view are nodes. The highest node is the root node. A node in the tree can have child nodes under it. A node that has a child is a parent node. Users can perform the following action in a tree view: Action BlackBerry devices without a touch screen BlackBerry devices with a touch screen Click the screen.

Expand or collapse an Press the Space key or click the trackwheel, object with a plus sign trackball, or trackpad. (+) or minus sign (-) in a hierarchy .

Best practice: Implementing tree views
• Use the TreeField class to create tree views. For more information about creating tree views, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. On BlackBerry devices with a trackball or trackpad, provide a context menu if users can perform multiple actions when they click a parent node. For example, when users click a folder that contains subfolders and files, a context menu should appear that allows users to either expand the folder or view the files. Include a root node only if users need the ability to perform actions on the entire tree. Otherwise, exclude the root node.

51

UI Guidelines

Media

Media
Displaying images
Images can be displayed individually on the screen and as thumbnails in a grid, list, or carousel. Use the single image view to display a full-sized image. In this view, users can zoom in to and pan the image.

6

Use thumbnail images in a grid view to display several images at one time.

Use thumbnail images in a list view to help users find an image quickly. This view displays smaller images than the grid view and includes additional information, such as file name and date, for each image.

52

UI Guidelines

Displaying images

Use thumbnail images in a carousel view to allow users to browse through a related set of images such as featured items or a photo album. This view requires less space and allows other items to appear on the screen at the same time.

Action View more thumbnail images in a grid view or list view. View more thumbnail images in a carousel view.

BlackBerry devices without a touch screen • • • •

BlackBerry devices with a touch screen

Slide a finger up or down quickly. Roll the trackball up or down. Slide a finger up or down on the trackpad. Roll the trackball to the left or right. Slide a finger to the left or right on a trackpad. Slide a finger to the left or right quickly.

Best practice: Displaying images
Guidelines for displaying thumbnail images
• • • • • • • Use the same size for each thumbnail image in a particular view. Resize or crop images if necessary. If you must display the original image without cropping it, create a box that is the same size as the other images and place the box behind the image. Center-align the width or height of the image. Do not distort the image proportions. Always provide a single image view so that users can zoom in to and pan images. In a grid view, display four images in each row by default. Use the GridFieldManager to place images efficiently in a grid view. For more information about placing images in a grid view, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. If images take time to display, render the images in increments and provide placeholder images. Use the PictureScrollField class to display images in a carousel view. For more information about displaying images in a carousel view, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide.

Guidelines for displaying images in a single image view, grid view, or list view

Guidelines for displaying thumbnail images in a carousel view

53

UI Guidelines

Zooming and panning images

• • • • •

Avoid using a carousel view if the primary goal for users is to find a specific image. Use the grid view or the list view instead. Display three to seven images on the screen at one time. The number of images to include on one screen varies depending on the size of the thumbnail images and the width of the screen. Display the total number of images and indicate the current position of the highlighted image. If there are more images than can be displayed on the screen at one time, display a partial image or an arrow on the left or right side of the screen. If images have a specific order, provide users with an indication of the start and end of the set of images.

Related topics Best practice: Zooming, panning, and rotating images, 54

Zooming and panning images
Users can view the details of an image by zooming in to or out from images and panning images. Actions Zoom in to an image. BlackBerry devices without a touch screen Click the trackball or trackpad. BlackBerry devices with a touch screen • • • Click the screen. Tap the screen twice. Touch the screen in two locations to define the zoom region. Click the screen.

Zoom out from an image. Press the Escape key. Zoom back to the Press the Escape key twice. original image size. Pan an image. • Zoom in to the image. Roll the trackball. • Zoom in to the image. Slide a finger on the trackpad.

Press the Escape key. Press the Escape key twice. Zoom in to the image. Drag the image with a finger.

Best practice: Zooming, panning, and rotating images
• Use the ZoomScreen class to allow users to zoom in to and out from images. For more information about zooming in to and out from images, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. If users need to perform additional actions on a screen, such as open the context menu, use an alternate method of zooming in to images. If users zoom back to the original size of an image, provide a visual indication that the image that appears on the screen is the original image size. On BlackBerry devices without a touch screen, assign shortcut keys for zooming in to and out from an image. Where possible, allow users to press "I" to zoom in and "O" to zoom out.

• • •

54

UI Guidelines

Displaying information on a screen temporarily

Allow users to rotate images and view the original resolution for images.

Displaying information on a screen temporarily
You can display information on a screen temporarily using a transparent overlay or an opaque overlay. For example, when users view an image, you can display a description of the image along the top or bottom of the screen. You can define the amount of time that the information appears on a screen. Action Display information temporarily. BlackBerry devices without a touch screen • • • Move the trackball. Slide a finger on the trackpad. Press a key. BlackBerry devices with a touch screen • • Touch the screen. Press a key.

Before information displays on a screen temporarily

When information displays on a screen temporarily

Best practice: Displaying information on a screen temporarily
• • • Avoid displaying information or controls that users require to complete a task. Display only secondary information, such as descriptions or metadata, on a screen temporarily. To avoid distracting users from their primary task, display temporary information judiciously. Use the EyelidFieldManager class to display information temporarily. For more information about displaying information temporarily, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide.

55

UI Guidelines

Menus

Menus

7

Users use menus to perform many of the actions in an application. The full menu includes all the actions that users can perform in the application. When users press the Menu key, the full menu appears in the lower-left corner of the screen. Scroll arrows appear when more menu items are available but are not visible on the screen. Action BlackBerry devices without a touch screen Roll the trackwheel or trackball. Slide a finger on the trackpad. BlackBerry devices with a touch screen Touch and drag a menu item.

Move through the menu. • • Move to a menu item. Initiate the action associated with a menu item. Close the menu.

Press the first letter of the label for a menu item. — Press the Enter key or click the trackwheel, Click the menu item. trackball, or trackpad. Press the Escape key. Press the Escape key.

Best practice: Implementing menus
• • Always provide a full menu. Make sure that users can perform the following actions: • Press the Menu key to open a full menu. • Press the Menu key to initiate an action when a menu item is highlighted. • Press and hold the Menu key to open the dialog box for switching applications. • Press the Menu key to initiate an action when a button has focus in a dialog box on BlackBerry® devices with a touch screen. For the default menu item, use the menu item that users are most likely to click. The default item in the full menu should be the same as the default item in the context menu. Place the default menu item and other common menu items in the middle of the menu.

• •

56

UI Guidelines

Context menus

• • • • • • • • • • • •

Verify that the order of menu items is consistent with the order of menu items in other BlackBerry device applications. Group menu items according to common usage or common functionality, and where possible, test your groupings with users. Insert separators between menu item groupings. Do not place menu items for conflicting actions close together. For example, do not place a "Delete" menu item beside an "Open" menu item. Always include the "Switch application" and "Close" menu items. Place these menu items at the end of the menu. If you use standard components, these menu items are included automatically. On BlackBerry devices with a touch screen, create menu items that are 45 pixels high. Use concise, descriptive labels that are no longer than 12 characters. If a label is too long, an ellipsis (...) appears to indicate that the text is truncated. Use verbs for labels. Use title case capitalization for labels. Use an ellipsis in a menu item label to indicate that users must perform another action after they click the menu item. For example, if users click the "Go To Date..." menu item in the calendar, they must specify a date on the screen that appears. Avoid using symbols such as an asterisk (*) in labels. Verify that the menu item label matches the title of the associated screen. For example, if users click "Change Display Name" in the menu, then the title of the screen that appears should be "Change Display Name."

Guidelines for labels

Context menus
A context menu, or short menu, contains a list of the most common available actions that users can perform within the current context. On BlackBerry® devices with a trackball or trackpad, a context menu appears when users click the trackball or trackpad and there is no default action.

On BlackBerry devices with a touch screen, a context menu appears when users click an item that has a number of common actions associated with it (for example, a date separator in a message list or a contact name in a message).

57

UI Guidelines

Context menus

Best practice: Implementing context menus
• • • • • For the default menu item, use the menu item that users are most likely to click. The default item in the context menu should be the same as the default item in the full menu. Limit the number of menu items in a context menu to eight. Include a context menu when there is no clear default action. For example, when users open a message and click the trackball or trackpad, a context menu appears that includes the most common actions (file, reply, forward, and so on). Always include a "Full Menu" menu item at the end of a context menu so that users can open the full list of available actions. Include only menu items that apply to the highlighted item.

Guidelines for BlackBerry devices with a trackball or trackpad

Guidelines for BlackBerry devices with a touch screen

58

UI Guidelines

Text

Text
Fonts
The theme determines the default font for BlackBerry® devices. Users can change the font and point size.

8

A list of fonts and point sizes are available on BlackBerry devices and in the BlackBerry Smartphone Simulator. On the Home screen, click the Options icon. Click Screen/Keyboard.

Best practice: Fonts
• Inherit the font from the theme where possible. The default settings are designed to make text easy to read on each BlackBerry® device model. If you use another font or change the point size, verify that the text is readable on BlackBerry devices. Use the FontManager class to install custom fonts. For more information about installing custom fonts, see the API reference guide for the BlackBerry® Java® Development Environment and the BlackBerry Java Application UI and Navigation Development Guide. If you use multiple fonts in an interface, use fonts that are from the same font family. Use bold for screen titles, menu items, and dialog box text and buttons. Avoid using bold for emphasis. Avoid using fixed font sizes and small font sizes. Avoid using italic and underlined text. These font styles can make text difficult to read. Avoid anti-aliasing small fonts. Anti-aliasing smooths the font edges, but with very small fonts anti-aliasing can make the text appear blurry. Verify that all UI elements are clearly visible in low lighting conditions. Consider the legibility of the text. Text becomes illegible when it appears on a background of a similar color or brightness.

• • • • • • •

Related topics Themes, 65

Writing conventions
Best practice: Punctuation
• • • • Be consistent with your use of punctuation. Punctuate labels for lists, text fields, and search fields with a colon (:). Avoid using colons in button labels or menu item labels. Avoid using colons in titles except when a search field appears in the title bar (for example, "Find:" indicates a search field). Use an ellipsis (...) in a button label or menu item label to indicate that users must perform another action after they click the button or menu item (for example, "Go To Date..."). Ellipses also indicate truncated text.

59

UI Guidelines

Writing conventions

• • • • • •

Use double quotation marks ("") when you refer to an alias or user-defined name for an object. For example, when users delete a bookmark, the name of the bookmark appears in double quotation marks (for example, "Are you sure you want to delete "World News"?"). Avoid using single quotation marks (''). Use end punctuation for complete sentences. Insert one space following end punctuation if your application displays multiple sentences. Punctuate questions with a question mark (?). Avoid using exclamation points (!). Exclamation points can make users feel like you are shouting at them. Use a serial comma (,) to separate the last item in a series of three or more items (for example, "Synchronize your contacts, appointments, memos, and tasks").

Guidelines for using end punctuation

Best practice: Capitalization
For title case capitalization, capitalize the first word, the last word, and all other words except articles or prepositions with fewer than four letters. For sentence case capitalization, capitalize the first word and any other word that requires capitalization (such as a proper noun). • • • • Use sentence case capitalization for dialog box messages. Use title case capitalization for application names, screen titles, menu item labels, screen control labels, list values, and BlackBerry® device keys (for example, "press the Escape key"). Use title case capitalization for links unless the link is within a phrase or sentence. In this case, use the capitalization and punctuation of the text. Use title case capitalization for RIM product names (for example, "BlackBerry® Enterprise Server") unless otherwise noted in the RIM trademark and product name list. For more information about RIM product names, visit http://na.blackberry.com/ eng/legal/trademarks.jsp. Avoid using uppercase capitalization for emphasis. Uppercase capitalization can make users feel like you are shouting at them.

Best practice: Abbreviations and acronyms
Guidelines for abbreviations
• • • • • Write out abbreviations where possible unless space is an issue. For instance, use "for example" instead of "e.g.". Do not write out units of measure. Use abbreviations that users are familiar with. Use abbreviations consistently. Use acronyms that users are familiar with. Common acronyms include Wi-Fi®, PIN, MMS, and SMS.

Guidelines for acronyms

60

UI Guidelines

Writing conventions

• • • • • • • •

Write out uncommon acronyms where possible unless space is an issue. For example, consider using the acronym in the application menu instead of writing it out. If space is an issue and you use an uncommon acronym, provide the written out version of the term elsewhere in the UI or in the product documentation. Write out all BlackBerry® product names unless otherwise noted in the RIM trademark and product name list. For example, use "BlackBerry® Enterprise Server" instead of "BES." For more information about RIM product names, visit na.blackberry.com/eng/legal/trademarks.jsp. Use acronyms consistently. Use uppercase capitalization for acronyms unless the acronym is a trademark and includes lowercase letters. For example, use "PIN" or "Wi-Fi." Use the article (a, an) that applies to the pronunciation of the first letter of an acronym. For example, use "an MMS text message" or "a LAN." Use a hyphen when an acronym is part of a compound modifier unless the acronym is a trademark. For example, use "USBcompatible port" or "PGP® protected message." Pluralize acronyms as necessary. For example, use "ISPs." Avoid the possessive form with acronyms. For example, use "ISP network " instead of "ISP's network."

Product names and trademarks
RIM trademarks
• • • Do not alter trademarks (for example, use "BlackBerry" instead of "Blackberry" or "BB"). Do not use trademarks as nouns or verbs (for example, use "your BlackBerry device is . . ." instead of "your BlackBerry is . . ."). Do not use trademarks in plural or possessive form (for example, use "BlackBerry devices" instead of "BlackBerries").

To view a list of RIM trademarks, visit na.blackberry.com/eng/legal/trademarks.jsp.

BlackBerry smartphone product names
• • When you refer to a specific BlackBerry smartphone model, use the full product name at all instances (for example, use "BlackBerry® Curve™ 8900 smartphone" instead of "BlackBerry Curve"). When you refer generally to BlackBerry smartphones or BlackBerry enabled devices, use "device" at all instances.

To view a list of BlackBerry smartphone product names, visit http://na.blackberry.com/eng/legal/product_names.jsp.

BlackBerry product names or component names
• • Use the full product name or component name at all instances. When you refer to a specific version of a product, use the following format: <product name> version x.x.x (for example, "BlackBerry® Device Software version 4.6"). If space is an issue, use "v" instead of "version" (for example, "BlackBerry Device Software v4.6").

To view a list of BlackBerry product names, visit http://na.blackberry.com/eng/legal/product_names.jsp#tab_tab_products.

61

UI Guidelines

Writing conventions

Trademark symbols and UI elements
UI element buttons check boxes dialog boxes fields footers links logos messages option buttons screens tabs title bars Convention Do not include trademark symbols. Do not include trademark symbols. Include all appropriate trademark symbols at the first instance of a RIM trademark. Do not include trademark symbols. Include all appropriate trademark symbols. Do not include trademark symbols. If an application includes a logo with a trademark symbol, include the trademark symbol again at the first instance of the term on the screen. Include all appropriate trademark symbols at the first instance of a RIM trademark. Do not include trademark symbols. Include all appropriate trademark symbols at the first instance of a RIM trademark. Do not include trademark symbols. Include all appropriate trademark symbols. Include all appropriate trademark symbols again at the first instance of the product name on the screen, on the web page, in the dialog box, or in the wizard. Include all appropriate trademark symbols at the first instance of a RIM trademark. Include all appropriate trademark symbols at the first instance of a RIM trademark.

web pages wizards

Logos
BlackBerry logos
• Never typeset, recreate, or alter BlackBerry® logos.

Best practice: Terminology
• • • • Use terminology that your users are familiar with. Avoid technical jargon, programming terms, and colloquialisms (for example, use "wireless calendar synchronization" instead of "OTA calendar sync"). Be consistent with the use of terms in the UI and try to use terms that are consistent with other applications on the BlackBerry® device. Use terminology that is clear, natural, concise, and conversational.

62

UI Guidelines

Writing conventions

• • • •

Use everyday words when you can, especially if you are explaining a complex technical concept or action. Avoid repetition. Use American spelling. Avoid using symbols to replace text (for example, use "and" instead of an ampersand (&)).

Terms to avoid
Term to avoid abort (v) alert (n) alert (v) allow (v) carrier (n) company (n) corporation (n) corporate (adj) desktop (n) desktop computer (n) disable (v) e-mail (n) E-mail (n) email program (n) enable (v) ensure (v) erase (v) friendly name (n) hang (v) keypad (n) memory card (n) nuke (v) Term to use Use "end," "quit," or "stop" instead. Use "indicator" instead to refer to an indicator. Use "message" instead to refer to a message. Use "notify" instead. Use only to refer to permissions. Otherwise, use "permit" or "turn on" instead where possible. Use "wireless service provider" instead. Use "organization" instead. Use "organization" instead. Use "work" or "organization's" instead. Use only to refer to the onscreen work area of a computer. Otherwise, use "computer" instead. Use "computer" instead. Use "turn off" instead where possible. Use "email message" instead. Use "email message" instead. Use "email application" instead. Use "turn on" instead where possible. Use "verify," "make sure," "provide," or "check" instead. Use "delete" instead. Use "display name" instead. Use "stop responding" instead. Use "keyboard" instead. Use "media card" instead. Use "delete" instead (for example, "delete all device data").

63

UI Guidelines

Writing conventions

Term to avoid PIM application (n) PIM data (n) PIM synchronization (n) radio (n) ribbon (n) reboot (v) remove (v) speaker (n) terminate (v) uncheck (v) username (n) voicemail (n) website (n) wireless PIM synchronization (n)

Term to use Use "organizer application" instead. Use "organizer data" instead. Use "organizer data synchronization" instead. Use "wireless connection" or "wireless transceiver" instead where possible. Use "Home screen"' instead. Use "restart" instead. Use only to refer to removing software. Otherwise, use "delete" instead. Use "speakerphone" instead. Use "stop" instead. Use "clear" instead. Use "user name" instead. Use "voice mail" instead. Use "web site" instead. Use "wireless data synchronization" instead.

64

UI Guidelines

Themes

Themes

9

Themes determine the look and feel of BlackBerry® devices. A theme can change the appearance and structure of the Home screen, the application list, the banner, dialog boxes, title bars, and other elements of the user interface such as fonts and background colors. Users can choose from themes that are preloaded on their BlackBerry devices, or they can download a theme in a .cod file format.

Wireless service provider theme

Example theme

You can build your own theme using the BlackBerry® Theme Builder. The theme layout is a template for the Home screen and the application list. Users can access all applications from the application list. At a minimum, include the date, time, battery power level indicator, and wireless coverage indicator in the Home screen banner. The BlackBerry Theme Builder includes the following themes and layouts: Theme Precision Layout Zen Description On the BlackBerry® Bold™ Series, BlackBerry® Curve™ 8350i smartphone, BlackBerry® Curve™ 8500 Series, BlackBerry® Curve™ 8900 smartphones, and the BlackBerry® Tour™ 9600 Series, the Home screen displays six application icons. On the BlackBerry® Pearl™ Flip 8200 Series, the Home screen displays five application icons. On the BlackBerry® Storm™ 9500 Series, the Home screen displays eight application icons by default. The Home screen displays the application icon for the message list, phone, and calendar. The most recent entries appear following each application icon. The Home screen displays five application icons and an icon for the application list.

Today Dimension Zen

65

UI Guidelines

Best practice: Designing themes

Theme

Layout Today

Description The Home screen displays three application icons and an icon for the application list. By default, the application icon for the message list, calendar, and phone appear on this Home screen. The most recent entries appear following each application icon. The Home screen displays application icons in a grid layout. You can organize the application icons into a hierarchy of folders. You can also use this screen to display the application list for the Zen, Today, and Custom layouts. The Home screen displays application icons and recent entries for those applications. In this layout, you can place the icons and application entries anywhere on the Home screen. The Home screen also includes an icon for the application list.

Icon

Custom

For more information about developing themes, see the BlackBerry Theme Builder for BlackBerry Smartphones User Guide.

Best practice: Designing themes
• • • • • • • • • • • Limit the use of bright colors to icons and text. Use less saturated color for background images so that the background images do not overpower icons or text. Choose a highlight color that has high contrast and clearly implies focus (for example, white text on a blue background). Use the same highlight color for all controls. Avoid changing the font, font size, or font style for highlighted text or items. Limit the number of fonts that you use. Make sure that any text in your UI is legible. Consider how font properties affect users' ability to read the text. Keep the size of your theme file small by reducing the size of the graphics and optimizing the images where possible. Large theme files can affect performance of BlackBerry® devices. For the Precision theme, create images as 16-bit (5-6-5) .png files. For all other themes, create images as 32-bit dithered .png files. When you create images for BlackBerry device themes, design the image at the required height and width where possible. Create background images in a uniform color with subtle patterns so that the background images do not overpower the text on controls such as menus, buttons, or dialog boxes. Provide background images in the appropriate sizes for each BlackBerry device that supports the theme. When you are deciding which application icons to display on the Home screen, consider what your users might want instant access to.

Guidelines for images

Related topics Default themes and dimensions for screens and application icons on BlackBerry devices, 73

66

UI Guidelines

Precision theme

Precision theme
The BlackBerry® Bold™ 9000 smartphone introduced the Precision theme. The Precision theme is characterized by fashionable and stylistic design motifs that balance both functional and emotional elements. BlackBerry® Device Software version 5.0 introduced updates to the Precision theme.

Original Precision theme

Updated Precision theme

The Precision theme uses a limited color palette that is based on the colors of a stoplight with the addition of blue as the highlighting color. Background images use vibrant colors. Precision theme colors RGB values 255, 0, 0 255, 179, 0 49, 210, 0 37, 124, 255
Related topics Precision theme icons and indicators, 69

Dimension theme
The BlackBerry® Dimension theme is characterized by clean and friendly images with a welcoming color scheme.

67

UI Guidelines

Dimension theme

The Dimension theme uses the following four standard colors: Standard Dimension theme colors RGB values 0, 92, 224 255, 184, 0 206, 206, 206 68, 68, 68
Related topics Dimension theme icons and indicators, 72

68

UI Guidelines

Icons and indicators

Icons and indicators

10

Icons and indicators are pictorial representations of objects. They can visually identify your application and also convey meaning to users quickly.

Best practice: Designing icons and indicators
• • • • • • • Use application icons and simple graphics that clearly represent the application, action, or control. Use imagery that users are likely to recognize. For example, for an email message icon, users are more likely to recognize a postage stamp than a rural mailbox. Be aware that graphics can have different meanings in different cultures. Use a similar perspective to existing application icons. Align your application icon with other application icons. Include negative space around each icon and indicator. For example, if the icon appears on an 80-by-80 pixel canvas, create an icon object that is 68-by-68 pixels. Limit the number of colors in your color palette. Use colors consistently. Avoid text and numbers in icons and graphics because they require localization.

Precision theme icons and indicators
The Precision theme icons use a simple line form that maintains a 2-D orthographic view. Icons and color are functional; the background provides the emotional impact. The icons are more geometric in design compared to the organic design of the Dimension theme icons.

Original Precision theme

Updated Precision theme

69

UI Guidelines

Precision theme icons and indicators

On BlackBerry® devices without a touch screen, the label for an icon appears at the bottom of the screen. When users highlight an application icon on BlackBerry devices that use the original Precision theme, the opacity changes and a blue outline appears behind it. When users highlight an application icon on BlackBerry devices that use the updated Precision theme, a blue background appears behind the icon.

Precision icon without focus

Original Precision icon with focus

Updated Precision icon with focus

On BlackBerry devices with a touch screen, the label for an icon appears under the icon. When users highlight an application icon, a blue background appears behind the icon. A drop shadow provides contrast between the blue underlay and the blue elements of the icon.

Icon without focus on BlackBerry devices with a touch screen

Icon with focus on BlackBerry devices with a touch screen

Indicators are 2-D objects that appear straight on. You can include indicators in the banner or in applications (for example, message indicators in a message list).

Banner indicator

Application indicator

Related topics Precision theme, 67

Best practice: Designing icons and indicators for the Precision theme
• Create icons that are consistent with the default icons in size, weight, and centering.

70

UI Guidelines

• • •

Include negative space around each icon and indicator. For example, if the icons appear on an 80-by-80 pixel canvas, create icon objects that are 68-by-68 pixels. Use a top-to-bottom gradient for the white portion of an icon. Define the top of the icon at 80% opaque white and the bottom of the icon at 60% opaque white. Add a drop shadow to highlighted icons. Use the following properties: • Angle: 120 • Blending Mode: Normal • Opacity: 49% • Distance: 2 pixels • Spread: 0% • Size: 4 pixels Add a 9-pixel glow to the white portion of highlighted icons. For the glow, use RGB 121, 175, 255. Add a 9-pixel glow to the colored portion of highlighted icons. For the glow, use the RGB values of the accent color and a 75% opacity. Create icons that use two line weights at a ratio of 2.5 to 1. For example, use one line weight that is 2.5 pixels thick and another line weight that is 1 pixel thick. Use thick lines to identify primary features and thin lines to identify secondary features. Avoid using only thin lines for an icon. Use only thick lines when the object is not detailed. For thick lines, use a half-circle as an end-cap. Use color to accent icons. Use red to notify users, amber to draw users' attention, green to indicate that users can proceed, and blue to highlight or represent information or entertainment. Create colored portions that are flat and 100% opaque. Do not use color in the white portion of an icon. If the white portion of the icon appears over a white background, the white portion should be completely invisible. Use rounded rectangles, circles, pill shapes, arcs, and straight lines. Use circular arcs as transitions. Avoid using free-flowing curves and specialized shapes. Create rounded corners for icons by making the radius of a rounded corner one-sixteenth the size of the dimension of the image. For example, if the width of an icon is 34 pixels, the radius of the rounded corners is 2 pixels. Use thick waves to represent sound. Use thin waves to represent wireless communication. Use arrows with a thick shaft and a chevron-like head to represent data transmission or wireless communication. Use arrows with a thin shaft and a long, triangular head to represent an action in the UI. Use modifying objects to create new meaning or establish a relationship among a set of icons. Modifying objects are smaller, secondary objects that overlay another object. For example, the icons in the Setup folder use a gear as a modifying object.

Guidelines for lines
• • • • •

Guidelines for color

Guidelines for shapes
• • • • •

Related topics Default themes and dimensions for screens and application icons on BlackBerry devices, 73

71

UI Guidelines

Dimension theme icons and indicators

Dimension theme icons and indicators
The Dimension theme includes application icons and indicators of various sizes. Wireless service providers can create icons for themes to meet their own branding needs. In the Dimension theme, application icons appear 3-D.

If users highlight an application icon, an outline appears around the icon and the icon might change slightly to represent the highlighted application in a different way (for example, when users highlight the lock icon, the icon changes from an unlocked lock to a locked lock). A label for the icon also appears at the bottom of the screen.

Dimension theme icon without focus

Dimension theme icon with focus

Indicators are 2-D objects that appear straight on. You can include indicators in the banner or in applications (for example, message indicators in a message list). When users highlight an indicator, the indicator changes to include an outline so that the indicator is still visible.

Banner indicator

Application indicator

Related topics Dimension theme, 67

72

UI Guidelines

Default themes and dimensions for screens and application icons on BlackBerry devices

Best practice: Designing icons and indicators for the Dimension theme
• • • • • • Use a single light source for application icons. Most application icons have a common light source from the upper-left corner. Match the perspective and angle of an application icon to existing application icons. Use 3-D objects for application icons. Use 2-D objects displayed straight on for indicators. Create isometric images for your application icons. Provide icons in the appropriate sizes for each BlackBerry® device that supports the theme. Create indicators that are the same size.

Related topics Default themes and dimensions for screens and application icons on BlackBerry devices, 73

Default themes and dimensions for screens and application icons on BlackBerry devices
BlackBerry device model BlackBerry® 7100 Series BlackBerry® 8700 Series BlackBerry® 8800 Series BlackBerry® Bold™ 9000 smartphone BlackBerry® Bold™ 9700 smartphone BlackBerry® Curve™ 8300 Series BlackBerry® Curve™ 8350i smartphone BlackBerry® Curve™ 8500 Series BlackBerry® Curve™ 8900 smartphone Display screen size 240 x 260 pixels 320 x 240 pixels 320 x 240 pixels 480 x 320 pixels 480 x 360 pixels 320 x 240 pixels 320 x 240 pixels 320 x 240 pixels 480 x 360 pixels Default theme Dimension Dimension Dimension Precision Precision Dimension Precision Precision Precision Application icon size for the default theme • • • • • • Icon layout: 60 x 55 pixels Zen layout: 48 x 36 pixels Icon layout: 53 x 48 pixels Zen layout: 48 x 36 pixels Icon layout: 53 x 48 pixels Zen layout: 48 x 36 pixels

80 x 80 pixels 80 x 80 pixels • • Icon layout: 53 x 48 pixels Zen layout: 48 x 36 pixels

52 x 52 pixels 52 x 52 pixels 80 x 80 pixels

73

UI Guidelines

Default themes and dimensions for screens and application icons on BlackBerry devices

BlackBerry device model BlackBerry® Pearl™ 8100 Series BlackBerry® Pearl™ Flip 8200 Series BlackBerry® Storm™ 9500 Series

Display screen size 240 x 260 pixels 240 x 320 pixels • •

Default theme Dimension Precision

Application icon size for the default theme • • Icon layout: 60 x 55 pixels Zen layout: 48 x 36 pixels

46 x 46 pixels 73 x 73 pixels

• •

portrait view: 360 x Precision 480 pixels portrait view with keyboard: 360 x 248 pixels landscape view: 480 x 360 pixels landscape view with keyboard: 480 x 156 pixels Precision

BlackBerry® Tour™ 9600 Series

480 x 360 pixels

80 x 80 pixels

74

UI Guidelines

Sound

Sound

11

Sound can be an effective method to communicate with users. For example, users are more likely to notice a notification if you add a sound effect to it, especially if they are not looking at their BlackBerry® device when they receive the notification. Users can use sound profiles to specify whether their BlackBerry device uses sound to notify them of events such as calendar reminders or incoming calls. Users can change the sound profiles that are preloaded on their BlackBerry device, or they can create new ones. Users can also use sound profiles to change their ring tone or adjust the volume for notification. In your application, you can use sound for • • • • notification (for example, using sound to notify users when new messages arrive) feedback (for example, as users adjust the volume of a ring tone, the BlackBerry device plays the ring tone at the selected volume to demonstrate the volume level) branding (for example, playing a branded sound as your application starts) entertainment (for example, using sound in a game to entertain users and enhance their experience)

Best practice: Implementing sound
• • • • • • • • • Use sound judiciously. Sound demands attention and is hard to ignore. When in doubt, do not use sound. Consider your users before adding sound to your application. If you add sound, choose a volume, duration, and frequency that is appropriate for your users. Allow users to control sound using their sound profiles. Use sounds that are the same volume as other sounds on the BlackBerry® device. Create notification tones that are audible from a distance. Notification tones should attract users' attention, even when they are not using their BlackBerry device. Use low frequency sounds and avoid piercing sounds. Avoid using distracting sounds such as frequent, loud, or jarring sounds. Distracting sound should only be used to inform users of useful notifications and feedback. Avoid using sound as the only form of communication. Users might not hear a sound because of a hearing impairment, loss of hearing, or a noisy environment. Use sound with other notification methods such as vibration or a flashing LED indicator. Avoid using sound that requires localization. Sounds can have different meanings in different cultures. If possible, avoid sounds that are culturally specific.

75

UI Guidelines

Localization

Localization

12

Localization is the process of adapting software to meet the requirements of local markets and different languages. Internationalization is the process of designing an application so that it can be adapted to various languages and regions without engineering changes. Localized applications should reflect correct cultural and linguistic conventions that the target market uses. Localization and internationalization make it possible for you to create a localized version of your software. BlackBerry® devices are sold all over the world and BlackBerry device applications are translated into numerous languages. Some BlackBerry devices also feature a localized keyboard. Early in the design process, consider whether your application requires localization. If your application does not require localization now, consider designing your application so that it would be easy to localize it in the future.

Best practice: Designing applications for different languages and regions
Guidelines for layout
• • • • Leave enough space in your UI for translated text. Text expands when translated from English to other languages. For labels and other short text strings, prepare for 100% to 200% expansion. For lengthy text (more than 70 characters), prepare for 30% expansion. Where possible, place labels above the associated field. Leave blank space at the end of each label. Provide options for the direction that text appears. In some languages, such as Arabic and Hebrew, text displays from right to left but numbers and words in other languages display from left to right. If users have the option to change display languages, display the name of the language in that language. For example, display "Deutsche" instead of "German." Test translated UI to verify the layout of the UI. When labels wrap onto multiple lines, users should be able to read straight across from the label to the field value or from the field value to the label. Be aware that colors, graphics, and symbols, such as the currency symbol, can have different meanings in different cultures. For example, the color red is associated with danger in North America but is associated with happiness in China. Avoid text and numbers in icons and images because they require localization. If you include graphics in your application, make sure that they can be localized. Use imagery that users are likely to recognize. For example, for an email message icon, users are more likely to recognize a postage stamp than a rural mailbox. Avoid making a clickable icon the only way for users to perform an action. Users in some cultures might not recognize the imagery in the graphic. Avoid using national flags to identify languages. Use text instead. Avoid showing body parts or exposed flesh.

Guidelines for color and graphics
• • • • • •

Best practice: Coding for different languages and regions
• Store text strings in separate resource files and use unique identifiers to make use of the appropriate resource. Design your application to retrieve the appropriate text dynamically based on the locale of users.

76

UI Guidelines

Best practice: Writing for different languages and regions

• • • • • • • • • •

Avoid concatenating partial strings to form a sentence. When translated, the strings might not produce a logical sentence. Create a new string for the sentence instead. Avoid making part of a sentence into a link. When translated, the words in the link might not remain together. Use complete sentences for links instead. Avoid hard-coding spaces, punctuation marks, and words. Include these items in translatable strings instead. This approach allows translators to make changes according to the rules for each language. Avoid hard-coding weekdays and weekends. Verify that the start of the week matches the convention for each locale. Use a larger font size for Arabic and Asian languages. These languages use diacritics, which require more vertical space. Avoid hard-coding number separators. For example, 1,234.56 appears in United States English but 1234,54 appears in French. Avoid hard-coding the number of digits between separators. For example, 123,456,789.00 appears in the United States but 12,34,56,789.00 appears in India. Avoid hard-coding the display of negative numbers. For example, negative numbers can appear as -123, 123-, (123), or [123]. Provide options for currencies. For example, currencies can appear as $12.34, 12,34€, or 12€34. In addition, some currency symbols require more space. Verify that numbers, measurements, dates, and time formats reflect the locale of your users.

Guidelines for numbers

Best practice: Writing for different languages and regions
• • • • • • • • Include subjects where possible. For example, use "the list that appears when you type" instead of "the list that appears when typing." Include articles where possible. For example, use "press the Escape key" instead of "press Escape." Use relative pronouns where possible. For example, use "the email address that you use" instead of "the email address you use." Be consistent with the use of terms in the UI and try to use terms that are consistent with other applications on the BlackBerry® device. Using consistent terms improves the accuracy of the translations. Avoid using slang, idioms, jargon, colloquialisms, and metaphors in your UI. These terms can be difficult for translators to translate and for users to understand. Avoid references to ethnicity, religion, culture, and gender. For references to countries, use the political name of each country. For example, use "People's Republic of China" instead of "Mainland China." Verify that translated text uses local language conventions where possible.

77

UI Guidelines

Accessibility

Accessibility

13

You can help meet the needs of a diverse group of users by designing applications that people with disabilities or impairments can use. In some cases, you might want to address specific accessibility needs of people with disabilities or impairments. For example, you might want to develop an application that supports assistive technology, such as a screen reader. For information about developing an application to address specific accessibility needs, see the development guide for BlackBerry® Java® Application Accessibility. In other cases, you might want to develop an application that can reach the widest possible audience. In this case, following the best practices for designing accessible applications can benefit a broad range of users, including the typical users of your application.

Best practice: Designing accessible applications
Guidelines for UI design
• • • • • Stay focused on users' immediate task. Display only the information that users need at any one moment. For example, simplify data selection and presentation by displaying information in a logical order. Group controls according to common usage or common functionality to minimize the cognitive load for users. Provide enough space between controls so that users can distinguish one control from another. Use UI components consistently so that users can recognize common UI components easily. For example, use buttons to initiate actions. Avoid using other controls, such as hyperlinks, to initiate actions. If you are designing an application that supports an assistive technology device, such as a screen reader, and you do not use BlackBerry® UI APIs or support the Accessibility API, expose the unique UI components in your application programmatically so that assistive technology can interpret the information. When application screens open, set the focus to the control that users are most likely to use first. This approach simplifies tasks for users. Indicate clearly the UI component that has focus. For example, use white text on a blue background. Where possible, allow users to use the keyboard to initiate the most frequently used actions in the application. For example, allow users to press the Enter key to select a menu item. Where possible, inform users of important events, such as calendar reminders, in multiple ways. For example, provide a sound effect and a visual notification for the reminder. Where possible, apply redundancy to provide users with multiple ways to interact with common actions. For example, use the Menu key to allow users to access the full menu and the trackball or trackpad to allow users to access the context menu. On BlackBerry devices with a touch screen, in some cases, users can click the screen to access the context menu. In each menu, set the default menu item as the item that users are most likely to select. The default item in the context menu should be the same as the default item in the full menu.

Guidelines for navigation
• • • • • •

78

UI Guidelines

Best practice: Designing accessible applications

If a process or application requires users to complete a series of lengthy or complex steps, list all the steps or screens where possible. Identify the steps that are complete, in progress, and not yet started. For example, include a table of contents in wizards. If users close a wizard, they can use the table of contents to return to a specific location in the wizard. Provide specific messages. To support error recovery, use one short sentence that states clearly the reason for displaying the message and the actions that can dismiss it. Where possible, inherit the font settings that the user has set. Avoid using color as the only means of communication. For example, instead of using only red text to notify users of a critical action, consider placing a red symbol, such as a red exclamation mark, beside the text instead. Choose colors that have high contrast, such as black, white, navy blue, and yellow. To help users to distinguish between adjacent UI components (such as alternating messages in an SMS text message thread) and to distinguish between background and foreground colors, use colors that result in a contrast ratio of 7:1 or higher. Add contextual information to images, such as the image name, to communicate the meaning and context of the images.

Guidelines for text
• • • • • •

Guidelines for color and images

79

UI Guidelines

Glossary

Glossary
2-D two-dimensional 3-D three-dimensional LAN local area network LED light-emitting diode MMS Multimedia Messaging Service PIM personal information management PIN personal identification number SMS Short Message Service USB Universal Serial Bus

14

80

UI Guidelines

Provide feedback

Provide feedback
To provide feedback on this deliverable, visit www.blackberry.com/docsfeedback.

15

81

UI Guidelines

Document revision history

Document revision history
Date 6 November 2009 Description

16

Created version 2.3. Added the following information: • new controls and the associated programming class for each control • tables to outline the interaction method, pixels per inch, dot pitch, and banner heights for each BlackBerry® device • updates to the Precision theme • more graphics, examples, and rationale to support the design principles • more guidelines for writing, coding, and designing applications for different languages and regions • designing accessible applications Added information for the following BlackBerry devices: • • • BlackBerry® Bold™ 9700 smartphone BlackBerry® Storm2™ Series BlackBerry® Curve™ 8530 smartphone

27 July 2009

Created version 2.2. Revised information for themes. Added information about choosing a field based on the information you expect users to type. Added information for the following BlackBerry device: • BlackBerry® Curve™ 8520 smartphone

19 February 2009

Created version 2.1. Added information on designing social networking applications. Added information on changes to the behavior of the Menu key. Added information for the following BlackBerry devices: • • • BlackBerry® Curve™ 8350i smartphone BlackBerry® Curve™ 8900 smartphone BlackBerry® Tour™ 9630 smartphone

3 November 2008

Created version 2.0. Added information for the following BlackBerry devices: • • • BlackBerry® Pearl™ 8220 smartphone BlackBerry® Curve™ 8350i smartphone BlackBerry® Curve™ 8900 smartphone

82

UI Guidelines

Document revision history

Date 30 September 2008

Description • BlackBerry® Storm™ 9500 smartphone Created version 1.1. Added information for the following BlackBerry device: • BlackBerry® Bold™ 9000 smartphone

1 August 2008

Created version 1.0

83

UI Guidelines

Legal notice

Legal notice

17

©2009 Research In Motion Limited. All rights reserved. BlackBerry®, RIM®, Research In Motion®, SureType®, SurePress™ and related trademarks, names, and logos are the property of Research In Motion Limited and are registered and/or used in the U.S. and countries around the world. Java is a trademark of Sun Microsystems, Inc. PGP is a trademark of PGP Corporation. Wi-Fi is a trademark of the Wi-Fi Alliance. All other trademarks are the property of their respective owners. The BlackBerry smartphone and other devices and/or associated software are protected by copyright, international treaties, and various patents, including one or more of the following U.S. patents: 6,278,442; 6,271,605; 6,219,694; 6,075,470; 6,073,318; D445,428; D433,460; D416,256. Other patents are registered or pending in the U.S. and in various countries around the world. Visit www.rim.com/patents for a list of RIM (as hereinafter defined) patents. This documentation including all documentation incorporated by reference herein such as documentation provided or made available at www.blackberry.com/go/docs is provided or made accessible "AS IS" and "AS AVAILABLE" and without condition, endorsement, guarantee, representation, or warranty of any kind by Research In Motion Limited and its affiliated companies ("RIM") and RIM assumes no responsibility for any typographical, technical, or other inaccuracies, errors, or omissions in this documentation. In order to protect RIM proprietary and confidential information and/or trade secrets, this documentation may describe some aspects of RIM technology in generalized terms. RIM reserves the right to periodically change information that is contained in this documentation; however, RIM makes no commitment to provide any such changes, updates, enhancements, or other additions to this documentation to you in a timely manner or at all. This documentation might contain references to third-party sources of information, hardware or software, products or services including components and content such as content protected by copyright and/or third-party web sites (collectively the "Third Party Products and Services"). RIM does not control, and is not responsible for, any Third Party Products and Services including, without limitation the content, accuracy, copyright compliance, compatibility, performance, trustworthiness, legality, decency, links, or any other aspect of Third Party Products and Services. The inclusion of a reference to Third Party Products and Services in this documentation does not imply endorsement by RIM of the Third Party Products and Services or the third party in any way. EXCEPT TO THE EXTENT SPECIFICALLY PROHIBITED BY APPLICABLE LAW IN YOUR JURISDICTION, ALL CONDITIONS, ENDORSEMENTS, GUARANTEES, REPRESENTATIONS, OR WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION, ANY CONDITIONS, ENDORSEMENTS, GUARANTEES, REPRESENTATIONS OR WARRANTIES OF DURABILITY, FITNESS FOR A PARTICULAR PURPOSE OR USE, MERCHANTABILITY, MERCHANTABLE QUALITY, NONINFRINGEMENT, SATISFACTORY QUALITY, OR TITLE, OR ARISING FROM A STATUTE OR CUSTOM OR A COURSE OF DEALING OR USAGE OF TRADE, OR RELATED TO THE DOCUMENTATION OR ITS USE, OR PERFORMANCE OR NON-PERFORMANCE OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICES REFERENCED HEREIN, ARE HEREBY EXCLUDED. YOU MAY ALSO HAVE OTHER RIGHTS THAT VARY BY STATE OR PROVINCE. SOME JURISDICTIONS MAY NOT ALLOW THE EXCLUSION OR LIMITATION OF IMPLIED WARRANTIES AND CONDITIONS. TO THE EXTENT PERMITTED BY LAW, ANY IMPLIED WARRANTIES OR CONDITIONS RELATING TO THE DOCUMENTATION TO THE EXTENT THEY CANNOT BE EXCLUDED AS SET OUT ABOVE, BUT CAN BE LIMITED, ARE HEREBY LIMITED TO NINETY (90) DAYS FROM THE DATE YOU FIRST ACQUIRED THE DOCUMENTATION OR THE ITEM THAT IS THE SUBJECT OF THE CLAIM.

84

UI Guidelines

Legal notice

TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, IN NO EVENT SHALL RIM BE LIABLE FOR ANY TYPE OF DAMAGES RELATED TO THIS DOCUMENTATION OR ITS USE, OR PERFORMANCE OR NONPERFORMANCE OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICES REFERENCED HEREIN INCLUDING WITHOUT LIMITATION ANY OF THE FOLLOWING DAMAGES: DIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, INDIRECT, SPECIAL, PUNITIVE, OR AGGRAVATED DAMAGES, DAMAGES FOR LOSS OF PROFITS OR REVENUES, FAILURE TO REALIZE ANY EXPECTED SAVINGS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, LOSS OF BUSINESS OPPORTUNITY, OR CORRUPTION OR LOSS OF DATA, FAILURES TO TRANSMIT OR RECEIVE ANY DATA, PROBLEMS ASSOCIATED WITH ANY APPLICATIONS USED IN CONJUNCTION WITH RIM PRODUCTS OR SERVICES, DOWNTIME COSTS, LOSS OF THE USE OF RIM PRODUCTS OR SERVICES OR ANY PORTION THEREOF OR OF ANY AIRTIME SERVICES, COST OF SUBSTITUTE GOODS, COSTS OF COVER, FACILITIES OR SERVICES, COST OF CAPITAL, OR OTHER SIMILAR PECUNIARY LOSSES, WHETHER OR NOT SUCH DAMAGES WERE FORESEEN OR UNFORESEEN, AND EVEN IF RIM HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, RIM SHALL HAVE NO OTHER OBLIGATION, DUTY, OR LIABILITY WHATSOEVER IN CONTRACT, TORT, OR OTHERWISE TO YOU INCLUDING ANY LIABILITY FOR NEGLIGENCE OR STRICT LIABILITY. THE LIMITATIONS, EXCLUSIONS, AND DISCLAIMERS HEREIN SHALL APPLY: (A) IRRESPECTIVE OF THE NATURE OF THE CAUSE OF ACTION, DEMAND, OR ACTION BY YOU INCLUDING BUT NOT LIMITED TO BREACH OF CONTRACT, NEGLIGENCE, TORT, STRICT LIABILITY OR ANY OTHER LEGAL THEORY AND SHALL SURVIVE A FUNDAMENTAL BREACH OR BREACHES OR THE FAILURE OF THE ESSENTIAL PURPOSE OF THIS AGREEMENT OR OF ANY REMEDY CONTAINED HEREIN; AND (B) TO RIM AND ITS AFFILIATED COMPANIES, THEIR SUCCESSORS, ASSIGNS, AGENTS, SUPPLIERS (INCLUDING AIRTIME SERVICE PROVIDERS), AUTHORIZED RIM DISTRIBUTORS (ALSO INCLUDING AIRTIME SERVICE PROVIDERS) AND THEIR RESPECTIVE DIRECTORS, EMPLOYEES, AND INDEPENDENT CONTRACTORS. IN ADDITION TO THE LIMITATIONS AND EXCLUSIONS SET OUT ABOVE, IN NO EVENT SHALL ANY DIRECTOR, EMPLOYEE, AGENT, DISTRIBUTOR, SUPPLIER, INDEPENDENT CONTRACTOR OF RIM OR ANY AFFILIATES OF RIM HAVE ANY LIABILITY ARISING FROM OR RELATED TO THE DOCUMENTATION. Prior to subscribing for, installing, or using any Third Party Products and Services, it is your responsibility to ensure that your airtime service provider has agreed to support all of their features. Some airtime service providers might not offer Internet browsing functionality with a subscription to the BlackBerry® Internet Service. Check with your service provider for availability, roaming arrangements, service plans and features. Installation or use of Third Party Products and Services with RIM's products and services may require one or more patent, trademark, copyright, or other licenses in order to avoid infringement or violation of third party rights. You are solely responsible for determining whether to use Third Party Products and Services and if any third party licenses are required to do so. If required you are responsible for acquiring them. You should not install or use Third Party Products and Services until all necessary licenses have been acquired. Any Third Party Products and Services that are provided with RIM's products and services are provided as a convenience to you and are provided "AS IS" with no express or implied conditions, endorsements, guarantees, representations, or warranties of any kind by RIM and RIM assumes no liability whatsoever, in relation thereto. Your use of Third Party Products and Services shall be governed by and subject to you agreeing to the terms of separate licenses and other agreements applicable thereto with third parties, except to the extent expressly covered by a license or other agreement with RIM. Certain features outlined in this documentation require a minimum version of BlackBerry® Enterprise Server, BlackBerry® Desktop Software, and/or BlackBerry® Device Software.

85

UI Guidelines

Legal notice

The terms of use of any RIM product or service are set out in a separate license or other agreement with RIM applicable thereto. NOTHING IN THIS DOCUMENTATION IS INTENDED TO SUPERSEDE ANY EXPRESS WRITTEN AGREEMENTS OR WARRANTIES PROVIDED BY RIM FOR PORTIONS OF ANY RIM PRODUCT OR SERVICE OTHER THAN THIS DOCUMENTATION. Research In Motion Limited 295 Phillip Street Waterloo, ON N2L 3W8 Canada Research In Motion UK Limited Centrum House 36 Station Road Egham, Surrey TW20 9LF United Kingdom Published in Canada

86