Click here to Skip to main content
Click here to Skip to main content

Designing for the BlackBerry PlayBook

By , 18 Apr 2011
Rate this:
Please Sign up or sign in to vote.

Introduction

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.

ActionResult
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:

  • Andale Mono
  • Arial
  • BBAlpha
  • Bitstream Vera
  • Comic Sans MS
  • Courier New
  • DejaVu
  • Droid Sans Mono
  • Georgia
  • Impact
  • Liberation
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Univers OTS
  • Verdana
  • Webdings
  • Wingdings

Of course using Flash you can embed the fonts you want to use. But that’s the topic for another post.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Paul Trani

United States United States
No Biography provided

Article Top

Comments and Discussions

 
-- There are no messages in this forum --
About Article
Top News

C# 6: First reactions

Get the Insider News free each morning.
Related Videos
| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 18 Apr 2011
Article Copyright 2011 by Paul Trani
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid