Ui guidelines black_berry_10

BlackBerry 10

Updated: 2012-12-20

UI G

uide

lines

Published: 2012-12-20SWD-20121220090117917

Contents1 Key principles ................................................................................................................................. 52 The basics .................................................................................................................................... 12

Application structure ........................................................................................................................................................ 13

Screen views .................................................................................................................................................................... 17

Screen structure ............................................................................................................................................................... 18

Designing for different screen sizes ................................................................................................................................... 24

Portrait and landscape ..................................................................................................................................................... 26

3 Platform overview .......................................................................................................................... 27Gestures .......................................................................................................................................................................... 28

Keyboards ........................................................................................................................................................................ 30

Notifications ..................................................................................................................................................................... 32

Sharing and the Invocation Framework ............................................................................................................................. 36

Cards ............................................................................................................................................................................... 37

Language ......................................................................................................................................................................... 39

4 Patterns ........................................................................................................................................ 41Menus .............................................................................................................................................................................. 41

Forms .............................................................................................................................................................................. 45

Sheets .............................................................................................................................................................................. 47

Settings ............................................................................................................................................................................ 48

Progress and activity ........................................................................................................................................................ 49

Saving .............................................................................................................................................................................. 51

Deleting ........................................................................................................................................................................... 52

Handling errors ................................................................................................................................................................ 54

5 Components ................................................................................................................................. 58Touch targets ................................................................................................................................................................... 63

Highlight behavior ............................................................................................................................................................ 64

6 Visual style .................................................................................................................................... 65Application icons .............................................................................................................................................................. 66

Active frames ................................................................................................................................................................... 69

In-app icons ..................................................................................................................................................................... 71

Types and sizes ......................................................................................................................................................... 72

Metaphors ................................................................................................................................................................. 78

Building blocks .......................................................................................................................................................... 80

Typography ...................................................................................................................................................................... 84

7 Legal notice .................................................................................................................................. 86

Key principles

BlackBerry 10 is about communication, connected apps, and fast interactions. You don't need to spend a lot of time andeffort 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 businesslogic.

Explore the key principles of BlackBerry 10 and discover ways to bring them into your app.

BlackBerry FlowA great experience has no compromiseBlackBerry Flow brings together many of the key principles of BlackBerry 10. It's a seamless experience that gives usersfull control and flexibility in every moment and with every touch. It's as natural and fluid as our actions are in the real world.Flow keeps the momentum going, allowing users to achieve their goals quickly and efficiently. Keep these principles inmind:

• Organize information in logical and approachable ways so that users can respond quickly.

• Predict what users want to do next in that context.

• Customize menus for the app and introduce them at the right time, in the right place.

• Help people connect.

• Don't interrupt the flow between what users see and what they do next.

1

UI Guidelines Key principles

5

Communication at its coreConnect and get things done

What it isIt's giving people everywhere the power to connect,collaborate, and do what's most important to them. You getthe apps out of the way and keep communicate at the core.It's all about productive action.

Why it mattersBecause the essence of a BlackBerry experience iscommunication. People are social animals and your appcan give them a chance to connect with others. When youstreamline the experience and keep users in your app, theydon't have to switch apps to communicate.

ExamplesYour app could integrate with BBM, the phone, or textmessaging.

Best practice

Find a way to integrate communication in a way thatmakes sense for your app. Always keep the user goals inmind.

Content is kingBe selective about chrome


6

What it isIt's shining the spotlight on what people really care about. Let it be front and center, with nothing to obscure or clutter thescene. Throw the shutters wide open and let people enjoy the view.

Why it mattersBecause people care about content - pictures, messages, and updates. Create an experience where content dominates.The options on the screen should stay out of the way but still give users freedom of control. This is especially important forBlackBerry smartphones with a physical keyboard because the screen is smaller than all-touch BlackBerry smartphones.

ExamplesIn the camera, the content is front and center. The most important action is just a tap away, making it incredibly easy forusers to take pictures over and over again.

Display pictures in the full screen size. Let a tap on the screen display an action bar with the most common actions for thepicture. The action bar disappears after a few seconds of inactivity, bringing the picture back to the fore.

In the calendar, UI components such as pickers and drop-down lists expand inline. Users maintain their context but stillhave the option to minimize or maximize the amount of information on the screen.

Best practices

Be selective about adding chrome (UI components) to your screens. Use most screens for interacting with thecontent in your application. If you place frequently used UI components on the screen, do so judiciously. Every time youadd a UI component to the screen, you show people less of what they care about.

Only use titles when necessary. In the recent call list, there's no "Today" title since the "Yesterday" title makes the"Today" section obvious.


7

Cinematic experienceSweeping interaction on the move feels good

What it isIt's making people part of the big picture. Put the control intheir hands and keep everything at their fingertips. Infuseyour application with fluid, natural gestures that make thescreen feel expansive.

Why it mattersBecause fluid, sweeping gestures are natural and make thescreen feel larger than it is. It's much more effective andsatisfying to move through a list by swiping across thescreen instead of tapping a scroll bar. And it's more naturalto interact directly with the list.

ExampleIf someone edits a picture and applies a filter, the visualtreatment could change as their finger slides across thescreen.

Best practice

Include gestures that are contextual and reversible inyour app.

Fluid workflowMake routines sing


8

What it isIt's making the experience smooth and effortless from startto finish. Clear away every obstacle and make yourapplication smarter and repetitive actions faster. Anticipateeach move and efficiently adapt to each response.

Why it mattersBecause we're all different. Some people use theirBlackBerry smartphone mostly for calls, others never leaveBBM, and some are all about games. But no matter whatpeople do, try to make your application smarter andrepetitive actions faster by adapting to individual usagepatterns.

ExamplesIf someone's most frequent workflow is to send photos oftheir kids to their mother using Facebook, find ways to helpthem do it faster.

Provide actions in a context menu for things that people dooften.

Try a context-sensitive approach in your app. If someoneemails Leticia and Julie together more often than they doseparately, why not provide an option to select both on onetap?

Best practice

It's ok if a few more steps are required the first time that people do something. But when users do the same thing afew times, their patterns become more obvious. Try to identify the usage patterns and adapt the interface.

Efficient ergonomicsConsider the context


9

What it isIt's designing the experience with use in mind: one hand formulti-tasking, two hands for speedy typing, and landscapefor watching movies.

Why it mattersBecause people usually use smartphones in portrait viewand often use smartphones with only one hand.

ExamplesA list of search results grows from the bottom so that peoplecan easily reach the top hit with their thumb.

On BlackBerry smartphones with a physical keyboard,consider using shortcut keys to give users direct access tocommon actions for a specific screen. For example, letusers press "T" to move to the top, "C" to compose amessage, "S" to search, "I" to zoom in, and "O" to zoomout.

Best practices

Make sure that people can do the most common actions in your app with one hand without changing their grip.

On all-touch smartphones, be careful with your app layout. Try to put the most common actions on the bottom two-thirds of the screen because a thumb travels more easily on a long screen.

Moments of charmSurprise, delight, and show we're human


10

What it isIt's sprinkling moments of delight and making your appplayful.

Why it mattersBecause life isn't all serious. Think of ways to lighten upsomeone's day. By adding charm to your app, you show itwas designed by and for people.

ExamplesConsider the playfulness in how photos dangle inScrapBook or how the paper is torn off when clearing acalculation in the calculator. These are ways to give yourapp personality and make it more engaging.

Best practice

Test your approach with users. The experienceshouldn't be whimsical or cartoonish. What's charming tosome might be off-putting to others.


11

The basics

Application structureDetermine the navigation structure that works best for yourapp

Choose a navigation structure ›

Screen structureGet an overview of action bars, title bars, and menus

Learn ways to structure screens ›

Screen sizesDiscover ways to design for different screen sizes

See the specs and best practices ›

Portrait and landscapeRead the considerations for laying out screens in portraitand landscape

Learn about orientation ›

2

UI Guidelines The basics

12

Application structure

NavigationChoose a navigation structure based on the most important features in your app and the type of content that theapplication provides. Give users quick access to the most frequent tasks and don't overwhelm them with content or tasksthat are less important. Determine which of the following approaches work the best for your app.

TabsTabs allow you to structure content so that users can moveeasily between content of relatively equal importance.

Use whenYou have distinct sections of content of relatively equalimportance. Tabs are always fixed along the bottom of thescreen in an action bar.

ExamplesA clock might include tabs for a world clock, alarm, timer,and stopwatch.

A music app might include tabs for artists, albums, songs,and playlists.

A tab menu (sidebar) is a vertically stacked, scrollable list oftabs. You can use a tab menu to hold less frequentlyaccessed tabs, or you can use it instead of tabs along thebottom of the screen. When users tap the button for the tabmenu at the bottom of the screen, the tab menu slides infrom the left and appears to the left of the main view.

Best practices

Place the most frequently used tab in the middle tabposition. This is the easiest place for users to target.


13

Include tabs on the first level of an app hierarchyonly.

When users tap a tab, display the content at the topof the screen. If users tap an item in a tab (for example, alist item), include a Back button so that users can navigateto the first level in the hierarchy. Don't use Back to movebetween tabs.

Use up to four tabs in an action bar. Includeadditional tabs in a tab menu.

In a tab menu, place the most frequently used tabsat the top. Place any tabs in the first level of the hierarchyat the top of the list.

Drill-down


14

Drill downs let you structure content in a hierarchy andshow selected parts of the content at each level.

Use whenUse drill-downs when you have lots of structured,hierarchical content.

A drill-down approach is common when you use lists forcontent. The list item shows a small amount of the contentthe item has. When users click the item, it opens and showsmore information.

ExampleA photo app might have vacation photos grouped intodifferent trips. You couldn't present all of the photos on thefirst level, so users would click an album to see that trip'sphotos. At the second level, you might present the photosfrom that trip as thumbnails. Clicking one of the photosopens it in full screen, as the third level in the hierarchy.

Best practice

Include a Back button in an action bar at the bottomof the screen so that users can navigate the hierarchy.

Tab and drill-downAllows you to combine the two approaches. Use tabs only at the first level of an app, then let users drill down into thecontent.

ExampleA music app can have tabs for different genres. Users can tap a playlist to see a list of songs.

CustomMake sure that a custom approach provides a better experience than the approaches listed above. You should test themodel thoroughly and refine it so that it's easy for users to learn.


15

ExampleIn a map, all information (such as points of interest and directions) appears directly on the map.

Back behaviorIf your application uses drill-down navigation, the content isstructured in a hierarchy. Back behavior lets users moveback easily through the hierarchy.

When users move back in a BlackBerry app, the movementis hierarchical. This means that moving back takes users tothe previous level in the app hierarchy. It doesn'tnecessarily take them back through each screen that theyviewed earlier in the app.

Use whenYou create the second or deeper levels in an app hierarchy.Make sure the Back button appears in the far left position inan action bar.

The Back button can contain an icon and the title of thescreen or tab that users would navigate back to. If thecontext is clear, you can use the title "Back" instead.

ExamplesUsers can move back in three ways:

• Tap the Back button

• Swipe their finger to the right on the content area

• Touch the Back button and drag their finger to the rightto peek at the previous level.

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 forusers 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. Read more about saving.

If you combine tabs and drill-downs, make sure that back navigates within one tab only.


16

Screen viewsBefore you lay out your screens, think about the type of app that you're designing and the type of content that you'reproviding.

You can lay out your app in a variety of ways. Choose the view that makes sense for your app, using the following views asinspiration:

ListLets you give an overview of content that users can sort andfilter, such as contacts or messages.

GridLets you display content in a more visually appealing way byputting images in rows and columns.

Free-form Content


17

Lets users navigate a large canvas of information, such as amap, a game, or an image.

Typically used to set the focus on a single item (forexample, a contact card, a message, or a Facebook post).

Screen structure

Action barAn action bar is an area along the bottom of the screen that gives you a compact way to include actions and tabs that applyto the screen. The location of the action bar lets users access actions and tabs easily and effectively.


18

Use whenYou want to include the most frequent and relevant actionsfor the entire screen.

Don't use whenYou want to include less frequent actions. Use an actionmenu instead. For example, include Delete at the bottom ofan action menu instead of in an action bar.

Best practices

Fix action bars along the bottom of a screen. Forimmersive views, such as pictures or videos, let the actionbar disappear. Show it again when users tap the screen.

Avoid filling up an action bar just because there'sroom even if it means that just one action is displayed in theaction bar.

Consider placing very important actions inline on thescreen. For example, if the most important action for apicture is to comment on it, let users drag the picture toreveal space to add comments. Place other importantactions, such as sharing, editing, and setting the picture aswallpaper, in the action bar.

Title bar


19

A title bar is an area along the top of the screen that cancontain a title, a segmented control, or actions. A title canhelp users understand the context of the current screen.

Use whenThere's only one way to view the content and the context isnot apparent.

Don't use whenThe content conveys the context in a richer way. Forexample, a contact card can more richly identify thecontext with a picture and a name than a title can.

If tabs appear at the bottom of the screen, don't include atitle.

Segmented controls


20

Segmented controls are a group of horizontally stackedbuttons that let users see different aspects of the samecontent type (for example, top applications, top freeapplications, and recently released applications).

Use whenThere are two to four ways for users to view the content andusers might frequently switch views.

Don't use whenYou're not sure whether to use segmented controls or tabs.Use tabs instead. Tabs are easier for users to interact withand understand.

Best practices

Place the segment that's most frequently used inthe 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 fromthe last filtered state. When users reopen an app afterexiting it, show the content from the far left segment.

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 the names don't fit in the segment.

If users can filter only some of the content on a screen, place segmented controls directly above the content thatcan be filtered.

If you combine segmented controls with tabs, make tabs the primary method of navigation and make sure that thesegmented control filters content within a specific tab.

Actions in a title barActions in a title bar help prevent users from submitting information accidentally by separating the action buttons from avirtual keyboard.


21

Use whenYou have a sheet and you want to help users complete and dismiss it easily. Learn more about Sheets.

Don't use whenYou need back navigation in a drill-down. Use the action bar for back navigation instead. An exception is if the screen ishighly focused on text input or back navigation is a primary action. In these cases, put the back navigation in the title bar sothat it isn't hidden by a virtual keyboard.

Best practice

Place positive actions, such as Send, Accept, and Save at the top right of the screen. Place more destructiveactions, such as Cancel, Close, and Back, at the top left of the screen.

Menus

Action menusAction menus contain actions that are less frequently usedthan actions that appear in the action bar.

Context menusContext menus give users a quick way to access the mostcommon actions for an item. Users don't have to open anitem to act on it.


22


23

Application menusApplication menus hold important actions that areindependent of context and common across the app (forexample, "Settings", "Log Out", and "About").

Learn more about Menus.

Designing for different screen sizesDesigning a UI to accommodate different screen sizes can be a challenge. If you're designing an app for differentBlackBerry smartphones, keep reading to discover ways to design it more efficiently.

BlackBerry 10 Dev Alpha• Display screen size: 1280 x 768 pixels; 4.19 inches

• Aspect ratio: 15:9 portrait view

• Pixels per inch: 356

• Dot pitch (mm): 0.07125

• Interaction: Touch screen

The screen size for the BlackBerry 10 Dev Alpha and the first BlackBerry 10 touch device is 1280 x 768 pixels. However,future BlackBerry smartphones will have the following screen sizes:


24

• All-touch smartphones: 1280 x 720 pixels (16:9 aspect ratio)

• Smartphones with a physical keyboard: 720 x 720 pixels (1:1 aspect ratio)

If you use UI components that are included in the BlackBerry platform, the components adjust based on the screen size. Ifyou use custom UI components, use dynamic layouts.

Smartphones with a physical keyboardBest practices for optimizing layouts

Make sure that layouts scale across devices. Use dock and stack layouts so that layouts scale automatically. If youcreated custom layouts for the BlackBerry 10 Dev Alpha or use fixed or absolute layouts, you'll likely need to manuallyadjust the sizes and positions of your UI components to fit different screen sizes.

Pay attention to background bitmaps and assets that use the full screen width. If you create custom bitmaps andassets for all-touch smartphones, you might need to scale those assets by 94% for smartphones with a physical keyboard.

Don't create landscape views for smartphones with a 1:1 aspect ratio unless you have a good reason to uselandscape view.

Best practices for focusing on content and primary tasks

Make sure the most important information is visible. Adjust the initial scroll position of views so that the mostimportant information is in focus. Alternatively, you can restructure the layout so that less important information appears atthe bottom.

Optimize screen real estate. As users scroll, 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 asignificant period of time, chrome (UI components) should disappear from the screen after a few moments of nointeraction 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 allows users to focus onthe content instead of the chrome.

Best practices for optimizing battery life

BlackBerry smartphones with a physical keyboard have an OLED screen. The way you design your screens can help tooptimize battery life.

Adapt your color scheme. Bright colors and UI components in a static position (e.g. title bars and action bars) have atendency to burn out pixels quicker. The darker an image is, the less power it uses. Can you use a black theme? Can youadjust light backgrounds to use less power and still preserve readability?

Consider removing subtle patterns and textures. Use pure black where possible.


25

Portrait and landscapeIn most cases, you should lay out your app in portrait view.Users tend to hold their BlackBerry smartphone in onehand, and therefore, typically use it in portrait view.

Sometimes, landscape can offer benefits and provide abetter experience for all-touch BlackBerry smartphoneusers. Take movies and games, for example. Movies aremade to be viewed in wide screen, and games often requiretwo-handed interaction.

In some cases, you might lay out your application in bothportrait and landscape view. This lets you provide adifferent focus in each view to enrich the user experience.For example, you could show a basic calculator in portraitview and a more advanced version in landscape view.

Best practices

If you create custom UI components, make sure thecomponents display correctly in both views. If you useBlackBerry UI components, they're designed to transitionseamlessly if users switch between views.

Don't create landscape views for smartphones witha 1:1 aspect ratio unless you have a good reason to uselandscape view.


26

Platform overview

GesturesFind out which gestures you can use in your app

Learn about gestures ›

KeyboardsRead about virtual and physical keyboards

Learn about keyboards ›

NotificationsDiscover ways to inform users about application-specificevents

Notify users ›

SharingLearn best practices for giving users access to externalservices

Integrate external services ›

3

UI Guidelines Platform overview

27

GesturesInstead of "poking" UI components, users interact with content on the screen using gestures. Avoid cluttering the screenwith UI components and design your application to use the available gestures. For example, let users zoom into a picturewith the spread gesture instead of tapping a button to incrementally zoom in.

Bezel gesturesThe BlackBerry 10 Dev Alpha supports gestures from the device bezel (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

Display a virtual keyboard Display an application menu


28

Content gesturesIf they apply to your app, you can use the following gestures to let users directly manipulate content.

Scroll Scroll between two items Select one item Select multiple items

Peek Open an action menu Zoom in Zoom out

Move an item from one placeto another

Progress through a file


29

Best practice

If users select a few items at once and try to perform an action that can't be done on all of them (for example,because some are locked), do it on the items you can. Then display a toast to say why it wasn't done on some items.

Keyboards

Virtual keyboard


30

A virtual keyboard appears on all-touch BlackBerrysmartphones when users tap in a text field or text area, orusers can drag two fingers from the bottom of the screen.Dragging two fingers down to the bottom of the screen ortapping outside the input area hides the keyboard.

Best practices

If the main task is typing text (for example, replyingto a message or adding a new contact), put the focus on theright field so that a virtual keyboard is there when thescreen opens.

If you’re using a static layout, make sure users canstill reach important parts of the UI. If you need to, you canput actions inline.

If important actions appear in an action bar, don'tcover the action bar with the keyboard (unless youimplement a sheet).

Physical keyboardMany users (especially existing BlackBerry users), rely on a physical keyboard to get things done quickly. Considerscenarios where it makes sense for users to start typing to complete a task in your app. For example, in the clock, users canset the timer by starting to type.

Best practices

Use shortcut keys to give users direct access to common actions for a specific screen. For example, allow users topress "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 to use the keyboard to completea task.


31

NotificationsNotifications tell users about app events, such as a new email message or a meeting reminder. You can trigger anotification when a new event 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.

Icon splatThe simplest and subtlest way to tell users about a newevent is to add a splat to the application icon. Thisapproach shows users that new information is availablewithout interrupting them or forcing them to act.

Use forNew podcasts or game levels available to download

Don't use forAlarms (too time-critical) or new posts in a social network(too frequent)

Message in the BlackBerry Hub


32

If your app sends messages (such as email or textmessages), you can add new messages to the BlackBerryHub. When a new message arrives, a splat is added to theicon.

Use forEmail, text, and Facebook messages

Don't use forReminders or new podcasts

Item in the notification list


33

If you want to tell users something important but your appdoesn't send messages, you can add an item to thenotification list. This gives users an entry point into the app.When items are no longer relevant, remove them from thelist (for example, a low battery notification is removed whenthe BlackBerry device is connected to a charger).

Users can tap the item in the notifications list. If users getmore than one notification from an app, they're groupedtogether.

When a new item appears in the notification list, a splat isadded to the app icon.

Use forTravel updates and open Wi-Fi networks

Don't use forMessages (should appear in the BlackBerry Hub) andFacebook comments or likes (too frequent)

Intrusive dialog


34

If you have a critical event or the information is time-sensitive, you can display a dialog. Use this approachjudiciously since it interrupts users and forces them to act.

Use forIncoming calls, alarms, and calendar reminders

Don't use forMessages

LEDThe LED is an important BlackBerry notification. When itflashes, it tells users something has happened.

Use forAdding messages to the BlackBerry Hub, adding items tothe notification list, or displaying an intrusive dialog

Don't use forAdding a splat to the app icon


35

Sharing and the Invocation FrameworkThe BlackBerry platform lets you give users access to external services, such as Facebook, from a UI component or actionitem in your app. For example, users could 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.

Best practices

Order services alphabetically.

Include a Cancel button at the top left corner of the screen.


36

Avoid providing access to a group of services directly from the action bar. Allow users to access groups of servicesfrom the action menu instead.

CardsYou can use cards to show screens from another app inline in your app. For example, users can tap a PDF in an emailmessage and view the PDF in a previewer instead of having to switch apps. Cards help users to complete a full task in yourapp using capabilities that are already provided to you. Choose from the following three types of cards:

Previewers

Use forViewing content such as open pictures, emails, anddocuments, or play audio and video files

Users can open a previewer by tapping a file type thatyou've added previewer support to.

A previewer transitions in from the right to the left of thescreen.

Include an action bar with a back button and applicableactions on the previewer.

Composers


37

Use forCreating content such as a new contact, calendar entry, orstatus update.

A composer transitions in from the bottom of the screen tothe top.

Use a sheet pattern to lay out the screen.

Pickers


38

Use forSelecting content such as adding recipients in an addressfield or adding attachments to a message.

A picker transitions in from the bottom of the screen to thetop.

Use a sheet to lay out the screen. You can also includepickers in a composer.

LanguageThe BlackBerry voice is optimistic, inspirational, passionate, intuitive, conversational, and approachable. It's simple tounderstand 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 upresources and try again.” instead of "Low memory error."

Be concise. Consider the user's context. Only include what users need to know. For example, if a user cannot save apicture, 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 doto resolve the issues. For example, use "Please move to an area with a stronger wireless signal and try again." instead of"Call failed."


39

Be conversational. Use simple, everyday language that users understand. For example, use “The media card is full.”instead of “Error writing file to disk.”


40

Patterns

MenusRead about the different menus you can use in your app

Use menus ›

FormsLearn more about how to design forms

Design forms ›

SheetsGet an overview of how sheets can present sub-tasks

Use sheets ›

Handling errorsDetermine how to prevent errors in your app

Prevent errors ›

Menus

Action menus

4

UI Guidelines Patterns

41

Action menus contain specific actions that are used less often than actions in the action bar and are not prominent orfrequent enough to place inline on the screen. People care about content so you should keep the options that you displayon the screen to a minimum.

Users open the action menu by tapping the action button on the right side of the action bar.

Best practices

Include only the actions that apply to the screen. Don't repeat actions across all screens in the app. Put actions thatapply across the app in the application menu.

Consider including shortcuts to common actions on BlackBerry smartphones with a physical keyboard. When anaction menu is open, let users use a shortcut key for common actions.

Put application-defined actions at the top of the menu. Examples: Add as friend and Play.

Items like Call, BBM, Share, and Open in are provided by the Invocation Framework. Place contextual actions thatare defined by the platform in the middle of the menu.

If applicable, put Select More and Delete at the bottom of the menu.


42

Context menusContext menus give users a quick way to use the most common actions for an item. Context menus are similar to right-clickcontext menus in desktop applications, but are designed for touch interfaces. If you use a context menu in your app, usersdon't have to open an item to act on it.

Use whenYou 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-upactions in context menus. Context menus replace pop-up or graphical context menus.

Don't use whenMost users would need the action often. Place the action inline on the screen instead.

ExampleIf users press and hold on a picture, actions such as Share, Edit, Move to folder, and Delete could appear in the contextmenu.


43

Best practices

Only include the most common actions for the item. Don't clutter the menu with irrelevant functionality. Includeactions for items that users can act on such as contacts, links, telephone numbers, images, and list items.

Don't include the most intuitive action. Perform the most intuitive action when users tap the item. For example, ifusers 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 with otherapplications or borrow views to avoid a dead end.

Include an icon and label for each item. Make sure that the icons convey an obvious meaning to users and that thelabels are concise. It is important that icons reflect the actions because only the icons display when users press and holdan item. Users need 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 anaction menu is open, allow users to perform a common action by pressing a defined shortcut key.

Application menusApplication menus hold important actions that are commonacross the application and aren't context-specific (forexample, "Settings", "Log Out", and "Help").

Users open application menus by swiping down from thetop of the screen. Users dismiss them by swiping up towardthe top of the screen or by tapping outside the menu.

Best practices

Include as few actions as possible. The menu onlyholds five actions. Don't include frequent actions,navigation links, view-specific actions (for example, edit orsort), or actions that are already on the screen.

If your app contains settings or help, put the Settingsicon in the far right of the menu and the Help icon in the farleft.

Use the same icon size and font size as items in anaction bar. Make the height of the application menu slightlylarger than the height of an action bar. Use the same depthtreatment (drop shadow) as you would for an action menu.


44

Make sure the application menu pushes the UI on the screen down. The menu should not overlay the UI.

For actions that open a new view (such as settings and help), slide the menu up and slide the new view in from theright. For actions that open a dialog or toast, slide the menu up and then display the dialog or toast.

FormsForms ask users to enter or select information. Forexample, when users edit a contact's details or create ameeting request, they're using a form.

Best practices

Minimize the amount of text that users need to type.Only ask for relevant information. Include smart defaultvalues and let users choose from pickers where possible.Try to store and display information that users enter so thatthey don't have to enter the same information again andagain.

If the form has a lot of fields, put the focus on thefirst field. This helps users complete the form quickly. If thefirst field isn't a text field, don't put the focus on anycomponent. Otherwise, users might miss the firstcomponent.

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 labels, space, dividers, and different font sizes to create hierarchy as needed but avoid creating too muchvisual noise. Use bordered sections sparingly.

Limit the use of labels. Include hint text in fields to minimize the need for descriptive labels. This approach helpskeep forms compact and content-focused. In some cases, you might need a label if the field contains a default value or ifthe description of the field is too long to include as hint text.


45

Put labels above the associated fields. This provides a stronger visual hierarchy for small screens and allows extraspace for translated text, if required. If your app appears in landscape, you could consider putting labels beside theassociated fields.

Best practices for input

Allow users to press Enter to move to the next textfield. Make sure that the form scrolls so that users can seethe next field.

Be flexible with formats. For example, for phonenumbers, accept (519) 555-0199, 5195550199, and519-555-0199.

Use a specific type of virtual keyboard if the input islimited to a specific type of entry. For example, use anumeric keyboard for entering numbers.

Create appropriately-sized fields. Let the size of afield show how much information users should enter.

Use progressive disclosure. If the form containsinfrequently used fields or if a set of fields are a result of aprevious field, use progressive disclosure to reveal fields atthe appropriate time.

Best practices for validation and submission

Validate information as users progress through the form. Don't make users wait for information to validate against aserver.

If you create custom UI components, use a distinct visual cue (for example, a red box) to inform users of errors. Tryto add descriptive error text close to the location of the error. If you can't validate the information until users submit theform and fields are in error, scroll to the first field in the form with an error. BlackBerry UI components contain built-in errorstates.

Disable a "Submit" action until users enter all of the required data. If users try to select a disabled "Submit" action,display an inline message or a toast to identify what's missing.

When appropriate, allow users to submit a form by pressing Enter (for example, when entering a username andpassword). This makes text entry faster.


46

SheetsSheets are full-screen views you can use for sub-tasks.Sheets overlay the current context by sliding up from thebottom of the screen onto a full-screen view. When userscomplete the task, sheets slide down and disappear, andreturn users to their location on the screen.

Users can't swipe left or right on the content area of a sheetto navigate back. But users can peek at the underlying UIby dragging their finger to the right. This approach helpsprevent users from dismissing the sheet by accident.

Use when• You need to initiate tasks from more than one place.

• You need to show temporary tasks (like showing acontact in an app other than the Contacts app).

• You have sub-tasks that require users to enterinformation in several fields (like creating a newmessage or meeting).

Don't use whenYou have simple tasks or tasks that don't requirenavigation.

Best practices

Include a title bar with action buttons at the top of a sheet. This helps prevent users from submitting informationaccidentally by separating the action buttons from a virtual keyboard.

Put constructive actions, such as Send, Share, and Save, as buttons in a title bar at the top right of the screen.

Disable constructive actions until users enter the required information.

Put destructive actions, such as Cancel, Close, and Back, at the top left of the screen.


47

SettingsSettings are options that give users control over certain features in your app (for example, turning sound on or off in agame). 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 put settings?Put settings on the application menu that appears when users swipe down from the top of the screen. Put a Settings icon inthe top right of the application menu.

How should I organize settings?


48

Position the most frequently used or most importantsettings first. This makes it easier for users to changesettings quickly.

Group related settings together. Use headings anddividers to distinguish groups of settings. If there are nological relationships among settings, try to organize them bycomponent type (for example, keep toggle switchestogether and check boxes together).

Let users access advanced features throughprogressive disclosure (for example, show a few basicsettings before revealing more advanced features on asecond 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. Ifyou need to organize the settings into categories, only letusers drill down two levels.

Include a title bar and an action bar on the Settingsscreen. The action bar should include a Back button thatallows users to navigate.

What else should I consider?• Save changes implicitly.

• Let users search for settings. Register each setting so that they can be included in search results. Include additional,meaningful search terms (for example, include synonyms for the setting).

Progress and activityUsers should feel confident about the progress of activities on their device, such as rescaling a large image or opening anew screen. Make your code and interactions lean so that you don't need many progress or activity indicators.

Sometimes apps need time to carry out complex calculations or to download data (displaying a local weather forecast forexample). When things take longer than expected, let users know about the process and its progress. If something takeslonger than 3 seconds, show a progress or activity indicator.

Consider these things when you implement your indicators:


49

• If you know how long the action will take, use a progress indicator.

• If you want to show that your app is working but you can't determine how long it will take, use an activity indicator.

• You can let users tap a progress or activity indicator to show a pause option or to cancel a download or upload process.

• When you implement a progress indicator or an activity indicator, let users interact with the application while theindicator is displayed.

When you implement a progress indicator or an activity indicator, try to implement a non-modal solution so that users canstill interact with the application while the indicator is displayed.

Inline indicatorsInline indicators are non-modal ways to let users seeprogress information and continue with what they're doing.

Use whenThere's a UI component you can attach the indicator to.

Examples• Synchronizing an inbox

• Updating an RSS feed with a few channels

ToastsToasts are a non-modal way to show progress while usersremain on the screen and are allowed to continue.

Use whenThe UI doesn't have individual components you can attachthe indicator to.

ExampleUploading an image

DialogsDialogs are a modal way to show progress or activity. Users can't interact with the screen during the process.

Use when• You can't process in the background.

• The app needs to finish a process before the user can use it again.

ExampleThere's a UI component you can attach the indicator to.

For best practices for activity and progress indicators, see Components.


50

SavingIn most cases, you should save automatically when userscreate or change data (like the details for a contact) andleave the screen for another one. This lets users get thingsdone without being interrupted.

Prompting to saveIn rare cases, you should save more explicitly. Do this onlywhen it would take a long time for users to recreate thechanges. Prompting to save interrupts users and makesthem indicate whether they want to save or delete data.

ExamplesWhen users

• Set up a Wi-Fi connection

• Type an email message

• Create a meeting invitation

• Edit an image or video

Best practices

Show users the item was saved by changing it visually on the original screen. For example, you could use ananimation 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 (like Send, Save, or Done) inactive until users have made allof the required changes.


51

DeletingUsers delete information daily. Before you support deletingin your app, think about the type of information users mightdelete and how important it is. If users delete something bymistake, they might want to retrieve it, but prompting usersto confirm every deletion can slow them down.

You can apply most of the information about deleting to theactions of removing and resetting.

• Deleting: Deleting an item from the device

• Removing: Removing an item but not deleting it fromthe device (for example, deleting a song from a playlist)

• Resetting: Returning values to a predefined state andlosing all changes

Use the following information to decide how to incorporatesupport for deleting information in your app:

Unimportant contentUsers could reproduce the content easily.

Examples• Removing a song from a playlist

• Removing an alarm setting

• Removing a tag on a photo

Important contentUsers could lose valuable application data or content withinan application.

Examples• Deleting an email

• Deleting a contact

• Deleting a playlist


52

Confirmation typeDon't ask users to confirm deletion.

Confirmation typeShow a toast that lets users undelete. The toast shoulddisappear within 3 seconds of the user interacting with thescreen.

Critical contentIf it's deleted, users could lose valuable data that affects how the device functions.

Examples• Resetting the device or an app

• Removing an email account

Confirmation typeShow an inquiry dialog that describes the outcome of the deletion and requires users to confirm that they understand itbefore the deletion takes place.

ImplementationUsers 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 on 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 thisapproach when users are in a content view (like reading an email, looking at a picture, or viewing the details for acontact).

• Users tap an Edit button to act on a lot of data at one time.

Place a reset action on a Settings screen. Don't use a context menu or action bar.

Best practices

Don't put a Delete action in an action bar. Use an action menu instead to make it harder for users to delete an itemby accident. Since the action menu button appears at the bottom right of the screen and the Delete action appears at thebottom 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.


53

If users delete an item from a content view (like an email or contact), remove it from the screen using a deleteanimation and return users to the previous screen.

Handling errorsBefore you handle errors, try to avoid them. The more errors you can handle and remove during development, the happieryour app users will be. Here are some ways you can avoid errors:

• While you're designing your app, test with target users and adjust the workflow to help users avoid errors.

• Prompt users with default values.

• Create fields with 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 an errorCarefully consider whether you need to inform users of an error. If you do, do it in the least disruptive way you can.

Inline notifications


54

Inline notifications keep users in the context of their taskand don't force them to respond before continuing.

Examples• Entering only part of an email address

• Entering the wrong password

UseAttach the notification to the affected item. You can add asubtle side to side animation to show where the error is.

Toasts


55

Use a toast when an inline notification isn’t possible. Toastsalso let users to continue without being blocked.

Examples• An image didn't upload successfully

• New messages don't appear because the device isn'tconnected to a wireless network

UseDisplay a toast on the screen. Once users start to interactwith the screen, the toast should disappear after 3 seconds.

Dialogs


56

Use a dialog when users must be aware of the error.

ExampleRestarting an application

UseDisplay an inquiry dialog that users must respond to beforethey can continue.

Best practices

Tell users about errors as soon as you can. If users enter an incorrect phone number, you could display an inlinenotification as soon as they leave the text field.

Keep action buttons inactive (like 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. If a device isn't connected to a wireless network,you could prompt users to turn on Wi-Fi.

Offer to fix issues that affect performance. If users have a lot of browser tabs open, you could suggest closing someto improve browsing.

Don't tell users about successful actions. Let them feel confident in the success of their actions.

Don't reset values that users have entered unless the values are confidential, such as passwords.


57

Components

PickersUse a picker when you want users to choose from 2-3 setsof interconnected values, such as the day, month, and yearof an appointment or the hour and minute for a timer. Youcan also use a picker to simplify a complex UI and reducethe number of steps in a workflow by allowing users toselect multiple values in one step.

Don't use whenUsers only need to select from one set of values. Use adrop-down list instead.

Drop-down lists

5

UI Guidelines Components

58

Use a drop-down list when you want users to choose asingle value from a larger set. Drop-down lists can makecomplex screens more compact and streamlined bycollapsing many options into one element.

Don't use whenUsers need to choose from 2-3 sets of interconnectedvalues, such as the date and time of an appointment. Use apicker instead.

Best practices

Don't use "Yes" and "No" as list values. Use a check box instead, and rephrase the option to describe the action.

For the default value, use the value users are most likely to choose.

List itemsA list item presents content in a list, usually as an entry point to the next step in the navigation hierarchy. Lists can bedisplayed in a stacked or grid layout. To read more about lists, see Screen views.

Best practice

If you use images, start populating the list as soon as possible so that items can appear before all images haveloaded.

Dividers and headersUse dividers and headers to create visual hierarchy and separate groups of items that belong together.

Best practices

Use a divider as a simple visual barrier, to separate items in a container or list.


59

Use a header to separate sections in a list. A header contains one or two strings to label the section.

ButtonsUse a button to initiate an action.

Best practices

Make the default button the one that users are more likely to use but don't make a button for a destructive actionthe default.

Use single-word labels where possible.

Use verbs that describe the associated action, such as "Cancel," "Delete," or "Save."

Text fields and text areasUse 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

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 thefield's description is too long for hint text.

Try to reduce the text users need to type. Let users choose items from pickers when you can. Try to store anddisplay information that users enter so they don't have to type it repeatedly.

Only use word prediction in text fields with text that is likely to be in the dictionary (not in password, phonenumber, or name fields). The predictions might get in the way in these fields.


60

Activity and progress indicatorsUse an activity and progress indicators to show users that your app is working and to show them the process and itsprogress.

Use an activity indicator when you want to show that yourapp is working, but you can't determine how long it willtake.

Use a progress indicator when you can determine how long it will take.

Learn more about progress and activity indicators.

Best practices

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 isreceived 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," "Uploading2.4/4Mb," or "4:24").

Check boxes, radio buttons, and toggleswitchesUse check boxes, radio buttons, and toggle switches to allow users to select options.

Check boxesUse check boxes when users can select multiple items oroptions.

Radio buttonsUse radio buttons when users can choose between morethan two mutually exclusive options.


61

Toggle switchesUse a toggle switch when users are choosing between two distinct options, such as Off and On. You can also use a toggleswitch if you want to make a setting harder for users to change accidentally.

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, and not the action required to change the state. For example, "On"indicates the current state, while "Turn on" describes an action.

SlidersUse a slider to control settings with a wide range or to show a preview of the change (for settings like volume level orscreen brightness). You can also use a slider for playing back media files.

Users drag the slider from left to right, or double-tap the slider to jump to predefined increments.

Best practice

Combine sliders with images or strings that explain the context, such as the progress in a media file or the level of afilter that is being applied to a picture.


62

Touch targetsUsers touch the screen with their fingertips, so touch targets (hit areas) for UI components should be large enough forusers to use without frustration. If you use BlackBerry UI components, you don’t need to worry about the size of the touchtarget for each UI component. The sizes are designed to be large enough for users to touch with a finger and forgivingenough that users can be a bit sloppy when touching the screen.

If you create custom UI components, remember that the size of the touch target depends on the pixels per inch (PPI) forthe screen. If you are designing your app for different BlackBerry devices, create touch targets for the pixel densities ofeach 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 eachcomponent so that users can initiate an action easily. This extra space provides leniency for users whose attention isdivided or who are on the go.

For check boxes and radio buttons, create a touch target area for the entire row and associated label. These UIcomponents have small visible areas.

Make the size of the release area larger than the visible UI component. This extra space allows for impreciseinteractions, such as when a finger moves after initially touching the screen.

Test the size of each touch target with users.


63

Highlight behaviorHighlighting helps users identify the item that they're actingon. The highlight on a component behaves differentlydepending on the component and the context. If you useBlackBerry UI components, highlighting is built into thecomponent.

Best practices for highlighting customcomponents

For binary interactions, highlight the componentwhen users touch it. Remove the highlight when usersrelease their finger.

If users scroll through a list or view (for example, agrid view), don't highlight individual items.

If an item requires continuous interaction (forexample, a slider), highlight the item until users releasetheir finger. In this case, you might need to lock other itemsthat allow scrolling, such as lists.

Don't let users highlight items they can't act on.Disable (dim) components or remove them from the screen.


64

Visual style

Application iconsGet tips for designing your application icon

Design an app icon ›

Active framesFind best practices for active frames

Learn about active frames ›

In-app iconsDesign icons for the screens in your app

Design icons ›

TypographySee the fonts that we recommended for BlackBerry 10

See fonts ›

6

UI Guidelines Visual style

65

Application icons

Designing an icon for your BlackBerry smartphone application lets you showcase your app to BlackBerry users. In theBlackBerry World storefront, an icon is the first introduction that users have to your app. The icon also appears on thehome screen as the way users open your app.

Your icon is placed on a transparent tile automatically with the application name label below the icon.

Best practices

Create an icon that is a 114 x 114 pixel square. This approach is the best (and easiest) way for your icon to fit in withother BlackBerry application icons. Larger icons will be scaled down to 114 x 114 pixels.

Focus on a single iconic metaphor that clearly represents the application. Think of your icon as a road sign thatpeople understand quickly.

Use a silhouette to differentiate your icon from other icons.

Try to maintain consistency with other BlackBerry application icons in scale and volume.

Basic shapesOur app icons are based on these basic shapes. Most of the squares, circles, and rectangles that we use have exactly thesame size and proportions as these 3 shapes.


66

Perspective and lightingThe icons are designed to look like you hung them on a wallat eye level.

The lighting in the BlackBerry 10 UI is designed at a 90degree top-down angle.

Drop shadowDistance: 2 pixels

Size: 2 pixels

Angle: 90 degrees

Inner boundaries


67

Icon paddingCreate an icon that is 106 x 106 pixels if you want to allowroom for a drop shadow or outer glow.

Inner symbolsIf you use a symbol in your icon, try to make it the same sizeas the symbols in other BlackBerry application icons.

Color paletteLimit the number of colors that you use in your icon. Thecolors shown here are used in BlackBerry application icons.

StrokeUse a five pixel stroke where appropriate. This is especiallyimportant so that icons with a dark background are alwaysvisible on the home screen.

Using elements like strokes consistently helps your icon fitin with the BlackBerry application icons.

Materials


68

Most of our app icons are created using these 4 materials. Limiting the number of materials and using them consistentlywill help unify your application icon with our BlackBerry application icons.

Use materials appropriately. If your icon is made of paper, don't give it a glossy finish.

Active framesA nice and smart description about active frames


69

An active frame (application cover) appears on the runningapps panel on the home screen. Users tap a frame to re-open the app.

As you decide whether to create a frame for yourapplication, consider the following:

• Is there a single item that users should know aboutwhen the app is minimized (for example, a calendarshows the next event and a weather app shows thecurrent temperature)? If so, create an active frame.

• Is it more important for users to see the state of the appwhen it was minimized? If so, you don't need to createan active frame. A scaled-down version of the currentapp screen displays as the frame.

Best practices

Create an image that is 334 pixels wide by 396pixels high. A footer appears automatically and includesthe title of your application. The text appears in Slate Profont at regular weight and is set to 40 pixels high.

If you add text to the main body of the frame, usethe Slate Pro font at regular weight and set it to 30 pixelshigh. Set secondary text to 25 pixels high.

Put the most important information near the top ofthe frame. Only the top half of the frame appears onBlackBerry smartphones with a physical keyboard.

Avoid putting too much information on the frame.

HeaderYou can make the header a solid color or make it semi-transparent if you'd like a bigger image.

If you include a header, make it 62 pixels high. Use SlatePro font at regular weight and set it to 25 pixels high. If youinclude an avatar, make it 50 x 50 pixels.


70

GridYou can lay out images in a grid format.

ListYou can lay out items in a list format.

In-app iconsLearn about the types of icons that you can create, how to build and style your icons, and tips and tricks for getting themost from the icons in your application.

Light theme

Dark theme

The overview below shows the main steps you can follow to create your icons.

Step 1


71

Find an appropriate metaphor for the function or physical object that the icon should represent. Try out different variationsand pick the one that's easiest to recognize.

Step 2Create the icon shapes using the information in the Metaphors topic. Use a vector application (such as Adobe Illustrator)and apply the information from the Building blocks topic.

Note where your icon appears in the UI and set up the artboard accordingly. Use pixel units and make sure you use pixelsnapping.

Step 3Import the shape to a pixel application (such as Adobe Photoshop) and keep it as a shape layer. Use snapping and makesure that straight edges are sharp and aligned. If you don't use snapping, nudge the shape points to avoid blurry edges.

Make sure that the canvas is set 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 4Test the icon with other icons, comparing the weight and style.

Put the icon in context and test it on a BlackBerry device.

Types and sizes

In-app icons

Action bar and tab81 x 81 pixels

Action menu81 x 81 pixels


72

Tab menu81 x 81 pixels

Content area81 x 81 pixels


73

Application menu81 x 81 pixels

Context menu81 x 81 pixels


74

Components and smallbuttonsComponents: 71 x 71; Small buttons: 61 x 61

Action menuLarge: 81 x 81; Small: 71 x 71


75

Icon sizesBlackBerry smartphones use different sizes for icons.

Keep the main graphical elements within the inner area of the icon. This approach allows for a buffer zone around the icon.

SmallUse the small size for small buttons.

MediumUse the medium size for components.


76

LargeThe large size is the most common. Use the large size in places like action bars and menus.

IndicatorsIndicators are small icons used in the content area to show extra information (for example, status). If you create anindicator, follow the guidelines for icons above. Reduce the amount of detail and reduce the number of pixels by 1 for thelargest lines. Follow the size and alignment guidelines below:

SizesSmall Large


77

AlignmentRecommended: Make indicators smaller than the adjacenttext. Bottom-align indicators to the baseline.

Not recommended: The first indicator is not bottom-aligned. The second indicator is larger than the text.

MetaphorsIcons should be pictorial and convey meaning through a resemblance to a physical object or function. When you design theicons 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:

RecognizableMake sure that the outline and shape of the icon resemble the function or physical object as much as possible. Stay true tothe meaning of the icon. Focus on the key outlines of common objects. In most cases, this approach makes the icon highlyrecognizable. The result should stand on its own, without any explanatory text.

Recommended

Not recommended

Viewing angleTo help make an icon highly recognizable, design the icon so that it is viewed from one side only. In general, don't useangles or rotations. Icons should not use any 3-D perspective but can be aligned to 45° in order to fill out the focal area.This approach results in a more balanced icon weight.


78

Recommended

Not recommended

RecommendedNot recommended

FocusIt 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. The focus is set by making an object within the iconheavier than the rest of the parts. In most cases, make the foremost object heavier. Icons treated this way balance equallywith surrounding icons.

No focus Recommended Too much focus

Level of detailIcons should be as simple as possible. However, with the high resolution screens of today, you can add detail to make theicons appear more recognizable, crafted, and professional.

Avoid adding detail for the sake of detail. Add detail where it makes sense and where it enhances the readability of theicon. A high density of detail makes an icon cluttered. Not enough detail might make the icon unrecognizable. The goldenrule is to keep detail to a minimum without losing the characteristics of the icon.


79

Too little detail Recommended Too much detail

Building blocks

FocusTry to keep the majority of the icon shape within the focalarea. This creates balance among icons.

In some cases, an icon might need to expand into the safeframe to include a common shape, splat or text.

Recommended

Not recommended

Splats


80

Splats can overlay the top right corner of an icon. Text canoverlay the bottom center of an icon.

TreatmentAdd a subtle gradient to the icons and treat them as if they're painted on an underlying surface.

To keep the icon as sharp and crisp as possible, don't use extra effects. Don't use colors for the enabled state (with theexception of content area icons).

Enabled on a bright backgroundTop 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 backgroundTop of the gradient:

• Hex #E3E3E3

• R 227 G 227 B 227


• Hex #D1D1D1

• R 209 G 209 B 209


Selected


81

Top of the gradient:

• Hex #3CBCE7

• R 60 G 188 B 231


• Hex #01A8DF

• R 1 G 168 B 223


ColorsUse color for content area icons only. Stay true to the color palette and imitate the gradient value to stay coherent with thetreatment.

Hex: #00B800

Use: Positive, action, andstart

Hex: #E6B400

Use: Attention

Hex: #D60000

Use: Warning, stop, anderror

Hex: #00A8DF

Use: Selection andinformation

Shapes and linesYou can create icons in any shape or form as long as the silhouette is kept simple, clear, and true to the metaphor. Thesilhouette must be a minimum of 4 pixels at the thinnest part to make the outer part of the icon clearly defined. Detailwithin the icon can be smaller and narrower (a minimum of 2 pixels).

Make the outer corners slightly rounded 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 objectsIf you divide an icon into multiple objects, include a 3-pixel gap to separate the objects. The gap should be equally thickalong the foremost object. Your icon should not contain more than three objects to maintain readability and reduce clutterwithin the icon.

If an icon contains duplicate objects, the foremost object should be bigger than the object portrayed in the back. The backobject should be 15% smaller but keep the line and silhouette thickness.


82

Common shapesYou can add common shapes that describe functionality or direction to icons as a complement to the main metaphor. Thefunction 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

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, youmight 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 thecommon shape.

Not recommended: The forwardbehavior is placed incorrectly. Staytrue to the logic of forward andbackward.

Not recommended: The main icon andthe common shape look like the sameobject.

On and off statesIcons that appear in on and off states follow the same rules across the UI. The off state is defined by adding a crossbar at45° with a cut out shadow in negative space to enhance the bar. The crossbar extends equally beyond the main shape pastthe bottom left corner and the top right corner.


83

On Off

Delete, close, and cancel

Delete: Use Delete when something iscompletely removed from the system(for example, files, images, andapplications).

Close: Use Close when part ofsomething is removed (for example, awindow, list item or an instance in agroup selection).

Cancel: Use Cancel for a behavior. Forexample, if a user edits something anddoesn't want to save the changes,provide the option to cancel.

TypographySlate Pro is the recommended font for the BlackBerry 10 Dev Alpha because it is elegant and legible, allowing users toaccess information quickly and easily.

BlackBerry 10 uses medium, regular, and light font weights, as well as light italic style. BlackBerry 10 uses xx small to largefont sizes. The other sizes are CSS standards for font scaling.


84

Slate medium Slate regular

Slate light Slate light italic

The following information shows the colors for text on bright and dark backgrounds:

Primary

Secondary

Disabled

Link

#262626

#555555

#262626 at 30% opacity

#0073bc

Primary

Secondary

Disabled

Link

#fafafa

#b1b1b1

#fafafa at 30% opacity

#00a8df


85

Legal notice©2012 Research In Motion Limited. All rights reserved. BlackBerry®, RIM®, Research In Motion®, and related trademarks,names, and logos are the property of Research In Motion Limited and are registered and/or used in the U.S. and countriesaround the world.

Adobe Illustrator and Adobe Photoshop are trademarks of Adobe Systems Incorporated. Facebook is a trademark ofFacebook, Inc. Twitter is a trademark of Twitter, Inc. Wi-Fi is a trademark of the Wi-Fi Alliance. All other trademarks are theproperty of their respective owners.

This documentation including all documentation incorporated by reference herein such as documentation provided ormade available at www.blackberry.com/go/docs is provided or made accessible "AS IS" and "AS AVAILABLE" and withoutcondition, endorsement, guarantee, representation, or warranty of any kind by Research In Motion Limited and its affiliatedcompanies ("RIM") and RIM assumes no responsibility for any typographical, technical, or other inaccuracies, errors, oromissions in this documentation. In order to protect RIM proprietary and confidential information and/or trade secrets, thisdocumentation may describe some aspects of RIM technology in generalized terms. RIM reserves the right to periodicallychange information that is contained in this documentation; however, RIM makes no commitment to provide any suchchanges, 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 orservices including components and content such as content protected by copyright and/or third-party web sites(collectively the "Third Party Products and Services"). RIM does not control, and is not responsible for, any Third PartyProducts 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. Theinclusion of a reference to Third Party Products and Services in this documentation does not imply endorsement by RIM ofthe 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 ORWARRANTIES OF DURABILITY, FITNESS FOR A PARTICULAR PURPOSE OR USE, MERCHANTABILITY, MERCHANTABLEQUALITY, NON-INFRINGEMENT, SATISFACTORY QUALITY, OR TITLE, OR ARISING FROM A STATUTE OR CUSTOM OR ACOURSE OF DEALING OR USAGE OF TRADE, OR RELATED TO THE DOCUMENTATION OR ITS USE, OR PERFORMANCEOR NON-PERFORMANCE OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICESREFERENCED HEREIN, ARE HEREBY EXCLUDED. YOU MAY ALSO HAVE OTHER RIGHTS THAT VARY BY STATE ORPROVINCE. SOME JURISDICTIONS MAY NOT ALLOW THE EXCLUSION OR LIMITATION OF IMPLIED WARRANTIES ANDCONDITIONS. TO THE EXTENT PERMITTED BY LAW, ANY IMPLIED WARRANTIES OR CONDITIONS RELATING TO THEDOCUMENTATION TO THE EXTENT THEY CANNOT BE EXCLUDED AS SET OUT ABOVE, BUT CAN BE LIMITED, AREHEREBY LIMITED TO NINETY (90) DAYS FROM THE DATE YOU FIRST ACQUIRED THE DOCUMENTATION OR THE ITEMTHAT IS THE SUBJECT OF THE CLAIM.

TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, IN NO EVENT SHALL RIM BELIABLE FOR ANY TYPE OF DAMAGES RELATED TO THIS DOCUMENTATION OR ITS USE, OR PERFORMANCE OR NON-

7

UI Guidelines Legal notice

86

http://www.blackberry.com/go/docs

PERFORMANCE OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICESREFERENCED HEREIN INCLUDING WITHOUT LIMITATION ANY OF THE FOLLOWING DAMAGES: DIRECT,CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, INDIRECT, SPECIAL, PUNITIVE, OR AGGRAVATED DAMAGES, DAMAGESFOR 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 INCONJUNCTION WITH RIM PRODUCTS OR SERVICES, DOWNTIME COSTS, LOSS OF THE USE OF RIM PRODUCTS ORSERVICES OR ANY PORTION THEREOF OR OF ANY AIRTIME SERVICES, COST OF SUBSTITUTE GOODS, COSTS OFCOVER, FACILITIES OR SERVICES, COST OF CAPITAL, OR OTHER SIMILAR PECUNIARY LOSSES, WHETHER OR NOTSUCH DAMAGES WERE FORESEEN OR UNFORESEEN, AND EVEN IF RIM HAS BEEN ADVISED OF THE POSSIBILITY OFSUCH DAMAGES.

TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, RIM SHALL HAVE NO OTHEROBLIGATION, DUTY, OR LIABILITY WHATSOEVER IN CONTRACT, TORT, OR OTHERWISE TO YOU INCLUDING ANYLIABILITY FOR NEGLIGENCE OR STRICT LIABILITY.

THE LIMITATIONS, EXCLUSIONS, AND DISCLAIMERS HEREIN SHALL APPLY: (A) IRRESPECTIVE OF THE NATURE OFTHE 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 FUNDAMENTALBREACH OR BREACHES OR THE FAILURE OF THE ESSENTIAL PURPOSE OF THIS AGREEMENT OR OF ANY REMEDYCONTAINED HEREIN; AND (B) TO RIM AND ITS AFFILIATED COMPANIES, THEIR SUCCESSORS, ASSIGNS, AGENTS,SUPPLIERS (INCLUDING AIRTIME SERVICE PROVIDERS), AUTHORIZED RIM DISTRIBUTORS (ALSO INCLUDING AIRTIMESERVICE PROVIDERS) AND THEIR RESPECTIVE DIRECTORS, EMPLOYEES, AND INDEPENDENT CONTRACTORS.

IN ADDITION TO THE LIMITATIONS AND EXCLUSIONS SET OUT ABOVE, IN NO EVENT SHALL ANY DIRECTOR,EMPLOYEE, AGENT, DISTRIBUTOR, SUPPLIER, INDEPENDENT CONTRACTOR OF RIM OR ANY AFFILIATES OF RIMHAVE 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 thatyour airtime service provider has agreed to support all of their features. Some airtime service providers might not offerInternet browsing functionality with a subscription to the BlackBerry® Internet Service. Check with your service provider foravailability, roaming arrangements, service plans and features. Installation or use of Third Party Products and Services withRIM's products and services may require one or more patent, trademark, copyright, or other licenses in order to avoidinfringement or violation of third party rights. You are solely responsible for determining whether to use Third PartyProducts and Services and if any third party licenses are required to do so. If required you are responsible for acquiringthem. You should not install or use Third Party Products and Services until all necessary licenses have been acquired. AnyThird Party Products and Services that are provided with RIM's products and services are provided as a convenience to youand are provided "AS IS" with no express or implied conditions, endorsements, guarantees, representations, or warrantiesof any kind by RIM and RIM assumes no liability whatsoever, in relation thereto. Your use of Third Party Products andServices shall be governed by and subject to you agreeing to the terms of separate licenses and other agreementsapplicable thereto with third parties, except to the extent expressly covered by a license or other agreement with RIM.

Certain features outlined in this documentation require a minimum version of BlackBerry® Enterprise Server, BlackBerry®

Desktop Software, and/or BlackBerry® Device Software.

The terms of use of any RIM product or service are set out in a separate license or other agreement with RIM applicablethereto. NOTHING IN THIS DOCUMENTATION IS INTENDED TO SUPERSEDE ANY EXPRESS WRITTEN AGREEMENTS OR


87

WARRANTIES PROVIDED BY RIM FOR PORTIONS OF ANY RIM PRODUCT OR SERVICE OTHER THAN THISDOCUMENTATION.

Research In Motion Limited295 Phillip StreetWaterloo, ON N2L 3W8Canada

Research In Motion UK Limited200 Bath RoadSlough, Berkshire SL1 3XEUnited Kingdom

Published in Canada


88

Ui guidelines black_berry_10

Technology

Transcript of Ui guidelines black_berry_10