Best practice: Designing applications for BlackBerry devices..................9 Three key principles of BlackBerry application design......................10 Constraints of designing for mobile devices........................11 Designing and developing for different BlackBerry devices and software versions..............12 Display specifications and interaction methods for BlackBerry devices................15 Stages of application design............................... 17 Stage 1: Understanding the product requirements and user goals................
Page 4
Text....................................42 Fonts..................................42 Writing conventions..............................42 Sound....................................47 Localization..................................48 Best practice: Designing applications for different languages and regions..............49 Best practice: Coding for different languages and regions.................... 51 Best practice: Writing for different languages and regions.................... 52 Accessibility..................................53 Best practice: Designing accessible applications......................53 Containers and components......................
Page 5
Best practice: Designing icons and indicators........................92 Dimensions for application icons on BlackBerry devices..................... 92 Dimensions for indicators on BlackBerry devices........................ 93 BlackBerry 7 theme icons and indicators..........................94 Best practice: Designing icons and indicators for the BlackBerry 7 theme..............95 Legal notice ........................... 98...
BlackBerry Device Software and BlackBerry Tablet Note: If you have an application that you designed for BlackBerry Device Software before version 7.0 and you want to make it available on BlackBerry 7.1, you might need to adjust the application to accommodate a higher density of pixels on some BlackBerry device screens.
Page 7
Description Note about version numbering This version of the UI Guidelines for BlackBerry Smartphones uses a numbering system that matches the version number of the BlackBerry Device Software. To see the guidelines for other versions of BlackBerry Device Software, visit www.docs.blackberry.com.
Designing applications for BlackBerry devices As you start designing applications for BlackBerry devices, think about how you can create rich, compelling, and personal experiences for your users. Most users want applications to be intuitive and satisfying to use. Consider additional attributes that are important to the majority of your users.
BlackBerry device or the BlackBerry Smartphone Simulator. Note the behaviors that users expect in BlackBerry device applications. For example, if a phone number appears in a text field, users expect to be able to call the number by clicking it.
Three key principles of BlackBerry application design Informed Active people rely on their BlackBerry devices to keep them informed and up to date. Make sure that status, notifications, new information, and frequently used actions and content are easily accessible. •...
Strive to provide a balance between the best possible user experience, a long battery life, and efficient connections to the wireless network. When you design your BlackBerry device application, consider the differences between mobile devices and computers. Mobile devices have the following characteristics:...
Designing and developing for different BlackBerry devices and software versions As you start designing an application, decide which BlackBerry Device Software version you want to develop for. The version defines the minimum set of features that you can use. After you decide which device software version to develop for, decide which devices to design for. If you are designing for more than one device, design the UI to accommodate the different screen sizes and pixel densities among BlackBerry devices.
Page 13
UI Guidelines Getting started Model Screen size (pixels) Pixels Interaction Application icon per inch size (pixels) BlackBerry Curve 8350i 320 x 240 Trackball/trackpad & full 52 x 52 keyboard BlackBerry Curve 8520 BlackBerry Curve 8530 BlackBerry Curve 8900 480 x 360 Trackball/trackpad &...
Page 14
Model Screen size (pixels) Pixels Interaction Application icon per inch size (pixels) BlackBerry Bold 9790 480 x 360 (portrait) Touch screen, trackpad & full 68 x 68 keyboard BlackBerry Bold 9900 640 x 480 (portrait) Touch screen, trackpad & full...
Considerations for existing applications If you have an existing application and want to make it available on BlackBerry devices with a touch screen, you must adjust the layout to accommodate touch interactions. For more information on touch interactions, see the "Touch screen"...
Page 16
UI Guidelines Getting started BlackBerry device Display screen size Aspect ratio Pixels per inch Dot pitch (mm) Interaction model BlackBerry Bold 9790 Portrait view: 480 x 4:3 landscape 0.1035 Touch screen, smartphone 360 pixels view trackpad & full keyboard Landscape view: 360 x 480 pixels 2.44 inches...
What goals do users want to accomplish? For example, if users bid in an online auction, they want to know when someone has outbid them. When articulating goals, try explaining the goal without using terminology that is specific to BlackBerry devices. For example, use "share photos with friends" instead of "open the Media application and send photos to a group."...
UI Guidelines Getting started • Are there cultural differences that are important to address? Consider differences by region, language, age, and corporate culture. Stage 2: Developing the concepts and building the workflow Once you understand the product requirements and user goals, you can focus on designing an application that meets these requirements and goals.
Page 20
Take advantage of the conventions of the Escape key and the Menu key. • Consider how you can integrate your application with other applications such as the phone, BlackBerry Maps, camera, or contacts. For example, if users click a contact in the application, retrieve the contact details from the Contacts application.
UI Guidelines Getting started Feature Example Secure personal information and If there are security risks associated with specific content, provide prompts to data users. Searching the application Identify the content that has value to users. Determine where the content resides and provide search capabilities.
If you follow the BlackBerry platform conventions, users know what to expect from their BlackBerry devices. • Use BlackBerry UI components in consistent patterns and layouts. Even if you customize a component (for example, change the color) the behavior and layout of the component should stay the same across applications.
Page 23
• Design visual resources that scale to accommodate different screen sizes. • Avoid changing the default font size. If you change the default font size, test the change on all BlackBerry devices that you are designing the application for. •...
Find out about key fundamentals for trackpad, touch screen, and keyboard interactions. Trackpad Users can use the trackpad to navigate and highlight text. On BlackBerry devices with a touch screen, the trackpad gives users better control over the cursor or pointer and provides an unobstructed view of the screen.
Touch screen On BlackBerry devices with a touch screen, users can navigate and type text using the capacitive touch screen. In most cases, an action occurs when users lift their finger off the touch screen, not when they touch the screen. However, when users touch an item or touch and hold a finger on an item, the action occurs before users lift their finger.
• If you design a UI for BlackBerry devices with a touch screen and you want your application to work on BlackBerry devices with a trackpad only, make sure that each touch screen action has an associated trackpad action. Test the interactions in your application on BlackBerry devices using a touch screen and a trackpad.
UI Guidelines Interactions In addition to typing text, users can also use the keyboard to move around a screen (for example, to move around a map). However, navigation using the keyboard should be the alternative to navigation using the trackpad. Virtual keyboard If users are using a touch screen, a virtual keyboard appears when users need to type text.
Page 28
Keyboards consist of character keys and modifier keys. Character keys send a character to the BlackBerry device. A modifier key alters the functionality of character keys. Modifier keys include the Shift key and the Alt key. When users press a modifier key, a typing mode indicator appears in the upper-right corner of the screen.
BlackBerry devices have a two-stage Convenience key. If you are developing an application, make sure that the application opens when users press the Convenience key all the way down. End/Power End a call or press and hold the End/Power key to turn on or turn off BlackBerry devices.
Page 30
Close the browser and media applications by pressing and holding the Escape key. On BlackBerry devices with a physical keyboard, avoid using the Escape key to allow users to clear the text in a field. Allow users to press the Shift key and the Delete key to clear the text in a field instead.
BlackBerry device is inserted in a holster. Related information Keyboard, Typing indicators Typing indicators appear in the upper-right corner of the BlackBerry device screen. Avoid displaying other information in the upper-right corner of the screen because the typing indicators could obscure the information. Indicator Description This indicator indicates that the BlackBerry device is in Alt mode.
Menu items do not have shortcut keys assigned to them. On BlackBerry devices with a physical keyboard, after users open the menu, they can press the key that corresponds to 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, tap the item, or click the trackpad.
Page 33
• Verify that custom shortcut keys do not overlap with existing reserved shortcut keys. For more information about existing shortcut keys, visit http://na.blackberry.com/eng/support/docs/ to see the product documentation. • Avoid assigning different actions to well-known shortcut keys.
When users use a trackpad, they can move a cursor or pointer to set focus on an item on a screen. The cursor or pointer icon can change to indicate its current behavior. The following cursors and pointers appear in BlackBerry applications: Cursor or pointer...
If content on a screen extends beyond the viewing area, scroll arrows appear. Users can scroll by moving a finger on the trackpad, or, on BlackBerry devices with a touch screen, users can scroll by dragging a finger vertically across the touch screen.
Panning Users can pan a picture, map, or web page by moving a finger on the trackpad, or, on BlackBerry devices with a touch screen, users can use a finger to drag the content on the screen. The content moves in the same direction and at the same rate that users move their finger.
UI Guidelines Strategies Displaying images Images can be displayed individually on the screen and as thumbnails in a table, 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. Use thumbnail images in a table to display several images at one time.
UI Guidelines Strategies 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. Users can view more images by performing the following actions: User goal Action using the navigation keys...
Avoid placing images in a carousel view near other components. • If you include labels, place the labels above the image on BlackBerry devices with a touch screen. This approach allows users an unobstructed view of the label as they move through the images.
You can create a transition to apply a visual effect that appears when an application opens or closes a screen on a BlackBerry device. Creating transitions between screens helps users understand the structure of your application. Try to provide consistent transitions as users navigate the application. Consider the following guidelines when implementing...
Try to provide users with an implicit way and an explicit way to exchange information using NFC. For example, allow users to tap their BlackBerry device to implicitly exchange information or click an item in the application menu to explicitly exchange information. At a minimum, if a Send or Share item already appears in the application menu, include a submenu item to allow users to exchange information by clicking the item in the submenu (for example, "Send"...
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.
Page 43
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...
Page 44
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 smartphone is . . ." instead of "your BlackBerry is . . .").
UI Guidelines Strategies Logos BlackBerry logos • Never typeset, recreate, or alter BlackBerry logos. Third-party logos Include a third-party logo in software only if the RIM legal department has reviewed and approved the use of the logo. Best practice: Terminology •...
Page 46
UI Guidelines Strategies Term Comment continue (v) Use "continue" so users know when the steps in a process or procedure are not complete. company (n) Use "organization" instead. corporation (n) Use "organization" instead. corporate (adj) Use "work" or "organization's" instead. desktop (n) Use only to refer to the onscreen work area of a computer.
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.
(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) •...
UI Guidelines Strategies Best practice: Designing applications for different languages and regions Guidelines for layout • Leave enough space in your UI for translated text. The height and the width of text might expand when translated from English to other languages. For labels and other short text strings, prepare for up to 200% expansion. For lengthy text (more than 70 characters), prepare for up to 40% expansion.
Page 50
UI Guidelines Strategies the direction of the language. For example, in English, a leading component aligns along the left side of the screen. In Arabic, a leading component aligns along the right side of the screen. • Provide options for the direction that text appears in. In some languages, such as Arabic and Hebrew, text is displayed from right to left but numbers and words in other languages are displayed from left to right.
UI Guidelines Strategies • If you include graphics in your application, make sure that the graphics are localized. For example, in Arabic, question mark icons are mirror images of question mark icons used in English. • Include tooltips for all icons. Even within one culture, some icons might not be recognized by everyone. •...
• Use terms consistently throughout 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.
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.
Page 54
UI Guidelines Strategies • 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.
UI components. For example, application screens can contain graphics, layout managers, and buttons. Multiple screens can be open on a BlackBerry device at one time, but users can view only one screen at a time. Users can perform the following common actions on screens:...
Warn users of unexpected or potentially destructive conditions or situations. Dialog boxes are modal; they interrupt the normal operation of the BlackBerry device. A dialog box includes a message, buttons that allow users to perform an action, and an indicator that indicates the type of dialog box. The size of the dialog box depends on the size of the BlackBerry device screen.
If users return to the application, display the dialog box again. Guidelines for layout • Use standard BlackBerry dialog boxes where possible so that you do not have to adjust the layout of each dialog box for each supported screen size. •...
Page 58
60% of the width of the dialog box. For BlackBerry devices with a screen width that is less than the height, at a minimum, make sure that the width of the buttons is 70% of the width of the dialog box.
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.
UI Guidelines Containers and components 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.
UI Guidelines Containers and components Best practice: Implementing input dialog boxes • 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. •...
UI Guidelines Containers and components • 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." Reminder dialog boxes Use reminder dialog boxes to remind users of time-sensitive activities such as appointments or tasks.
Search icon The theme that users select on their BlackBerry device determines the design of the Home screen banner. Although you cannot add a banner to your application, you can add an indicator to the banner to provide a notification or to communicate important information about the status of your application.
• Active call indicator Related information Dimensions for indicators on BlackBerry devices, Best practice: Implementing title bars • If you want to add an icon to the title bar, consider adding the icon only to the title bar that appears on the first screen in an application.
Page 65
UI Guidelines Containers and components In the scrollable view, users can move through each panel of content. Users can move through the panels continuously. Or, you can set a start and end point so that users know when they reach the first and the last panel. You can add hint text or arrows to the left side and the right side of the screen to indicate that other panels of content are available.
UI Guidelines Containers and components Users can perform the following actions in a panel manager: User goal Action using the navigation keys Action using a touch screen Switch panels. Move a finger horizontally on the trackpad. • Drag a finger horizontally on the screen. •...
UI Guidelines Containers and components • If there is a limited amount of space at the top of each tab, use icons instead of labels. Menus and toolbars You can use menus and toolbars to provide users with specific actions for a highlighted item or screen. The following table provides a high-level overview of each type of menu and toolbar, with suggestions on how you can use these items together in an application.
UI Guidelines Containers and components Avoid including the same action in a pop-up menu and a toolbar unless the actions are frequent. Toolbar Example Provides a quick and easy way for Use a toolbar instead of a pop-up users to access the most frequent menu for actions associated with a actions for a screen or an application screen or if users must repeatedly...
Page 69
UI Guidelines Containers and components Action using the nagivation User goal Action using a touch screen Action using a physical keyboard keys Close the full menu. Press the Escape key. — Open or close the slider. Best practice: Implementing full menus •...
Page 70
UI Guidelines Containers and components • Include settings and infrequent actions in "Options." • Group menu items according to common usage or common functionality, and where possible, test the groups with users. If the number of items in a group is large (for example, more than seven), consider including an additional separator in the group.
UI Guidelines Containers and components • Use "Enable <mode>" to indicate that a specific state is turned on. Use "Disable <mode>" to indicate that a specific state is turned off. • Verify that the menu item label matches the title of the associated screen where appropriate. For example, if users click "Change Display Name"...
Page 72
UI Guidelines Containers and components Best practice: Implementing submenus • Use submenus to reduce the number of menu items in a full menu. For example, if users have to scroll to see all the items in a full menu, group some of the menu items in a submenu. •...
UI Guidelines Containers and components Pop-up menus A pop-up menu provides users with a quick way to access the most common actions for a highlighted item. You can also use a pop-up menu if a highlighted item has multiple actions associated with it or if a highlighted item does not have any primary actions associated with it.
Order the rest of the items from most common to least common according to the numbered positions below. Try to leverage users' muscle memory by making the order of actions consistent with the order of actions in other BlackBerry device applications. If the most common items compete with context specific items, give the most common items a higher priority.
Page 75
Display a tooltip. Touch the icon. Users cannot interact with a toolbar using a trackpad. Most BlackBerry devices with a touch screen use toolbars since access to shortcut keys might not be readily available. Best practice: Implementing toolbars • Use a toolbar to display frequent actions associated with the application or screen. Use a pop-up menu for actions associated with the highlighted item.
• Use colors and shapes to differentiate similar icons. For example, use the BlackBerry 7 theme colors to distinguish between the arrows for replying to and forwarding an email message. Vary the number and direction of arrows to distinguish forwarding an email message from replying to an email message and replying to all in an email message.
Users can change the date or time using a physical keyboard or by moving a finger vertically on the trackpad. Users can change the date or time on BlackBerry devices with a touch screen by swiping up or down on the screen.
Search As BlackBerry devices allow users to access content both on their device and remotely, search becomes an increasingly important feature for users. Search is a gateway to content for users and it's important to make the search experience both easy and streamlined.
Page 79
UI Guidelines Containers and components Users can also use a search field in an application to search for items in that application. For example, users can search for an email message in a message list, a song in the Media application, or a contact in the contact list. In some cases, you might want to display search results from other applications.
Page 80
Containers and components Best practice: Implementing search • For content that is not located on the BlackBerry device, start the search after users submit the search. Do not start searching as users type. This approach helps to minimize network traffic. •...
UI Guidelines Containers and components Choice fields Check boxes Use check boxes for binary options that users can understand easily. For example, use a check box for an option that can be turned on and off. Users can perform the following action with a check box: Action using the navigation User goal Action using a touch screen...
UI Guidelines Containers and components • Place labels on the right side of check boxes. On Option screens, place labels on the left side of check boxes. • Use sentence case capitalization. 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 using the navigation User goal...
UI Guidelines Containers and components • Place the label on the left side of a drop-down list. • Use title case capitalization for drop-down list labels and values (unless the values read more like a sentence). Radio buttons Use radio buttons to indicate a set of mutually exclusive but related choices. Users can perform the following action with radio buttons: Action using the navigation User goal...
Type of picker Description File 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.
UI Guidelines Containers and components Type of picker Description User goal Action using the navigation keys Action using a touch screen Find an item in the list. Move a finger vertically on the trackpad. • Drag a finger vertically on the screen. •...
UI Guidelines Containers and components 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. •...
UI Guidelines Containers and components Best practice: Implementing tree views • Provide a pop-up menu if users can perform multiple actions when they click a parent node. • Include a root node only if users need the ability to perform actions on the entire tree. Otherwise, exclude the root node. Buttons Use buttons to allow users to perform an action from a dialog box.
Buttons are static and require users to highlight a button to perform the associated action. If you use buttons, include menu items for the actions in the application menu as well. On BlackBerry devices with a touch screen, you can use buttons for critical actions.
Use an activity indicator when you cannot determine the duration of an action. • Provide useful progress information. For example, if users are downloading an application to their device, indicate the percentage of data that their BlackBerry device has downloaded. Be as accurate as possible with the progress information. •...
UI Guidelines Containers and components • Use sentence case capitalization. Lists and tables Use lists and tables to display items that users can highlight and open. If the list is long, items are fetched and displayed in batches. When users reach the last item in the list, the next batch of items displays at the end of the list. Use a simple list to easily display text in rows.
UI Guidelines Containers and components Users can perform the following actions in lists and tables: Action using the navigation User goal Action using a touch screen Action using a physical keyboard keys Scroll through items Move a finger vertically on the —...
Icons and indicators are pictorial representations of objects. They can visually identify your application and also convey meaning to users quickly. To find the meaning of a specific icon, see the Icon Guide that matches your version of BlackBerry Device Software. Best practice: Designing icons and indicators •...
92 x 92 pixels BlackBerry Torch 9850 smartphone BlackBerry Torch 9860 smartphone To see the dimensions for application icons in other versions of BlackBerry Device Software, go to Designing and developing for different BlackBerry devices and software versions. Related information...
BlackBerry 7 theme icons and indicators The BlackBerry 7 theme icons use a simple line form that maintains a 2-D orthographic view. In BlackBerry 7, the icons retain the silhouette of the BlackBerry 6 theme icons. What's new is the beautiful, realistic lighting as well as more vibrant, eye-catching colors and a greater sense of depth to the icons.
Materials The icons in BlackBerry 7 draw inspiration from premium materials and create a high-quality look and feel to the icons. Use the look of one or a combination of the following materials to align with the design and aesthetics for BlackBerry 7.
Page 96
UI Guidelines Icons and indicators Material Example Guidelines • Avoid rendering icons completely in gray. These icons can appear to be unavailable. Paper • Add details such as lines or holes to make the icon more realistic, to provide a better sense of scale, and to differentiate among types of paper.
Page 97
UI Guidelines Icons and indicators Combinations Example Glass and paper Related information Dimensions for application icons on BlackBerry devices,...
(collectively the "Third Party Products and Services"). BlackBerry 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.
Page 99
Installation or use of Third Party Products and Services with BlackBerry'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.
Page 100
UI Guidelines Legal notice The terms of use of any BlackBerry product or service are set out in a separate license or other agreement with BlackBerry applicable thereto. NOTHING IN THIS DOCUMENTATION IS INTENDED TO SUPERSEDE ANY EXPRESS WRITTEN AGREEMENTS OR WARRANTIES PROVIDED BY BLACKBERRY FOR PORTIONS OF ANY BLACKBERRY PRODUCT OR SERVICE OTHER THAN THIS DOCUMENTATION.