Contents Designing applications ..........................5 UI characteristics of the BlackBerry PlayBook tablet ..................5 Constraints of designing for mobile devices ....................6 Design principles ............................8 Design for a limitless screen ......................... 8 Focus on content ............................9 Simplify the functionality ..........................10 Make your application touch-centric ......................
Best practice: Designing applications for different languages and regions ............ 33 Best practice: Coding for different languages and regions ................35 Best practice: Writing for different languages and regions ................36 Legal notice ............................... 37...
Designing applications Designing applications Welcome to application design for the BlackBerry PlayBook tablet! The BlackBerry PlayBook tablet provides you with a new opportunity to create a dynamic experience for your users. By creating a visually rich application, you can engage users in a powerful way.
Display specifications Design the UI for your application to be independent of screen size. If future versions of the BlackBerry PlayBook tablet have different screen sizes, you can avoid rework by designing applications that are flexible enough to fit a range of screen sizes.
UI Guidelines Designing applications Characteristic Guideline Slower processor speeds Avoid processor-intensive tasks where possible. Slower processor speeds can affect how users perceive the responsiveness of an application. Less available memory Free up as much memory as possible. For example, while an application is not being used, try to keep it from using memory.
If you are used to designing for a smartphone, you might have organized the screens in your application in a hierarchy. Try to avoid this approach when you design applications for the BlackBerry PlayBook tablet. Instead of creating an application with a hierarchy that users have to navigate, create an application that has a flat structure.
UI Guidelines Design principles As part of your canvas strategy, you should consider how the content behaves in response to gestures. One way to do this is to categorize your canvas as either continuous or discrete. A continuous canvas contains content that can be arbitrarily subdivided (for example, a map or a building blueprint).
UI Guidelines Design principles Make your application easy to use by taking intuitive action when users interact with the content. Instead of populating screens with UI components such as buttons and scroll bars, try to create an experience where users interact with the content itself.
If you are porting an application that is designed for a computer to the BlackBerry PlayBook tablet, simplifying the functionality might be a challenge. Design your application to include the essential features for mobile users. Provide only the features that people really care about.
Bezel gestures The BlackBerry PlayBook tablet supports gestures from the device bezel (the frame around the display area of the screen). The "swipe from the bottom of the screen" gesture is a core interaction, which displays the application list. If the application list is displayed already, this gesture displays the open but minimized applications.
UI Guidelines Design principles Gesture Expected result Touch and hold This gesture highlights a sequence of characters, a word, a link, or an item, such as an email or picture. Multi-touch With two touch points, this gesture highlights a block of text or items. Up to four simultaneous touch points are supported and they can be application-specific.
Identify the primary orientation in which users will interact with your application and whether the other orientation offers distinct benefits. You can lay out your application in portrait view, landscape view, or both views. The BlackBerry PlayBook tablet is designed to transition seamlessly if users switch between views.
Fonts Myriad is the default and preferred font for the BlackBerry PlayBook tablet, because it is designed for easy reading for most users. Your application can use other fonts, but you should use co-ordinated typefaces and be consistent.
UI Guidelines Screen design Best practices • Use a font size of 21 pixels for normal text and 36 pixels for titles. You can use other font sizes, but avoid using any font smaller than 15 pixels. • Use the standard font width for general purposes. The semi-condensed font width should be reserved for places where there is limited space.
UI Guidelines Screen design Term Comment alert (v) Use "notify" instead. app (n) Use "application" instead to avoid using jargon. cancel (v) Use to give users the option not to proceed with the associated action, or to stop an action in progress. category (n) Use "panel"...
UI Guidelines Screen design Term Comment remove (v) Use only to refer to removing software. Otherwise, use "delete" instead. terminate (v) Use "stop" instead. uncheck (v) Use "clear" instead. user name (n) Use "username" instead. voicemail (n) Use "voice mail" instead. web site (n) Use "website"...
UI Guidelines Screen design You can use the same approach with progress information. For example, when a user downloads an application, your application can display the progress information in the current context. This approach allows users to complete other tasks while the action is in progress.
UI Guidelines Screen design When an application is running, users can view the notifications and indicators by swiping from the top-left or top-right toward the center of the screen. Users can access the details of a notification by tapping the icon at the top of the screen. Best practices •...
UI Guidelines UI components UI components Buttons Use buttons to initiate actions. Users tap the button to initiate the action. Best practices • Use clear, concise labels. • Use single-word labels where possible. • Use verbs that describe the associated action, such as "Cancel," "Delete," or "Save". •...
UI Guidelines UI components Best practices • Do not start an action when users select a check box. For example, do not open a new screen on the select action. • Group and order check boxes logically. For example, group related options together or include the most common options first.
UI Guidelines UI components • Verify that the content for radio buttons remains static. Content for radio buttons should not change depending on the context. • Do not start an action as soon as users select a radio button. For example, do not open a new screen when users select a radio button.
UI Guidelines UI components Best practice • Use terms that identify the state of the option, and not the action required to change the state. For example, "On" indicates the current state, while "Turn on" describes an action. Text fields If users need to type in your application, you can include text input fields.
If the primary task on a screen is to type text (for example, replying to a message or adding a new contact), then display the virtual keyboard when the screen opens. • If the BlackBerry PlayBook tablet is connected to a physical keyboard, do not open the virtual keyboard automatically when users need to type text. •...
UI Guidelines UI components When users highlight an item, a pop-up menu appears on the screen so that they can initiate an action, such as cut or copy text. Lists You can use different types of lists in your application. Users can swipe across the screen to move through a list. Users can tap an item in the list to select it.
UI Guidelines UI components Use section lists to group items within a list. For example, you can group a list of contacts alphabetically. Use tile lists to organize items in a grid. Use section tile lists to organize groups of items in a grid. Pickers You can use pickers to help users easily choose an item from an ordered list.
UI Guidelines UI components Media controls You can add media controls to your application to let users interact with media, such as songs or videos. Users can play, pause, or move to the next or previous song or video by tapping the specific control. Users can fast-forward or rewind a song or video by dragging a finger over the slider.
Don't allow the screen to turn off while users are watching a video. Activity indicators and progress indicators Activity indicators and progress indicators show users that their BlackBerry PlayBook tablet is performing an action, such as searching for items or connecting to a Wi-Fi network. Users cannot interact with these indicators.
UI Guidelines UI components If you want to show that your application is working but you cannot determine the duration of the action, use an activity indicator. Best practices • Always indicate progress when an action takes more than 2 seconds to complete. •...
UI Guidelines UI components • Use sentence case capitalization. Capitalize the first word and any other word that requires capitalization (such as a proper noun).
It's important that your icon is visually interesting. At the same time, it's also important that the icon maintains consistency with the design of existing BlackBerry application icons. You want the icon to fit in the application list and not be either too bland or too conspicuous.
Localization and internationalization make it possible for you to create a localized version of your software. BlackBerry PlayBook tablets are sold all over the world and BlackBerry applications are translated into many languages, including languages that are not based on a Latin alphabet. Early in the design process, consider whether your application might require localization.
UI Guidelines Localization • Try to avoid displaying truncated text. The meaning might be unclear to users if the most important text does not appear. First, try to reduce the size of the text. If you reduce the size but you cannot read the text easily, try wrapping the text onto two lines instead.
UI Guidelines Localization name, first name, title). In some countries, the zip/postal code can appear before the name of the city and contain letters as well as numbers. • If users have the option to change display languages, display the name of the language in that language. For example, display "Italiano"...
• Use terms consistently throughout the UI and try to use terms that are consistent with other applications on the BlackBerry PlayBook tablet. 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.