1. technology and computing
2. consumer electronics
3. telephones
4. mobile phones
5. smart phones

UI Guidelines
BlackBerry 10
Published: 2014-12-16
SWD-20141216105017438
Contents
Version 10.3 visual refresh...........................................................................................................................5
Key principles.............................................................................................................................................. 9
The basics................................................................................................................................................. 19
Design units for measurement...................................................................................................................... 19
Wireframe prototyping tips and tools.............................................................................................................20
Application structure....................................................................................................................................22
Screen views................................................................................................................................................ 28
Screen structure.......................................................................................................................................... 31
Different screen sizes................................................................................................................................... 37
Portrait and landscape orientation................................................................................................................48
Platform overview...................................................................................................................................... 51
Gestures...................................................................................................................................................... 51
Keyboards....................................................................................................................................................57
Trackpad and Classic navigation keys...........................................................................................................59
Notifications................................................................................................................................................ 60
Sharing and the Invocation Framework......................................................................................................... 66
Cards...........................................................................................................................................................68
Language.....................................................................................................................................................72
Accessibility.................................................................................................................................................73
Patterns.....................................................................................................................................................75
Menus......................................................................................................................................................... 75
Forms.......................................................................................................................................................... 80
Sheets......................................................................................................................................................... 82
Dialog boxes and toasts................................................................................................................................84
Settings....................................................................................................................................................... 87
Progress and activity.................................................................................................................................... 89
Saving..........................................................................................................................................................92
Deleting....................................................................................................................................................... 94
Avoiding and handling errors........................................................................................................................ 96
Components............................................................................................................................................ 101
Touch targets.............................................................................................................................................108
Highlight behavior......................................................................................................................................109
Empty states.............................................................................................................................................. 112
Audio and visual style.............................................................................................................................. 113
Color..........................................................................................................................................................113
Application icons....................................................................................................................................... 115
Active Frames............................................................................................................................................ 118
Splash screens...........................................................................................................................................122
Earconography sound design..................................................................................................................... 123
In-app icons...............................................................................................................................................126
Transitions................................................................................................................................................. 145
Designing for OLED displays....................................................................................................................... 146
Typography................................................................................................................................................147
Visual asset sizing chart..............................................................................................................................149
Legal notice............................................................................................................................................. 151
Version 10.3 visual refresh
Purposeful simplicity
The fresh new look of BlackBerry 10 reflects our
Version 10.2.1 example
commitment to purposeful simplicity. Thoughtful
visual design improves comprehension, memory, and
inference. Our interface is full of beautiful, precisioncrafted objects that productive people want to use
every day. Browse through the UI Guidelines to see
more examples of how the BlackBerry 10 visual
environment is changing in version 10.3.
The guiding principles of the visual refresh are:
Black or white canvas becomes the base. BlackBerry
10 displays a striking all-white or all-black theme
depending on device screen type or specific app
theme selection. The uniformity of the theme opens
up the screen and enhances readability. Content
becomes the focus.
Precise and simplified for an unobtrusive
experience. You only need to look at a screen
element once to understand what its purpose is and
how it can help you.
Color for focus and signature actions. Color is not
just decoration; it is a partner in productivity. Accent
colors are used to denote an actionable item, an alert,
or something requiring your attention.
Balanced tension between distinct shapes and use
of whitespace. Basic geometric shapes like sharp
squares and circles help to create tension, which is
why they are the new primary shapes of BlackBerry
10. Whitespace is used as a tool to separate chunks
of content and enhance legibility.
Version 10.3 example
Version 10.3 visual refresh
5
See the comparisons below to understand some of the most important design evolutions in the enhanced UI:
Simple, light, colorful
Heavy components and borders are replaced with a simple, flat UI that draws attention with a splash of color:
Version 10.3 visual refresh
6
Simplified app icon design
App icons now have a bright, flat design that helps the user identify the app quickly. The semitransparent tile
that previously anchored the icons to the home screen is now gone:
Revised action bars
Action bars now feature a prominent signature action and a more compact design. They move out of the way
when the user doesn't need them:
Version 10.3 visual refresh
7
Version 10.3 visual refresh
8
Key principles
BlackBerry 10 is about communication, connected apps, and fast interactions. You don't need to spend a lot
of time and effort with your app's UI. We give you the tools you need to build a great-looking UI so that you can
focus on the business logic.
Explore the key principles of BlackBerry 10 and discover how you can bring them into your app.
A fluid environment
A great experience has no compromise
BlackBerry 10 provides a seamless experience that gives users full control and flexibility in every moment and
with every touch. It's as natural and fluid as our actions are in the real world. The UI keeps the momentum
going, allowing users to achieve their goals quickly and efficiently. Keep these principles in mind:
• Organize information in a logical and approachable way so that users can respond quickly.
• Predict what users want to do next in a given context.
• Customize menus for your app and introduce them at the right time and in the right place.
Key principles
9
• Help people connect.
• Don't interrupt the flow between what users see and what they do next.
Communication at its core
Connect and get things done
What it is
It's giving people everywhere the power to connect,
collaborate, and do what's most important to them.
Your app is a communication tool. It's all about
productive action.
Why it matters
Because the essence of the BlackBerry 10
experience is communication. People are social
animals and your app can give them a chance to
connect with others. When you streamline the
experience, your users can stay in your app and
spend less time switching between apps to
communicate.
Example
Your app could integrate with BlackBerry Messenger,
the phone, or text messaging.
Best practice
Integrate communication in a way that makes
sense for your app. Always keep user goals in
mind.
Key principles
10
Content is king
Be selective about chrome
What it is
It's shining the spotlight on what people really care about. Let content be front and center, with nothing to
obscure or clutter the scene. Open the shutters wide and let people enjoy the view.
Why it matters
Because people care about content, including photos, messages, and updates. Create an experience where
content dominates. The options on the screen should stay out of the way but still convey a sense of control to
the users. This is especially important for BlackBerry smartphones with a physical keyboard because the
screen is smaller than on all-touch BlackBerry smartphones.
Examples
In the camera, the content is front and center. The most important action is a tap away, which makes it
incredibly easy for users to take photos over and over again.
Display pictures on the full screen. Let a tap on the screen display an action bar with the most common actions
for the photo. The action bar disappears after a few seconds of inactivity and returns the photo to primary
focus.
In the calendar, UI components such as pickers and drop-down lists expand inline. Users stay in the original
app context and can control the amount of information on the screen.
Key principles
11
Best practices
Be selective when you add UI components to your screens. Use most screens for interacting with the
content in your application. If you place frequently used UI components on the screen, do so judiciously.
Every time you add a UI component to the screen, you show people less of what they care about.
Use titles only when necessary. For example, in the recent call list, there's no "Today" header since the
"Yesterday" header makes the "Today" section obvious.
Cinematic experience
Make your users movie stars
Key principles
12
What it is
It's making people part of the big picture. Put the
control in users' hands and keep everything at their
fingertips. Infuse your application with fluid, natural
gestures that make the screen feel expansive.
Why it matters
Because fluid, sweeping gestures are natural and
make the screen feel larger than it is. It's much more
effective and satisfying to move through a list by
swiping across the screen instead of tapping a scroll
bar. And it's more natural to interact with the list
directly.
Example
If someone applies a filter to a photo, the visual
treatment could change as their finger slides across
the screen.
Best practice
Include gestures in your app that are contextual
and reversible.
Key principles
13
Fluid workflow
Make routines sing
What it is
It's making the experience smooth and effortless from
start to finish. Clear away every obstacle and make
your application smarter and users' repetitive actions
faster. Anticipate each move and efficiently adapt to
each response.
Why it matters
Because we're all different. Some people use their
BlackBerry smartphone mostly for calls, others never
leave BBM, and some are all about games. No matter
what people do, make your application smarter and
users' repetitive actions faster by adapting to
individual usage patterns.
Examples
If someone's most frequent workflow is sending
photos of their kids to their mother using Facebook,
find ways to help them do it faster.
Provide actions in a context menu for things that
people do often.
Try a context-sensitive approach in your app. If
someone send emails to Leticia and Julie together
more often than individually, why not provide an
option to select both of them on one tap?
Key principles
14
Best practice
It's okay if users need to execute several steps the first time that they perform an action, but when users do
the same thing a few times, their patterns become more obvious. Identify usage patterns and adapt your UI
to them.
Efficient ergonomics
Consider the context
Key principles
15
What it is
It's designing the experience with use in mind: one
hand for multi-tasking, two hands for speedy typing,
and landscape for watching movies.
Why it matters
Because people usually interact with their
smartphones in portrait orientation using one hand.
Plus, BlackBerry smartphones with a physical
keyboard only support the portrait orientation.
Examples
A list of search results grows from the bottom so that
users can reach the top hit with their thumbs easily.
On BlackBerry smartphones with a physical
keyboard, consider using shortcut keys to give users
direct access to common actions for a specific
screen. For example, let users press "T" to move to
the top, "C" to compose a message, "S" to search, "I"
to zoom in, and "O" to zoom out.
Best practices
Make sure that users can perform the most common actions in your app with one hand without changing
their grip.
Key principles
16
On all-touch smartphones, be careful with your app layout. Place the most common actions on the bottom
two-thirds of the screen because a thumb travels more easily on a long screen.
Moments of charm
Surprise, delight, and show we're human
Key principles
17
What it is
It's sprinkling moments of delight and making your
app playful.
Why it matters
Because life isn't always serious. Think of ways to
lighten up someone's day. By adding charm to your
app, you show it was designed by and for people.
Examples
Consider the playfulness in how a photo is selected in
Time Shift mode in the Camera app. These are ways
to give your app personality and make it more
engaging.
Best practice
Test your approach with your target users. The
experience shouldn't be whimsical or cartoonish.
What's charming to some might be confusing or
jarring to others.
Key principles
18
The basics
Design units for measurement
A design unit (du) is a unit of length that simplifies the creation of layouts across devices that have different
screen specifications. UI elements such as components and icons have a base design unit value that you can
use to scale assets for all BlackBerry 10 devices.
A design unit is independent of a display’s resolution and takes the standard user-viewing distance into
account. One design unit equals approximately 0.69 mm of screen space. BlackBerry chose 0.69 mm after
careful consideration of current and future screen specifications and how well the length fit into the rhythm of
our user interface.
If you know the device's bucket, you can convert a design unit value into a pixel value.
The basics
19
Device Model
Screen resolution and
density
Bucket
BlackBerry Z30 smartphone
720 x 1280 pixels
8
BlackBerry Z3 smartphone
295 ppi
BlackBerry Classic smartphone
720 x 720 pixels
8
294 ppi
BlackBerry Q10 smartphone
720 x 720 pixels
BlackBerry Q5 smartphone
330 ppi
9
Porsche Design P'9983 smartphone from
BlackBerry
BlackBerry Z10 smartphone
768 x 1280 pixels
Porsche Design P’9982 smartphone from
BlackBerry
356 ppi
BlackBerry Passport smartphone
1440 x 1440 pixels
10
12
452 ppi
The design bucket value indicates the pixel size of one design unit on the device. For example, 1 du on the
BlackBerry Q10 smartphone is 9 pixels. If you have a radio button that is 5 x 5 du, it equals 50 x 50 pixels on
the BlackBerry Z10 smartphone and 40 x 40 pixels on the BlackBerry Z30 smartphone.
You can reverse the formula to calculate du from known pixel values, making asset scaling easy. For example,
if you have a square button 114 x 114 pixels that you created for the BlackBerry Z10 smartphone and you want
to figure out the design unit size to scale the image for a 1400 x 1400 future device, here's how:
1. Divide 114 by 10 (the design bucket for the BlackBerry Z10) to get 11.4.
2. Round off to the nearest integer to get the du value (11 x 11 du).
3. Multiply the du value by the design bucket of the new device (12) to get 132 x 132 pixels.
Wireframe prototyping tips and tools
Get your app together
The basics
20
Download this handy prototyping slide deck, which
contains all the wireframes you should need to mock
up your app:
• Blank device frames for all-touch and physical
keyboard devices.
• Components, menus, controls, fields and other UI
assets, with editable labels.
• Touch gesture hand illustrations for diagramming
interactions.
• Example screen mockups of common user
interface contexts.
Simply add a blank slide, copy the elements you
need, arrange, label, and share.
Wireframe Design Slides
Best practices for planning apps
Use the 80/20 rule. Try to define requirements and experiences around use cases that 80 percent of your
users will encounter. This is especially vital when considering app settings. It's important to make sure the
remaining 20 percent of experience and error scenarios are covered, but they should not guide the initial
wireframes. Work on alternate flows once the primary flow is defined.
Group related requirements. Don't try to wireframe each requirement in isolation. They need to work with
the application and with the platform.
Do your homework. How do other apps in your class or genre work? Can you learn anything that will make
your app better?
The basics
21
Remember BlackBerry 10 design principles. Don't wireframe something that feels out-of-place with the
platform. Things don't have to be exactly the same, but they must behave consistently to avoid confusing
the user.
Start with the big picture. Create the key screens of the overall application. This will help you focus on the
main structure and goals of the app.
Tackle the key use cases. Spend time thinking about the most common tasks and build these out in
encapsulated end-to-end flows.
Align and adjust. Think platform, not application. Something may feel right for your app, but won't work
with all of BlackBerry 10. Keep in mind that you might also have multiple devices and device types to
accommodate.
Don't worry about the details. Exact label text and visuals can come later. Include enough detail to make
things clear, but avoid the overhead of keeping the document 100% reflective of the final app.
Dare to share. Show your wireframes to someone whose opinion you trust. They may be able to point out
opportunities that you missed because you have been too close to the designs.
Using Cascades Exporter as a design tool
Once you have planned out your app with wireframes, consider using Adobe Photoshop to help make your
designs a reality. The Cascades Exporter plug-in for Adobe Photoshop helps you speed up the design and
development workflow by exporting graphics from Photoshop for use in a BlackBerry 10 Cascades app.
Get started by taking a look at the Cascades Exporter install instructions and documentation.
Application structure
Approaches to navigation
Choose a navigation structure based on the most important features in your app and the type of content that
the app provides. Let users access the most frequent tasks quickly and don't overwhelm them with content or
tasks that are less important. Determine which of the following approaches work the best for your app.
The basics
22
Tabs
Tabs allow you to structure content so that users can
move easily between content of relatively equal
importance.
Use when
You have distinct sections of content of relatively
equal importance. Tabs always appear along the
bottom of the screen in an action bar.
Examples
A clock might include tabs for a world clock, an
alarm, a timer, and a stopwatch.
A music app might include tabs for artists, albums,
songs, and playlists.
A tab menu (also known as a sidebar) is a vertically
stacked, scrollable list of tabs. You can use a tab
menu to hold less frequently accessed tabs, or you
can use it instead of tabs along the bottom of the
screen. When users tap the tab menu button at the
bottom of the screen, the tab menu slides in from the
left and appears to the left of the main view.
Best practices
Place the most frequently used tab in the middle
tab position. This area of the action bar is the
easiest place for users to target.
Include tabs on the first level of an app hierarchy
only.
Use up to four tabs in an action bar. Include
additional tabs in a tab menu.
In a tab menu, place the most frequently used
tabs at the top. Place any tabs in the first level of
the hierarchy at the top of the list.
The basics
23
The basics
24
Drill down
Drill-down directories let you structure content in a
hierarchy and show selected parts of the content at
each level.
Use when
A lot of structured, hierarchical content will be added
to the app.
Example
A photo app might have vacation photos grouped by
different trips. All of the photos can't be displayed on
the first level, so users click an album to see that
trip's photos. At the second level, you might present
the photos from the trip as thumbnails. Clicking one
of the photos opens it in full screen, as the third level
in the hierarchy.
Best practice
Include a Back button in an action bar at the
bottom of the screen so that users can navigate
through the hierarchy.
Tab and drill down
A tab and drill down strategy allows you to combine both navigation approaches. Use tabs at the first level of an
app, and then let users drill down into the content.
The basics
25
Example
A music app can have tabs for different genres. Users tap a playlist to see a list of songs.
Custom or unstructured navigation
Make sure that your custom approach provides a better experience than the approaches listed above. You
should test the model thoroughly and refine it so that it's easy for users to learn.
Example
In a map, all information (such as points of interest and directions) appears directly on the map.
The basics
26
Back and peek behavior
If your application uses drill-down navigation, the
content is structured in a hierarchy. Back and peek
behavior lets users return to previously viewed levels
of a hierarchy easily.
When users return to a previous screeen in a
BlackBerry app, the movement is hierarchical.
Moving back takes users to the previous level in the
app hierarchy. Users don't necessarily return to
screen that they viewed earlier.
The Back button can contain an icon and the title of
the screen or tab that users would navigate back to. If
the context is clear, you can use the title "Back"
instead.
Use when
You create deeper levels in an app hierarchy. Make
sure the Back button appears in the far left position in
an action bar.
Examples
Users can return in three ways:
• Tap the Back button.
• Swipe their finger to the right on the content area.
• Peekat the previous level by touching the Back
button and dragging their finger to the right,
allowing them to see the previous level's contents
without leaving their current screen.
Best practices
Don't put a Back button (or any other button) on the screen as a way for users to close an app. The only
way for users to leave an app is by swiping up from the bottom of the screen.
In most cases, save automatically when users move back to the previous screen.
If you combine tabs and drill downs, make sure that the Back button navigates within the tab your user
chose and does not unexpectedly move them to another tab's hierarchy.
The basics
27
Screen views
Before you lay out your screens, think about the type of app that you're designing and the type of content that
you're providing.
You can lay out your app in a variety of ways. Choose the view that makes sense for your app, using the
following views as inspiration:
List
Grid
Lets you give an overview of content that users can
sort and filter, such as contacts or messages.
Lets you display content in a more visually appealing
way by placing images in rows and columns.
The basics
28
Free-form
Content
Lets users navigate a large canvas of information,
such as a map, a game, or an image.
Lets you set the focus on a single item (for example, a
contact card, an email message, or a Facebook post).
The basics
29
The basics
30
Screen structure
Action bar
An action bar is an area along the bottom of the screen that gives you a compact way to include actions and
tabs that apply to the screen. The convenient location of the action bar lets users access actions and tabs
easily and effectively.
You can set up your action bar to include a signature action (an action that is primary to the current screen, or
performed often). Signature action icons are highlighted with a circular background in a theme-controlled
color, and are elevated just above the action bar so that they stand out. Signature action icons float above the
rest of the user interface when the user interacts with the screen (for example, scrolling a list), to ensure that
they are always easy to interact with.
The basics
31
Use when
You want to include your app's most frequently used
and relevant actions.
Don't use when
You want to include less frequent actions. Use an
action menu instead. For example, include Delete at
the bottom of an action menu instead of in an action
bar.
Best practices
Fix action bars along the bottom of a screen. For
immersive views, such as photos or videos, let the
action bar disappear. Show it again when a user taps
the screen.
Avoid filling up an action bar just because
there's room, even if it means that only one
action is displayed in the action bar. Try and avoid
placing more than three actions on a bar.
Consider placing very important actions on the
screen. For example, if the most important action
for a photo is a user to comment on it, let the user
drag the photo to reveal space for adding comments.
Place other important actions, such as sharing,
editing, and setting the photo as wallpaper, in the
action bar.
Use the signature action, but only in contexts
where it can help the user get things done faster.
The function that you choose to be the signature
action should be a high-volume feature (for example,
Compose).
The basics
32
Title bar
A title bar is an area along the top of the screen that
can contain a title, a segmented control, or actions. A
title can help users understand the context of the
current screen.
Use when
There's only one way to view the content and the
context is not apparent.
Don't use when
The content conveys the context in a richer way. For
example, a contact card can identify the context
more easily with a picture and a name than a title can.
Tabs appear at the bottom of the screen.
The basics
33
Segmented controls
Segmented controls are a group of horizontally
stacked buttons that let users see different aspects of
the same content type (for example, top applications,
top free applications, or recently released
applications).
Use when
There are two to four ways for users to view the
content and they might switch views frequently.
Don't use when
You're not sure whether to use segmented controls or
tabs. Use tabs instead. Tabs are easier for users to
interact with and understand.
Best practices
Place the segment that's most frequently used
in the far left position. If you include an "All
content" segment, place it in the far left position.
When users return to a view, show the content
from the last filtered state. When users close an
app and open it again, show the content from the
segment in the far left position.
Don't allow segmented controls to scroll out of view unless you must show more content on the screen.
Make the font size smaller if a label doesn't fit in the segment.
If users can filter only some of the content on a screen, place segmented controls directly above the
content that can be filtered.
If you combine segmented controls with tabs, make tabs the primary method of navigation and make
sure that the segmented control filters content within a specific tab.
The basics
34
Actions in a title bar
If you implement a touch screen keyboard on a screen, actions in a title bar can help prevent users from
submitting information accidentally by providing a physical separation between the action buttons and the
keyboard.
Use when
You have a sheet and you want to help users complete and dismiss it easily. Learn more about sheets.
Don't use when
You need back navigation in a drill down navigation structure. Use the Back button in the action bar instead.
An exception is if the screen is highly focused on text input or if back navigation is a primary action. In these
cases, place the Back button in the title bar so that it isn't hidden by a touch screen keyboard.
Best practice
Place positive actions at the top-right corner of the screen(actions such as Send, Accept, and Save).
Place destructive actions, such as Cancel, Close, and Back, at the top-left corner of the screen.
Menus
Action menus
Context menus
Action menus contain actions that are less frequently Context menus give users a quick way to access the
used than actions that appear in the action bar.
most common actions for an item. Users don't have
to open an item to act on it.
The basics
35
The basics
36
Application menus
Application menus hold important actions that are
independent of context and common across the app
(for example, Settings, Log Out, and About).
Learn more about menus.
Different screen sizes
Designing a UI to accommodate different screen sizes can be a challenge. If you're designing an app for
different BlackBerry smartphones, keep reading to discover ways to design it more efficiently.
If you use UI components that are included in the BlackBerry Application Platform, the components are scaled
based on the screen size. If you use custom UI components, try dynamic layouts, such as a dock or stack
layout.
See below for the full display specifications of released devices:
The basics
37
Model and input method
Displa Screen size
y
LCD
768 x 1280 pixels
4.19 in
Aspect ratio
Screen density
15:9
356 ppi
0.07125 mm (dot
pitch)
BlackBerry Z10 smartphone
Touch screen
The basics
38
Model and input method
Displa Screen size
y
Aspect ratio
Screen density
OLED 720 x 1280 pixels
16:9
295 ppi
4.97 in
0.0860 mm (dot
pitch)
BlackBerry Z30 smartphone
Touch screen
OLED 720 x 720 pixels
3.1 in
1:1 square
330 ppi
0.077 mm (dot
pitch)
The basics
39
Model and input method
Displa Screen size
y
Aspect ratio
Screen density
LCD
1:1 square
330 ppi
BlackBerry Q10 smartphone
Touch screen and physical
keyboard
720 x 720 pixels
3.1 in
0.077 mm (dot
pitch)
The basics
40
Model and input method
Displa Screen size
y
Aspect ratio
Screen density
BlackBerry Q5 smartphone
Touch screen and physical
keyboard
The basics
41
Model and input method
Displa Screen size
y
LCD
768 x 1280 pixels
4.19 in
Aspect ratio
Screen density
15:9
356 ppi
0.07125 mm (dot
pitch)
Porsche Design P’9982
smartphone from BlackBerry
Touch screen
The basics
42
Model and input method
Displa Screen size
y
LCD
720 x 1280 pixels
Aspect ratio
Screen density
16:9
295 ppi
(see note below)
(see note below)
4.98 in
0.0860 mm (dot
pitch)
BlackBerry Z3 smartphone
Touch screen
The basics
43
Model and input method
Displa Screen size
y
Aspect ratio
Screen density
OLED 720 x 720 pixels
1:1
330 ppi
3.1 in
0.077 mm (dot
pitch)
Porsche Design P'9983
smartphone from BlackBerry
Touch screen and physical
keyboard
The basics
44
Model and input method
Displa Screen size
y
Aspect ratio
Screen density
LCD
1:1
453 ppi
1440 x 1440 pixels
4.5 in
0.0561 mm (dot
pitch)
BlackBerry Passport smartphone
Touch screen and touch-sensitive
physical keyboard
The basics
45
Model and input method
Displa Screen size
y
LCD
720 x 720 pixels
3.5 in
Aspect ratio
Screen density
1:1
294 ppi
0.0287 mm (dot
pitch)
BlackBerry Classic smartphone
Touch screen and physical
keyboard, including a trackpad and
navigation keys
Note: The BlackBerry Z3 smartphone's native resolution is 540 x 960 pixels and its screen density is 221 ppi
(0.1149 mm dot pitch), but it simulates a 720 x 1280 pixels and 295 (0.0860 mm dot pitch) ppi display, so
apps should target those higher values.
The basics
46
Tips for a square screen
Best practices for optimizing layouts
Make sure that your layouts scale across devices. Use dock and stack layouts so that layouts scale
automatically. If you created custom layouts in the past, or used fixed or absolute layouts, you might need
to adjust the sizes and positions of your UI components manually to fit different screen sizes.
Pay attention to background bitmaps and assets that use the full screen. If you created custom bitmaps
and assets for larger BlackBerry smartphone screens, you might need to scale those assets by 94% if you
want to use the assets for smaller BlackBerry smartphone screens.
Make static segments scrollable. Consider making static segment controls scrollable with the main view to
make sure there's enough space to present the information they contain.
Rethink background images. Consider using a repeatable background pattern instead of a static image.
Repeatable patterns expand to fit any screen resolution.
Don't create views in landscape orientation for smartphones with a 1:1 aspect ratio. The BlackBerry
Application Platform does not support landscape orientation on smartphones with a 1:1 aspect ratio.
Best practices for focusing on content and primary tasks
Make sure that the most important information is visible. Use non-sticky mode for titles and filters. Adjust
the initial scroll position of views so that the most important information is in focus. Reconsider the
organization of your content so that vital information is shown clearly.
Optimize screen real estate. Consider allowing UI components such as title bars to scroll out of view. If
you're designing an immersive application, such as a video player, where users typically stay in the
application for a significant period of time, UI components should disappear from the screen after a few
moments with no interaction and reappear when a user starts interacting with the screen again.
Make UI components semi-transparent if they overlap with content such as pictures. This effect allows
users to focus on the content instead of the component.
Consider how camera sensors and media formats use different aspect ratios. When you are using the
camera, or displaying photos or video, consider whether it's better to crop to maximize the content area or
scale to show the full content.
Best practices for optimizing split-screen views
Adjust the height of each view. Review and optimize the height of each view so that there's enough room
for users to see and interact with the content.
If you cannot optimize, remove. If you can't optimize your split-screen views, consider removing them for
smaller screens.
The basics
47
Portrait and landscape orientation
In most cases, you should lay out your app in portrait
view. Users tend to hold their BlackBerry smartphone
in one hand, and therefore, typically use it in portrait
view. Plus, smartphones with a physical keyboard use
portrait view exclusively.
Sometimes, landscape view can offer benefits and
provide a better experience for users of all-touch
BlackBerry smartphones. For example, movies and
games. Movies are made to be viewed in wide screen,
and games often require two-handed interaction,
which suits a landscape orientation well.
In some cases, you might lay out your application in
both portrait and landscape orientation. This
approach lets you provide a different focus in each
orientation to enrich the user experience. For
example, you could show a basic calculator in portrait
orientation and a more advanced version in
landscape orientation.
Best practices
If you create custom UI components, make sure
the components appear correctly in both
orientations. If you use BlackBerry UI components,
they're designed to transition seamlessly if users
switch between views.
Maintain consistency. Don't force your users to
switch between orientations manually as they use
your app. If a screen supports landscape orientation,
any subsequent screen should also be available in
that orientation.
Don't create views in landscape orientation for
smartphones with a 1:1 aspect ratio. The
BlackBerry Application Platform does not support
landscape orientation on smartphones with a 1:1
aspect ratio.
The basics
48
The basics
49
The basics
50
Platform overview
Gestures
Instead of poking at UI components, users interact with content on the screen using gestures. Avoid cluttering
the screen with UI components and design your application to support the available gestures. For example, let
users zoom into a picture by spreading two fingers instead of tapping a button to zoom in incrementally.
Bezel gestures
BlackBerry 10 smartphones support gestures from the device bezel, which is the frame around the display
area of the screen. You don't need to implement these gestures in your app. They are provided automatically.
Wake up the device
Display notifications
Display the BlackBerry
Hub
Minimize applications
Platform overview
51
Display a touch screen
keyboard
Display an application
menu
Platform overview
52
Content gestures
If they apply to your app, you can use the following gestures to let users manipulate content directly.
Scroll
Scroll between two items
Select one item
Progress through a file
Peek
Open an action menu
Zoom in
Zoom out
Platform overview
53
Move an item from one
place to another
Platform overview
54
Best practice
If users select a few items at the same time and try to perform an action that can't be performed on all of
them (for example, because some are locked), complete the action on the items that can be acted on.
Display a toast to indicate why the action wasn't performed on some items.
Touch-sensitive physical keyboard gestures
The BlackBerry Passport smartphone features a touch-sensitive physical keyboard. This keyboard allows users
to control the device by swiping their fingers over the surface of the keys.
Fine cursor control and scrolling
Open the symbol picker
Double-tap the keyboard, then swipe your finger to
Swipe down on the keyboard while you are typing to
move the cursor. Swipe up and down to scroll through show symbols.
documents.
Delete text
Select a suggested word
Swipe right to left on the keyboard while you are
typing to delete a word quickly.
Place your finger on the keyboard below the
suggested word, and flick it up toward the screen.
Platform overview
55
Platform overview
56
Keyboards
Touch screen keyboard
A touch screen keyboard appears on all-touch
BlackBerry smartphones when a user taps in a text
field or text area. A user can also display the keyboard
by dragging two fingers from the bottom of the
screen. A user can hide the keyboard by dragging two
fingers to the bottom of the screen, or by touching
and holding the space key.
Best practices
For a task that mostly requires typing (for
example, replying to a message or adding a new
contact), give focus to the correct field so that the
touch screen keyboard appears when the screen
opens.
For a task where typing is optional (for example,
the text message chat view, which is used mostly
for reading a conversation thread), don't put focus on
the text field. Allow the user to tap the text field to
bring up the keyboard when they are ready to type.
If you use a static layout, make sure users can
still reach important parts of the UI. If you need
to, place actions inline.
The keyboard covers the action bar, so try to
avoid placing important actions where the
keyboard will pop up often.
Platform overview
57
Physical keyboard
Many users (especially existing BlackBerry
smartphone users), prefer a physical keyboard to get
things done quickly. Consider scenarios where it
makes sense for users to start typing to complete a
task in your app. For example, in date and time
pickers, a user can choose the time by starting to
type.
Best practices
Use shortcut keys to make repetitive tasks
easier and promote one-handed use. Give users
direct access to common actions for a specific
screen. For example, allow users to press "T" to move
to the top, "C" to compose a message, "S" to search,
"I" to zoom in, and "O" to zoom out.
Use the keyboard for direct action. For example,
set focus on a field so that users can just start
typing.
Don't force users to switch between the
keyboard and the touch screen. Let users use the
keyboard to complete a task.
Shortcuts are just shortcuts. Make sure there is
another way of performing an action in your app.
Platform overview
58
Trackpad and Classic navigation keys
Users can use the physical trackpad to navigate and highlight text. The trackpad also gives users better control
over the cursor or pointer and provides an unobstructed view of the touch screen. Highlights appear on
controls as users navigate with the trackpad so it is easy to tell which item has focus.
In most cases, an action occurs when users release the trackpad, not when they click it. However, when users
click and hold the trackpad, the action occurs before users release the trackpad.
Users can perform the following actions with the trackpad:
User action
Result
Click the trackpad.
Performs default actions on an item. For example, launching
an app from an app icon, or opening a list or grid item.
Click and hold the trackpad.
Opens an action menu associated with an item, if applicable.
Click the trackpad while pressing the Shift
key.
Highlights text or highlights multiple items in sequence. For
example, selecting multiple messages in the BlackBerry Hub.
Move a finger on the trackpad.
Moves the highlight, cursor, or pointer.
Swipe across the trackpad.
Moves the content on the screen quickly in the opposite
direction of the swipe.
BlackBerry Classic also features navigation keys that provide one-press shortcuts for common commands
such as answering a phone call or returning to a previous screen:
Button
Function
Call key
• Answers a call
• Opens the Phone app
Menu key
• Opens the app's action menu
• Selects a highlighted menu item
• Opens the app's application menu (press and hold)
Platform overview
59
Button
Function
Back key
• Returns to the previous screen, or the Active Frames screen
• Closes a menu
End key
• Ends a call.
• Returns to the Active Frames screen
• Turns off the device (press and hold)
Best practices
Assign a default action that is performed when users click the trackpad.
Allow users to move easily from one item to another by swiping across the trackpad. For example, allow
users to see the next or previous picture in a collection of pictures.
Allow movement between touch screen and trackpad interactions to flow seamlessly during a task.
Allow touch screen and trackpad interactions to complement each other. For example, users can scroll to
find content using the touch screen and then use the trackpad to move the cursor to highlight a specific
sentence.
Define the trackpad navigation path logically. You can set the path that the trackpad highlight follows as
users scroll through your UI. Make sure that the focus doesn't jump around unexpectedly.
Avoid customization of the navigation keys. Users expect the navigation keys to work the same way in
every app and context.
Notifications
Notifications tell users about app events, such as a new email or a meeting reminder. You can trigger a
notification when a new event occurs, or new information is available that users might care about. The more
important and time-critical the notification, the more intrusive it should be.
Use the following information to decide how best to notify users without overwhelming them or interrupting
them too often.
Platform overview
60
Splat indicator
The simplest and most subtle way to tell users about a
new event is to add a splat indicator to the application
icon. This notification shows users that new
information is available without interrupting them or
forcing them to act.
Use for
New podcasts or game levels available to download.
Don't use for
Alarms, which are too time-critical, or new posts in a
social network, which are too frequent.
Platform overview
61
Message in the BlackBerry Hub
If your app sends a message (such as an email or a
text message), you can add the message to the
BlackBerry Hub. When a new message arrives, a splat
indicator is added to your app's icon.
Use for
Email, text, and Facebook messages.
Don't use for
Reminders or new podcasts.
Platform overview
62
Item in the notification list
If you want to tell users something important, but your
app doesn't send messages, you can add your item to
the notification list in the BlackBerry Hub. When the
item is no longer relevant, remove it from the list (for
example, a low battery notification is removed when a
user connects a BlackBerry smartphone to a
charger).
If users get multiple notifications from the same app,
the notifications are grouped together. Once the
notification is read, you should delete it automatically
from the list.
When a new item appears in the notification list, a
splat notification is added to your app's icon.
Use for
Travel updates and accessible Wi-Fi networks.
Don't use for
Messages, which should appear in the BlackBerry
Hub, and Facebook comments or likes, which are too
frequent.
Platform overview
63
Dialog box
If you have a critical event or information that is timesensitive, you can display a dialog box. Use this
approach judiciously, since it interrupts your users
and forces them to act.
Use for
Incoming calls, alarms, and calendar reminders.
Don't use for
Messages.
Platform overview
64
Toasts
A toast is a simple, non-modal, pop-up message that
allows an application to give short feedback. A basic
toast can contain text, an icon, or a combination of
the two (for example, volume level display or progress
feedback). Toasts are very short-lived; they should
appear on the screen closest to where an action was
performed and disappear in just three seconds, giving
the user enough time to read but not be annoyed by
the message.
Special intrusive toasts reserved for undoing a delete
command can also be used. This toast includes an
Undo button.
Use for
Short, one-line messages that users can read in under
3 seconds.
Don't use for
Long messages that take more than 3 seconds to
read. Intrusive toasts must only be used to undo
deletions.
Platform overview
65
LED
The LED is an important notification on BlackBerry
devices. When it flashes, it tells users that something
happened.
Use when
Adding messages to the BlackBerry Hub, adding
items to the notification list, or displaying a dialog
box.
Don't use when
Adding a splat indicator to your app icon.
Sharing and the Invocation Framework
The BlackBerry Application Platform lets you give users access to external services, such as Facebook, from a
UI component or action item in your app. For example, users can tap
•
•
•
•
Share to share a photo with a Facebook friend
Open in to open an image in an image editor
Set as to set a ring tone
Contact to call a contact
You can give users access to external services in the action bar, action menu, or context menu.
Platform overview
66
Best practices
Order the external services alphabetically.
Include a Cancel button in the top-left corner of the screen.
Avoid providing access to external services directly from the action bar. Allow users to access groups of
services from the action menu instead.
Platform overview
67
Cards
You can use cards to show screens from another app in your app. For example, users can tap a PDF attached
to an email message and view it in a previewer instead of switching apps. By using cards in your app, you let
users complete a task entirely in your app. Choose from the following three types of cards:
Platform overview
68
Previewers
Users open a previewer by tapping a file type that you
added previewer support to. A previewer transitions in
from the right side of the screen to the left. Include an
action bar with a button and applicable actions on the
previewer.
Use for
Displaying content such as photos, emails, and
documents, or play audio and video files.
Platform overview
69
Composers
A composer transitions in from the right to the left of
the screen. Use a sheet pattern to lay out the screen.
Use for
Creating content such as a new contact, calendar
entry, or status update.
Platform overview
70
Pickers
A picker transitions in from the right to the left of the
screen. Use a sheet to lay out the screen. You can
also include pickers in a composer.
Use for
Selecting content, such as adding recipients in an
address field or adding attachments to a message.
Platform overview
71
Language
The BlackBerry voice is optimistic, inspirational, passionate, intuitive, conversational, and approachable. It's
simple to understand but still respected by the technologically savvy.
Best practices for text
Be helpful. Tell users what to do and how to do it. For example, use “Please close some applications to free
up resources and try again.” instead of "Low memory error."
Be concise. Consider the user's context. Include only what users need to know. For example, if a user
cannot save a photo, use “The media card is full.” instead of “The file could not be saved because the
media card is full.”
Use positive language. Avoid blaming users for errors or unexpected conditions. Instead, focus on what
users can do to resolve the issues. For example, use "Please move to an area with a stronger wireless signal
and try again." instead of "Call failed."
Be conversational. Use simple, everyday language that users understand. For example, use “The media
card is full.” instead of “Error writing file to disk.”
Platform overview
72
Accessibility
You can help meet the needs of a diverse group of
users by designing applications that people with
disabilities or special needs can use.
Following the best practices for designing accessible
applications can benefit a broad range of users,
including the typical users of your application.
Best practices
Stay focused on the user's 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 components, and simplify according to
common usage or common functionality to
minimize the cognitive load for users. Use the least
number of buttons, or other clickable areas, as
possible.
Use components consistently so that users can
recognize common UI components easily. For
example, use buttons to initiate actions. Avoid using
other components, such as hyperlinks, to initiate
actions.
Make actions recoverable. For example, if the
user clicks on the wrong button, they should be
able to go back to where they were and try again
easily.
Platform overview
73
Provide enough space between components so that users can distinguish one control from another and
you can make clickable items such as buttons slightly larger. Narrow the chances that the user might click
the wrong button by mistake.
Pay attention to color. Use a high contrast color scheme for your design, which can make elements easier
to distinguish from the background colors of your UI and help define which control has focus. Avoid relying
solely on color as a way to communicate (for example, using colored buttons with no text label).
Allow the user to change font sizes. Users with visual impairments often increase the font size on their
BlackBerry smartphones to enhance readability, so your app should follow their preferences.
Add labels or captions to images. A user interface that consists of images and only a few text elements that
can be read by screen readers is difficult for users with visual impairments. If your UI relies on images,
make sure each image has alternate text that can be read aloud by a screen reader.
Include closed captioning with your media. If you are including video with your app, consider adding
closed captioning support.
Expose UI elements to assistive technologies to make them easier to interpret. For example, set the
accessibility properties for controls so they can be easily identified by a screen reader.
Consider how your app behaves when users turn on assistive technologies, such as screen magnification,
a larger font size, or a screen reader. For example, is your UI laid out logically so its flow makes sense when
read aloud by a screen reader?
Make each gesture easy to discover. If a gesture applies only to a particular part of the UI, make sure that
you explain the mechanics to the user.
Platform overview
74
Patterns
Menus
Action menus
Action menus contain actions that are used less often than actions in the action bar and are not prominent or
frequent enough to place inline on the screen. People care about content, so you should minimize the number
of options that you display on the screen.
Users open an action menu by tapping the action menu button on the right side of the action bar.
Patterns
75
Best practices
Include only the actions that apply to the screen. Don't repeat actions on all screens in your app. Place
actions that apply to the whole app in the application menu.
Consider including shortcuts to common actions on BlackBerry smartphones with a physical keyboard.
When an action menu is open, let users use a shortcut key for common actions.
Place application-defined actions at the top of the menu (for example, Add as friend, or Play).
Place contextual actions that are defined by the platform in the middle of the menu. Items like Call, BBM,
Share, and Open in are provided by the invocation framework.
Patterns
76
Place Select More and Delete at the bottom of the menu, if applicable.
Context menus
Context menus give users a quick way to use the most common actions for an item in your app. Context menus
are similar to right-click context menus in desktop applications, but are designed for touch screen interfaces. If
you use a context menu in your app, users don't have to open the item to act on it.
Use when
You want to add an action for an item that is visible on the screen.
You have an existing BlackBerry app that uses shortcut keys or pop-up menus. Include the shortcut actions
and pop-up actions in context menus. Context menus replace pop-up or graphical context menus.
Don't use when
Most users probably need the action often. Place the action inline on the screen instead.
Example
If a user touches and holds on a photo, actions such as Share, Edit, Move to folder, and Delete could appear in
the context menu.
Patterns
77
Best practices
Include only the most common actions for the item. Don't clutter the menu with irrelevant functionality.
Include actions for items that users can act on, such as contacts, links, telephone numbers, images, and
list items.
Don't include the most intuitive action. Instead, perform the most intuitive action when users tap an item.
For example, if users can tap an item to open it, then don't include Open in the context menu.
Let users stay in the current context. Keep users in the app to complete a task. You can integrate your app
with other applications to avoid a dead end.
Patterns
78
Include an icon and label for each item. Make sure that the icons are meaningful to users and that the
labels are concise. It is important that icons reflect the actions because only the icons appear when a user
touches and holds an item. The user needs to drag their finger to the left to see the labels.
Consider including shortcuts to common actions on BlackBerry smartphones with a physical keyboard.
When an action menu is open, allow users to perform a common action by pressing a shortcut key.
Application menus
Application menus hold important actions that are
common for the application and aren't contextspecific (for example, Settings, Log Out, or Help).
Users open an application menu by swiping down
from the top of the screen. Users dismiss the menu by
swiping up toward the top of the screen or by tapping
outside the menu.
Best practices
Include as few actions as possible. The menu
holds only five actions. Don't include frequent
actions, navigation links, view-specific actions (for
example, Edit or Sort), or actions that are already on
the screen.
If your app contains settings or help, place the
Settings icon on the far right side of the menu and
the Help icon on the far left.
Use the same icon size and font size as items in
an action bar. Make the height of the application
menu slightly larger than the height of an action bar.
Use the same depth treatment (drop shadow) as you
would for an action menu.
Make sure the application menu pushes the UI on the screen down. The menu should not overlay the UI.
Patterns
79
For actions that open a new view (such as Settings and Help), slide the menu up and slide the new view in
from the right. For actions that open a dialog box or toast, slide the menu up and then display the dialog box
or toast.
Forms
Forms ask users to enter or select information. For
example, when a user edits a contact's details or
creates a meeting request, they're using a form.
Best practices
Minimize the amount of text that users need to
type. Ask only for relevant information. Include
smart default values and let users choose from
pickers where possible. Try to store and display
information that users enter so that they don't need to
enter the same information more than once.
If the form has multiple fields, set the focus on
the first field. This helps users complete the form
quickly. If the first field isn't a text field, don't set the
focus on any component. Otherwise, users might
miss the first component.
Patterns
80
Best practices for input
Allow users to press Enter to move to the next
text field. Make sure that the form scrolls so that
users can see the next field.
Create appropriately sized fields. Let the size of a
field indicate how much information users should
enter.
Be flexible with formats. For example, for phone
Use progressive disclosure. If the form contains
numbers, accept (519) 555-0199, 5195550199,
infrequently used fields or if a set of fields appear
and 519-555-0199.
as the result of a previous field, use progressive
disclosure to reveal fields at the appropriate time.
Use a specific type of all-touch keyboard if the
input is limited to a specific type of entry. For
example, use a numeric keyboard for entering
numbers.
Best practices for groups and labels
Group and order fields logically. For example, group related items together or include the most common
items first.
Use space, labels, dividers, and different font sizes to create hierarchy as needed, but avoid creating too
much visual noise. Use bordered sections sparingly.
Limit the use of labels. Include hint text in fields to minimize the need for labels. This approach helps keep
forms compact and content-focused. In some cases, you might need a label if the field contains a default
value or if the description of the field is too long to include as hint text.
Place labels above their associated fields to provide a stronger visual hierarchy for small screens and to
allow extra space for translated text, if required. If your app is intended for landscape orientation, consider
placing labels beside their associated fields.
Best practices for validation and submission
Validate information as users progress through the form. Don't make the user wait for the information they
entered to validate against a server before they can access subsequent fields in the form.
If you create custom UI components, use a distinct visual cue (for example, a red box) to inform users of
errors. Try to add descriptive error text close to where the error occurs. If you can't validate the information
until a user submits the form and there are errors in multiple fields, scroll to the first field in the form that
contains an error. BlackBerry UI components contain built-in error states.
Disable a Submit action until the user enters all of the required data. If the user tries to select a disabled
Submit action, display an inline message or a toast to identify the missing information.
To make text entry faster, allow users to submit a form by pressing Enter. For example, when entering a
username and password.
Patterns
81
Sheets
Sheets are full-screen views you can use for tasks.
Sheets overlay the current context by sliding in from
the right of the screen onto a full-screen view. When
users complete the task, sheets slide right and
disappear, and users return to their location on the
screen.
Users can't swipe left or right on the content area of a
sheet to navigate back, but they can peek at the
previous screen by dragging their finger to the right.
This approach helps prevent users from dismissing
the sheet accidentally.
Use when
You need to initiate a task from more than one place.
You need to initiate temporary tasks, such as showing
a contact in an app other than the Contacts app.
You have tasks that require users to enter information
in several fields, such as creating a new message or
meeting.
Don't use when
You have simple tasks or tasks that don't require
navigation.
Best practices
Include a title bar with action buttons at the top of the sheet. This helps prevent users from submitting
information accidentally by providing physical space between the action buttons from the touch screen
keyboard.
Disable positive actions until users enter the required information.
Patterns
82
Put positive actions, such as Send, Share, and Save, as buttons in a title bar at the top-right corner of the
screen.
Put destructive actions, such as Cancel, Close, and Back, at the top-left corner of the screen.
Patterns
83
Dialog boxes and toasts
Dialog boxes
Dialog boxes have many roles in BlackBerry 10. They
can be used as notifications, display progress and
activity, show errors, and help with deleting text or
files. As useful and attention-getting as dialog boxes
are, you should try to avoid implementing them
whenever possible. They are modal, and interrupt the
user's interaction with the UI flow.
When possible, present feedback and hints that you
might normally add to a dialog box inline, in the
context where the user is. This type of feedback
doesn’t interrupt the user’s flow and doesn’t force
them to act.
The goal of most dialog boxes is for the user to scan
the information they contain and perform an action in
just a few seconds.
Best practices
Don't use up screen real estate. Dialog boxes
should be less than half a screen in height and
should never block important text or images that
might help the user decide how to interact with the
dialog box. If the information or complexity in your
dialog box needs more space, consider using cards
and sheets instead, which are more flexible.
Patterns
84
Limit the number of buttons. Dialog boxes support one to four buttons that allow user input. Using four
buttons should be uncommon, because they increase the complexity of the message and can burden the
user. The buttons are placed next to each other horizontally, not stacked vertically one on top of the other.
Maintain consistency across associated dialog boxes. If multiple subsequent dialog boxes are needed to
complete a flow, you must pay close attention to the placement of the buttons. If the purpose of the dialog
boxes is similar, keep the buttons in the same general position on each dialog box to avoid unintentional
actions.
Avoid using “Don’t show again” or “Always ask” check boxes. Many users lack the knowledge to decide if
a notification dialog box should be shown to them always or never, so they choose the dialog box to be
shown at each event. This choice slows the flow and undermines their experience. Think carefully about the
frequency of these types of dialog boxes and consider instructing the user how to change app settings in the
body of the dialog box instead of using these check boxes.
Best practices
Use short, relevant titles. Short titles confirm for the user which application or function the dialog box is
associated with.
Keep the body text brief. It should clearly summarize in no more than two sentences what the user is asked
to do with the dialog box. If it is a confirmation, it should be formulated as a question. If it is a prompt, it
should instruct the user.
Use clear, impactful, single-word actions on your buttons. The actions are the most important element
and by using verbs such as “Delete” or “Cancel”, users can often select an action without reading the body
of the dialog box.
Patterns
85
Toasts
A toast is a simple, non-modal pop-up message that
allows an application to give brief feedback that
disappears from the UI quickly. A basic toast can
contain text, an icon, or a combination of the two (for
example, displaying volume level or progress
feedback).
Special intrusive toasts reserved exclusively for
undoing a delete command can also be used. This
toast includes an Undo button.
Since toasts are not as disruptive as dialog boxes,
they are often the best choice to get a simple
message across to users.
Toasts are short-lived. They should disappear in just 3
seconds, giving the user enough time to read but not
be delayed by the message.
Best practices
Keep context in mind. Toasts should appear
close to where an action was performed. The top
of the screen is the best spot for sheet actions such
as Send or Cancel. The center is prime placement
when the toast is not immediately connected to a part
of the screen (for example, to indicate that sound has
been muted). The bottom is suitable for toasts that
are triggered by actions in the action bar.
Don't be verbose. Any text you add to a toast should be readable in less than 3 seconds. Try to limit yourself
to single-sentence, single-line messages.
Patterns
86
Settings
Settings are options that give users control over certain features in your app (for example, turning sound on or
off in a game). Since settings can be overwhelming to users, try to minimize the number of settings that you
provide.
Do I need a setting?
Where should I include settings?
Include settings on the application menu that appears when users swipe down from the top of the screen.
Place a Settings icon in the top-right corner of the application menu.
Patterns
87
How should I organize settings?
Position the most frequently used or most
important settings first to make it easier for users
to change settings quickly.
Group related settings together. Use headings
and dividers to distinguish groups of settings. If
there are no logical relationships among settings, try
to organize them by component type (for example,
keep toggle switches together and check boxes
together).
Let users access advanced features through
progressive disclosure (for example, show a few
basic settings before revealing more advanced
features on a second screen). If there are
dependencies with other fields, position the
dependent fields after the controlling field.
Keep the hierarchy of settings as flat as
possible. If you need to organize the settings into
categories, let users drill down only two levels.
Include a title bar and an action bar on the
Settings screen. The action bar should also
include a Back button that allows users to return to
the previous screen.
What else should I consider?
Save changes implicitly.
Let users search for settings. Register each setting with the search framework so that they can be included in
search results. Include additional meaningful search terms (for example, synonyms for the setting).
Patterns
88
Progress and activity
Users should feel confident that actions that they want, such as rescaling an image or opening a screen, are
progressing as expected.
Sometimes, apps need time to complete complex calculations or to download data (for example, displaying a
local weather forecast for example). When a process takes longer than expected, let users know about the
process and its progress. If the user has to wait more than 3 seconds, show a progress or activity indicator.
Best practices
Use a progress indicator if you know how long the
action will take.
Use an activity indicator if you want to show that
your app is working, but you can't determine how
long it will take.
Give users a break. Consider letting users tap a
progress or activity indicator to show an option to
pause or cancel a downloading or uploading process.
Don't interrupt. When you implement an
indicator, let users interact with the application
while the indicator is displayed by using a toast or
inline control.
Don't use too much space. Place the indicator
where it will not obscure the view of the screen
too much, for example, at the bottom of the screen,
just above the action bar.
Activity indicator
Progress indicator
Patterns
89
Inline indicators
Inline indicators are non-modal ways to let users see
progress information and continue with what they're
doing.
Use when
There's a UI component you can attach the indicator
to.
Examples
• Synchronizing an inbox
• Updating an RSS feed with a few channels
Dialogs
Toasts
Dialogs are a modal way to show progress or activity.
Users can't interact with the screen during the
Toasts are a non-modal way to show progress while
users remain on the screen and are allowed to
continue.
Patterns
90
process. Activity indicators should be used in the title
of the dialog, not in the body.
Use when
• You can't process in the background.
• The app needs to finish a process before the user
can use it again.
Example
Connecting to a remote server.
For more best practices for activity and progress
indicators, see Components.
Use when
The UI doesn't have individual components you can
attach the indicator to.
Example
Uploading an image
Patterns
91
Saving
In most cases, you should save automatically when
users create or change data (such as the details for a
contact) and leave the screen. This lets users get
things done without being interrupted.
Prompting to save
In rare cases, you should save more explicitly. Do this
only when it might take a long time for users to recreate the changes. Prompting to save interrupts
users and makes them indicate whether they want to
save or delete data.
Examples
When users
•
•
•
•
Set up a Wi-Fi connection
Type an email message
Create a meeting invitation
Edit an image or video
Patterns
92
Best practices
Show users the item was saved by changing it visually on the original screen. For example, you could use
an animation to show that the alarm settings were saved. Avoid using notifications like toasts, which can
interrupt users.
If you prompt users to save, keep positive action buttons inactive such as Send, Save, or Done until users
make all of the required changes.
Patterns
93
Deleting
Users delete information daily. Before you support
deleting in your app, think about the type of
information users might delete and how important it
is. If users delete something accidentally, they might
want to retrieve it, but prompting users to confirm
every deletion can slow them down.
You can apply most of the information about deleting
to the actions of removing and resetting.
• Deleting: Deleting an item from the BlackBerry
device
• Removing: Removing an item but not deleting it
from the device (for example, deleting a song from
a playlist)
• Resetting: Returning values to a predefined state
and losing all changes
Use the criteria below to determine how you should
support deleting information in your app:
Critical content
Users might lose valuable data that affects how the
device functions.
Examples:
Resetting the device or an app.
Removing an email account.
Patterns
94
Confirmation type
Show a dialog box that describes the outcome of the deletion and requires users to confirm that they
understand the consequences before the deletion occurs.
Important content
Unimportant content
Users might lose valuable application data or content Users might reproduce the content easily.
in an application.
Examples:
Deleting an email.
Deleting a contact.
Deleting a playlist.
Confirmation type
Show an intrusive toast that lets users undelete. The
toast should disappear within 3 seconds of the user
interacting with the screen. Toasts with buttons must
be used to undo deletions only.
Examples:
Removing a song from a playlist.
Removing an alarm setting.
Removing a tag from a photo.
Confirmation type
Don't ask users to confirm deletion.
Implementation of the delete function
Users can delete or remove items in the following ways. Choose the way that works best for your app.
• In a context menu, users can touch and hold an item or use the multi-select gesture to open the context
menu. Place the Delete action at the bottom of the menu.
• In an action bar, users can open the action menu. Place the Delete action at the bottom of the menu. You
can use this approach when users are in a content view (such as reading an email, looking at a photo, or
viewing the details for a contact).
• Users tap an Edit button to act on a lot of data at one time.
Patterns
95
Place a reset action on a Settings screen. Don't use a context menu or action bar.
Best practices
Don't place a Delete action in an action bar. Use an action menu instead to minimize the risk of users
deleting an item accidentally. Since the action menu button appears at the bottom right of the screen and
the Delete action appears at the bottom of the action menu, users can double-tap to delete an item.
If users delete an item from a list or grid, remove the item from the screen using a delete animation.
If users delete an item from a content view (like an email or contact), remove it from the screen using a
delete animation and return users to the previous screen.
Avoiding and handling errors
Before you handle errors, try to avoid them. The more errors you can handle and remove during development,
the happier your users will be. Here are some ways you can avoid errors:
•
•
•
•
As you design your app, test it with target users and adjust the workflow to help users avoid errors.
Prompt users with default values.
Create fields of a size that reflects how much information users should enter.
Be flexible with formats. For example, for phone numbers, accept (519) 555-0199, 5195550199, and
519-555-0199.
If you need to inform users of an error
Carefully consider whether you need to inform users of an error. If you do, do it in the least disruptive way you
can.
Patterns
96
Inline notifications
Inline notifications keep users in the context of a task
and don't force users to respond before continuing.
Examples
A user entered an improperly formatted email
address.
A user entered an incorrect password.
Implementation
Attach the notification to the affected item. You can
add a subtle animation to show where the error is.
Patterns
97
Toasts
Toasts are useful when an inline notification isn’t
possible. Toasts also let users to continue without
stopping what they are doing.
Examples
An image didn't upload successfully.
New messages don't appear because the device isn't
connected to a wireless network.
Implementation
Display a toast on the screen. The toast should
disappear after 3 seconds.
Patterns
98
Dialog boxes
Dialog boxes are essential when users must
acknowledge an error before they can move forward.
Example
Restarting an application.
Use
Display a dialog box that users must respond to
before they can continue.
Best practices
Tell users about errors as soon as you can. If a user enters an incorrect phone number, you can display an
inline notification as soon as they leave the text field.
Patterns
99
Keep action buttons inactive (such as Send, Share, or Next) until users enter the required information and
it's validated.
Suggest a solution. Don't just state the problem; help users recover. For example, a BlackBerry device isn't
connected to a wireless network, you can prompt the user to connect to a Wi-Fi network.
Offer to fix issues that affect performance. If a user has many browser tabs open, you can suggest closing
some tabs to improve browsing.
Don't tell users that an action was successful. Let them feel confident in the success of their actions.
Don't reset values that users enter unless the values are confidential, such as passwords.
Patterns
100
Components
Pickers
Components
101
Use a picker when you want users to choose from two
to three sets of interconnected values, such as the
day, month, and year of an appointment, or the hour
and minute for a timer. You can also use a picker to
simplify a complex UI and reduce the number of
steps in a workflow by allowing users to select
multiple values in one step.
Don't use when
Users need to select from only one set of values. Use
a drop-down list instead.
Drop-down lists
Use a drop-down list when you want users to choose a
single value from a larger set. Drop-down lists can
make complex screens more compact and
streamlined by collapsing many options into one
element.
Don't use when
Users need to choose from two to three sets of
interconnected values, such as the date and time of
an appointment. Use a picker instead.
Best practices for drop-down lists
Use the value users are most likely to choose as the default value.
Don't use "Yes" and "No" as list values. Use a check box instead, and rephrase the option to describe the
action.
Components
102
Lists
A list presents content as list items, usually as an entry point to the next step in the navigation hierarchy. Lists
can be displayed in a stacked or grid layout. To read more about lists, see Screen views.
Best practice for lists
If you use images, populate the list as soon as possible so that list item text appears before all images are
loaded.
Dividers and headers
Use dividers and headers to create a visual hierarchy to separate groups of items that belong together.
Best practices for dividers and headers
Use a divider as a simple visual barrier, to separate items in a container or list.
Use a header to separate sections in a list. A header contains one or two strings to label the section.
Components
103
Buttons
Use a button to initiate an action.
Best practices for buttons
Set the button that users are more likely to tap as the default button. Don't make a button for a
destructive action the default.
Use single-word labels where possible.
Use verbs that describe the associated action, such as "Cancel," "Delete," or "Save."
Text fields and text areas
Use a text field to let users input a single line of text, such as a contact name or a password.
Use a text area to let users input several lines of text, such as a comment or a message.
Learn more about text input in Keyboards and Forms.
Best practices for text fields and text areas
Include hint text in fields so that you need fewer labels. You might need a label if the field has a default
value or if the field's description is too long as hint text.
Components
104
Try to reduce the text users need to type. Let users choose items from pickers when you can. Try to store
and display information that users enter so they don't have to type it repeatedly.
Use word prediction in text fields only with text that is likely in the dictionary, not in password, phone
number, or name fields. The predictions might get in the way in these fields.
Activity and progress indicators
Use an activity and progress indicators to show users that your app is working and to show them the process
and its progress.
Use an activity indicator when you want to show that
your app is working, but you can't determine how long
the process will take.
Use a progress indicator when you can determine how long the process will take.
Learn more about progress and activity indicators.
Best practices for activity and progress indicators
Always indicate progress when a process takes more than 3 seconds to complete.
If list content is being retrieved through the cloud (for example, third-party pictures), populate the list as
content is received so users can interact with the content that's available.
Incorporate an inline solution if you can.
For progress indicators, show users the progress state (for example, "Uploading 5 of 7 pictures,"
"Uploading 2.4/4 Mb," or "4:24").
Components
105
Check boxes, radio buttons, and toggle switches
Use check boxes, radio buttons, and toggle switches to let users select options.
Check boxes
Radio buttons
Use check boxes when users can select multiple
items or options.
Use radio buttons when users can choose among
more than two mutually exclusive options.
Toggle switches
Use a toggle switch when users can choose between two options, such as On and Off. You can also use a
toggle switch if you want to make a setting harder for users to change accidentally.
Components
106
Best practices for check boxes and radio buttons
Create a touch target area for the whole row and label. Check boxes and radio buttons have small visible
areas.
Use positive labels where possible. For example, use Show instead of Hide.
Best practice for toggle switches
Use terms that identify the state of the option, not the action required to change the state. For example,
"On" indicates the current state, but "Turn on" describes an action.
Sliders
Use a slider to control settings with a wide range or to show a preview of the change (for settings like volume
level or screen brightness). You can also use a slider for fast forwarding and rewinding media files.
Users drag the slider from left to right, or double-tap it to jump to predefined increments.
Best practice for sliders
Combine sliders with images or strings that explain the context, such as progress of a media file or the
level of a filter that is being applied to a photo.
Components
107
Touch targets
Users touch the screen with their fingertips, so touch targets (also called hit areas) for UI components should
be large enough for users to use without frustration. If you use BlackBerry UI components, you don’t need to
worry about the size of the touch target for each UI component. The sizes are designed to be large enough for
users to touch with a finger without having to hit the target precisely.
If you create custom UI components, remember that the size of the touch target depends on the ppi of the
screen. If you are designing your app for different BlackBerry devices, create a touch target for the pixel
density of each screen size.
Best practices for custom UI components
Create touch targets. For BlackBerry smartphones, create touch targets that are at least 101 x 101 pixels
(7.2 mm).
Make the size of the touch target larger than the visible UI component. Provide enough space around
each component so that users can initiate an action easily. The extra space provides leniency for users
whose attention is divided or those who are on the go.
For check boxes and radio buttons, create a touch target area for the entire row and the associated label.
These UI components have small visible areas.
Make the size of the release area larger than the visible UI component. The extra space allows for
imprecise interactions, such as when a finger moves after initially touching the screen.
Test the size of each touch target with your users.
Components
108
Highlight behavior
Highlighting helps users identify the item that they're
acting on. The highlight on a component behaves
differently depending on the component and the
context. If you use BlackBerry UI components,
highlighting is built into the component.
Best practices for highlighting
custom components
For binary interactions, highlight the component
when a user touches it. Remove the highlight
when the user moves their finger off the control. The
highlight should return when the control is touched
again, unless the control scrolls with the view.
If users scroll through a list or view (for example,
a grid view), don't highlight individual items.
If an item requires continuous interaction (for
example, a slider), highlight the item until the
user releases their finger. In this case, you might need
to lock other items that allow scrolling, such as lists.
Don't let users highlight items they can't act on.
Disable components by dimming them or remove
them from the screen.
Components
109
Highlighting in action: Touch and hold highlight
Users can touch and hold list and grid items to bring up context menus. To give the user a visual clue that the
context menu will be triggered, the item cycles through a three-step highlight progression:
Grid items
The user begins the touch and hold action. A solid 4pixel border appears around the grid item.
As the user continues to hold, a gradient forms inside
the solid border. This effect is subtle so that the
content of the grid item (which is often a photo) is not
obscured.
As the user releases their finger, a solid 8-pixel border
appears around the grid item and the context menu
appears.
List items
The user begins the touch and hold action. A solid 4
pixel border appears around the list item.
As the user continues to hold, the interior of the list
item begins to fill with a gradient.
Components
110
As the user releases their finger, the fill gradient
solidifies and the context menu appears.
Components
111
Empty states
In some situations, lists may not contain any initial
data because no content is currently available, or the
user hasn't created content yet. This state is called an
empty state.
Best practices
Don't show an empty screen. The app should use
the empty space to promote content creation (for
example, a contact, note, or calendar event) or
prompt the user to initiate a synchronization to
populate the list with content.
Use dummy list items. It can be helpful to include
text prompts and an accompanying image or
control that calls the user to action or explains why
the space is currently empty.
Components
112
Audio and visual style
Color
BlackBerry 10 UI design follows a specific color palette that all apps use by default, but you can brand your
app with a signature color. This use of color can be a dramatic statement because all of the core screen
components can be colorized, except for text selection and fine cursor controls.
Only a single primary reference color is needed to colorize an app. A color algorithm calculates matching base
and highlight colors from that single color value so that your app has a polished look and appealing gradients
throughout. If you want more control over the palette, you have the option of explicitly specifying the base color
yourself.
Look at the palettes below for some good color choices that look nice in both the dark and bright visual
themes. The default BlackBerry 10 primary color is Sky Blue, which is prominently displayed in the action bar's
signature action button.
Audio and visual style
113
Best practices for choosing colors
Consider the bright and dark themes. If your app is designed to run in both themes, your choice of colors
should look good across themes.
Don't go to extremes. Choosing a color that is too dark or too bright might make it difficult for your users to
see screen elements against the black or white background due to lack of contrast.
Think of accessibility. Some of your users might be color blind, which could limit the range of colors they
can see on the screen, making it difficult to see and use certain controls.
Be careful with the base color. In most cases, it is best to define only the primary color and let the system
calculate the base color. Going with the calculated base is a good way to ensure that your intended colors
are retained in future versions of the user interface. If you do want to define a base color, make sure that it is a
similar hue but slightly darker version of your primary color (as shown in the sample palettes).
Keep the default font colors. The white or black font colors should be retained in almost all circumstances
to maintain readability on components such as buttons and title bars.
Audio and visual style
114
Application icons
Designing an icon for your BlackBerry smartphone application lets you showcase your app to BlackBerry
device users. In the BlackBerry World storefront, an icon is the first introduction that users have to your app.
The icon also appears on the home screen as a way for users to open your app.
Your application name label appears below the icon.
Best practices
For devices with a screen resolution of 720 x 720 pixels create an icon that is 90 x 90 pixels.
For devices with a screen resolution of 768 x 1280 pixels create an icon that is 110 x 110 pixels.
For devices with a screen resolution of 720 x 1280 pixels create an icon that is 96 x 96 pixels.
For devices with a screen resolution of 1440 x 1440 pixels create an icon that is 144 x 144 pixels.
Focus on a single iconic metaphor that clearly represents the application. Think of your icon as a road
sign that people understand quickly.
Use a silhouette to differentiate your icon from other icons.
Try to maintain consistency with other BlackBerry application icons in scale, volume, and color palette.
Audio and visual style
115
Basic shapes
App icons are based on basic shapes. Most of the rounded squares and circles used in the UI have exactly
the same size and proportions as the shapes you see below.
Focus area and lighting
If you use a symbol in your icon, make it the same size as the symbols in other BlackBerry application icons.
The symbol should be 62% of the total size of your icon. Note that the lighting source appears to be shining on
the upper left of the icon.
Audio and visual style
116
Color palette
Limit the number of colors that you use in your icon.
The colors shown here are used in BlackBerry
application icons.
Audio and visual style
117
Active Frames
An Active Frame (also called an application cover)
appears on the home screen. Users tap an Active
Frame to re-open the app.
When you are deciding whether to create an Active
Frame for your application, consider the following:
• Is there a single item that users should know about
when the app is minimized (for example, a
calendar shows the next event or a weather app
shows the current temperature)? If so, create an
Active Frame.
• Is it more important for users to see the state of
the app when it is minimized? If so, you don't need
to create an Active Frame. A scaled-down version
of the current app screen displays as the Active
Frame.
Best practices
For smartphones with a 720 x 1280 screen
resolution, create an image that is 319 pixels
Future smartphones with a 1440 x 1440 screen
resolution can display two sizes of Active
Audio and visual style
118
wide by 437 pixels high. A footer appears
automatically and includes the title of your
application. The text appears in Slate Pro Font at
regular weight and is set to 30 pixels high.
For smartphones with a 768 x 1280 screen
resolution, create an image that is 334 pixels
wide by 396 pixels high. A footer appears
automatically and includes the title of your
application. The text appears in Slate Pro Font at
regular weight and is set to 35 pixels high.
For smartphones with a 720 x 720 screen
resolution, create an image that is 310 pixels
wide by 211 pixels high. A footer appears
automatically and includes the title of your
application. The text appears in Slate Pro Font at
regular weight and is set to 30 pixels high.
Frames. Large Active Frames are 440 pixels wide by
486 pixels high. Small Active Frames are 440 pixels
wide by 195 pixels high.
If you add text to the main body of the Active
Frame, use the Slate Pro Font at regular weight
and set it to 35 pixels high. Set secondary text to 30
pixels high. In some cases (for example, with a time
stamp), you can set the font size to 24 pixels high.
Place the most important information near the
top of the Active Frame. Only the top half of the
Active Frame appears on BlackBerry smartphones
with a physical keyboard.
Avoid including too much information on the
Active Frame.
Header
You can make the header a solid color or make it semi-transparent if you want a bigger image.
Use Slate Pro Font at regular weight and set it to 25 pixels high. If you include an avatar, make it 50 x 50 pixels.
For devices with a 720 x 1280 screen resolution
Audio and visual style
119
For devices with a 768 x 1280 screen resolution
For devices with a 720 x 720 screen resolution
Grid
You can lay out images in a grid format.
For devices with a 720 x 1280 screen resolution
Audio and visual style
120
For devices with a 768 x 1280 screen resolution
For devices with a 720 x 720 screen resolution
Small and large-sized Active Frames
See below for examples of a large and small Active Frame, which can be used on future devices with a 1440 x
1440 screen resolution.
A large Active Frame, with a list view
Audio and visual style
121
A small Active Frame, with a grid view
Splash screens
A splash screen appears when a user opens your app.
If you don't define a splash screen, a default
BlackBerry splash screen will appear.
Apps, like people, have only one chance to make a
good first impression, so get creative and make a
splash.
Best practices
Don't crowd the splash screen with too much
content. A simple layout of well-selected, wellplaced elements is best.
Provide useful information. Consider adding
information such as the app version or app
loading progress to your splash screen.
Audio and visual style
122
Earconography sound design
Advanced mobile computing platforms such as
BlackBerry 10 not only include a UI, they also provide
a sonic language that is represented by audio
notifications, event feedback, and system sounds.
BlackBerry 10 is the world's first platform to offer the
universal earconography approach to sound design
for standardized audio notification events. A universal
sound language has existed for decades in the analog
world, for example, door bells, alarms, phone ringers,
and desk bells. Anyone who hears these sounds
knows what is being communicated immediately.
The goal of earconography is to achieve a sonic
language with all audio notification events so that the
user is more informed about the who, what, why, and
when of an event. You can build the same kind of
familiarity with your app's notifications by following
universal sound patterns, but with the aesthetic
freedom of slight sonic variations.
Consider the visual language of a graphical UI. An
icon of an envelope can be different colors, have a
stamp on it (or not), or be tilted 25 degrees, but as
long as it still looks like an envelope, users will know
what it represents. Same story for sounds.
You can build variation into the base sounds easily if
you think of each sound effect as having three layers:
Audio and visual style
123
• X is the fixed structural pattern that identifies a specific earconography sonic event that occurs (for
example, phone, text, or reminder). This is like the structural pattern of Morse code, which is specific and
different for each letter, but isn’t really about sound. Morse code can even be ‘played’ by a light source.
• Y introduces textures and instruments to provide tonal variation and sonic identity to ensure each event is
unique and differentiated from all other notifications in your suite.
• Z is the treatment layer that provides a variable amount of waveform modification. This includes effects
processing such as reverb, delay, modulation, gain, panning, and Doppler. These effects provide more
complexity, indicate urgency, and allow you to customize and personalize the sound.
BlackBerry 10 base sounds
Email messages
A four-note ascending pitch flam (1/16th notes at
200bpm) pattern with equal timing intervals, in the
mid range of the assortment (the default email
notification is G3, D4, G4) with a natural sounding
medium sustain that is not phone-like. The Y-layer
has warm and rich instrumentation, on top of the
baseline brand sound.
BBM
A two-note ascending pitch pattern in a higher range
than email messages (E3, B4) with a moderately tight
release/sustain. On top of the brand baseline
instrument, the Y-layer uses clarity bells to provide
differentiation from the email message notification.
BBM Video
A hybrid notification language, where the universal
ringer is applied to the standard BBM pattern. A twonote descending repeated two times (E4, A3, rest, E3,
A3) with a longer, phone ringer style sustain/release
that is repeated several times like a phone ringer. The
Audio and visual style
124
Y-layer is the same as BBM to associate BBM Video
with BBM.
Text
A one-note, single shot (F#4) with a tight, short
release. The single note is appropriate given the
frequency of text messages. The Y-layer
instrumentation used here could be similar to the
phone notification to associate these two classic cell
phone features.
Phone
A two four-note traditional telephone alternating ring
pattern, with equal timing intervals and duration in
the upper range (G4, D4, G4, D4, G4, D4, G4) and a
longer sustain/release. Additional melodies and
patterns can be explored for additional variations.
The Y-layer should contain high frequency
instrumentation for definition and transmission, as
well as tonal character for fullness and balance.
Timer
An alert with three equally spaced notes of the same
frequency with a super tight sustain/release. Equal
silence is added between repeats, with two repeats
minimum in a higher register range for improved
transmission. (A4, rest, A4, rest, A4). This notification
is stark, with a ‘system-like’ style and sound to
differentiate it from notifications that orginate from an
outside source (for example, phone or messages).
Audio and visual style
125
Reminders
An attention getting alert with a two-note ascending
lead-in of tight release, followed by slower timer
pattern (three equal interval chimes), like the hourly
chimes of a clock in 1/4 notes at 190bpm with a
medium sustain (G3,G4, D4,rest, D4, rest, D4). The
Y-layer effect sounds like a gentle, yet persistent
chime, to create association with existing real-world
reminders, such as the notification tone when a car
door is opened.
Third party/generic
A four-note ascending/descending pattern with the
first note accented, played in a broken rhythm,
differentiated from email/messaging with equal
timing and a moderately tight release (G3, rest G3,
D4, C4). No Y-layer is applied, to avoid confusion with
applications from your brand.
Best practices
Your files should have as little silence as possible at the head and tail of the file. Any silence should be
uniform to promote a linear playback performance.
Pushed notification effects should be .m4a format, with a 48 khz sampling rate, and should use either a
constant or average bit rate of no lower than 128 kbps.
UI feedback effects should be full-resolution .wav format in order to achieve low latency playback for
responsive user feedback.
A good use of sounds is a rare use of sounds. Don't include feedback for something that happens every
few seconds in your app, like the movement from one screen to another, or the activation of a control.
Above all, your notifications should not be annoying. Choose instrumentation, pitch, and volume that can
be heard several times a day without annoying the user.
In-app icons
The design of your app's icons is especially important because they are the main ways that your user triggers
your app's most essential features. Check out the types of icons that you can create, how to build and style
your icons, and tips and tricks for getting the most from the icons in your application.
Audio and visual style
126
Themes
Some BlackBerry devices feature an OLED display that uses a dark version of the standard BlackBerry 10
theme. Here are examples of in-app icons used in the light and dark themes:
Light theme
Dark theme
Creating icons
The process below describes the main steps you can follow to create your icons.
Step 1
Find an appropriate metaphor for the function or physical object that the icon should represent. Try out
different variations and pick the one that's easiest to recognize.
Step 2
Create the icon shapes using the information in Metaphors. Use a vector application (such as Adobe
Illustrator) and apply the information from Building blocks.
Note where your icon appears in the UI and set up the artboard in your design application accordingly. Use
pixel units and make sure you use pixel snapping.
Audio and visual style
127
Step 3
Import the shape to a pixel application (such as Adobe Photoshop) and keep it as a shape layer. Use snapping
and make sure that straight edges are sharp and aligned. If you don't use snapping, nudge the shape points to
avoid blurry edges.
Make sure that you set the canvas to the correct width and height.
Apply the treatment rules from the Building blocks topic and save the image as PNG-24 with transparency.
Step 4
Test the icon with other icons, comparing the weight and style.
Put the icon on a BlackBerry device and test it in context.
Types and sizes
BlackBerry smartphones use different sizes for in-app icons and indicators.
Keep the main graphical elements within the inner area of the icon or indicator to allow for a UI buffer zone.
The focal area refers to the size of the symbol within the icon itself.
Action bar and menu icons
Large icons
8 x 8 du (focal area 5.5 x 5.5 du)
Large icons are the most common. Apps use them most often in these UI contexts:
Audio and visual style
128
Action bar with tab icons
Action menu icons
Audio and visual style
129
Tab menu icons
Content area icons
Audio and visual style
130
Application menu icons
Context menu icons
Audio and visual style
131
Components and small buttons
Medium icons
Use the medium icon size for components.
7 x 7 du (focal area 4.5 x 4.5 du).
Small icons
Use the small icon size for small buttons.
6 x 6 du (focal area 4.5 x 4.5 du)
Audio and visual style
132
Indicators
Indicators are small icons used in the content area to show extra information (for example, status). If you
create an indicator, follow the design guidelines for icons listed above. Reduce the amount of detail, and
reduce the number of pixels by one for the largest lines. Follow the size and alignment guidelines below:
Audio and visual style
133
Large indicators
5 x 4 du
Small indicators
3 x 3 du
Audio and visual style
134
Alignment
Not recommended: The first indicator is not bottomRecommended: Make indicators smaller than the
adjacent text. Bottom-align indicators to the baseline. aligned. The second indicator is larger than the text.
Metaphors
Icons should be pictorial and convey meaning through a resemblance to a physical object or function. When
you design the icons for your app, create them with a professional and premium design that is authentic and
uses natural dimensions. Icons should be:
• Modern
• Highly recognizable
• Single-colored
• High contrast
• Low-to-mid detailed
• Equally weighted
In addition, consider the following guidelines:
Resemblance
Make sure that the outline and shape of the icon resemble the physical object or its function as much as
possible. Stay true to the meaning of the icon. Focus on the key outlines of common objects. In most cases,
this approach makes the icon highly recognizable. The result should stand on its own, without any explanatory
text.
Audio and visual style
135
Recommended
Not recommended
Viewing angle
To make an icon highly recognizable, design it so that it is viewed from one side only. In general, don't use
angles or rotations. Icons should not use any 3-D perspective, but can be aligned to 45° to fill the focal area.
This approach results in a more balanced icon weight.
Recommended
Not recommended
Audio and visual style
136
Recommended
Not recommended
Focus
It is very important to emphasize the meaning of the function or object by setting focus on the correct part of
the icon, especially for icons that are composed of more than one object. You can set the focus by making an
object within the icon heavier than the rest of the parts. In most cases, make the foremost object the heaviest
element. Icons treated this way are balanced with the surrounding icons.
No focus
Recommended
Too much focus
Level of detail
Icons should be as simple as possible. However, with the high resolution screens of modern smartphones, you
can add detail to make the icons appear more recognizable, crafted, and professional.
Audio and visual style
137
Avoid adding detail for the sake of adding detail. Add detail where it makes sense and where it enhances the
readability of the icon. A high density of detail can make an icon cluttered. Not enough detail might make the
icon unrecognizable. The golden rule is to keep detail to a minimum without losing the characteristics of the
icon.
Too little detail
Recommended
Too much detail
Building blocks
Focus
Try to keep the majority of the icon shape within the
focal area to create balance among icons.
In some cases, an icon might need to expand into the
safe frame to include a common shape, splat
indicator or text.
Audio and visual style
138
Recommended
Not recommended
Splat indicators
Splat indicators can overlay the top-right corner of an
icon. Text can overlay the bottom center of an icon.
Audio and visual style
139
Treatment
Add a subtle gradient to icons.
To keep the icon as sharp as possible, don't use extra effects. Don't use colors for the enabled state (except
the content area icons).
Enabled on a bright background
Top of the gradient:
• Hex #4F4F4F
• R 79 G 79 B 79
Bottom of the gradient:
• Hex #363636
• R 54 G 54 B 54
The disabled state is at 50% opacity.
Enabled on a dark background
Top of the gradient:
• Hex #E3E3E3
• R 227 G 227 B 227
Bottom of the gradient:
• Hex #D1D1D1
• R 209 G 209 B 209
The disabled state is at 50% opacity.
Audio and visual style
140
Selected
Top of the gradient:
• Hex #3CBCE7
• R 60 G 188 B 231
Bottom of the gradient:
• Hex #01A8DF
• R 1 G 168 B 223
The disabled state is at 50% opacity.
Colors
Use color for content area icons only. Stay true to the color palette and imitate the gradient values to keep the
design coherent.
Hex: #00B800
Hex: #E6B400
Use: Positive, action, and Use: Attention
start
Hex: #D60000
Hex: #00A8DF
Use: Warning, stop, and
error
Use: Selection and
information
Audio and visual style
141
Shapes and lines
You can create icons in any shape as long as the silhouette is simple, clear, and true to the metaphor. The
silhouette must be a minimum of 4 pixels at the thinnest part to clearly define the outer part of the icon. Detail
in the icon can be smaller and narrower (a minimum of 2 pixels).
Round the outer corners slightly, but keep the shape as close as possible to the object or function that it
represents. Round line caps according to the thickness of the line. Keep arrow stems hard.
Cuts and objects
If you divide an icon into multiple objects, include a 3-pixel gap to separate the objects. The gap should be
equally thick along the foremost object. To maintain readability and minimize clutter, your icon should not
contain more than three objects.
If an icon contains duplicate objects, the foremost object should be bigger than the object portrayed in the
back. The back object should be 15% smaller, but maintain the line and silhouette thickness.
Common shapes
You can add common shapes to icons to indicate functionality or direction, as a complement to the metaphor.
The function should be the icon itself, but in some cases, add-ons strengthen the purpose of the icon.
Delete
Favorite
Add
Search
Play
Mail
Send
Secure
Audio and visual style
142
Contact
Edit
Move left/back
Attach
The default placement of common shapes is at the bottom right corner. Depending on the shape of the main
icon, you might need to adjust the add-on vertically so that the add-on looks like a separate object.
Recommended: A Forward folder
icon with correct positioning of the
common shape.
Not recommended: The forward
shape is placed incorrectly. Stay
true to the logic of forward and
backward.
Not recommended: The main icon
and the common shape look like
the same object.
On and off states
Icons that appear in on and off states follow the same rules across the UI. You can define the off state by
adding a crossbar at 45 degrees with a cut-out shadow in negative space to enhance the bar. The crossbar
extends equally beyond the main shape past the bottom-left corner and the top-right corner.
Audio and visual style
143
On
Off
Delete, close, and cancel
Delete: Use Delete when
something is completely removed
from the system (for example, files,
images, and applications).
Close: Use Close when part of
something is removed (for
example, a window, list item, or an
instance in a group selection).
Cancel: Use Cancel for a behavior
(for example, if a user edits
something and doesn't want to
save the changes, provide the
option to cancel).
Audio and visual style
144
Transitions
It's a good practice to create a UI experience that is
both functional and usable-meaning that users can
understand and carry out actions in an application.
However, in today's competitive market, you might
want to create an application that is more than just
functional and usable. One way is to create an
experience that strikes an emotional chord with your
users.
Incorporating transitions (animations) into your
application can help strike that chord. You want users
to create an emotional bond with your application and
enjoy using it. Strike a balance between performance
and emotion.
Best practices
Make transitions sequential. A simple, efficient
transition helps users make sense of what's
happening more quickly.
Compound transitions. Like a symphony,
compounded effects can trigger more of an
emotional response than a single effect. A
combination of transitions looks sophisticated and
can really impress users. Too much of a good thing
can be overwhelming, however, so try to limit the
number of transitions to two per element.
Make transitions interactive. You can create an
emotional effect when user actions trigger
transitions.
Fuse the smart and the beautiful. The combination of these two virtues always impresses.
Audio and visual style
145
Designing for OLED displays
Some BlackBerry smartphones have an OLED screen instead of a traditional LCD screen. From a visual design
perspective, this type of screen has higher contrast and clarity than an LCD screen. However, the lighter the
image on the screen, the more power the device consumes.
Additionally, brighter pixels burn down faster which can cause an undesirable screen effect called burn-in,
where pixels lose their luminosity and color vibrancy over time. Think of each OLED pixel as a candle. When
you burn a candle, it burns down slowly and never recovers. The higher the flame on the candle, the faster it
burns down.
Audio and visual style
146
Best practices for optimizing battery life and reducing screen burn-in
Adapt your color scheme. Bright colors and UI components in static positions (for example, title bars and
action bars) can increase screen burn-in. The darker an image is, the less power it uses. Try and use a black
theme and adjust light backgrounds to use less power while still preserving readability.
Consider removing subtle patterns and textures. Use pure black where possible. Using pure black also
allows you to blend the UI with the black hardware elements that surround it.
Typography
Slate Pro Font is the preferred font for the BlackBerry 10 smartphones because it is elegant and legible,
allowing users to access information quickly and easily.
BlackBerry 10 uses medium, regular, and light font weights, as well as light italic type. BlackBerry 10 uses
extra, extra small to large font sizes. The extra large and extra, extra large sizes are CSS standards for font
scaling.
Audio and visual style
147
Slate Pro Font medium
Slate Pro Font regular
Slate Pro Font light
Slate Pro Font light italic
The following information shows the colors for text on bright and dark backgrounds:
Audio and visual style
148
Visual asset sizing chart
The following chart shows the pixel dimensions of
common visual assets for various BlackBerry 10
devices. Click the column headings for more
information. See Design units for measurement on
page 19 for more information on du measurements
and conversion.
Device-specific elements
Model
Screen
resolution
and
density
BlackBerry Z10 smartphone
768 x 1280 110 x 110
pixels
Porsche Design P’9982 smartphone from BlackBerry
BlackBerry Z30 smartphone
BlackBerry Z3 smartphone
App icon size
(pixels)
Active Frames
size (pixels)
334 x 396
356 ppi
720 x 1280 96 x 96
pixels*
319 x 437
295 ppi*
Audio and visual style
149
Model
Screen
resolution
and
density
App icon size
(pixels)
Active Frames
size (pixels)
90 x 90
310 x 211
*Emulated
screen
dimensions
for
BlackBerry
Z3
BlackBerry Q10 smartphone
Porsche Design P'9983 smartphone from BlackBerry
BlackBerry Q5 smartphone
BlackBerry Passport smartphone
720 x 720
pixels
330 ppi
1440 x
144 x 144
1440 pixels
Two sizes are
supported:
453 ppi
Large: 440 x 486
Small: 440 x 195
BlackBerry Classic smartphone
720 x 720
pixels
90 x 90
310 x 211
294 ppi
Common elements
In-app icon sizes:
The focal area refers to the size of the symbol within the icon itself.
• Action bar and menu icons (large): 8 x 8 du (focal area 5.5 x 5.5 du).
• Components (medium): 7 x 7 du (focal area 4.5 x 4.5 du).
• Small buttons (small): 6 x 6 du (focal area 4.5 x 4.5 du).
Indicator sizes:
• Large: 5 x 4 du
• Small: 3 x 3 du
Audio and visual style
150
Legal notice
©2014 BlackBerry. All rights reserved. BlackBerry® and related trademarks, names, and logos are the
property of BlackBerry Limited and are registered and/or used in the U.S. and countries around the world.
Adobe, Adobe Illustrator, and Photoshop are trademarks of Adobe Systems Incorporated. Bluetoothis a
trademark of Bluetooth SIG. Facebook and the Facebook logo is a trademark of Facebook, Inc. Slate Pro Font
is a trademark of Monotype Imaging Inc. and may be registered in certain jurisdictions. Twitter is a trademark
of Twitter, Inc. Wi-Fi is a trademark of the Wi-Fi Alliance. All other trademarks are the property of their
respective owners.
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
BlackBerry Limited and its affiliated companies ("BlackBerry") and BlackBerry assumes no responsibility for
any typographical, technical, or other inaccuracies, errors, or omissions in this documentation. In order to
protect BlackBerry proprietary and confidential information and/or trade secrets, this documentation may
describe some aspects of BlackBerry technology in generalized terms. BlackBerry reserves the right to
periodically change information that is contained in this documentation; however, BlackBerry 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 thirdparty web sites (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. The inclusion of a reference to Third Party Products and Services
in this documentation does not imply endorsement by BlackBerry 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, NON-INFRINGEMENT, 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
Legal notice
151
THE DATE YOU FIRST ACQUIRED THE DOCUMENTATION OR THE ITEM THAT IS THE SUBJECT OF THE
CLAIM.
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, IN NO EVENT SHALL
BLACKBERRY BE LIABLE FOR ANY TYPE OF DAMAGES RELATED TO THIS DOCUMENTATION OR ITS USE,
OR PERFORMANCE OR NON-PERFORMANCE 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
BLACKBERRY PRODUCTS OR SERVICES, DOWNTIME COSTS, LOSS OF THE USE OF BLACKBERRY
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 BLACKBERRY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, BLACKBERRY
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 BLACKBERRY AND ITS
AFFILIATED COMPANIES, THEIR SUCCESSORS, ASSIGNS, AGENTS, SUPPLIERS (INCLUDING AIRTIME
SERVICE PROVIDERS), AUTHORIZED BLACKBERRY 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 BLACKBERRY
OR ANY AFFILIATES OF BLACKBERRY 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 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. 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 BlackBerry's products and services are provided as a
convenience to you and are provided "AS IS" with no express or implied conditions, endorsements,
Legal notice
152
guarantees, representations, or warranties of any kind by BlackBerry and BlackBerry 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 BlackBerry.
Certain features outlined in this documentation require a minimum version of BlackBerry® Enterprise Server,
BlackBerry® Desktop Software, and/or BlackBerry® Device Software.
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.
BlackBerry Limited
2200 University Avenue East
Waterloo, Ontario
Canada N2K 0A7
BlackBerry UK Limited
200 Bath Road
Slough, Berkshire SL1 3XE
United Kingdom
Published in Canada
Legal notice
153
Legal notice
154