With the success of BlackBerry smartphones (17.5 percent of the global smartphone market share) it would be silly to not design for BlackBerry’s upcoming PlayBook tablet. But what makes the PlayBook different from other tablet devices when it comes to the design and user experience? This post takes a look at the specifics of designing for the BlackBerry PlayBook.
Screen Design
The screen size is 1024 x 600 pixels (display area of 6 inches x 3.5 inches) at 169.3 pixels per inch. In Photoshop you can set up a new document with those dimensions.
The PlayBook has a landscape-oriented display. In most cases, you should lay out your application in landscape view. When designing your app, think about ways to create a widescreen experience for users. For example, position UI components on the sides of the screen instead of the top or bottom of the screen to take advantage of the additional width. This is also helpful as the user’s thumbs will be next to the buttons on the edges.
The PlayBook also allows for portrait view. You can allow your content to adjust for portrait view or design for portrait view explicitly. Portrait view is great for any reading application and to navigate long lists. Also note that the user will probably be typing with their thumbs when in portrait view.
User Experience and Interaction
Users interact with content using gestural interactions, such as swiping, instead of “poking” UI components, such as buttons and scroll bars. The core interactions happen on the bezel (the frame around the display area of the screen). The key swipe to keep in mind for any app is going to be the swipe from the top down to show a context menu.
| Action | Result |
| Drag or swipe across the screen. | Moves content in the direction of the drag or swipe and at the same rate of the drag/swipe. |
| Touch and hold a finger on an item. | Highlights a word, a link, or an item such as an email or picture. |
| Touch the screen in two locations. | Highlights text between the two locations. |
| Pinch open and pinch close. | Zoom in to and out from an item. |
Touch Interface and Layout
- Create buttons that are at least 40 pixels wide/high.
- Consider where you place buttons. Try to keep a 15 pixel margin around buttons and the edge of the screen, especially along the top and bottom of the screen. Otherwise, users might inadvertently open a menu or display the navigator.
- Position buttons close to where the user’s thumbs would be if they were holding the tablet.
- Add gestures where appropriate and provide visual cues. For example, if you need to display contact information you can lay it out in a Rolodex fashion and allow the user to swipe to move through the list.
- Place important information near the top of the screen and keep in mind that information lower on the screen could be obstructed by a hand or by the soft keyboard.
Typography
The default font is BBAlpha Sans. Use this font for consistency with the PlayBook’s look and feel. There are other fonts available on the device. Here is a list of the other major fonts:
|
|
Of course using Flash you can embed the fonts you want to use. But that’s the topic for another post. 🙂
