Design for a limitless screen
If you are used to designing for a smartphone, you might have organized the screens in your application in a hierarchy. Try to avoid this approach when you design applications for the BlackBerry PlayBook tablet. Instead of creating an application with a hierarchy that users have to navigate, create an application that has a flat structure. Think of the screen as a window into your application instead of a container for the entire application. For example, if the number of photo albums does not fit on the display area of the screen, show part of a photo album at the edge of the screen so that it is obvious to users that they can view more albums by swiping up or down on the screen.
Use a canvas strategy
The large area of a typical computer interface allows you to present an application with a mix of content and UI components. The same application that is created for the BlackBerry PlayBook tablet requires a different strategy. In most situations, your application should make use of the entire screen, use gestures to control workflow, and access additional options only when necessary.
If you have a large amount of information to present, try to think of the screen as a frame that contains a small view of a large canvas. Users can move the view by dragging a finger in any direction, or by swiping to move the view quicker or a greater distance. For example, you might use this type of interaction when navigating within a map or large image.
As part of your canvas strategy, you should consider how the content behaves in response to gestures. One way to do this is to categorize your canvas as either continuous or discrete. A continuous canvas contains content that can be arbitrarily subdivided (for example, a map or a building blueprint). A discrete canvas contains content that has obvious, defined subcomponents (for example, a deck of cards, a contact list, or an eBook).
On a continuous canvas, consider allowing users to move (pan) slowly through the content, move quickly, zoom in and out, and perhaps rotate. On a discrete canvas, you should also consider allowing users to move (shift) slowly or quickly through the content, but there are likely some other actions that you might want to enable using gestures. For example, you can flip over a card, navigate within a contact list, or jump to the next chapter in a document.
Focus on content
Create and present content that absorbs and engages users in a way that is similar to how movie-goers get drawn into the cinematic experience of a film. Manage the content with seamless workflow transitions.
Make your application easy to use by taking intuitive action when users interact with the content. Instead of populating screens with UI components such as buttons and scroll bars, try to create an experience where users interact with the content itself. For example, when users tap an album, your application should display the list of songs in the album. Users should also be able to tap an album to open it instead of highlighting the album and tapping a button labeled Open.
You can place frequently used UI components on the main screen, but do so judiciously. Reserve the majority of the screen for users to interact with the content in your application. If you include a UI component, make sure that you give users an unobstructed view of the content. For example, display media player components at the bottom of the screen to allow users a clear view of the list of available songs.
Simplify the functionality
Identify a single purpose for your application. Try to identify the one goal that you want your application to achieve, and then design your application to support that single purpose. For example, the main purpose of an application that manages pictures might be to "remember that moment."
As you identify the goal, you might need to make some tough decisions. For example, if the main purpose of your application is to allow users to view pictures, make sure you limit the functionality that you provide on the screen only to the features that make viewing pictures a fantastic experience for users. Where possible, move the functionality that is not essential to the primary workflow to a menu.
If you are porting an application that is designed for a computer to the BlackBerry PlayBook tablet, simplifying the functionality might be a challenge. Design your application to include the essential features for mobile users. Provide only the features that people really care about.
Support user data input
You should support data input for your users as much as possible. This could be as easy as opening the numeric keyboard for a user to type a phone number in a field or capturing data using other means, such as GPS, a Bluetooth enabled sensor, a camera, or an accelerometer. Limiting the data that users need to input can reduce the burden on users and greatly improve the usability of your application.
Another way to support user data input is to make sure that you combine similar input operations together in the flow of your application, so that users don't need to change input modes or navigate to another screen. For example, a mapping application might allow users to place landmarks on a map. You could allow users to access a menu, choose a landmark tool, reactivate the map content area, and then place the landmark. But a better solution might be to allow users to simply touch and hold the desired map location and have your application place a landmark pin at that location after a few seconds.
Make your application touch-centric
A touch-centric experience on the BlackBerry PlayBook tablet means that users interact with content by using gestural interactions, such as swiping, instead of "poking" UI components. Avoid cluttering the screen with UI components and design your application to take advantage of the gestural interactions. For example, allow users to zoom in to a picture by using the pinch out gesture instead of tapping a button to incrementally zoom in.
Bezel gestures
The BlackBerry PlayBook tablet supports gestures from the device bezel (the frame around the display area of the screen). The "swipe from the bottom of the screen" gesture is a core interaction, which displays the application list. If the application list is displayed already, this gesture displays the open but minimized applications. There are other bezel gestures that are available for you to use as shortcuts to features in your applications. These gestures include the following:
Gesture |
Expected result |
|---|---|
Swipe from the top of the screen |
Displays a menu for settings or options |
Swipe from the left or right side of the screen |
Switches applications |
Swipe from the top corners of the screen |
Displays application notifications and status indicators |
Swipe from the bottom left corner of the screen |
Displays the keyboard |
Interactions with content on the screen
If they apply to your application, you can implement the following interactions to allow users to directly manipulate content on the screen.
Gesture |
Expected result |
|---|---|
Tap |
This gesture initiates an action. For example, when users tap an application icon, the corresponding application opens. |
Double tap |
This gesture focuses on the targeted area of the screen (for example, by zooming in or out). |
Drag or swipe |
This gesture moves the content on the screen in the direction of the drag or swipe and at the corresponding rate of speed. For example, users can move slowly through a list by dragging a finger on the screen, or they can move quickly through a list by swiping across the screen. |
Touch and hold |
This gesture highlights a sequence of characters, a word, a link, or an item, such as an email or picture. |
Multi-touch |
With two touch points, this gesture highlights a block of text or items. Up to four simultaneous touch points are supported and they can be application-specific. |
Pinch out or pinch in |
This gesture zooms in to or out from an item. |
Pivot |
This gesture rotates an item or the view. |
Best practices
- Carefully consider where you place UI components. Try to keep a 15-pixel margin around UI components and around the edge of the screen, especially along the top and bottom of the screen. Otherwise, users might inadvertently open a menu or display the application list.
- Use a target area of at least 5.5 mm for custom UI components, or at least 4 mm if the component extends across the full width of the screen. It's a good idea to test the size of the target area with users. Components need to be large enough to touch with a finger, and this size depends on the layout of the screen and the proximity to other UI components.
- Add visual cues to encourage users to explore the gestures in your application. For example, you can add a slider that users can use to adjust a value by dragging a finger across the component.
Was this information helpful? Send us your comments.