Blackbe;rry PlayBook Tablet Instruction Manual

BlackBerry PlayBook Tablet
Version: 2.1
UI Guidelines

Published: 2012-10-30
SWD-20121030095059822

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 ........................................................................................................... 12
Screen design ............................................................................................................................................ 14
Menus ........................................................................................................................................................ 14
Text ........................................................................................................................................................... 15
Title bars .................................................................................................................................................... 18
Dialog boxes ............................................................................................................................................... 18
Notifications and indicators ........................................................................................................................ 19
UI components ........................................................................................................................................... 21
Buttons ...................................................................................................................................................... 21
Check boxes ............................................................................................................................................... 21
Radio buttons ............................................................................................................................................. 22
Segmented controls ................................................................................................................................... 23
Toggle switches .......................................................................................................................................... 23
Text fields .................................................................................................................................................. 24
Lists ........................................................................................................................................................... 26
Pickers ....................................................................................................................................................... 27
Media controls ........................................................................................................................................... 28
Activity indicators and progress indicators .................................................................................................. 29
Application icons ........................................................................................................................................ 32
Localization ................................................................................................................................................ 33

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
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. And yet, by using a simple navigational model, you can create essential business applications that
can be used in a highly secure environment.
This document contains core design principles and best practices for designing applications for the BlackBerry PlayBook
tablet. As you start designing applications, consider how you can incorporate these core design principles. In addition to
these principles, consider the attributes that are important to the majority of your users. For example, most game
enthusiasts want to play games that are entertaining, visually appealing, and challenging. In contrast, organizations want
utility applications that increase efficiency and productivity.
The design process involves evaluating choices and making decisions. As designers, you shape the user experience by
balancing user goals with the data, environment, and usability requirements of the application. The best way to find out if
your application successfully integrates the most important attributes and requirements is to evaluate it with users.
UI characteristics of the BlackBerry
PlayBook tablet
• 7 inch (17.8 cm) screen size
UI Guidelines Designing applications
5

• Multi-touch capacitive screen that supports up to four simultaneous touch points
• Landscape-oriented display with support for portrait display
• On-screen virtual keyboard and optional external keyboard
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.
Screen resolution Aspect ratio Pixel density Dot pitch
1024 x 600 pixels 17:10 170 pixels per inch (66.7
px/cm)
0.15 mm
Related information
Make your application touch-centric, 12
Screen design, 14
Constraints of designing for mobile devices
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 application, consider the differences between mobile devices and computers.
Mobile devices have the following characteristics:
Characteristic Guideline
Smaller screen size Stay focused on the user's immediate task. Display only the information that
users need at any given moment. 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. Design the UI so
that users can perform tasks easily and access information quickly.
One screen appears at a time Use a single screen if possible. If your application requires multiple screens to
be open at the same time, use a split screen or rethink the flow of your
application.
Shorter battery life Try to handle data transmission efficiently. The less often the device needs to
transmit data, the longer the battery lasts.
Wireless network connections Try to simplify how your application creates network connections. Compared
with standard LANs, longer latency periods that are inherent in some wireless
network connections can influence how quickly users receive information
that is sent over the network.
UI Guidelines Designing applications
6

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.
UI Guidelines Designing applications
7

Design principles
Design for a limitless screen
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. Think of the screen as a window
into your application instead of a container for the entire application. For example, if the number of photo albums does not
fit on the display area of the screen, show part of a photo album at the edge of the screen so that it is obvious to users that
they can view more albums by swiping up or down on the screen.
Use a canvas strategy
The large area of a typical computer interface allows you to present an application with a mix of content and UI
components. The same application that is created for the BlackBerry PlayBook tablet requires a different strategy. In most
situations, your application should make use of the entire screen, use gestures to control workflow, and access additional
options only when necessary.
If you have a large amount of information to present, try to think of the screen as a frame that contains a small view of a
large canvas. Users can move the view by dragging a finger in any direction, or by swiping to move the view quicker or a
greater distance. For example, you might use this type of interaction when navigating within a map or large image.
UI Guidelines Design principles
8

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). A discrete canvas contains content that has obvious, defined
subcomponents (for example, a deck of cards, a contact list, or an eBook).
On a continuous canvas, consider allowing users to move (pan) slowly through the content, move quickly, zoom in and out,
and perhaps rotate. On a discrete canvas, you should also consider allowing users to move (shift) slowly or quickly through
the content, but there are likely some other actions that you might want to enable using gestures. For example, you can flip
over a card, navigate within a contact list, or jump to the next chapter in a document.
Focus on content
Create and present content that absorbs and engages users in a way that is similar to how movie-goers get drawn into the
cinematic experience of a film. Manage the content with seamless workflow transitions.
UI Guidelines Design principles
9

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. For example, when users tap an album, your application should display the list of songs in the album. Users
should also be able to tap an album to open it instead of highlighting the album and tapping a button labeled Open.
You can place frequently used UI components on the main screen, but do so judiciously. Reserve the majority of the screen
for users to interact with the content in your application. If you include a UI component, make sure that you give users an
unobstructed view of the content. For example, display media player components at the bottom of the screen to allow
users a clear view of the list of available songs.
Simplify the functionality
Identify a single purpose for your application. Try to identify the one goal that you want your application to achieve, and
then design your application to support that single purpose. For example, the main purpose of an application that manages
pictures might be to "remember that moment."
UI Guidelines Design principles
10

As you identify the goal, you might need to make some tough decisions. For example, if the main purpose of your
application is to allow users to view pictures, make sure you limit the functionality that you provide on the screen only to the
features that make viewing pictures a fantastic experience for users. Where possible, move the functionality that is not
essential to the primary workflow to a menu.
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.
Support user data input
You should support data input for your users as much as possible. This could be as easy as opening the numeric keyboard
for a user to type a phone number in a field or capturing data using other means, such as GPS, a Bluetooth enabled sensor,
a camera, or an accelerometer. Limiting the data that users need to input can reduce the burden on users and greatly
improve the usability of your application.
Another way to support user data input is to make sure that you combine similar input operations together in the flow of
your application, so that users don't need to change input modes or navigate to another screen. For example, a mapping
application might allow users to place landmarks on a map. You could allow users to access a menu, choose a landmark
tool, reactivate the map content area, and then place the landmark. But a better solution might be to allow users to simply
touch and hold the desired map location and have your application place a landmark pin at that location after a few
seconds.
UI Guidelines Design principles
11

Make your application touch-centric
A touch-centric experience on the BlackBerry PlayBook tablet means that users interact with content by using gestural
interactions, such as swiping, instead of "poking" UI components. Avoid cluttering the screen with UI components and
design your application to take advantage of the gestural interactions. For example, allow users to zoom in to a picture by
using the pinch out gesture instead of tapping a button to incrementally zoom in.
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. There are other bezel
gestures that are available for you to use as shortcuts to features in your applications. These gestures include the following:
Gesture Expected result
Swipe from the top of the screen Displays a menu for settings or options
Swipe from the left or right side of the screen Switches applications
Swipe from the top corners of the screen Displays application notifications and status indicators
Swipe from the bottom left corner of the screen Displays the keyboard
Interactions with content on the screen
If they apply to your application, you can implement the following interactions to allow users to directly manipulate content
on the screen.
Gesture Expected result
Tap This gesture initiates an action. For example, when users tap an
application icon, the corresponding application opens.
Double tap This gesture focuses on the targeted area of the screen (for example, by
zooming in or out).
Drag or swipe This gesture moves the content on the screen in the direction of the
drag or swipe and at the corresponding rate of speed. For example,
users can move slowly through a list by dragging a finger on the screen,
or they can move quickly through a list by swiping across the screen.
UI Guidelines Design principles
12

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.
Pinch out or pinch in This gesture zooms in to or out from an item.
Pivot This gesture rotates an item or the view.
Best practices
• Carefully consider where you place UI components. Try to keep a 15-pixel margin around UI components and around
the edge of the screen, especially along the top and bottom of the screen. Otherwise, users might inadvertently open a
menu or display the application list.
• Use a target area of at least 5.5 mm for custom UI components, or at least 4 mm if the component extends across the
full width of the screen. It's a good idea to test the size of the target area with users. Components need to be large
enough to touch with a finger, and this size depends on the layout of the screen and the proximity to other UI
components.
• Add visual cues to encourage users to explore the gestures in your application. For example, you can add a slider that
users can use to adjust a value by dragging a finger across the component.
UI Guidelines Design principles
13

Screen design
The BlackBerry PlayBook tablet has a landscape-oriented display. In most cases, you should lay out your application in
landscape view. When designing your application, think about ways to create a widescreen experience for users. For
example, position UI components on the sides of the screen instead of the top or bottom of the screen to take advantage of
the additional width.
In some cases, displaying an application in portrait view offers distinct benefits and provides a better experience for users.
For example:
• Typing: It's easier for users to type with their thumbs when they are holding the tablet in portrait view.
• Reading: Users are familiar with the layout of content in portrait view, and it provides a shorter width of each line in a
paragraph.
• Navigating long lists: Users can see more list items in portrait view.
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.
Best practices
• Place important information near the top of the screen. Think top-down when laying out your screen.
• Avoid placing content where common interactions too often obstruct it.
• Position UI components close to where users' thumbs would be when holding the tablet.
• Use BlackBerry UI components where possible, so that your application can inherit the default behavior of the
component. Users do not have to learn new behaviors for the components that you implement in your application. If
future versions of the BlackBerry PlayBook tablet have different screen sizes, you can avoid rework by using existing
BlackBerry UI components. For more information, see the "UI Components" section.
• Avoid displaying a splash screen unless your application is resource-intensive and takes a long time to open.
Related information
UI components, 21
Menus
The role of a menu is to move UI components, such as buttons and fields, off the main screen of your application. A menu
can contain functionality that you want to hide to maintain a simple main screen, or settings and options that users less
frequently access. If you implement a menu, users should access it using the "swipe from the top of the screen" gesture.
UI Guidelines Screen design
14

Text
Text is used to label items, provide instructions, and convey simple concepts. As simple as that may seem, text is one of the
most important aspects of an effective UI. Designers, writers, and developers should work together to create effective text.
If the text doesn't seem quite right, this can signal a design problem.
Best practices
• In general, all text on the UI should use friendly language and a conversational tone.
• Avoid wordiness. Too much of an explanation discourages reading and is inconsistent with the UI of the BlackBerry
PlayBook tablet. If a complex concept must be explained, consider adding it to a Help screen.
• Avoid using trademarks or other symbols on the UI. Add these to an About screen instead.
• Place labels to the left of UI components in most languages. The only exceptions are check boxes and radio buttons,
which should have the labels to the right.
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
15

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.
• Use italic for emphasis. For example, you can use italic to emphasize a word, a short phrase, words in a foreign
language that readers might not be familiar with, or titles of things or events.
• Avoid underlining text, except when you are creating a hyperlink within a longer string of text.
• Use a paragraph spacing of 2.5 times the font size. For example, with a font size of 21 pixels, use 53 pixels (21 x 2.5)
paragraph spacing.
Capitalization and punctuation
Consistency is the most important aspect of text capitalization and punctuation. You should pay close attention to the
usage of particular terms, phrases, and abbreviations, and make sure they always appear identical.
Best practices
• Do not use colons to terminate labels. Colons don't add any value when a label is adjacent to its UI component. Instead,
vertically align multiple labels to the left, leaving space between the labels and the related UI components.
• Avoid unnecessary end punctuation. Complete sentences end with a period, but short phrases and lists typically do
not.
• Avoid using all uppercase characters. Uppercase text can make users feel like you are shouting at them.
• Use bold 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 bold (for example, "Are you sure you want to delete World News?").
• Avoid using ellipses (…) except to indicate truncated text.
• Use title case capitalization for all UI component labels except check boxes, radio buttons, or labels that might read like
a sentence. Capitalize the first word, the last word, and all other words except articles or prepositions with fewer than
four letters.
Word list
Term Comment
abort (v) Use "end," "quit," or "stop" instead.
alert (n) Use "notification" instead.
UI Guidelines Screen design
16

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" to refer to a category of applications on the home screen.
close (v) Use if there is no associated action other than to dismiss a dialog box.
continue (v) Use "continue" so users know when the steps in a process or procedure are not
complete.
e-mail (n) Use "email" instead.
E-mail (n) Use "email" instead.
email program (n) Use "email application" instead.
ensure (v) Use "verify," "make sure," "provide," or "check" instead.
erase (v) Use "delete" instead.
hang (v) Use "stop responding" instead.
image (n) Use in the context of the browser and HTML messages. Use "picture" in the
context of the camera and media applications.
keypad (n) Use "keyboard" instead.
memory card (n) Use "media card" instead.
navigator (n) Use "multitasking view" to describe the section of the home screen that displays
open but minimized applications.
nuke (v) Use "delete" instead (for example, "delete all tablet data").
picture (n) Use in the context of the camera and media applications. Use "image" in the
context of the browser and HTML messages.
please (adv) Use "please" if you ask users to repeat an action or if users need to wait.
ribbon (n) Use "home screen" instead.
reboot (v) Use "restart" instead.
UI Guidelines Screen design
17

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" instead.
Title bars
Use title bars sparingly. Only include title bars when users navigate hierarchical data in your application. For example, a
title bar can show users where they are in relation to where they have been. Avoid including a title bar for an application
with only one screen.
Dialog boxes
Dialog boxes should be used sparingly because they interrupt user workflow. Instead, provide information in line with a
specific item where possible. For example, if a user doesn't complete a required field in a form, your application should
identify the incomplete field instead of displaying a dialog box that describes the error.
UI Guidelines Screen design
18

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.
Best practices
• Use dialog boxes sparingly. Restrict dialog boxes to the following situations:
• To inform users of urgent information or the status of important actions
• To warn users of unexpected conditions or situations where there is the possibility of data loss
• To present users with multiple options for choice or disambiguation
• When a user action is required for your application to proceed
• Use an implicit save model where possible. For example, when setting options, apply each setting as the user changes
it. Some exceptions exist. For example, if a user chooses to close a document that is being edited, you can use a dialog
box to prompt the user to save changes.
Notifications and indicators
Application notification icons appear in the top-left corner of the home screen. These notifications inform users about
application-specific events, such as a new email. You can trigger an application notification when a new event or new
information is available that users might want to know about.
Status indicators appear in the top-right corner of the screen. These indicators display status information that applies
across applications, such as battery power level and wireless connection.
UI Guidelines Screen design
19

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
• Use application notifications judiciously. Try to determine the types of events that users want to be notified of. Test your
notification strategy with users to avoid unnecessary distractions or interruptions.
• Do not use application notifications to provide feedback to users, such as providing confirmation of a specific user
action.
• Avoid using ellipses (...) to indicate progress. Ellipses should be used only to indicate truncated text. Instead, provide
other visual indicators, such as activity or progress indicators.
Related information
Activity indicators and progress indicators, 29
UI Guidelines Screen design
20