Ui guidelines black_berry_10

647 views

Published on

Ui guidelines black_berry_10

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
647
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ui guidelines black_berry_10

  1. 1. UI GuidelinesBlackBerry 10Updated: 2012-12-20
  2. 2. Published: 2012-12-20SWD-20121220090117917
  3. 3. 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 ..................................................................................................................................................... 263 Platform overview .......................................................................................................................... 27 Gestures .......................................................................................................................................................................... 28 Keyboards ........................................................................................................................................................................ 30 Notifications ..................................................................................................................................................................... 32 Sharing and the Invocation Framework ............................................................................................................................. 36 Cards ............................................................................................................................................................................... 37 Language ......................................................................................................................................................................... 394 Patterns ........................................................................................................................................ 41 Menus .............................................................................................................................................................................. 41 Forms .............................................................................................................................................................................. 45 Sheets .............................................................................................................................................................................. 47 Settings ............................................................................................................................................................................ 48 Progress and activity ........................................................................................................................................................ 49 Saving .............................................................................................................................................................................. 51 Deleting ........................................................................................................................................................................... 52 Handling errors ................................................................................................................................................................ 545 Components ................................................................................................................................. 58 Touch targets ................................................................................................................................................................... 63 Highlight behavior ............................................................................................................................................................ 646 Visual style .................................................................................................................................... 65 Application icons .............................................................................................................................................................. 66 Active frames ................................................................................................................................................................... 69 In-app icons ..................................................................................................................................................................... 71 Types and sizes ......................................................................................................................................................... 72 Metaphors ................................................................................................................................................................. 78 Building blocks .......................................................................................................................................................... 80 Typography ...................................................................................................................................................................... 84
  4. 4. 7 Legal notice .................................................................................................................................. 86
  5. 5. UI Guidelines Key principlesKey principles 1BlackBerry 10 is about communication, connected apps, and fast interactions. You dont need to spend a lot of time andeffort with your apps 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. Its a seamless experience that gives usersfull control and flexibility in every moment and with every touch. Its 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.• Dont interrupt the flow between what users see and what they do next. 5
  6. 6. UI Guidelines Key principlesCommunication at its coreConnect and get things done What it is Its giving people everywhere the power to connect, collaborate, and do whats most important to them. You get the apps out of the way and keep communicate at the core. Its all about productive action. Why it matters Because the essence of a BlackBerry experience is communication. People are social animals and your app can give them a chance to connect with others. When you streamline the experience and keep users in your app, they dont have to switch apps to communicate. Examples Your app could integrate with BBM, the phone, or text messaging. Best practice Find a way to integrate communication in a way that makes sense for your app. Always keep the user goals in mind.Content is kingBe selective about chrome6
  7. 7. UI Guidelines Key principlesWhat it isIts 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, theres no "Today" title since the "Yesterday" title makes the"Today" section obvious. 7
  8. 8. UI Guidelines Key principlesCinematic experienceSweeping interaction on the move feels good What it is Its making people part of the big picture. Put the control in their 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. Its much more effective and satisfying to move through a list by swiping across the screen instead of tapping a scroll bar. And its more natural to interact directly with the list. Example If someone edits a picture and applies a filter, the visual treatment could change as their finger slides across the screen. Best practice Include gestures that are contextual and reversible in your app.Fluid workflowMake routines sing8
  9. 9. UI Guidelines Key principlesWhat it isIts 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 were 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 someones 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 Its 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
  10. 10. UI Guidelines Key principles What it is Its 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 use smartphones in portrait view and often use smartphones with only one hand. Examples A list of search results grows from the bottom so that people can easily reach the top hit with their thumb. 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 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 were human10
  11. 11. UI Guidelines Key principles What it is Its sprinkling moments of delight and making your app playful. Why it matters Because life isnt all serious. Think of ways to lighten up someones day. By adding charm to your app, you show it was designed by and for people. Examples Consider the playfulness in how photos dangle in ScrapBook or how the paper is torn off when clearing a calculation in the calculator. These are ways to give your app personality and make it more engaging. Best practice Test your approach with users. The experience shouldnt be whimsical or cartoonish. Whats charming to some might be off-putting to others. 11
  12. 12. UI Guidelines The basicsThe basics 2 Application structure Screen structure Determine the navigation structure that works best for your Get an overview of action bars, title bars, and menus app Learn ways to structure screens › Choose a navigation structure › Screen sizes Portrait and landscape Discover ways to design for different screen sizes Read the considerations for laying out screens in portrait and landscape See the specs and best practices › Learn about orientation ›12
  13. 13. UI Guidelines The basicsApplication structureNavigationChoose 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 dont 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
  14. 14. UI Guidelines The basics Include tabs on the first level of an app hierarchy only. When users tap a tab, display the content at the top of the screen. If users tap an item in a tab (for example, a list item), include a Back button so that users can navigate to the first level in the hierarchy. Dont use Back to move between tabs. 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.Drill-down14
  15. 15. UI Guidelines The basicsDrill 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 couldnt present all of the photos on thefirst level, so users would click an album to see that tripsphotos. 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 its easy for users to learn. 15
  16. 16. UI Guidelines The basicsExampleIn a map, all information (such as points of interest and directions) appears directly on the map.Back behavior If your application uses drill-down navigation, the content is structured in a hierarchy. Back behavior lets users move back easily through the hierarchy. When users move back in a BlackBerry app, the movement is hierarchical. This means that moving back takes users to the previous level in the app hierarchy. It doesnt necessarily take them back through each screen that they viewed earlier in the app. Use when You create the second or deeper levels in an app hierarchy. Make sure the Back button appears in the far left position in an action bar. 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. Examples Users 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 right to peek at the previous level.Best practices Dont 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
  17. 17. UI Guidelines The basicsScreen viewsBefore you lay out your screens, think about the type of app that youre designing and the type of content that youreproviding.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:List GridLets you give an overview of content that users can sort and Lets you display content in a more visually appealing way byfilter, such as contacts or messages. putting images in rows and columns.Free-form Content 17
  18. 18. UI Guidelines The basics Lets users navigate a large canvas of information, such as a Typically used to set the focus on a single item (for map, a game, or an image. example, a contact card, a message, or a Facebook post).Screen structureAction 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
  19. 19. UI Guidelines The basicsUse whenYou want to include the most frequent and relevant actionsfor the entire screen.Dont 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 theresroom 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
  20. 20. UI Guidelines The basics 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 Theres only one way to view the content and the context is not apparent. Dont use when The content conveys the context in a richer way. For example, a contact card can more richly identify the context with a picture and a name than a title can. If tabs appear at the bottom of the screen, dont include a title.Segmented controls20
  21. 21. UI Guidelines The basicsSegmented 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.Dont use whenYoure 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 thats 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. Dont 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 dont 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
  22. 22. UI Guidelines The basicsUse whenYou have a sheet and you want to help users complete and dismiss it easily. Learn more about Sheets.Dont 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 isnt 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 menus Context menus Action menus contain actions that are less frequently used Context menus give users a quick way to access the most than actions that appear in the action bar. common actions for an item. Users dont have to open an item to act on it.22
  23. 23. UI Guidelines The basics 23
  24. 24. UI Guidelines The basics 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.Designing for different screen sizesDesigning a UI to accommodate different screen sizes can be a challenge. If youre 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 screenThe 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
  25. 25. UI Guidelines The basics• 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, youll 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. Dont 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 youre 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 lifeBlackBerry 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
  26. 26. UI Guidelines The basicsPortrait and landscape 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. Sometimes, landscape can offer benefits and provide a better experience for all-touch BlackBerry smartphone users. Take movies and games, for example. Movies are made to be viewed in wide screen, and games often require two-handed interaction. In some cases, you might lay out your application in both portrait and landscape view. This lets you provide a different focus in each view to enrich the user experience. For example, you could show a basic calculator in portrait view and a more advanced version in landscape view. Best practices If you create custom UI components, make sure the components display correctly in both views. If you use BlackBerry UI components, theyre designed to transition seamlessly if users switch between views. Dont create landscape views for smartphones with a 1:1 aspect ratio unless you have a good reason to use landscape view.26
  27. 27. UI Guidelines Platform overviewPlatform overview 3Gestures KeyboardsFind out which gestures you can use in your app Read about virtual and physical keyboardsLearn about gestures › Learn about keyboards ›Notifications SharingDiscover ways to inform users about application-specific Learn best practices for giving users access to externalevents servicesNotify users › Integrate external services › 27
  28. 28. UI Guidelines Platform overviewGesturesInstead 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 dont 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 menu28
  29. 29. UI Guidelines Platform overviewContent 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 itemsPeek Open an action menu Zoom in Zoom outMove an item from one place Progress through a fileto another 29
  30. 30. UI Guidelines Platform overviewBest practice If users select a few items at once and try to perform an action that cant 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 wasnt done on some items.KeyboardsVirtual keyboard30
  31. 31. UI Guidelines Platform overviewA 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, dontcover 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. Dont force users to switch between the keyboard and the touch screen. Let users to use the keyboard to completea task. 31
  32. 32. UI Guidelines Platform overviewNotificationsNotifications 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 splat The simplest and subtlest way to tell users about a new event is to add a splat to the application icon. This approach 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 Dont use for Alarms (too time-critical) or new posts in a social network (too frequent)Message in the BlackBerry Hub32
  33. 33. UI Guidelines Platform overviewIf 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 messagesDont use forReminders or new podcastsItem in the notification list 33
  34. 34. UI Guidelines Platform overview If you want to tell users something important but your app doesnt send messages, you can add an item to the notification list. This gives users an entry point into the app. When items are no longer relevant, remove them from the list (for example, a low battery notification is removed when the BlackBerry device is connected to a charger). Users can tap the item in the notifications list. If users get more than one notification from an app, theyre grouped together. When a new item appears in the notification list, a splat is added to the app icon. Use for Travel updates and open Wi-Fi networks Dont use for Messages (should appear in the BlackBerry Hub) and Facebook comments or likes (too frequent)Intrusive dialog34
  35. 35. UI Guidelines Platform overviewIf 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 remindersDont use forMessagesLED The LED is an important BlackBerry notification. When it flashes, it tells users something has happened. Use for Adding messages to the BlackBerry Hub, adding items to the notification list, or displaying an intrusive dialog Dont use for Adding a splat to the app icon 35
  36. 36. UI Guidelines Platform overviewSharing 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 contactYou 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
  37. 37. UI Guidelines Platform overview 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:PreviewersUse forViewing content such as open pictures, emails, anddocuments, or play audio and video filesUsers can open a previewer by tapping a file type thatyouve 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
  38. 38. UI Guidelines Platform overview Use for Creating content such as a new contact, calendar entry, or status update. A composer transitions in from the bottom of the screen to the top. Use a sheet pattern to lay out the screen.Pickers38
  39. 39. UI Guidelines Platform overviewUse 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. Its 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 users 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
  40. 40. UI Guidelines Platform overview 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
  41. 41. UI Guidelines PatternsPatterns 4Menus FormsRead about the different menus you can use in your app Learn more about how to design formsUse menus › Design forms ›Sheets Handling errorsGet an overview of how sheets can present sub-tasks Determine how to prevent errors in your appUse sheets › Prevent errors ›MenusAction menus 41
  42. 42. UI Guidelines PatternsAction 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. Dont 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
  43. 43. UI Guidelines PatternsContext 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, usersdont 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.Dont 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
  44. 44. UI Guidelines PatternsBest practices Only include the most common actions for the item. Dont clutter the menu with irrelevant functionality. Includeactions for items that users can act on such as contacts, links, telephone numbers, images, and list items. Dont 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 dont 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 menus Application menus hold important actions that are common across the application and arent context-specific (for example, "Settings", "Log Out", and "Help"). Users open application menus by swiping down from the top of the screen. Users dismiss them 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 only holds five actions. Dont 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, put the Settings icon in the far right of the menu and the Help icon in 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.44
  45. 45. UI Guidelines Patterns 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 contacts details or create ameeting request, theyre 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 dont 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 isnt a text field, dont 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
  46. 46. UI Guidelines Patterns 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 text Create appropriately-sized fields. Let the size of a field. Make sure that the form scrolls so that users can see field show how much information users should enter. the next field. Use progressive disclosure. If the form contains Be flexible with formats. For example, for phone infrequently used fields or if a set of fields are a result of a numbers, accept (519) 555-0199, 5195550199, and previous field, use progressive disclosure to reveal fields at 519-555-0199. the appropriate time. Use a specific type of virtual keyboard if the input is limited to a specific type of entry. For example, use a numeric keyboard for entering numbers.Best practices for validation and submission Validate information as users progress through the form. Dont 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 cant 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 whats 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
  47. 47. UI Guidelines PatternsSheetsSheets 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 cant 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 a contact in an app other than the Contacts app).• You have sub-tasks that require users to enter information in several fields (like creating a new message or meeting).Dont use whenYou have simple tasks or tasks that dont 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
  48. 48. UI Guidelines PatternsSettingsSettings 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
  49. 49. UI Guidelines Patterns 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 dont 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
  50. 50. UI Guidelines Patterns• 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 cant 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 the indicator 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 indicators Toasts Inline indicators are non-modal ways to let users see Toasts are a non-modal way to show progress while users progress information and continue with what theyre doing. remain on the screen and are allowed to continue. Use when Use when Theres a UI component you can attach the indicator to. The UI doesnt have individual components you can attach the indicator to. Examples Example • Synchronizing an inbox Uploading an image • Updating an RSS feed with a few channelsDialogsDialogs are a modal way to show progress or activity. Users cant interact with the screen during the process.Use when• You cant process in the background.• The app needs to finish a process before the user can use it again.ExampleTheres a UI component you can attach the indicator to.For best practices for activity and progress indicators, see Components.50
  51. 51. UI Guidelines PatternsSavingIn 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 videoBest 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
  52. 52. UI Guidelines PatternsDeleting 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 by mistake, 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 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 following information to decide how to incorporate support for deleting information in your app: Unimportant content Important content Users could reproduce the content easily. Users could lose valuable application data or content within an application. Examples Examples • Removing a song from a playlist • Removing an alarm setting • Deleting an email • Removing a tag on a photo • Deleting a contact • Deleting a playlist52
  53. 53. UI Guidelines PatternsConfirmation type Confirmation typeDont ask users to confirm deletion. Show a toast that lets users undelete. The toast should disappear within 3 seconds of the user interacting with the screen.Critical contentIf its deleted, users could lose valuable data that affects how the device functions.Examples• Resetting the device or an app• Removing an email accountConfirmation 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 this approach when users are in a content view (like reading an email, looking at a picture, or viewing the details for a contact).• Users tap an Edit button to act on a lot of data at one time.Place a reset action on a Settings screen. Dont use a context menu or action bar.Best practices Dont 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
  54. 54. UI Guidelines Patterns 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 youre 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 notifications54
  55. 55. UI Guidelines Patterns Inline notifications keep users in the context of their task and dont force them to respond before continuing. Examples • Entering only part of an email address • Entering the wrong password Use Attach the notification to the affected item. You can add a subtle side to side animation to show where the error is.Toasts 55
  56. 56. UI Guidelines Patterns Use a toast when an inline notification isn’t possible. Toasts also let users to continue without being blocked. Examples • An image didnt upload successfully • New messages dont appear because the device isnt connected to a wireless network Use Display a toast on the screen. Once users start to interact with the screen, the toast should disappear after 3 seconds.Dialogs56
  57. 57. UI Guidelines Patterns Use a dialog when users must be aware of the error. Example Restarting an application Use Display an inquiry dialog that users must respond to before they 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 its validated. Suggest a solution. Dont just state the problem; help users recover. If a device isnt 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. Dont tell users about successful actions. Let them feel confident in the success of their actions. Dont reset values that users have entered unless the values are confidential, such as passwords. 57
  58. 58. UI Guidelines ComponentsComponents 5 Pickers Use a picker when you want users to choose from 2-3 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. Dont use when Users only need to select from one set of values. Use a drop-down list instead. Drop-down lists58
  59. 59. UI Guidelines Components 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. Dont use when Users need to choose from 2-3 sets of interconnected values, such as the date and time of an appointment. Use a picker instead.Best practices Dont 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
  60. 60. UI Guidelines Components Use a header to separate sections in a list. A header contains one or two strings to label the section. Buttons Use a button to initiate an action.Best practices Make the default button the one that users are more likely to use but dont 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 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 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 thefields 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 dont 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
  61. 61. UI Guidelines ComponentsActivity 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 cant 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 thats 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 boxes Radio buttonsUse check boxes when users can select multiple items or Use radio buttons when users can choose between moreoptions. than two mutually exclusive options. 61
  62. 62. UI Guidelines ComponentsToggle 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. 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 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
  63. 63. UI Guidelines ComponentsTouch 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
  64. 64. UI Guidelines ComponentsHighlight behavior Highlighting helps users identify the item that theyre 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 users touch it. Remove the highlight when users release their finger. If users scroll through a list or view (for example, a grid view), dont highlight individual items. If an item requires continuous interaction (for example, a slider), highlight the item until users release their finger. In this case, you might need to lock other items that allow scrolling, such as lists. Dont let users highlight items they cant act on. Disable (dim) components or remove them from the screen.64
  65. 65. UI Guidelines Visual styleVisual style 6Application icons Active framesGet tips for designing your application icon Find best practices for active framesDesign an app icon › Learn about active frames ›In-app icons TypographyDesign icons for the screens in your app See the fonts that we recommended for BlackBerry 10Design icons › See fonts › 65
  66. 66. UI Guidelines Visual styleApplication iconsDesigning 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 shapes Our app icons are based on these basic shapes. Most of the squares, circles, and rectangles that we use have exactly the same size and proportions as these 3 shapes.66
  67. 67. UI Guidelines Visual stylePerspective 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 pixelsSize: 2 pixelsAngle: 90 degreesInner boundaries 67
  68. 68. UI Guidelines Visual style Icon padding Inner symbols Create an icon that is 106 x 106 pixels if you want to allow If you use a symbol in your icon, try to make it the same size room for a drop shadow or outer glow. as the symbols in other BlackBerry application icons. Color palette Limit the number of colors that you use in your icon. The colors shown here are used in BlackBerry application icons. Stroke Use a five pixel stroke where appropriate. This is especially important so that icons with a dark background are always visible on the home screen. Using elements like strokes consistently helps your icon fit in with the BlackBerry application icons. Materials68
  69. 69. UI Guidelines Visual styleMost 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, dont give it a glossy finish.Active framesA nice and smart description about active frames 69
  70. 70. UI Guidelines Visual style An active frame (application cover) appears on the running apps panel on the home screen. Users tap a frame to re- open the app. As you decide whether to create a 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 and 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 was minimized? If so, you dont need to create an active frame. A scaled-down version of the current app screen displays as the frame.Best practices Create an image that is 334 pixels wide by 396 Put the most important information near the top of pixels high. A footer appears automatically and includes the frame. Only the top half of the frame appears on the title of your application. The text appears in Slate Pro BlackBerry smartphones with a physical keyboard. font at regular weight and is set to 40 pixels high. Avoid putting too much information on the frame. If you add text to the main body of the frame, use the Slate Pro font at regular weight and set it to 30 pixels high. Set secondary text to 25 pixels high.Header You can make the header a solid color or make it semi- transparent if youd like a bigger image. If you include a header, make it 62 pixels high. 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.70
  71. 71. UI Guidelines Visual styleGridYou 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 themeDark themeThe overview below shows the main steps you can follow to create your icons.Step 1 71
  72. 72. UI Guidelines Visual styleFind an appropriate metaphor for the function or physical object that the icon should represent. Try out different variationsand pick the one thats 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 dont 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 sizesIn-app icons Action bar and tab Action menu 81 x 81 pixels 81 x 81 pixels72
  73. 73. UI Guidelines Visual styleTab menu Content area81 x 81 pixels 81 x 81 pixels 73
  74. 74. UI Guidelines Visual style Application menu Context menu 81 x 81 pixels 81 x 81 pixels74
  75. 75. UI Guidelines Visual styleComponents and small Action menubuttons Large: 81 x 81; Small: 71 x 71Components: 71 x 71; Small buttons: 61 x 61 75
  76. 76. UI Guidelines Visual styleIcon 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
  77. 77. UI Guidelines Visual styleLargeThe 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
  78. 78. UI Guidelines Visual styleAlignment Recommended: Make indicators smaller than the adjacent text. 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 • High contrast • Highly recognizable • Low to mid detailed • Single colored • Equally weightedIn 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 recommendedViewing angleTo help make an icon highly recognizable, design the icon so that it is viewed from one side only. In general, dont 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

×